Vue.js 使用了基于 HTML 的模版語(yǔ)法捐下，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)使鹅。
結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)盐捷， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上孽江。
下面介紹幾種常用指令(v-if、v-show宣鄙、v-else袍镀、v-for、v-bind冻晤、v-on)苇羡，看vue.js如何讓將數(shù)據(jù)渲染進(jìn)入DOM系統(tǒng)：
！注意 如果以下代碼不好用鼻弧，請(qǐng)注意頁(yè)面是否引入了可用版本的vue.js设江。引入途徑分為兩種，一種是下載獨(dú)立的vue.js官方下載地址攘轩。也可以使用CDN方法叉存，但是目前國(guó)內(nèi)的不太穩(wěn)定，推薦下載到本地BootCDN(國(guó)內(nèi))度帮、unpkg(國(guó)外)歼捏、cdnjs(國(guó)外)。
1. v-if
條件渲染指令笨篷，根據(jù)其后的表達(dá)式的布朗值判斷是否渲染該元素瞳秽。
<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>
頁(yè)面效果如下：
查看頁(yè)面元素，可以發(fā)現(xiàn)黃色標(biāo)記區(qū)域是v-if指令渲染出來(lái)的頁(yè)面元素,只渲染了符合條件的元素率翅。
2. v-show
接著v-if直接說(shuō)v-show练俐，上面說(shuō)v-if只渲染符合條件的元素，而v-show則會(huì)渲染全部的元素安聘，讓我們把代碼中的v-if全部替換為v-show痰洒，看看有什么區(qū)別。
可以看到頁(yè)面的顯示與之前的是沒(méi)有區(qū)別的浴韭，但是在頁(yè)面代碼中多了一個(gè)p標(biāo)簽丘喻，并且style='display=none'，這說(shuō)明了雖然不符合條件念颈，但v-show依然渲染全部元素泉粉。
3. v-else
v-else指令必須要和v-if、v-show指令搭配在一起才能使用，如果v-if嗡靡、v-show指令的表達(dá)式為true跺撼，那么else元素不顯示；如果v-if讨彼、v-show指令的表達(dá)式為false歉井，則else元素顯示；
<div id="view">
<p v-if="Male">我是個(gè)男人</p>
<p v-else>{{message}}</p>
</div>
<script>
new Vue({
el:"#view",
data:{
Male:false,
message:"我是個(gè)女人"
}
})
</script>
4. v-for
作用是遍歷數(shù)組元素哈误，“item in items”哩至，items是數(shù)組，item是在數(shù)組中的元素蜜自。講個(gè)一個(gè)數(shù)組中包含著很多的人的手機(jī)號(hào)碼菩貌，那么就可以使用v-for遍歷輸出在頁(yè)面中。
<div id="view">
<table>
<tr>
<th>姓名</th>
<th>號(hào)碼</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>
以上的實(shí)例是在model層保存數(shù)據(jù)重荠，然后再view層使用v-for方法去遍歷model層的數(shù)組箭阶，遍歷后將數(shù)據(jù)顯示在頁(yè)面。
5. v-bind
這個(gè)指令用于實(shí)時(shí)更新HTML元素中的屬性戈鲁，先看下面的實(shí)例：
<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>
點(diǎn)擊checkbox時(shí)仇参，字體會(huì)更改顏色，也就是添加.red類(lèi)婆殿。view層的input使用了v-model綁定了.red類(lèi)（v-model創(chuàng)建了雙向數(shù)據(jù)綁定冈敛，這里先不細(xì)說(shuō)v-model）。在view層鸣皂，v-bind負(fù)責(zé)它所在元素的屬性抓谴，是否添加red屬性。在model層寞缝，默認(rèn)這個(gè).red類(lèi)為false,即為不添加癌压，當(dāng)更改input中checkbox的布朗值，model層的屬性也會(huì)隨之更改荆陆。v-bind屬性可以有很多應(yīng)用的場(chǎng)景滩届，如網(wǎng)頁(yè)一些需要高亮提示的地方。
6. v-on
用來(lái)監(jiān)聽(tīng)指定元素的DOM事件被啼，比如說(shuō)點(diǎn)擊事件帜消，下面的實(shí)例和我們平常onclick()觸發(fā)某個(gè)函數(shù)是很相似的。
<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>
常用的指令大概就是上面的這幾個(gè)浓体，在編寫(xiě)的時(shí)候要注意不要經(jīng)常寫(xiě)分號(hào)泡挺。筆者習(xí)慣了寫(xiě)js代碼，就一時(shí)有些改不過(guò)來(lái)命浴。
希望大家喜歡這個(gè)系列娄猫，喜歡的話記得點(diǎn)擊那顆小心心贱除，會(huì)給我很多鼓勵(lì)哦！
祝大家周末愉快媳溺。
