1、文本類指令 {{}}、v-text 都是用於綁定節點的文本; 二者區別：{{}}這種綁定值的方式在頁面會出現“{{}}”一閃而過的效果 解決{{}}在頁面出現一閃而過的辦法: // css: [v-cloak] { display: 'none' }// html <h1 v-cloak>{{m ...
1、文本類指令
{{}}、v-text 都是用於綁定節點的文本;
二者區別：{{}}這種綁定值的方式在頁面會出現“{{}}”一閃而過的效果
解決{{}}在頁面出現一閃而過的辦法:
// css:
[v-cloak] {
display: 'none'
}
// html
<h1 v-cloak>{{msg}}</h1>
v-once 用於指令節點的內容只綁定一次，當前節點中所對應的變數變化，視圖不更新。
通常情況下，v-once只能和{{}}一起用
v-html 用於綁定動態的html節點，相當於DOM中的innerHTML，這個指令預設已經做了"防註入攻擊XSS"的處理。
v-once和v-cloak都不需要接收表達式來作為值
2、動態屬性指令
v-bind 用於動態綁定節點屬性(如：title,value,class,style等);經常簡寫成":屬性名"
動態class語法1 <div :class="變數1 變數2"></div> 動態class語法2 <div :class="[表達式1,表達式2,...]"></div> 動態class語法3 <div :class="{類名1:布爾值1,類名2:布爾值2,...}"></div> 動態class語法1 <div :style="`color:red;fontSize:20px`"></div> 動態class語法2 <div :style="[{k1:v1,k2:v2},{k3:v3},...]"></div> 動態class語法3 <div :style="{k1:v1,k2:v2,....}"></div> 這三種語法可以交叉使用，但實際上很少有人交叉使用。 3、事件綁定v-on 用於給視圖綁定各種js事件，比如：click，mouseenter,blur等,簡寫成: "@事件名"
事件修飾符：.stop 阻止冒泡 ，.enter等，可以鏈式調用。
4、表單綁定
v-model 用於表單取值（表單雙向綁定），比如input/select/textarea等。
表單三個修飾符：.trim自動去除文本首尾空格
.number只能輸入數字
.lazy 用於性能，當表單失去焦點時再進行雙向綁定
5、列表渲染
v-for 用於渲染列表、對象等。
6、條件渲染
v-show 相當於控制節點的display: none/block
v-if / v-else-if / v-else 這是真正的移除或插入視圖節點，比較耗費性能,不建議和v-for一起使用。
v-for的優先順序比v-if更高。
7、其它指令
v-pre 用於調試，可以阻止vue編譯器對指令的編譯
v-slot 指定具名插槽
