1. 程式人生 > 其它 >vue 常見指令

vue 常見指令

vue 常見的指令

v-bind:單向繫結解析表示式可簡寫為 :xxxx

v-model: 雙向資料繫結

v-for : 遍歷陣列/物件/字串

v-on :繫結事件監聽,.可簡寫為@

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

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

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

v-text指令:
1.作用:向其所在的節點中渲染文字內容。
2.與插值語法的區別: v-text會 替換掉節點中的內容,{{xx}}則不會

v-html指令:
1.作用:向指定節點中渲染包含htm1結構的內容。
2.與插值語法的區別:
(1).v-html會替換掉節點中所有的內容,{{xx}}則不會。
(2) .V- html可以識別htm1結構。
3.嚴重注意: v-htm1有安 全性問題! ! ! !
(1).在網站上動態渲染任意HTML是非常危險的,容易導致XSS攻擊。
(2).定要在可信的內容上使用v-html,永不要用在使用者提交的內容上!

v-cloak指令(沒有值) :
1.本質是一個特殊屬性,Vue例項建立完畢並接管容器後,會刪掉v- cloak屬性
2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}的問題。

v-once指令:
1. v-once所在節點在初次動態渲染後,就視為靜態內容了。

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

(例子:

<h2 V- once>初始化的n值是:{{n}}</h2>

<h2>當前的n值是:{{n}}</h2>
<button @click="n++"> 點我n+1< /button>)

v-pre指令:
1.跳過其所在節點的編譯過程。
2.可利用它跳過:沒有使用指令語法、沒有使用插值語法的節點,會加快編譯。

自定義指令