全局组件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
<aaa></aaa>
</div>
<script>
window.onload=function(){
//注册全局组件
var Aaa= Vue.extend({
template: '<div>A custom component!</div>'
});
//template里面的内容添加到新注册的全局组件<aaa></aaa>中
Vue.component('aaa',Aaa);
new Vue({ //根组件
el: '#example'
})
}
</script>
</body>
</html>
注:当script放于div下面时,window.onload可省略,放于最上面时,不可省,否则页面内容将加载不出来。
----------
## 组件里面放数据 ##
注意:data必须是函数的形式,函数必须返回一个对象(json)。
可替换代码如下:
var Aaa= Vue.extend({
data(){
return:{
msg:'返回一个对象'
}
},
template: '<div>{{msg}}</div>'
});
Vue.component('aaa',Aaa);
new Vue({
el: '#example',
data:{
}
})
----------
## 点击更换组件里面的msg ##
var Aaa= Vue.extend({
data(){
return:{
msg:'返回一个对象'
}
},
methods:{
change(){
this.msg="更换的数据"
}
}
template: '<div @click="change">{{msg}}</div>'
});//点击更换数据
Vue.component('aaa',Aaa);
new Vue({
el: '#example',
data:{
}
})
局部组件
可放于其他组件内部
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
<aaa></aaa>
</div>
<script>
window.onload=function(){
//注册全局组件
var Aaa= Vue.extend({
template: '<div>A custom component!</div>'
});
//此部分是一个根组件,当components添加于根组件下面时,标志此组件为局部组件
new Vue({
el: '#example',
data:{
},
components:{
aaa:Aaa
//此处需注意,当局部组件名为A—B时,需用引号引起来如:'a-aa':Aaa
}
})
}
</script>
</body>
</html>
局部组件里面放数据与全局组件相同