Vue中v-cloak使用詳解

這次帶給大家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中文網其它相關文章！

推薦閱讀：

提高Node.js效能方法總結

JS實作下拉選單登入註冊彈窗

以上是Vue中v-cloak使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！