vue v-cloak 的做用和用法

v-cloak 的做用和用法  可用v-text 替換 可是有區別

用法：

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

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

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

而後纔會出現 加載完成 字樣，爲了效果更明顯，咱們能夠延後加載 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 樣式，這樣就獲得瞭解決。

以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持腳本之家。