本文实例讲述了vue组件定义,全局、局部组件,配合模板及动态组件功能。分享给大家供大家参考,具体如下:
一、定义一个组件
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'我是标题3'
});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式,函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
1. 全局组件
document
document
组件里面放数据:
document
2. 局部组件
放到某个组件内部
document
另外一种写法,局部
document
二、配合模板
配合模板:
1. template:'
标题2->{{msg}}'
2. 单独放到某个地方
a).
b).
标题1
- {{val}}
方法一:
document
方法二:
document {{msg}}
- {{val}}
三、动态组件
动态组件:
document
运行效果:
感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。



