元件的建立方式

區域性建立元件

檢視
<元件名稱></元件名稱>
​
邏輯
components:{
    元件名稱：{
        template:'
    }
}

全域性建立元件

component這個方法中有兩個引數，第一個引數是元件名稱，要按照規則取名。第二個引數是元件的屬性和方法
Vue.component('元件名稱',{
//元件的內容
})

元件名稱的命名規則

一、不能用已經存在的標籤名稱作為元件名稱
二、不能用已經存在的標籤名稱作為元件名稱，即使是大寫頁不行，因為html它不區分大小
三、如果元件名稱用的是駝峰命名法，那麼在渲染的時候加-，比如<my-header></my-header>
 

template的使用規則

一、元件中的template這個屬性，有且只能有一個根元素
二、我們可以在檢視下面提出一個template標籤，所有的元件內容，放置在標籤下的唯一根元素中

在元件中data為什麼必須是一個函式的形式

所有的元件都在同一個html中，類似於css樣式，會互相干擾。如果每一個元件的資料它是物件的形式，相當於所有的元件共用一個數據源，那麼如果a元件改變了其中一個數據，b元件會受到干擾。因為每一個元件都應該是獨立的，所以我們用函式的形式去建立初始化資料，函式是獨立的
data是一個物件，它們之間的地址空間是互通，如果是函式，它是一個私密的空間。函式是有自己的函式作用域

動態元件

<component is='元件名稱'></component>
相當於
<元件名稱></元件名稱>
​
如果要切換元件
<元件名稱 v-if=''></元件名稱>
<元件名稱 v-if=''></元件名稱>
<元件名稱 v-if=''></元件名稱>
這麼寫比較麻煩，我們可以進行程式碼優化，通多動態元件切換
<component :is='變數'></component>
​