vue2 基础学习02 （Vue组件）

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>