欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小項目中怎么防止Vue的閃現(xiàn)畫面效果

  發(fā)布時間：2020-05-08 14:52:28   作者：格雷   我要評論
這篇文章主要介紹了小項目中怎么防止Vue的閃現(xiàn)畫面效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一句話總結(jié)

HTML: 元素加上v-cloak

CSS: [v-cloak]{display: none}

過程

頁面剛加載的時候胡子語法會顯示出來。

v-cloak是VueJS小型項目中提升用戶體驗簡單且重要的方法。

用法

HTML中在你需要組織閃現(xiàn)的標簽上加上v-cloak

<div id="app">  
 <nav>blabla</nav>  
 <main v-cloak>{{text}}</main>  
</div>

CSS中給v-cloak設(shè)定樣式，這個樣式是只有【在vue實例編譯結(jié)束前】應(yīng)用的樣式。

[v-cloak]{  
 display: none;  
}

原理

我沒讀完源碼，但是v-cloak的原理我大概理解一點：

首先是CSS選擇器，用[target]選擇的是“帶有 target 屬性所有元素。”?？梢渣c這里復習選擇器。

那么[v-cloak]選擇出來的就是所有帶有v-cloak屬性的元素了。

實例初始化完成之后，VueJS中會把Vue中特有的attribute去掉。在實例初始化完成之前，上面寫的main的HTML代碼實際是這樣的：

<main id="main" class="row" v-cloak="">

然后加上CSS，就把所有帶有v-cloak的元素都display: block了。

其實不止是v-cloak，你可以用v-if來試試，CSS里使用[v-if]{display:none}，效果看起來是一樣的。和v-cloak一樣，v-if也是在實例編譯完之后去掉。

源碼

然后我剛才去讀了一下源碼，大概是這一段，感興趣的大佬可以去搜搜讀讀理解理解。

if (isRealElement) {  
 // mounting to a real element  
 // check if this is server-rendered content and if we can perform  
 // a successful hydration.  
 if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {  
 oldVnode.removeAttribute(SSR_ATTR);  
 hydrating = true;  
 }  
}

到此這篇關(guān)于小項目中怎么防止Vue的閃現(xiàn)畫面效果的文章就介紹到這了,更多相關(guān)小項目vue閃現(xiàn)畫面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論