vue组件的基本结构,vue中组件的概念

　　这篇文章主要介绍了某视频剪辑软件组件基础知识的相关资料，帮助大家更好的理解和使用某视频剪辑软件的组件，感兴趣的朋友可以了解下

组件基础

1 组件的复用

　　组件是可复用的某视频剪辑软件实例。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　按钮计数器/按钮计数器

　　按钮计数器/按钮计数器

　　按钮计数器/按钮计数器

　　/div

　　脚本

　　//定义一个名为按钮计数器的新组件

　　Vue.component(按钮计数器,{

　　数据：函数(){

　　返回{

　　计数：0

　　}

　　},

　　模板：按钮v-on:点击=计数点击了{{ count }}次。/按钮

　　});

　　new Vue({ El: # app })；

　　/脚本

　　/body

　　/html

　　注意当点击按钮时，每个组件都会各自独立维护它的数数。这里自定义组件的数据属性必须是一个函数，每个实例维护一份被返回对象的独立的拷贝。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　按钮计数器/按钮计数器

　　按钮计数器/按钮计数器

　　按钮计数器/按钮计数器

　　/div

　　脚本

　　var buttonCounterData={

　　计数：0

　　}

　　//定义一个名为按钮计数器的新组件

　　Vue.component(按钮计数器,{

　　数据：函数(){

　　返回按钮计数器数据

　　},

　　模板：按钮v-on:点击=计数点击了{{ count }}次。/按钮

　　});

　　new Vue({ El: # app })；

　　/脚本

　　/body

　　/html

2 通过 Prop 向子组件传递数据

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　博客文章标题=我的某视频剪辑软件之旅/博客帖子

　　博客文章标题=用某视频剪辑软件写博客/博客帖子

　　博文title=为什么某视频剪辑软件如此有趣/博文

　　/div

　　脚本

　　Vue.component(博客帖子,{

　　道具：[title]，

　　模板：" h3{{ title }}/h3 "

　　})

　　new Vue({ El: # app })；

　　/脚本

　　/body

　　/html

　　这里博客帖子组件就是通过自定义属性标题来传递数据。

　　我们可以使用v型装订来动态传递道具。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　blog-post v-for= post in post。id v-bind:title= post。title /博客文章

　　/div

　　脚本

　　Vue.component(博客帖子,{

　　道具：[title]，

　　模板：" h3{{ title }}/h3 "

　　})

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　帖子：[

　　{ id: 1，标题：我与某视频剪辑软件的旅程 },

　　{ id: 2，标题："用某视频剪辑软件写博客"},

　　{ id: 3，标题：为什么某视频剪辑软件这么好玩 }

　　]

　　}

　　});

　　/脚本

　　/body

　　/html

3 单个根元素

　　每个组件必须只有一个根元素。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　blog-post v-for= post in post。id v-bind:post= post /blog-post

　　/div

　　脚本

　　Vue.component(博客帖子,{

　　道具：[post]，

　　模板：` 1

　　div class=博客帖子

　　h3{{ post.title }}/h3

　　div v-html=post.content/div

　　/div

　　`

　　})

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　帖子：[

　　{ id: 1，标题："我与某视频剪辑软件的旅程",内容："我的旅程."},

　　{ id: 2，标题："用某视频剪辑软件写博客",内容："我的博客."},

　　{ id: 3，标题：为什么某视频剪辑软件这么好玩，内容： Vue这么好玩.}

　　]

　　}

　　});

　　/脚本

　　/body

　　/html

　　注意到v-bind:post=post 绑定的邮政是一个对象，这样可以避免了需要通过很多支柱传递数据的麻烦。

4 监听子组件事件

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　div:style= { fontSize:post fontSize em }

　　blog-post v-for= post in post

　　v-bind:key=post.id

　　v-bind:post=post

　　v-on:enlarge-text= postFontSize=0.1 /

　　/div

　　/div

　　脚本

　　Vue.component(博客帖子,{

　　道具：[post]，

　　模板：` 1

　　div class=博客帖子

　　h3{{ post.title }}/h3

　　按钮v-on:click=$emit(放大文本)放大字体/按钮

　　div v-html=post.content/div

　　/div

　　`

　　})

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　postFontSize: 1，

　　帖子：[

　　{ id: 1，标题："我与某视频剪辑软件的旅程",内容："我的旅程."},

　　{ id: 2，标题："用某视频剪辑软件写博客",内容："我的博客."},

　　{ id: 3，标题：为什么某视频剪辑软件这么好玩，内容： Vue这么好玩.}

　　]

　　}

　　});

　　/脚本

　　/body

　　/html

　　子组件通过$emit方法并传入事件名称来触发一个事件。父组件可以接收该事件。

　　我们可以使用事件抛出一个值。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　div:style= { fontSize:post fontSize em }

　　blog-post v-for= post in post

　　v-bind:key=post.id

　　v-bind:post=post

　　v-on:enlarge-text= postFontSize=$ event /

　　/div

　　/div

　　脚本

　　Vue.component(博客帖子,{

　　道具：[post]，

　　模板：` 1

　　div class=博客帖子

　　h3{{ post.title }}/h3

　　按钮v-on:click= $ emit( enlarge-text ，0.2)放大字体/按钮

　　div v-html=post.content/div

　　/div

　　`

　　})

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　postFontSize: 1，

　　帖子：[

　　{ id: 1，标题："我与某视频剪辑软件的旅程",内容："我的旅程."},

　　{ id: 2，标题："用某视频剪辑软件写博客",内容："我的博客."},

　　{ id: 3，标题：为什么某视频剪辑软件这么好玩，内容： Vue这么好玩.}

　　]

　　}

　　});

　　/脚本

　　/body

　　/html

　　在父组件中，我们可以通过$事件访问到被抛出的这个值。

　　我们可以在组件上使用v型车。

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　！-输入v模型=搜索文本-

　　输入v-bind:value=搜索文本 v-on:input=搜索文本=$事件。目标。“价值”

　　p{{ searchText }}/p

　　/div

　　脚本

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　搜索文本：""

　　}

　　});

　　/脚本

　　/body

　　/html

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　风格

　　/风格

　　脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本

　　/头

　　身体

　　div id=应用程序

　　自定义输入v-model=搜索文本/自定义输入

　　自定义输入v-bind:value= search text v-on:input= search text=$ event /自定义输入

　　p{{ searchText }}/p

　　/div

　　脚本

　　Vue.component(自定义输入,{

　　道具：[值],

　　模板：` input v-bind:value= value v-on:input= $ emit( input ，$event.target.value)

　　})

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　搜索文本：""

　　}

　　});

　　/脚本

　　/body

　　/html

　　最后，注意解析数字正射影像图模板时的注意事项。

　　以上就是某视频剪辑软件组件基础知识总结的详细内容，更多关于某视频剪辑软件组件的资料请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。