1)學習元件的原因

概述
元件是vue.js最核心的功能，也是整個框架設計最精彩的地方，當然也是最難的地方。
原因
Vue.js的元件就是為了提高程式碼重用性和高擴充套件性的，特別是將ui與js作為一個整體進行復用與擴充套件。
一些具體的場景
1.UI構建----》貼上到其他地方------》所有的ui都修改某處？
應用專案的組成

2)元件的基本用法

和建立一個vue例項需要建立後才能使用類似，元件也需要進行註冊（定義）後才能使用。
註冊分為全域性註冊和區域性註冊兩種方式。

全域性註冊
基本語法

// 定義一個名為 button-counter 的新元件
Vue.component('button-counter', {
//元件內容寫這裡
template:"<button>按鈕計數器</button>",
})
 

基本使用

歸納總結
1.建立全域性元件時，應該使用Vue物件的component方法，這個方法接收兩個引數。
第一個字串：表示元件名稱， 第二個為一個物件：表示元件內容。
2.元件要渲染的內容應該寫在template選項中，作為其值進行處理。
3.註冊時，推薦元件名稱為【小寫加分隔符連結的形式】，類似於css屬性名的寫法。

// 定義一個名為 button-counter 的新元件
Vue.component('button-counter', {
//元件內容寫這裡
template:"<button>按鈕計數器</button>",
})

4.元件全域性註冊後，在任何vue例項中都可以使用，但前提是相關vue例項應該在註冊後在宣告。

<script>
//在vue例項建立前宣告一個全域性元件，名稱為button-counter
Vue.component('button-counter', {
template: "<button>按鈕計數器</button>",
})
//宣告一個vue例項
let vueApp1 = new Vue({
el: "#app",
});
</script>

5.元件在使用時，應該以標籤形式呼叫

<div id="app">
<button-counter></button-counter> <!-- 以標籤形式使用元件 -->
</div>
 

使用進階

①　元件複用性的基本體現

②　元件的template選項
在此選項中，我們可以給很多內容，只要最外層用一個標籤包裹起來就可以了

注意：如果外層有多個標籤，那麼就只會渲染第一個標籤。

③　全域性元件可以在其註冊後建立的所有vue例項中使用

④　全域性元件一定要在所有vue例項建立之前註冊定義
!
⑤　宣告在前面的全域性元件可以直接使用宣告在後面的全域性元件

如果有多個全域性元件，要在根例項中使用時，他們都需要在根例項之前宣告，但是對於他們本身而言，雖然也有宣告的順序，但是並不影響，即宣告在前面的全域性元件可以直接使用宣告在後面的全域性元件

元件內容中的其他選項
因為元件實際上也可以說是一個Vue 例項，不過他可以複用而已。所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根例項特有的選項。

然後由於元件的使用需要具有獨立性，所以其data 選項必須是一個函式，而不能是一個引用型別的物件。（對於引用型別型別而言，一處改，處處都會改），而且其語法規則也只能是函式。

1.基本演示

2.Data返回值不能是外部定義的物件
即便你的data值為函式時也要注意一點，那就是返回的物件不能是外部定義的
否則一旦data選項變為物件了，那麼由於是引用的同一物件，所有的更改都會同步。
正常情況：各元件呼叫獨立

非正常情況：各元件呼叫不獨立

3.HTML限制
在某些時候，vue元件會受到html的限制，比如table內就只能寫行列，select內只能寫option等，這個時候元件直接寫進去就會無效，此時我們就可以使用is屬性來實現。

沒加is前

加了is後

當然，後面我們會學習單檔案.vue元件的寫法，那時就不會存在這個問題了。

在非單檔案元件時的專案檔案的開發呼叫
1.Index.html單獨一個檔案
2.每個元件一個js檔案
3.例項化vue物件一個檔案
4.然後在js檔案裡面呼叫，各個js檔案，建立vue例項的那個js應該放在最後面呼叫。

區域性註冊

概述
至此，我們的元件都只是通過 Vue.component 全域性註冊的：

Vue.component('my-component-name', {
  // ... options ...
})

全域性註冊的元件可以用在其被註冊之後的任何 (通過 new Vue) 新建立的 Vue 根例項。
然而，有時候我們想構建一些只能為當前應用所使用的元件，這個時候我們就可以使用區域性元件了。區域性元件只在該例項作用域下有效。
如何使用區域性元件
Vue例項中有個選項components可以註冊區域性元件，註冊後就只在該例項作用域下有效。

元件中巢狀
元件中也可以使用components選項來註冊元件，使元件可以巢狀。

備註：
可以在元件的components選項中宣告多個元件，
在components中：每個元件都是一個鍵值對。鍵名為元件名，鍵值為元件內容。
在元件中定義子元件時，可以使用外部定義物件作為元件內容

元件呼叫時可以直接使用單標籤形式

<div id="app">
<person-message></person-message>
<person-message />
</div>