用法：

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

<div id="app">{{msg}} </div>

HTML 綁定 Vue實例，在頁面加載時會閃爍

{{msg}}

然后才會出現 加載完成 字樣，為了效果更明顯，我們可以延后加載 Vue 實例

setTimeout(() => {new Vue({el: '#app',data: {msg: 'hello'}}) },2000)

v-cloak 可以解決這一問題，在 css 中加上

[v-cloak] {display: none; }

在 html 中的加載點加上 v-cloak，就可以解決這一問題

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

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

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

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

為什么我用的 v-cloak 無效？

在實際項目中，我們常通過 @import 來加載 css 文件

@import "style.css" @import "index.css"

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

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

轉自：https://www.cnblogs.com/TigerZhang-home/p/7483182.html

總結

以上是生活随笔為你收集整理的Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。