vue2 基础学习02 (Vue组件)

33次阅读

共计 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>

正文完
 0