v-cloak遇到的問題及解決方法
阿新 • • 發佈：2018-11-10
問題
在使用vue時，HTML 繫結 Vue例項，在頁面載入時會閃爍類似{{msg}}這樣的資訊。可能會導致使用者體驗不好。
使用v-cloak
v-cloak就能解決這個問題。
(1)用法
這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到例項準備完畢。
官方API
我們可以在 css 中加上：
| 1 2 3 |
|
然後在 html 中的載入點加上 v-cloak，就可以解決這一問題：
| 1 2 3 |
|
(2)Vue1.x 與 Vue2 中 v-cloak 的不同
Vue1 中，允許將 Vue 例項掛載在 body 上，而 Vue2 是不允許的，想對整個頁面例項化，需要另外用一個 div 來容納整個頁面內容，對其進行例項化。
這樣在使用 v-cloak
(3)為什麼我用的 v-cloak 無效？
在實際專案中，我們常通過 @import 來載入 css 檔案
| 1 2 |
|
而 @import 是在頁面 DOM 完全載入後才會進行載入，如果我們將 [v-cloak] 寫在 @import 載入的 css 檔案中，就會導致頁面仍舊閃爍。
為了避免這種情況，我們可以將[v-cloak]