這次帶給大家Vue中v-cloak使用詳解，Vue中v-cloak使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
v-cloak 的作用和用法
用法：
這個指令保持在元素上直到關聯實例結束編譯。和 css 規則如[v-cloak] { display: none }一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到實例準備完畢。官方API{{msg}}
setTimeout(() => {
newVue({
el:'#app',
data: {
msg:'hello'
}
})
},2000)v-cloak 可以解決這個問題，在css 中加上HTML 綁定Vue實例，在頁面載入時會閃爍然後才會出現載入完成字樣，為了效果更明顯，我們可以延後載入Vue 實例
[v-cloak] {
display: none;
}Vue1.x 與Vue2 中v-cloak 的不同在html 中的載入點加上v- cloak，就可以解決這個問題
Vue1 中，允許將Vue 實例掛載在body 上，而Vue2 是不允許的，想對整個頁面實例化，需要另外用一個p 來容納整個頁面內容，對其進行實例化
這樣在使用v-cloak 時，同樣需要用到這種方法
為什麼我用的v-cloak 無效？
在實際專案中，我們常透過@import 來載入css 檔案
@import"style.css" @import"index.css"
為了避免這種情況，我們可以將[v-cloak]寫在link 引入的css中，或寫一個內嵌css 樣式，這樣就解決了。而 @import 是在頁面 DOM 完全載入後才會進行加載，如果我們將[v-cloak]寫在 @import 加載的 css 檔案中，就會導致頁面仍舊閃爍。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Vue中v-cloak使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
