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
}
})
3:v-show指令
v-show也是條件渲染指令，控制元素顯隱，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設置CSS的style屬性。
V-if是false會將元素在dom文檔中刪除
V-show是false是將元素的display設置none
V-if會刪除元素，v-show只是做樣式顯隱，會保留頁面中
4:v-else指令
可以用v-else指令為v-if或v-show添加一個“else塊”。v-else元素必須立即跟在v-if或v-show元素的后面——否則它不能被識別。
v-else元素是否渲染在HTML中，取決於前面使用的是v-if還是v-show指令。
v-if為true，后面的v-else不會渲染到HTML；v-show為tue，但是后面的v-else渲染到HTML。
5:v-bind指令
v-bind指令可以在其名稱后面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），例如：v-bind:class=”’’
v-bind:argument="expression"
6:v-on指令
v-on指令用於給監聽DOM事件，它的用語法和v-bind是類似的，例如監聽<a>元素的點擊事件：
<a v-on:click="doSomething">
語法：V-on:click=“事件回調函數的名稱”
定義事件的回調函數，在vue的實例化對象的methods屬性中定義
Methods他的值是一個對象
對象是屬性名稱表示事件的回調函數名稱
對象的屬性值是一個函數，就是事件的回調函數
他的this指向的是vue實例化對象，因此通過它我們可以獲取或者設置vue實例化對象上屬性
它默認有個參數是事件對象，這個事件對象可以訪問該事件的相關信息$event傳遞參數可以訪問到事件對象
當我們在使用事件時候，可以傳遞一些參數，此時在vue的事件回調函數中它的參數與事件使用時候傳入的參數是一致的
<input type="text" v-model="msg">
<button v-on:click="showTitle(msg, $event, 'hello')">btn</button>
<button v-on:click="showTitle">btn2</button>
<h1>{{title}}</h1>
var app = new Vue({
el: '#app',
data: {
title: '',
msg: ''
},
methods: {
// 屬性名稱表示回調函數的名稱
showTitle: function () {
// console.log(this)
// console.log(arguments) 傳的參數都能訪問到 msg, $event, 'hello'
// 通過this訪問vue實例化對象上的其他屬性和方法。Data.title data.aa
this.title = '快樂大本營';
},
aa: function () {
}
}
})