vue2 基础学习02 （Vue组件）

共计 618 个字符，预计需要花费 2 分钟才能阅读完成。

vue 学习路径和建议 —- 尤雨溪
vue 官网
1.Vue 组件
参考官方文档：组件基础

定义一个组件
// 定义一个名为 button-counter 的新组件
Vue.component(‘button-counter’, {
data: function () {
return {
count: 0
}
},
template: ‘<button v-on:click=”count++”>You clicked me {{count}} times.</button>’
})
上面的 button-counter 就是一个组件，可以说是一个自定义的标签，我先这样理解，后面再看。
以下注意！！！

一个组件的 data 选项必须是一个函数
data: function () {
return {
count: 0
}
}

template 下面只能有一个根节点如果再创建一个同级的节点就会出错，如下：

在 html 中引用这个组件
<div id=”components-demo”>
<button-counter></button-counter>
</div>

实例化 Vue（指向组件所在的 ” 坑位 ”）
new Vue({el: ‘#components-demo’})

可以复用
<div id=”components-demo”>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>