溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

v-once v-pre v-cloak作用

發(fā)布時間：2020-08-05 12:31:18 來源：網(wǎng)絡(luò) 閱讀：219 作者：喝醉的熊 欄目：web開發(fā)

這三個指令都是用來優(yōu)化性能體驗的：一個是搞一次不搞了 ,一個是干脆不搞 ，另一個是塊遮羞布

v-once
當(dāng)你只希望元素加載一次后面不再改變的時候，這個時候可以在根元素上添加這個指令。確保這些內(nèi)容不會跟著數(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:"https://cache.yisu.com/upload/information/20200302/54/8699.jpg"
            },
            methods:{
                change(){
                    this.url = "https://cache.yisu.com/upload/information/20200302/54/8700.jpg"
                }
            }
        })
    </script>

v-pre
一些靜態(tài)的內(nèi)容不需要編譯加上這個指令可以加快編譯，程序執(zhí)行的時候就會跳過這個元素和它的子元素的編譯過程。v-pre后面也不用跟表達(dá)式 

 <h2 v-pre>哈哈哈哈哈哈哈</h2>

v-cloak
這個其實是用在網(wǎng)絡(luò)比較差 程序執(zhí)行慢或卡的時候，瀏覽器可能會顯示出如下頁面

<div id="app">
    <div>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            </div>
        </div>

此時，模板還未掛載到頁面上，真實數(shù)據(jù)還沒顯示出來，看起來比較丑，那怎么辦 ，要不就找一個斗篷先遮住吧，等到模板掛載上去數(shù)據(jù)正常顯示了，再把斗篷扔了。v-cloak后面也不用跟表達(dá)式

cloak 英[kl??k] 美[klo?k]
n. (尤指舊時的) 披風(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>
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手