v-cloak遇到的問題及解決方法

問題

在使用vue時，HTML 會綁定 Vue實例，在頁面載入時會閃爍類似{{msg}}這樣的資訊。可能會導致使用者體驗不好。

使用v-cloak

v-cloak就能解決這個問題。

(1)用法

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到實例準備完畢。

官方API

我們可以在css 中加上：

[v-cloak] {
  display: none;
}

然後在html 中的載入點加上v-cloak，就可以解決這個問題：

<div id="app" v-cloak>
    {{msg}}
</div>

(2)Vue1.x 與Vue2 中v-cloak 的不同

Vue1 中，允許將Vue 實例掛載在body 上，而Vue2 是不允許的，想對整個頁面實例化，需要另外用一個div 來容納整個頁面內容，對其進行實例化。

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

(3)為什麼我用的 v-cloak 無效？

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

@import "style.css?1.1.11"
@import "index.css?1.1.11"

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

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

以上是v-cloak遇到的問題及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！