Vue中的v-cloak使用解讀
v-cloak 的作用和用法
用法：
這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢。官方API
<div id="app">
{{msg}}
</div>
HTML 綁定 Vue實例，在頁面加載時會閃爍
然后才會出現(xiàn) 加載完成 字樣，為了效果更明顯，我們可以延后加載 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 來容納整個頁面內(nèi)容，對其進行實例化
這樣在使用 v-cloak 時，同樣需要用到這種方法
為什么我用的 v-cloak 無效？
在實際項目中，我們常通過 @import 來加載 css 文件
@import "style.css" @import "index.css"
而 @import 是在頁面 DOM 完全載入后才會進行加載，如果我們將 [v-cloak] 寫在 @import 加載的 css 文件中，就會導(dǎo)致頁面仍舊閃爍。
為了避免這種情況，我們可以將 [v-cloak] 寫在 link 引入的 css 中，或者寫一個內(nèi)聯(lián) css 樣式，這樣就得到了解決。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)的相關(guān)資料,在網(wǎng)頁中我們也希望可以像桌面軟件一樣,點擊右鍵后出現(xiàn)操作菜單,對選中的數(shù)據(jù)項進行相應(yīng)的操作,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了vue3?emits事件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
vue使用Vue.extend創(chuàng)建全局toast組件實例
這篇文章主要介紹了vue使用Vue.extend創(chuàng)建全局toast組件實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中
這篇文章主要介紹了Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue實現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實例代碼
這篇文章主要介紹了Vue實現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue項目部署自動清除緩存方式,包括清除文件緩存，清除瀏覽器 localStorage 緩存方式，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
uni-file-picker搭配uni.uploadFile在使用問題上踩了不少坑,我至今還是沒辦法在不改uniapp源碼基礎(chǔ)上實現(xiàn)限制重復(fù)文件的上傳,這篇文章介紹vue3+uniapp 上傳附件的操作代碼,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家介紹了一文詳解websocket在vue2中的封裝使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了vue中then后的返回值解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
element-ui中el-row中設(shè)置:gutter間隔不生效問題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08