Vue 中的 v cloak 解讀

2021-08-10 20:41:55 字數 872 閱讀 1375

用法:

這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如[v-cloak]一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。官方api

}

div>

html 繫結 vue例項,在頁面載入時會閃爍

然後才會出現載入完成字樣,為了效果更明顯,我們可以延後載入 vue 例項

settimeout(() => 

})},2000)

v-cloak 可以解決這一問題,在 css 中加上

[v-cloak]
在 html 中的載入點加上 v-cloak,就可以解決這一問題

}div>

vue1 中,允許將 vue 例項掛載在 body 上,而 vue2 是不允許的,想對整個頁面例項化,需要另外用乙個 div 來容納整個頁面內容,對其進行例項化

這樣在使用 v-cloak 時,同樣需要用到這種方法

在實際專案中,我們常通過 @import 來載入 css 檔案

@import

"style.css"

@import

"index.css"

而 @import 是在頁面 dom 完全載入後才會進行載入,如果我們將[v-cloak]寫在 @import 載入的 css 檔案中,就會導致頁面仍舊閃爍。

為了避免這種情況,我們可以將[v-cloak]寫在 link 引入的 css 中,或者寫乙個內聯 css 樣式,這樣就得到了解決。

Vue 中的 v cloak 解讀

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

Vue 中的 v cloak 解讀

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

關於Vue中v cloak的使用講解

關於vue.js中v cloak的使用,單看官方文件,可能看得有點迷糊 這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如 v cloak 一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。官方文件 v cloak指令的設計是為了解決什麼問題?下面 p div 複...