Vue 中的 v-cloak 解讀

OBKoro1 發布于2019-08-20 15:21 / 2351人閱讀

摘要：中的解讀的作用和用法用法這個指令保持在元素上直到關聯實例結束編譯。和規則如一起用時，這個指令可以隱藏未編譯的標簽直到實例準備完畢。為了避免這種情況，我們可以將寫在引入的中，或者寫一個內聯樣式，這樣就得到了解決。

Vue 中的 v-cloak 解讀 v-cloak 的作用和用法

用法：

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


    {{msg}}

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

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

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

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

[v-cloak] {
  display: none;
}

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


    {{msg}}

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 樣式，這樣就得到了解決。

云服務器 GPU云服務器報告解讀解讀源碼解讀解讀3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82189.html

vue的指令

摘要：所有的指令都是以開頭。將模板中的數據以字符串的形式輸出。等價于防止刷新時出現在頁面上通過控制的來控制元素的實現和隱藏。減緩首次加在壓力，提高性能。單向數據綁定完整寫法簡寫一般用于的獲取學習學習學習綁定事件。 vue所有的指令都是以 v- 開頭。 v-html：類似于 js中的innerHTML 。可以解析模板中的標簽。 v-text：類似于 js中的innerText。將模板中的數據...

ThinkSNS 2019-08-26 13:25 評論0 收藏0
Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

maybe_009 2019-08-30 15:55 評論0 收藏0
Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

2bdenny 2019-08-02 14:11 評論0 收藏0
Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

LMou 2019-08-26 13:31 評論0 收藏0