一、Vue中的組件
Vue視圖層的靈魂 — 組件化
組件（Component）是 Vue.js 最強大的功能之一；
組件可以擴展 HTML 元素榔昔，封裝可重用的代碼；
在較高層面上瘪菌，組件是自定義元素撒会， Vue.js 的編譯器為它添加特殊功能。在有些情況下师妙，組件也可以是原生 HTML 元素的形式诵肛，以 is 特性擴展。
二默穴、全局組件的創(chuàng)建和注冊
案例代碼：
調(diào)用Vue.extend()創(chuàng)建的是一個組件構(gòu)造器怔檩，構(gòu)造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML蓄诽；
調(diào)用Vue.component()注冊組件時薛训，需要提供2個參數(shù)：組件的標(biāo)簽名 和 組件構(gòu)造器；注冊的組件要掛載到某個Vue實例下仑氛，否則它不會生效乙埃；
Vue.extend() 和 Vue.component()：由于 Vue 本身是一個構(gòu)造函數(shù)，Vue.extend() 是一個類繼承方法锯岖，它用來創(chuàng)建一個 Vue 的子類并返回其構(gòu)造函數(shù);
而Vue.component() 的作用在于：建立指定的構(gòu)造函數(shù)與 ID 字符串間的關(guān)系介袜，從而讓 Vue.js 能在模板中使用它；直接向Vue.component()傳遞 options 時嚎莉，它會在內(nèi)部調(diào)用 Vue.extend()米酬。
三、局部組件的創(chuàng)建和注冊
案例代碼:
運行結(jié)果：
四趋箩、另一種組件創(chuàng)建和注冊方式
直接通過Vue.component注冊或獲取全局組件赃额，主要體現(xiàn)在以下幾種方式：
// 注冊組件，傳入一個擴展過的構(gòu)造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注冊組件叫确，傳入一個選項對象（自動調(diào)用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 獲取注冊的組件（始終返回構(gòu)造器）
var MyComponent = Vue.component('my-component')
4.1 自定義全局組件
4.2 自定義局部組件
五跳芳、父子組件
組件意味著協(xié)同工作，通常父子組件會是這樣的關(guān)系：組件 A 在它的模版中使用了組件 B 竹勉。
最簡單的父子組件：
運行結(jié)果：
在父子組件組合使用中要注意以下一些問題：
沒有實例化的子組件不能拿出來單獨使用飞盆！
<div id="app">
<parent-component></parent-component>
<child-component></child-component>
</div>
在父標(biāo)簽內(nèi)部嵌套子標(biāo)簽！
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
因為在父標(biāo)簽一旦生成真實的DOM，其內(nèi)部的子標(biāo)簽就會被解析成為普通的HTML標(biāo)簽來執(zhí)行吓歇，而且<child-component>不是標(biāo)準(zhǔn)的HTML標(biāo)簽孽水，會被瀏覽器過濾掉。
六城看、在組件上綁定Class和Style
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式女气。因為它們都是屬性 ，我們可以用v-bind 處理它們：只需要計算出表達式最終的字符串测柠。
而且炼鞠，把 v-bind 用于 class 和 style 時，表達式的結(jié)果類型除了字符串之外轰胁，還可以是對象或數(shù)組谒主。
案例代碼：
七、template和script標(biāo)簽
盡管在上面組件的組件注冊的方式已經(jīng)很簡單赃阀，但是在template選項中拼接HTML的標(biāo)簽還是不符合常規(guī)的編程習(xí)慣霎肯，而且HTML元素和js代碼混雜在一起造成了很大的耦合性。
那么凹耙，template和script標(biāo)簽可以幫助我們將定義在JS中的HTML模板分離出來姿现。
注意： 兩種注冊方式效果一樣，官方建議用第一種肖抱。
（1）使用template標(biāo)簽注冊組件：
（2）使用script標(biāo)簽注冊組件：
注意：使用<script>標(biāo)簽時备典，type指定為text/x-template，意在告訴瀏覽器這不是一段js腳本意述，瀏覽器在解析HTML文檔時會忽略<script>標(biāo)簽內(nèi)定義的內(nèi)容提佣。
八、掛載選項data必須是函數(shù)
使用組件時荤崇，大多數(shù)可以傳入到 Vue 構(gòu)造器中的選項可以在 Vue.extend() 或Vue.component()中注冊組件時使用拌屏，但有一個重要前提： data 必須是函數(shù)。
- 下面代碼會出現(xiàn)的問題：
代碼運行結(jié)果：
正確的寫法：
Vue.component('my-component', {
template: '#myTemplate', data: function () { return { message: '你好,中國' } } })
代碼運行結(jié)果：
注意：如果data選項指向某個對象术荤，這意味著所有的組件實例共用一個data倚喂。
我們應(yīng)當(dāng)使用一個函數(shù)作為 data 選項，讓這個函數(shù)返回一個新對象瓣戚。
運行結(jié)果端圈，這三個組件共享了同一個 data ， 因此增加一個 counter 會影響所有組件子库！
解決辦法：為每個組件返回新的 data 對象來解決這個問題舱权！
data: function () {
return { counter: 0 } }
運行結(jié)果：
