Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的內置指令，如下：

v-if指令

v-for指令

v-show指令

v-else指令

v-bind指令

v-on指令

1：v-if指令

v-if指令是條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法如下：

v-if="expression"

expression是一個返回布爾值的表達式，表達式可以是一個布爾值屬性，也可以是一個返回布爾值的運算式。

Eg:

 <div id="app">  <h1>Hello, Vue.js!</h1>  <h1 v-if="yes">Yes!</h1>  <h1 v-if="no">No!</h1>  <h1 v-if="age >= 18">Age: {{ age }}</h1>  <h1 v-if="name.indexOf('li') >= 0">Name: {{ name }}</h1> </div> var app= new Vue({  el: '#app',  data: {  yes: true,  no: false,  age: 20,  name: 'lililili'  } })

        //數據的yes屬性為true，所以"Yes!"會被輸出；

//數據的no屬性為false，所以"No!"不會被輸出；

//運算式age >= 18返回true，所以"Age: 28"會被輸出；

//運算式name.indexOf('li') >= 0返回false，所以"Name: lililili"會被輸出。

V-if只能控制一個元素上的是否顯隱，對于多個元素控制我們可以使用一個template元素實現

在vue中我們想使用條件模板直接在dom元素上使用v-if指令，v-if指令的值表示vue實例對象上的數據值

Tempalte是vue提供的一個自定義元素，寫在這個里面的 元素會根據template v-if屬性來控制顯隱，在渲染以后這個元素會被vue刪除掉，（v-if指令元素保留）

<div id="app"><template v-if="type"><span>{{type}}</span> <span> | </span></template><strong>{{title}}</strong></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript">// 數據var data = {title: '哈哈哈',type: '科技'}var app = new Vue({el: '#app',data: data})

2：v-for指令

v-for指令基于一個數組渲染一個列表，它和JavaScript的遍歷語法相似：

v-for="item in items"

items是一個數組，item是當前被遍歷的數組元素。

Eg:

<ul id="app"><li v-for="item in list">{{item}}</li></ul>/var data = ['快樂大本營','奔跑吧兄弟','極限挑戰']var app = new Vue({el: '#app',data: {list: data}})

與v-if一樣v-for也可以應用在template元素上，此時可以實現對多組元素的for循環

Eg:

<ul id="app"><template v-for="item in list"><li><span v-if="item.type">{{item.type}} | </span><strong>{{item.title}}</strong></li><br></template></ul>var data = [{type: '湖南',title: '快樂大本營'},{type: '浙江',title: '奔跑吧兄弟'},{type: '東方',title: '極限挑戰'}]var app = new Vue({el: '#app',data: {list: data}})