vue中v-cloak的作用和原理解析
vue中v-cloak的作用和原理
1、作用
v-cloak 指令常用在插值表達(dá)式的標(biāo)簽中，用于解決當(dāng)網(wǎng)絡(luò)加載很慢或者頻繁渲染頁(yè)面時(shí)，頁(yè)面顯示出源代碼的情況。
所以為了提高用戶的體驗(yàn)性，使用指令 v-cloak，搭配著 CSS 一起使用，在加載時(shí)隱藏掛載內(nèi)容，等到加載完畢再顯示渲染后的數(shù)據(jù)。
2、原理
先通過(guò)樣式隱藏掛載內(nèi)容，等到數(shù)據(jù)渲染完成后，v-cloak屬性會(huì)自動(dòng)去除，頁(yè)面會(huì)顯示最終效果。
3、v-cloak的使用
① 在插值語(yǔ)法所在的標(biāo)簽處加上v-cloak指令
<h1 v-cloak>{{ name }}</h1>② 在 css 中設(shè)置 v-cloak 的屬性為 display: none
<style type="text/css">
[v-cloak] {
display: none;
}
</style>擴(kuò)展：v-cloak指令的使用
v-cloak的使用場(chǎng)景
v-cloak指令常常用在插值表達(dá)式的標(biāo)簽中，因?yàn)樗梢越鉀Q當(dāng)網(wǎng)絡(luò)加載很慢時(shí)，或者頻繁渲染時(shí)候，頁(yè)面就會(huì)顯示出源代碼的情況。
v-cloak的使用
首先，在差值語(yǔ)法所在的標(biāo)簽處加上v-cloak指令
<h3 v-cloak>{{name}}</h3>然后，在css中設(shè)置v-cloak的屬性為display為none
<style type="text/css">
? ? ? ? [v-cloak]{
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>v-cloak的原理
v-cloak原理是先通過(guò)樣式隱藏內(nèi)容，然后在內(nèi)存中進(jìn)行值的替換，將替換的內(nèi)容再反饋給界面，數(shù)據(jù)渲染完場(chǎng)之后，v-cloak 屬性會(huì)被自動(dòng)去除。
到此這篇關(guān)于vue中v-cloak的作用和原理的文章就介紹到這了,更多相關(guān)vue v-cloak作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了vue自定義表單生成器,可根據(jù)json參數(shù)動(dòng)態(tài)生成表單,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue全局事件總線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了Vue獲取微博授權(quán)URL代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了解決vue表單為空也能提交的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue中UI組件庫(kù)之Vuex與虛擬服務(wù)器初識(shí)
這篇文章主要介紹了Vue中UI組件庫(kù)之Vuex與虛擬服務(wù)器初識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
基于Vue 服務(wù)端Cookies刪除的問(wèn)題
今天小編就為大家分享一篇基于Vue 服務(wù)端Cookies刪除的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue插件v-touch的坑及解決(不能上下滑動(dòng))
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動(dòng))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
基于vue,vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問(wèn)題
這篇文章主要介紹了基于vue，vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問(wèn)題,需要的朋友可以參考下2018-05-05
vue+element實(shí)現(xiàn)表單校驗(yàn)功能
這篇文章主要介紹了vue+element表單校驗(yàn)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05