一、指令

1.v-text

<span v-text="msg"></span>
<!-- 兩種寫法是一樣的 -->
<span>{{ msg }}</span>

2.v-html

　　更新元素的 innerHTML ，內容按普通 HTML 插入，不會作為 Vue 模板進行編譯，如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用元件來代替

　　在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊，只在可信內容上使用 v-html ，永不用在使用者提交的內容上

　　在單檔案元件裡， scoped 的樣式不會應用在 v-html 內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理，如果你希望針對 v-html 的內容設定帶作用域的 CSS ，你可以替換為 CSS Modules 或用一個額外的全域性 <style> 元素手動設定類似 BEM 的作用域策略

3.v-show、v-if、v-else、v-else-if、v-for

4.v-on

　　修飾符：

　　.stop　　呼叫 event.stopPropagation()

　　.prevent　　呼叫 event.preventDefault()

　　.capture　　新增事件偵聽器時使用 capture 模式（改變冒泡順序）

<div id="app" v-on:click="show">
　　1
　　<div id="app2" v-on:click.capture="show2">
　　　　2
　　　　<div id="app3" v-on:click
 
="show3">
　　　　　　3
　　　　</div>
　　</div>
</div>

　　　　這裡的程式碼因為div2有 capture 關鍵字，所以此時冒泡順序發生了改變

　　　　正常情況下，點選 div3 一層一層冒泡，div3=>div2=>div1

　　　　使用了關鍵字，先div2=>div3=>div1

　　　　1.先冒泡外層帶有關鍵字的事件

　　　　2.外層執行結束之後，往裡層執行事件

　　　　3.最後按照從裡向外的事件開始執行

　　.self　　只當事件時從偵聽器繫結的元素本身觸發時才觸發回撥

　　　　可以理解為跳過冒泡事件。只有點選自己的時候才能觸發自己的事件

　　.{keyCode | keyAlias}　　只當事件是從特定鍵觸發時才觸發回撥

　　.native　　監聽元件根元素的原生事件

　　.once　　只觸發一次回撥

　　.left　　只當點選滑鼠左鍵時觸發

　　.right　　右鍵

　　.middle　　中鍵

　　.passive　　以 { passive: true } 模式新增偵聽器

5.v-bind

6.v-model

　　修飾符：

　　.lazy　　取代 input 監聽 change 事件

　　.number　　輸入字串轉為有效的數字

　　.trim　　輸入首尾空格過濾

7.v-slot

　　縮寫：#

　　引數：插槽名（可選，預設是 default）

　　用法：提供具名插槽或需要接收 prop 的插槽

8.v-pre

　　跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯

<div v-pre>{{ dddddd }}</div>

9.v-cloak

　　這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如[v-cloak] {display: none} 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤，知道例項準備完畢

<div v-cloak>
    {{ message }}
</div> 

[v-cloak] {
    display: none;
}

　　不會顯示，直到編譯結束

10.v-once

　　只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能

二、特殊的 attribute

1.key

　　key 的特殊 attribute 主要用於在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/複用相同型別元素的演算法。而使用 key 時，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。

　　有相同父元素的子元素必須有獨特的 key，重複的 key 會造成渲染錯誤

2.ref

　　ref 被用來給元素或子元件註冊引用資訊，引用資訊將會註冊在父元件的 $refs 物件上，如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項

3.is

　　用於動態元件且基於 DOM 內模板的限制來工作

<component v-bind:is="currentTabComponent"></component>

三、內建的元件

1.component

　　渲染一個 元元件 為動態元件。依 is 的值，來決定哪個元件渲染

2.transition

　　props:

　　name　　用於自動生成 CSS 過渡類名

　　appear　　boolean，是否在初始渲染時使用過渡。預設 false

　　css　　boolean，是否使用 css 過渡類。預設 true

　　type　　string，指定過渡事件型別，偵聽過度何時結束。有效值為 transition 和 animation

　　mode　　string，控制離開/進入過渡的事件序列。out-in 和 in-out ；默認同時進行

　　duration　　number | {enter: number, leave: number} 指定過渡的持續時間，預設情況下，Vue會等待過渡所在根元素的第一個 transitionend 或 animationend 事件

　　enter-class

　　leave-class

　　appear-class

　　enter-to-class

　　leave-to-class

　　appear-to-class

　　enter-active-class

　　leave-active-class

　　appear-active-class

　　事件：

　　before-enter

　　before-leave

　　before-appear

　　enter

　　leave

　　appear

　　after-enter

　　after-leave

　　after-appear

　　enter-cancelled

　　leave-cancelled（v-show only）

　　appear-cancelled

　　用法：<transition> 元素作為單個元素/元件的過渡效果。<transition> 只會把過渡效果應用到其包裹的內容上，而不會額外渲染 DOM 元素，也不會出現在可被檢查的元件層級中

3.transition-group

　　基本同 transition

　　作為多個元素/元件的過渡效果

　　注意，每個 transition-group 的子節點必須有獨立的key，動畫才能正常工作

4.keep-alive

　　props:

　　include　　字串或政正則表示式。只有名稱匹配的元件會被快取

　　exclude　　字串或正則表示式。任何名稱匹配的元件都不會被快取

　　max　　數字。最多可以快取多少元件例項　

　　　　最多可以快取多少元件例項，一旦這個數字達到了，在新例項被建立之前，已快取元件中最久沒有被訪問的例項會被銷燬掉

　　<keep-alive :max="10">
  　　<component :is="view"></component>
　　</keep-alive>

　　用法：<keep-alive> 包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。和 transition 相似，是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在元件的父元件鏈中。

　　當元件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函式將會被對應執行。

　　主要用於保留元件狀態或避免重新渲染。

　　<keep-alive>　　要求同時只有一個子元素被渲染

5.slot

　　用於命名插槽

　　<slot> 元素作為元件模板之中的內容分發插槽。<slot> 元素自身將被替換