Vue內建指令

2021-10-01 12:16:28 字數 824 閱讀 7960

參考:指令

1.v-html內容按普通 html 插入,可防止 xss 攻擊

2.v-show根據表示式的真假值,切換元素的 display 長沙市屬性來顯示隱藏

3.v-if 根據表示式的真假值,來渲染元素

4.v-else 前面必須有v-if 或者 v-else-if

5.v-else-if 前面必須有v-if 或者 v-else-if

6.v-for 遍歷的陣列或者物件

7.v-on 繫結事件監聽 縮寫 @ +事件名

8.v-bind 用於繫結元素屬性 縮寫 :value

9.v-model 在表單控制項或者元件上建立雙向繫結

10.v-once 一次性插值,當後面資料更新後檢視資料不會更新

11.v-pre 可以用來顯示原始插入值標籤 } 。並跳過這個元素和它的子元素的編

譯過程。加快編譯。

例如:網頁中的一篇文章,文章內容不需要被 vue 管理渲染,則可以在此元

素上新增 v-pre 忽略文章編譯提高效能。

12.v-text 等價於 } 用於顯示內容,但區別在於: } 會造成閃爍問題,

v-text 不會閃爍

13.v-cloak 如果想用 } 又不想有閃爍問題,則使用 v-cloak 來處理,

步驟如下:

在被 vue 管理的模板入口節點上作用 v-cloak 指令

新增乙個屬性選擇器 [v-cloak] 的css 隱藏樣式: [v-cloak]

原理:預設一開始被 vue 管理的模板是隱藏著的,當 vue 解析處理完

dom 模板之後,會自動把這個樣式去

除,然後就顯示出來。

Vue 內建指令

在 vue 例項編譯結束之後再渲染,一般與 display none 結合使用。css v cloak 解決初始化慢導致的頁面閃動,比如 頁面載入出來了但是沒有解析完 vue 例項,從而導致頁面中顯示這種沒有載入出來的情況 定義它的元素和元件只渲染一次,後續都不會再重新渲染。用法和 v cloak ...

Vue內建v 指令

什麼是指令 是一種特殊的自定義行間屬性 也就是在html標籤內寫 指令的職責就是當其表示式的值改變時相應地將某些行為應用到dom上,在vue中,指令以 v 開頭 v bindv bind 動態繫結資料。簡寫為 以後的 class v onv on 繫結時間 簡寫為 例 click v textv t...

Vue學習記錄 內建指令

1.v cloak 略 2.v once 複製 3.v if,v else,v else if 條件渲染指令 vue在渲染元素時,出於效率考慮,會盡可能復用已有的元素而非重新渲染 解決方法 加key 加key可以來決定是否復用元素 en type name 使用者名稱 type text place...