1.v-text指令:
作用:向其所在節點中渲染文本内容
與插值文法的差別: v-text會替換掉節點中的内容,{{xx}}則不會
之前學過:
v-bind : 單向綁定解析表達式,可簡寫為 :xxx
v-model : 雙向資料綁定
v-for : 周遊數組/對象/字元串
v-on : 綁定事件監聽,可簡寫為 @
v-if : 條件渲染(動态控制節點是否存在)
v-else : 條件渲染(動态控制節點是否存在)
v-show : 條件渲染(動态控制節點是否展示)
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5COwIzN5UzNiRWMlRWMhNDOxYzX2IzMwcTM0AzLcFTMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL1M3Lc9CX6MHc0RHaiojIsJye.png)
2.v-html指令:
作用:向指定節點中渲染包含html結構的内容
與插值文法的差別:
(1)v-html會替換掉節點中所有的内容, {{xx}}則不會
(2)v-html可以識别html結構
嚴重注意:v-html有安全性問題!!!
(1)在網站上動态渲染任意HTML是非常危險的,容易導緻xss攻擊。
(2)一定要在可信的内容上使用v-html,不要用在使用者送出的内容上!
3.v-cloak指令(沒有值):
本質是一個特殊的屬性,Vue執行個體建立完畢并接管容器後,會删掉v-cloak屬性
使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題
4.v-once指令
v-once所在節點在初次動态渲染後,就視為靜态内容了。
以後資料的改變不會引起v-once所在結構的更新,可以用于優化性能。
5.v-pre指令:
跳過其所在節點的編譯過程
可利用它跳過:沒有使用指令文法、沒有使用插值文法的節點,會加快編譯