Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。
結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。
下面介紹幾種常用指令(v-if、v-show、v-else、v-for、v-bind、v-on)，看vue.js如何讓將數據渲染進入DOM系統：
！注意 如果以下代碼不好用，請注意頁面是否引入了可用版本的vue.js。引入途徑分為兩種，一種是下載獨立的vue.js官方下載地址。也可以使用CDN方法，但是目前國內的不太穩定，推薦下載到本地BootCDN(國內)、unpkg(國外)、cdnjs(國外)。
1. v-if
條件渲染指令，根據其后的表達式的布朗值判斷是否渲染該元素。
<div id="view">
<p v-if="Male">男</p>
<p v-if="Female">女</p>
<p v-if="age>20">年齡:{{age}}</p>
</div>
<script>
var vm= new Vue({
el:"#view",
data:{
Male:true,
Female: false,
age:29,
}
})
</script>
頁面效果如下：
查看頁面元素，可以發現黃色標記區域是v-if指令渲染出來的頁面元素,只渲染了符合條件的元素。
2. v-show
接著v-if直接說v-show，上面說v-if只渲染符合條件的元素，而v-show則會渲染全部的元素，讓我們把代碼中的v-if全部替換為v-show，看看有什么區別。
可以看到頁面的顯示與之前的是沒有區別的，但是在頁面代碼中多了一個p標簽，并且style='display=none'，這說明了雖然不符合條件，但v-show依然渲染全部元素。
3. v-else
v-else指令必須要和v-if、v-show指令搭配在一起才能使用，如果v-if、v-show指令的表達式為true，那么else元素不顯示；如果v-if、v-show指令的表達式為false，則else元素顯示；
<div id="view">
<p v-if="Male">我是個男人</p>
<p v-else>{{message}}</p>
</div>
<script>
new Vue({
el:"#view",
data:{
Male:false,
message:"我是個女人"
}
})
</script>
4. v-for
作用是遍歷數組元素，“item in items”，items是數組，item是在數組中的元素。講個一個數組中包含著很多的人的手機號碼，那么就可以使用v-for遍歷輸出在頁面中。
<div id="view">
<table>
<tr>
<th>姓名</th>
<th>號碼</th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td>{{ user.num }}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#view',
data: {
users: [{
name: '張三',
num: 12345,
}, {
name: '李四',
num: 67890,
}, {
name: '王五',
num: 12345,
}, {
name: '趙六',
num: 3697810,
}]
}
})
</script>
以上的實例是在model層保存數據，然后再view層使用v-for方法去遍歷model層的數組，遍歷后將數據顯示在頁面。
5. v-bind
這個指令用于實時更新HTML元素中的屬性，先看下面的實例：
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<body>
<div id="view">
選中更改字體顏色<input type="checkbox" v-model='red'>
<div v-bind:class="{'red':red }">字體</div>
</div>
<script>
new Vue({
el: '#view',
data: {
red:false
}
})
</script>
點擊checkbox時，字體會更改顏色，也就是添加.red類。view層的input使用了v-model綁定了.red類（v-model創建了雙向數據綁定，這里先不細說v-model）。在view層，v-bind負責它所在元素的屬性，是否添加red屬性。在model層，默認這個.red類為false,即為不添加，當更改input中checkbox的布朗值，model層的屬性也會隨之更改。v-bind屬性可以有很多應用的場景，如網頁一些需要高亮提示的地方。
6. v-on
用來監聽指定元素的DOM事件，比如說點擊事件，下面的實例和我們平常onclick()觸發某個函數是很相似的。
<div id="view">
<button v-on:click="helo">Helo</button>
</div>
<script>
var Data ={
message:'Hello World'
}
new Vue({
el:'#view',
data:Data,
methods:{
helo:function(){
alert(this.message);
}
}
})
</script>
常用的指令大概就是上面的這幾個，在編寫的時候要注意不要經常寫分號。筆者習慣了寫js代碼，就一時有些改不過來。
希望大家喜歡這個系列，喜歡的話記得點擊那顆小心心，會給我很多鼓勵哦！
祝大家周末愉快。
