1. v-text

v-text主要用來更新textContent，可以等同于JS的text屬性。

<span v-text="msg"></span>

這兩者等價：

<span>{{msg}}</span>

2. v-html

雙大括號的方式會將數據解釋為純文本，而非HTML。為了輸出真正的HTML，可以用v-html指令。它等同于JS的innerHtml屬性。

<div v-html="rawHtml"></div>

這個div的內容將會替換成屬性值rawHtml，直接作為HTML進行渲染。

3. v-pre

v-pre主要用來跳過這個元素和它的子元素編譯過程。可以用來顯示原始的Mustache標簽。跳過大量沒有指令的節點加快編譯。

<div id="app">  <span v-pre>{{message}}</span> //這條語句不進行編譯  <span>{{message}}</span></div>

最終僅顯示第二個span的內容

4. v-cloak

這個指令是用來保持在元素上直到關聯實例結束時進行編譯。

<div id="app" v-cloak>  <div>    {{message}}  </div></div><script type="text/javascript">  new Vue({   el:'#app',   data:{    message:'hello world'   }  })</script>

在頁面加載時會閃爍，先顯示:

<div>  {{message}}</div>

然后才會編譯為：

<div>  hello world!</div>

5. v-once

v-once關聯的實例，只會渲染一次。之后的重新渲染，實例極其所有的子節點將被視為靜態內容跳過，這可以用于優化更新性能。

<span v-once>This will never change:{{msg}}</span> //單個元素<div v-once>//有子元素  <h1>comment</h1>  <p>{{msg}}</p></div><my-component v-once:comment="msg"></my-component> //組件<ul>  <li v-for="i in list">{{i}}</li></ul>

上面的例子中，msg,list即使產生改變，也不會重新渲染。

6. v-if

v-if可以實現條件渲染，Vue會根據表達式的值的真假條件來渲染元素。

<a v-if="ok">yes</a>

如果屬性值ok為true，則顯示。否則，不會渲染這個元素。

7. v-else

v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if后面，否則不起作用。

<a v-if="ok">yes</a><a v-else>No</a>

8. v-else-if

v-else-if充當v-if的else-if塊，可以鏈式的使用多次。可以更加方便的實現switch語句。

<div v-if="type==='A'">  A</div><div v-if="type==='B'">  B</div><div v-if="type==='C'">  C</div><div v-else>  Not A,B,C</div>