首先准备这样一段js:
<script>
Vue.component("tp",{
//template内部只能有一个根标签
template:'<p>{{name}}:这是我的组件' +
'<button @click="say">改名字</button>' +
'</p>',
data:function () {
return {
name:'allen'
}
},
methods:{
say:function () {
this.name = "marry";
}
}
})
new Vue({
el:'#app1'
});
new Vue({
el:'#app2'
});
</script>
- 如果说我们有一些公用的方法或者属性,那么可以通过
Vue.component来声明一个组件. - 上面代码中的
tp,是我们组件的一个别名,它的作用类似于一个html标签. -
template属性的作用是,添加一段业务需要实现的html语句,有一个注意点是:template内部只能有一个根标签,其他标签必须写在最外层标签内部. - 这里的
data变成了一个函数,返回的是一个对象,这样我们可以在template中就可以直接使用name属性. - 添加方法也是同样的道理.
在html中:
<div id="app1">
<tp></tp>
</div>
<div id="app2">
<tp></tp>
</div>
- 这里我们直接调用
tp这个别名,即可展示我们想展示的内容.
完整代码在顶部的demo里.
