Vue.js-資料-組件化思想 —上
一、Vue中的組件
Vue視圖層的靈魂 — 組件化
組件（Component）是 Vue.js 最強大的功能之一；
組件可以擴展 HTML 元素，封裝可重用的代碼；
在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
二、全局組件的創建和註冊
案例代碼：
調用Vue.extend()創建的是一個組件構造器，構造器有一個選項對象，選項對象的template屬性用於定義組件要渲染的HTML；
調用Vue.component()註冊組件時，需要提供2個參數：組件的標簽名 和 組件構造器；註冊的組件要掛載到某個Vue實例下，否則它不會生效；
Vue.extend() 和 Vue.component()：由於 Vue 本身是一個構造函數，Vue.extend() 是一個類繼承方法，它用來創建一個 Vue 的子類並返回其構造函數;
而Vue.component() 的作用在於：建立指定的構造函數與 ID 字符串間的關系，從而讓 Vue.js 能在模板中使用它；直接向 Vue.component() 傳遞 options 時，它會在內部調用 Vue.extend()。
三、局部組件的創建和註冊
案例代碼:
運行結果：
四、另一種組件創建和註冊方式
直接通過Vue.component註冊或獲取全局組件，主要體現在以下幾種方式：
// 註冊組件，傳入一個擴展過的構造器
Vue.component(‘my-component‘, Vue.extend({ /* ... */ }))
// 註冊組件，傳入一個選項對象（自動調用 Vue.extend）
Vue.component(‘my-component‘, { /* ... */ })
// 獲取註冊的組件（始終返回構造器）
var MyComponent = Vue.component(‘my-component‘)
4.1 自定義全局組件
4.2 自定義局部組件
五、父子組件
組件意味著協同工作，通常父子組件會是這樣的關系：組件 A 在它的模版中使用了組件 B 。
最簡單的父子組件：
運行結果：
在父子組件組合使用中要註意以下一些問題：
沒有實例化的子組件不能拿出來單獨使用！
<div id="app">
<parent-component></parent-component>
<child-component></child-component>
</div>
在父標簽內部嵌套子標簽！
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
因為在父標簽一旦生成真實的DOM，其內部的子標簽就會被解析成為普通的HTML標簽來執行，而且<child-component>不是標準的HTML標簽，會被瀏覽器過濾掉。
六、在組件上綁定Class和Style
數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性 ，我們可以用v-bind 處理它們：只需要計算出表達式最終的字符串。
而且，把 v-bind 用於 class 和 style 時，表達式的結果類型除了字符串之外，還可以是對象或數組。
案例代碼：
七、template和script標簽
盡管在上面組件的組件註冊的方式已經很簡單，但是在template選項中拼接HTML的標簽還是不符合常規的編程習慣，而且HTML元素和js代碼混雜在一起造成了很大的耦合性。
那麽，template和script標簽可以幫助我們將定義在JS中的HTML模板分離出來。
註意： 兩種註冊方式效果一樣，官方建議用第一種。
（1）使用template標簽註冊組件：
（2）使用script標簽註冊組件：
註意：使用<script>標簽時，type指定為text/x-template，意在告訴瀏覽器這不是一段js腳本，瀏覽器在解析HTML文檔時會忽略<script>標簽內定義的內容。
八、掛載選項data必須是函數
使用組件時，大多數可以傳入到 Vue 構造器中的選項可以在 Vue.extend() 或Vue.component()中註冊組件時使用，但有一個重要前提： data 必須是函數。
下面代碼會出現的問題：
代碼運行結果：
正確的寫法：
Vue.component(‘my-component‘, {
template: ‘#myTemplate‘,
data: function () {
return {
message: ‘你好,中國‘
}
}
})
代碼運行結果：
註意：如果data選項指向某個對象，這意味著所有的組件實例共用一個data。
我們應當使用一個函數作為 data 選項，讓這個函數返回一個新對象。
運行結果，這三個組件共享了同一個 data ， 因此增加一個 counter 會影響所有組件！
解決辦法：為每個組件返回新的 data 對象來解決這個問題！
data: function () {
return {
counter: 0
}
}
運行結果：
Vue.js-資料-組件化思想 —上