微信订阅号：Rabbit_svip
由于是基础用法，这里暂时不讲在 webpack 里怎么写组件。
Vue的组件最大的作用就是偷懒（ ** 一次成型，多次调用 ** ）。
本节讲解顺序：
- 先给代码
- 看效果
- 讲解代码
HTML结构
<body>
<div id="app">
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
</div>
</body>
这里有6个 <rabbit> 标签。很明显，原生 HTML 是没有 <rabbit> 标签的。
在 JS 里定义组件，让 <rabbit> 标签活起来。
onload = () => {
Vue.component('rabbit', {
template: `
<div>
<button @click="on_click">{{msg}}</button>
<p>这里是组件的子标签呢</P>
</div>`,
data: function() {
return {
msg: "Rabbit"
}
},
methods: {
on_click: function() {
alert("I\'m Rabbit");
}
}
});
new Vue({
el: '#app' })
}
可以看看
微信订阅号：Rabbit_svip
因为使用了同一个组件，所以功能是完全一样的。
在 HTML 结构里，基本不用管什么。直接用自己设置好的组件名就行。我这里设置了一个 “rabbit” 的组件名。
在 JS 中，设置全局组件，用到的关键字是 “component”。
要设置的2个参数。
第一个是组件名。
第二个是组件的布局和功能。
Vue.component( ‘ 组件名 ‘ , { 组件的布局和功能 } );
在第二个参数里，是一个对象。
里面放了一个 template ，用来设置组件的布局。
需要注意的是，template 里，只能有一个 主标签，然后用 主标签 包着其他子标签。
【template】
template: `
<div>
<button @click="on_click">{{msg}}</button>
<p>这里是组件的子标签呢</P>
</div>`
我这里用了 es6 的语法，所以可以换行。如果用单引号或者双引号括着的话，就只能在一行里把所有布局写完。
下面的写法是错误的
template: `
<button @click="on_click">{{msg}}</button>
<p>这里是组件的子标签呢</P>
`,
因为 template 里面有2个标签，但又没有被主标签包起来。
在Vue里的template就只有这个限制（一个组件有且只有一个 根元素）。还是很好接受的。
【data】
在 component 里的 data 和普通 Vue 实例里的 data 稍微有点不同。
data: function() {
return {
msg: "Rabbit"
}
},
因为组件是可以重复调用的，所以 component 里的 data 要放在一个函数里，通过 return 返回，这和原生js有关，这里暂时不多讲解。只要记住，在组件里，data 是要通过一个 function，return 一个对象。
【methods】
methods 的用法，平时怎么用，在 component 里就怎么用。
methods: {
on_click: function() {
alert("I\'m Rabbit");
}
}
最后，一定要有一个Vue对象，用来指定HTML里的元素。
new Vue({
el: '#app'
})
网友评论