外貿(mào)怎么做網(wǎng)站外鏈seo網(wǎng)站結(jié)構(gòu)優(yōu)化的方法
v-cloak 的作用和用法
用法:
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí),這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。官方API
HTML 綁定 Vue實(shí)例,在頁面加載時(shí)會(huì)閃爍
閃爍內(nèi)容
然后才會(huì)出現(xiàn) 加載完成 字樣,為了效果更明顯,我們可以延后加載 Vue 實(shí)例
setTimeout(() => {
new Vue({
el: ‘#app’,
data: {
msg: ‘hello’
}
})
},2000)
v-cloak 可以解決這一問題,在 css 中加上
[v-cloak] {
display: none;
}
在 html 中的加載點(diǎn)加上 v-cloak,就可以解決這一問題
這樣在使用 v-cloak 時(shí),同樣需要用到這種方法
為什么我用的 v-cloak 無效?
在實(shí)際項(xiàng)目中,我們常通過 @import 來加載 css 文件
@import “style.css”
@import “index.css”
而 @import 是在頁面 DOM 完全載入后才會(huì)進(jìn)行加載,如果我們將 [v-cloak] 寫在 @import 加載的 css 文件中,就會(huì)導(dǎo)致頁面仍舊閃爍。
為了避免這種情況,我們可以將 [v-cloak] 寫在 link 引入的 css 中,或者寫一個(gè)內(nèi)聯(lián) css 樣式,這樣就得到了解決。