本文实例讲述了某视频剪辑软件组件定义，全局、局部组件，配合模板及动态组件功能。分享给大家供大家参考，具体如下：

一、定义一个组件

定义一个组件：

1.全局组件

var Aaa=Vue。扩展({模板： ' H3我是标题3/H3 ' })；Vue.component('aaa '，Aaa)；*组件里面放数据：

数据必须是函数的形式，函数必须返回一个对象(json)

2.局部组件

放到某个组件内部

var VM=new Vue({ El : ' # box }，data:{ bSign:true }，components 3360 {//局部组件AAA : AaA } })；1.全局组件

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。bootsss。com/vue/2。4 .4/vue。量滴js '/脚本样式/style/head dy div id=' box ' Aaa/Aaa/div脚本var Aaa=vue。扩展({模板： ' H3我是标题3/H3 ' })；Vue.component('aaa '，Aaa)；var vm=new Vue({ el:'#box '，data : { b sign : TRUe } })；/脚本/正文/html！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :https://cdn。bootsss。com/vue/2。4 .4/vue。量滴js '/脚本样式/style/head dy div id=' box ' my-AAA/my-AAA/div脚本/另外一种写法，全局Vue.component('my-aaa '，{ template:'strong好/strong ' })；var VM=new Vue({ El : ' # box ' })；/脚本/正文/html组件里面放数据：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :https://cdn。布斯。com/vue/2。4 .4/vue。量滴js '/脚本/head dy div id=' box ' Aaa/Aaa/div脚本var Aaa=vue。扩展({//组件里面放数据：data必须是函数的形式，函数必须返回一个对象(json) data(){ return { msg: '我是标题^^' };}，方法： { change(){ this。msg=' changed ' }，模板： ' H3 @ click=' change ' { { msg } }/H3 ' })；Vue.component('aaa '，Aaa)；//放在这里是全局var vm=new Vue({ el:'#box '，data : { b sign : TRUe } })；/脚本/正文/html2 .局部组件

放到某个组件内部

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。布斯。com/vue/2。4 .4/vue。量滴js '/脚本样式/style/head dy div id=' box ' Aaa/Aaa br/br/my-Aaa/my-Aaa/div脚本var Aaa=Vue。extend({ template 3360 ' H3 { { msg } })var VM=new Vue({ El : ' # box }，data:{ bSign:true }，components 3360 {//局部组件aaa:Aaa，' my-aaa':Aaa//这里的我的-啊需要用引号} });/脚本/正文/html另外一种写法，局部

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :3359 cdn。布斯。com/Vue/2。4 .4/Vue。量滴js '/脚本样式/style/head dy div id=' box ' my-AAA/my-AAA/div脚本var VM=new Vue({ El : ' # box '，组件3360 { ' my-AAA ' 33330} }，template:'h2 @click='change '标题2-{ { msg } }/H2 ' } } })；/脚本/正文/html二、配合模板

配合模板：

1 . template : ' H2 @ click=' change '标题2-{{msg}}/h2 '

2.单独放到某个地方

a ).

脚本类型=' x-template ' id=' AAA ' H2 @点击='更改'标题2-{{msg}}/h2/scriptb).

模板id='aaa' h1标题1/h1 ul Li v-for=' arr '中的val“{ val } }/Li/ul/模板方法一：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :https://cdn。bootsss。com/vue/2。4 .4/vue。量滴js '/脚本样式/style/head dy div id=' box ' my-AAA/my-AAA/div脚本类型=' x-template ' id=' AAA ' H2 @ click=' change '标题2-{ { msg } }/H2 ul Li 1111/Li Li 222/Li Li 3333/Li Li 1111/Li/ul/脚本脚本var vm=new Vue({ el:'#box '，components 3360 { ' my-AAA ' : { data(){ return { msg : ' welcome Vue ' })，methods : { change(){ this。msg=“已更改”；} }，模板： ' # AAA ' } } })；/脚本/正文/html方法二：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :https://cdn。布斯。com/Vue/2。4 .4/Vue。量滴js '/脚本样式/样式/头dy div id=' box ' my-AAA/my-AAA/div模板id=' AAA ' h1 @ click=' change ' { msg } }/h1 ul Li-for=' arr中的val ' { val } }，模板： ' # AAA ' } })；/脚本/正文/html三、动态组件

动态组件：

组件：is='组件名称/组件！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :https://cdn。布斯。com/vue/2。4 .4/vue。量滴js '/脚本样式/样式/头体div id=' box '输入类型=' button ' @ click=' a=' AAA '值=' AAA '组件输入类型='button' @click='a='bbb '值='bbb '组件组件：是=' a '/组件！-组件：is='组件名称/component - /div脚本var VM=new Vue({ El : ' # box }，data:{ a:'aaa' }，组件3360 { ' AAA ' : { template : ' H2我是美国汽车协会组件/h2' }，' bbb':{ template:'h2我是血脑屏障组件/H2 ' } } })；/脚本/正文/html运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。