共计 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>
正文完