基本指令v cloak

2021-10-09 06:09:23 字數 920 閱讀 4766

v-cloak 它會在 vue 例項結束編譯時從繫結的 html 元素上移除, 經常和 css 的 display: none;配合使用。

當網速較慢、 vue.js 檔案還沒 載入完時,在頁面上會顯示{ }的字樣,直到 vue 建立例項、編譯模板時, dom 才會被 替換,所以這個過程螢幕是有閃動的

所以當沒有載入完成時需要乙個遮罩,而v-cloak 通過css display: none;配合使用可以實現遮罩功能,並且根據v-cloak定義,它會在vue例項結束編譯時從繫結的html元素上移除,這樣又不會一直遮罩,滿足要求

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

type

="text/css"

>

[v-cloak]

style

>

head

>

>

v-cloak

>

>

}div

>

div>

src=

"vue.js"

>

script

>

>

newvue(}

)script

>

body

>

html

>

展示效果:

Vue基本指令v cloak的使用

v cloak不需要表示式,它會在vue例項結束編譯時從繫結的html元素上移除,經常和 配合使用 div newvue script 這時雖然已經加了指令v cloak,但其實並沒有起到任何作用,當網速較慢 vue.js檔案還沒有載入完時,在頁面上會顯示 的字樣,直到vue建立例項 編譯模板時,d...

Vue常見指令 v cloak

將資料編寫完成,通過插值表示式輸出到檢視,在重新整理的時候出現很短的源 如圖 指令v cloak的作用就是用來解決瀏覽器在載入頁面時因存在事件差而產生的閃動問題,她的原理是先隱藏檔案掛載位置,處理渲染好後在顯示最終結果。這個指令需要與css規則一起使用才可以 如果是在真實專案中,可以將v clock...

Vue 中的 v cloak 解讀

用法 這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如 v cloak 一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。官方api div html 繫結 vue例項,在頁面載入時會閃爍 然後才會出現載入完成字樣,為了效果更明顯,我們可以延後載入 vue 例項...