這三個(gè)指令都是用來優(yōu)化性能體驗(yàn)的:一個(gè)是搞一次不搞了 ,一個(gè)是干脆不搞 ,另一個(gè)是塊遮羞布
v-once
當(dāng)你只希望元素加載一次后面不再改變的時(shí)候,這個(gè)時(shí)候可以在根元素上添加這個(gè)指令。確保這些內(nèi)容不會跟著數(shù)據(jù)改變而改變,只在初次頁面加載時(shí)候計(jì)算一次然后緩存起來,v-once后面不用跟表達(dá)式
<div id="app">
<img v-once :src="url" >
<button @click="change">換圖片</button>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
url:"/tupian/20230521/8699.jpg"
},
methods:{
change(){
this.url = "/tupian/20230521/8700.jpg"
}
}
})
</script>
v-pre
一些靜態(tài)的內(nèi)容不需要編譯加上這個(gè)指令可以加快編譯,程序執(zhí)行的時(shí)候就會跳過這個(gè)元素和它的子元素的編譯過程。v-pre后面也不用跟表達(dá)式
<h2 v-pre>哈哈哈哈哈哈哈</h2>
v-cloak
這個(gè)其實(shí)是用在網(wǎng)絡(luò)比較差 程序執(zhí)行慢或卡的時(shí)候,瀏覽器可能會顯示出如下頁面
<div id="app">
<div>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
</div>
</div>
此時(shí),模板還未掛載到頁面上,真實(shí)數(shù)據(jù)還沒顯示出來,看起來比較丑,那怎么辦 ,要不就找一個(gè)斗篷先遮住吧,等到模板掛載上去數(shù)據(jù)正常顯示了,再把斗篷扔了。v-cloak后面也不用跟表達(dá)式
cloak 英[kl??k] 美[klo?k]
n. (尤指舊時(shí)的) 披風(fēng),斗篷; 遮蓋物;
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
<h2>{{count}}</h2>
</div>
</div>
<script type="text/javascript">
setTimeout(function(){
const app = new Vue({
el: "#app",
data: {
count: "1111"
},
methods: {
}
})
},3000)
</script>
</body>
當(dāng)前文章:v-oncev-prev-cloak作用-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明:http://vcdvsql.cn/article40/cssoeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、微信小程序、商城網(wǎng)站、網(wǎng)站營銷、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容