先來看下vue.js 中的v-cloak 指令

可以使用 v-cloak 指令設(shè)置樣式，這些樣式會(huì)在 Vue 實(shí)例編譯結(jié)束時(shí)，從綁定的 HTML 元素上被移除。

當(dāng)網(wǎng)絡(luò)較慢，網(wǎng)頁(yè)還在加載 Vue.js ，而導(dǎo)致 Vue 來不及渲染，這時(shí)頁(yè)面就會(huì)顯示出 Vue 源代碼。我們可以使用 v-cloak 指令來解決這一問題。

html：

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

js：

<script>
  var app = new Vue({
    el: '#app',
    data: {
      context:'互聯(lián)網(wǎng)頭部玩家鐘愛的健身項(xiàng)目'
    }
  });
</script>

效果：

我們使用 v-cloak 指令來解決屏幕閃動(dòng)的問題吧O(∩_∩)O~

js 不變，在 div 中加入 v-cloak 指令。

html：

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

css：

[v-cloak]{
  display: none;
}

使用 v-cloak 指令之后的效果（ demo ）：

在簡(jiǎn)單項(xiàng)目中，使用 v-cloak 指令是解決屏幕閃動(dòng)的好方法。但在大型、工程化的項(xiàng)目中（webpack、vue-router）只有一個(gè)空的 div 元素，元素中的內(nèi)容是通過路由掛載來實(shí)現(xiàn)的，這時(shí)我們就不需要用到 v-cloak 指令咯。

下面看下Vue中v-cloak使用詳解

這次給大家?guī)鞻ue中v-cloak使用詳解，Vue中v-cloak使用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

v-cloak 的作用和用法

用法：

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 css 規(guī)則如[v-cloak] { display: none }一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。官方API{{msg}}

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

v-cloak 可以解決這一問題，在 css 中加上HTML 綁定 Vue實(shí)例，在頁(yè)面加載時(shí)會(huì)閃爍然后才會(huì)出現(xiàn)加載完成字樣，為了效果更明顯，我們可以延后加載 Vue 實(shí)例

[v-cloak] {
 display: none;
}

Vue1.x 與 Vue2 中 v-cloak 的不同在 html 中的加載點(diǎn)加上 v-cloak，就可以解決這一問題

Vue1 中，允許將 Vue 實(shí)例掛載在 body 上，而 Vue2 是不允許的，想對(duì)整個(gè)頁(yè)面實(shí)例化，需要另外用一個(gè) p 來容納整個(gè)頁(yè)面內(nèi)容，對(duì)其進(jìn)行實(shí)例化

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

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

在實(shí)際項(xiàng)目中，我們常通過 @import 來加載 css 文件

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

為了避免這種情況，我們可以將[v-cloak]寫在 link 引入的 css 中，或者寫一個(gè)內(nèi)聯(lián) css 樣式，這樣就得到了解決。而 @import 是在頁(yè)面 DOM 完全載入后才會(huì)進(jìn)行加載，如果我們將[v-cloak]寫在 @import 加載的 css 文件中，就會(huì)導(dǎo)致頁(yè)面仍舊閃爍。

總結(jié)

以上所述是小編給大家介紹的Vue.js 中的 v-cloak 指令及使用詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論