天天看點

16_内置指令

1.v-text指令:

作用:向其所在節點中渲染文本内容

與插值文法的差別: v-text會替換掉節點中的内容,{{xx}}則不會

之前學過:

        v-bind    : 單向綁定解析表達式,可簡寫為   :xxx

        v-model : 雙向資料綁定

        v-for       : 周遊數組/對象/字元串

        v-on       : 綁定事件監聽,可簡寫為 @

        v-if         : 條件渲染(動态控制節點是否存在)

        v-else    : 條件渲染(動态控制節點是否存在)

        v-show  : 條件渲染(動态控制節點是否展示)

16_内置指令
16_内置指令

2.v-html指令:

 作用:向指定節點中渲染包含html結構的内容

與插值文法的差別:

               (1)v-html會替換掉節點中所有的内容, {{xx}}則不會

               (2)v-html可以識别html結構

嚴重注意:v-html有安全性問題!!!

                (1)在網站上動态渲染任意HTML是非常危險的,容易導緻xss攻擊。

                (2)一定要在可信的内容上使用v-html,不要用在使用者送出的内容上!

16_内置指令
16_内置指令

 3.v-cloak指令(沒有值):

本質是一個特殊的屬性,Vue執行個體建立完畢并接管容器後,會删掉v-cloak屬性

 使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題      

16_内置指令

 4.v-once指令

 v-once所在節點在初次動态渲染後,就視為靜态内容了。

 以後資料的改變不會引起v-once所在結構的更新,可以用于優化性能。

16_内置指令
16_内置指令

 5.v-pre指令:

跳過其所在節點的編譯過程

可利用它跳過:沒有使用指令文法、沒有使用插值文法的節點,會加快編譯

16_内置指令