註：此內容摘抄自：梁灝的《Vue.js實戰》

註：記得要引入vue.js才能運行哦，文章中貼出的代碼直接復制是不行的，html css js 都放在了一起，而且也沒有引用vue.js。

1.v-cloak

v-cloak不需要表達式，它會在Vue實例結束編譯時從綁定的HTML元素上移除，經常和CSS的display：none； 配合使用。

<div class="app1" v-cloak>
    {{message}}
</div>
var app1=new Vue({
    el:‘.app1‘,
    data:{
              message:
 
‘這是一段文本‘
    }
});

這時雖然加了v-cloak，但其實並沒有起到任何作用，當網速較慢，Vue.js文件還沒有加載完時，在頁面上會顯示{{message}}的字樣，直到Vue創建實例、編譯模版時，DOM才會被替換，所以這個過程屏幕是有閃動的。只要加一句CSS就可以解決這個問題了：

[v-cloak]{
    display: none;
}        

一般情況下，v-cloak是一個解決初始化慢導致頁面閃動的最佳實踐，對於簡單的項目很實用，但在具有工程化的項目裏，項目的HTML結構只有一個空的div元素，生於的內容都是由路由去掛在不同的組件完成的，所以不需要v-cloak。

2.v-once

v-once也是一個不需要表達式的指令，作用是定義它的元素或組件只渲染一次，包括元素或組件的所有子節點。再次渲染後，不再隨數據的變化重新渲染，將被視為靜態內容。

<div class="app2">
    <span v-once>{{message}}</span>
    <div v-once>
        <span>{{message}}</span>
    </div>
</div>

var app2=new Vue({
    el:‘.app2‘,
    data:{
        message:
 
‘這是一段文本‘
    }
});

v-once在業務中也很少用，當你需要進一步優化性能時，可能會用到。

3.v-if 、v-else-if 、v-else

與JavaScript的條件語句if、else、else if 類似，Vue.js 的條件指令可以根據表達式的值在DOM中渲染或銷毀元素/組件

<div class="app3">
    <p v-if="status===1">當status為1時顯示該行</p>
    <p v-else-if="status===2">當status為2時顯示該行</p>
    <p v-else>否則顯示該行</p>
</div>

var app3=new Vue({
    el:‘.app3‘,
    data:{
        status:1
    }
});

如果一次判斷的是多個元素，可以在Vue.js內置的<template>元素上使用條件指令，最終渲染的結果不會包含該元素。

<div class="app4">
    <template v-if="status===1">
        <p>這是一段文本哦</p>
        <p>這是一段文本哦</p>
        <p>這是一段文本哦</p>
    </template>
</div>

var app4=new Vue({
    el:‘.app4‘,
    data:{
        status:1
    }
});

Vue在渲染元素時，處於效率考慮，會盡可能的復用已有的元素而非重新渲染：

<div class="app5">
    <template v-if="type===‘name‘">
        <label for="">用戶名：</label>
        <input type="" name="" id="" value="" placeholder="輸入用戶名" />
    </template>
    <template v-else>
        <label for="">郵箱：</label>
        <input type="" name="" id="" value="" placeholder="輸入郵箱"  />
    </template>
    <button @click="handleToggleClick">切換輸入類型</button>
</div>

var app5=new Vue({
    el:‘.app5‘,
    data:{
        type:‘name‘
    },
    methods:{
        handleToggleClick:function(){
            this.type=this.type===‘name‘?‘mail‘:‘name‘;
        }
    }
});

鍵入內容，點擊切換，雖然DOM變了，但是之前在輸入框鍵入的內容並沒有改變，只是替換了placeholder的內容，說明<input> 元素被復用了。

如果你不想這樣，可以使用Vue.js提供的key屬性，它可以讓你自己決定是否要復用元素，key的值必須是唯一的。

<input type="" name="" id="" value="" placeholder="輸入用戶名" key="name-input" />
<input type="" name="" id="" value="" placeholder="輸入郵箱" key="mail-input" />

給兩個<input>元素都增加key後，就不會復用了，切換類型時鍵入的內容也會被刪除，不過<label>元素仍然是被復用的，因為沒有添加key屬性。

4.v-show

v-show的用法與v-if基本一致，是不過v-show是改變元素的CSS屬性display。當v-show表達式的值為false時，元素會隱藏，查看DOM結構會看到元素上加載了內聯樣式display：none；

<div class="app6">
    <p v-show="status===1">當status為1時顯示該行</p>
</div>

var app6=new Vue({
    el:‘.app6‘,
    data:{
        status:1
    }
});

註意：v-show不能在<template>上使用。

v-if和v-show具有類似的功能，不過v-if才是真正的條件渲染，它會根據表達式適當的銷毀或重建元素及綁定的事件或子組件。若表達式初始值為false，則一開始元素/組件並不會渲染，只有當條件第一次變為真時才開始編譯。

而v-show只是簡單的CSS屬性切換，無論條件真與否，都會被編譯。相比之下，v-if更適合條件不經常改變的場景，因為他切換開銷相對較大，而v-show適用於頻繁切換條件。

vue.js實戰學習——內置指令（一）