点击了{{count}}次',
methods:{
handle:function(){
this.count++;
}
}
})
varvm=newVue({
el:'#app',
data:{
}
});
如何在页面中运用，直接在页面中应用组件名称
这个组件是可以重用的，直接在页面中多次使用，切数据相互独立，互不干扰
组件注册注意事项
1.data必须是一个函数
2.组件模板内容必须是单个根元素
3.组件模板内容可以是模板字符串
4.组件命名方式
Vue.component('my-component',{/*...*/})
驼峰方式
Vue.component('MyComponent',{/*...*/})
如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件
局部组件
局部组件只能在注册它的父组件中使用
局部组件注册语法
varComponentA={/*...*/}
varComponentB={/*...*/}
varComponentC={/*...*/}
newVue({
el:'#app',
components:{
'component-a':ComponentA,
'component-b':ComponentB,
'component-c':ComponentC
}
})
组件的创建
Vue.component('test-com',{
template:'Test
'
});
varHelloWorld={
data:function(){
return{
msg:'HelloWorld'
}
},
template:'{{msg}}
'
};
varHelloTom={
data:function(){
return{
msg:'HelloTom'
}
},
template:'{{msg}}
'
};
varHelloJerry={
data:function(){
return{
msg:'HelloJerry'
}
},
template:'{{msg}}
'
};
varvm=newVue({
el:'#app',
data:{
},
components:{
'hello-world':HelloWorld,
'hello-tom':HelloTom,
'hello-jerry':HelloJerry
}
});
页面中的应用
以上就是Vue组件注册全解析的详细内容，更多关于Vue组件注册的资料请关注毛票票其它相关文章！