用法:
這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如[v-cloak]
一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。官方api
html 繫結 vue例項,在頁面載入時會閃爍
然後才會出現載入完成
字樣,為了效果更明顯,我們可以延後載入 vue 例項
settimeout(() =>
})},2000)
v-cloak 可以解決這一問題,在 css 中加上
[v-cloak]
在 html 中的載入點加上 v-cloak,就可以解決這一問題
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 div html 繫結 vue例項,在頁面載入時會閃爍 然後才會出現載入完成字樣,為了效果更明顯,我們可以延後載入 vue 例項...
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 複...