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 :></div> 動態class語法2 <div :></div> 動態class語法3 <div :></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 指定具名插槽
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/536915.html
標籤：其他
上一篇：HTML標簽
下一篇：何時在docker中重建影像？