由于是基礎(chǔ)用法，這里暫時不講在 webpack 里怎么寫組件险绘。
Vue的組件最大的作用就是偷懶（ ** 一次成型暮刃，多次調(diào)用 ** ）。
本節(jié)講解順序：
- 先給代碼
- 看效果
- 講解代碼
HTML結(jié)構(gòu)
<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>這里是組件的子標簽?zāi)?lt;/P>
</div>`,
data: function() {
return {
msg: "Rabbit"
}
},
methods: {
on_click: function() {
alert("I\'m Rabbit");
}
}
});
new Vue({
el: '#app' })
}
可以看看
因為使用了同一個組件怀伦，所以功能是完全一樣的脆烟。
在 HTML 結(jié)構(gòu)里，基本不用管什么房待。直接用自己設(shè)置好的組件名就行邢羔。我這里設(shè)置了一個 “rabbit” 的組件名。
在 JS 中桑孩，設(shè)置全局組件拜鹤，用到的關(guān)鍵字是 “component”。
要設(shè)置的2個參數(shù)流椒。
第一個是組件名敏簿。
第二個是組件的布局和功能。
Vue.component( ‘ 組件名 ‘ , { 組件的布局和功能 } );
在第二個參數(shù)里宣虾，是一個對象惯裕。
里面放了一個 template ，用來設(shè)置組件的布局绣硝。
需要注意的是蜻势，template 里，只能有一個 主標簽域那，然后用 主標簽 包著其他子標簽咙边。
【template】
template: `
<div>
<button @click="on_click">{{msg}}</button>
<p>這里是組件的子標簽?zāi)?lt;/P>
</div>`
我這里用了 es6 的語法猜煮，所以可以換行次员。如果用單引號或者雙引號括著的話，就只能在一行里把所有布局寫完王带。
下面的寫法是錯誤的
template: `
<button @click="on_click">{{msg}}</button>
<p>這里是組件的子標簽?zāi)?lt;/P>
`,
因為 template 里面有2個標簽淑蔚，但又沒有被主標簽包起來。
在Vue里的template就只有這個限制（一個組件有且只有一個 根元素）愕撰。還是很好接受的刹衫。
【data】
在 component 里的 data 和普通 Vue 實例里的 data 稍微有點不同醋寝。
data: function() {
return {
msg: "Rabbit"
}
},
因為組件是可以重復調(diào)用的，所以 component 里的 data 要放在一個函數(shù)里带迟，通過 return 返回音羞，這和原生js有關(guān)，這里暫時不多講解仓犬。只要記住嗅绰，在組件里，data 是要通過一個 function搀继，return 一個對象窘面。
【methods】
methods 的用法，平時怎么用叽躯，在 component 里就怎么用财边。
methods: {
on_click: function() {
alert("I\'m Rabbit");
}
}
最后，一定要有一個Vue對象点骑，用來指定HTML里的元素酣难。
new Vue({
el: '#app'
})
