指令
指令是什么？由于Vue.js實現(xiàn)了MVVM模式官研，將DOM和Model進行了雙向綁定卓箫，那么當(dāng)數(shù)據(jù)模型中的數(shù)據(jù)變化的時候，就不需要我們進行DOM操作贴唇。指令就是當(dāng)數(shù)據(jù)變化的時候，按照指令規(guī)則將變化體現(xiàn)到DOM中飞袋。這樣我們就只關(guān)注數(shù)據(jù)變化即可，而不必管理DOM的狀態(tài)和變化了链患。
指令 (Directives) 是帶有
v-前綴的特殊屬性巧鸭。指令屬性的值預(yù)期是單個JavaScript表達式 (v-for是例外情況)。指令的職責(zé)是麻捻，當(dāng)表達式的值改變時纲仍，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM贸毕。
Vue.js中定義了許多指令郑叠，下面介紹一些常用的指令。
- v-if
- v-else
- v-show
- v-for
- v-bind
- v-on
v-if和v-else是用來按照模型數(shù)據(jù)中布爾型變量或者表達式的值來渲染DOM的明棍。下面的例子將根據(jù)學(xué)生的模型數(shù)據(jù)乡革，顯示學(xué)生的信息。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" cellpadding="0" width="30%">
<tr>
<th>姓名</th>
<td>{{name}}</td>
</tr>
<tr>
<th>性別</th>
<!--if條件-->
<td v-if="sex==1">男</td>
<td v-if="sex==0">女</td>
</tr>
<tr>
<th>生日</th>
<td>{{birthday}}</td>
</tr>
<tr>
<th>選擇課程</th>
<td>{{course}}</td>
</tr>
<tr>
<th>成績評定</th>
<!--if....else條件-->
<td v-if="score>=60">及格</td>
<td v-else>不及格</td>
</tr>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
name : '張三',
sex : 1,
birthday : '1998-10-10',
course : '編譯原理',
score : 86
}
// 創(chuàng)建一個 Vue 實例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
運行效果如下：
image.png
v-show和v-if運行的效果一樣，但是有區(qū)別沸版。v-if對于不滿足條件的HTML嘁傀，不加入DOM中，而v-show不管條件是否成立视粮，都存在于DOM中细办，只是條件不滿足的時候，其CSS的display屬性為none蕾殴。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 id="aaa" v-if="yes">Hello World!</h1>
<h1 id="bbb" v-show="yes">Hello World!</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var model = {
yes:false
}
// 創(chuàng)建一個 Vue 實例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
運行的結(jié)果兩個h1都看不到笑撞，但是他們在DOM中的情況不同，用開發(fā)者工具可以看到如下內(nèi)容钓觉，id為aaa的元素在DOM中不存在娃殖，而id為bbb的元素存在，樣式為none：
image.png
v-for是用來遍歷數(shù)組议谷，集合等模型數(shù)據(jù)的炉爆。也是用來顯示表格，列表等必不可少的內(nèi)容卧晓。v-for在遍歷的時候可以定義獲取到的對象變量芬首，如果需要獲取循環(huán)因子，那么在后面加入循環(huán)因子變量名逼裆。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
</head>
<body>
<div id="app" class="container col-xs-4">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>序號</th>
<th>學(xué)號</th>
<th>姓名</th>
<th>專業(yè)</th>
</tr>
<tr v-for="item,index in studs">
<td>{{index+1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.major}}</td>
</tr>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var model = {
studs:[{
id:1,
name:'張三',
major:'計算機科學(xué)與技術(shù)'
},{
id:15,
name:'李四',
major:'自動化'
},{
id:16,
name:'王五',
major:'軟件工程'
}]
}
// 創(chuàng)建一個 Vue 實例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
運行的結(jié)果如下：
image.png
v-bind是一個非常重要的指令郁稍，他是用來根據(jù)模型數(shù)據(jù)設(shè)置HTML元素屬性值的指令。例如胜宇，有.aaa的樣式和.bbb樣式耀怜，如果DOM需要根據(jù)模型中的變量來設(shè)置HTML屬性，那么就需要使用v-bind指令桐愉。v-bind指令常用與綁定CSS的class屬性和style樣式财破，也可以用于其他屬性的綁定。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<style>
.aaa{
color:orangered;
}
</style>
</head>
<body>
<div id="app" class="container col-xs-4">
<div> </div>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>序號</th>
<th>學(xué)號</th>
<th>姓名</th>
<th>專業(yè)</th>
</tr>
<tr v-for="item,index in studs" v-bind:id="'id-'+item.id">
<td>{{index+1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td v-bind:class="item.major=='自動化'?'aaa':''">{{item.major}}</td>
</tr>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var model = {
studs:[{
id:1,
name:'張三',
major:'計算機科學(xué)與技術(shù)'
},{
id:15,
name:'李四',
major:'自動化'
},{
id:16,
name:'王五',
major:'軟件工程'
}]
}
// 創(chuàng)建一個 Vue 實例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
運行結(jié)果是从诲，CSS按照模型中的變量進行CSS的class綁定左痢。效果如下：
image.png
用開發(fā)者工具查看DOM，id值按照模型進行綁定系洛。
image.png
v-on指令是用來綁定HTML元素事件的俊性。可以通過調(diào)用模型中的方法來操作模型數(shù)據(jù)描扯。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<style>
.aaa{
color:orangered;
}
</style>
</head>
<body>
<div id="app" class="container col-xs-4">
<div> </div>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>序號</th>
<th>學(xué)號</th>
<th>姓名</th>
<th>專業(yè)</th>
<th>操作</th>
</tr>
<tr v-for="item,index in studs" v-bind:id="'id-'+item.id">
<td>{{index+1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td v-bind:class="item.major=='自動化'?'aaa':''">{{item.major}}</td>
<td><button class="btn btn-danger btn-sm" v-on:click="del(item.id)">刪除</button></td>
</tr>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var model = {
studs:[{
id:1,
name:'張三',
major:'計算機科學(xué)與技術(shù)'
},{
id:15,
name:'李四',
major:'自動化'
},{
id:16,
name:'王五',
major:'軟件工程'
}]
}
// 創(chuàng)建一個 Vue 實例
new Vue({
el: '#app',
data: model,
methods:{
del:function (id) {
alert('刪除學(xué)號是'+id+'的學(xué)生')
}
}
})
</script>
</body>
</html>
運行后定页，點擊刪除按鈕，可以調(diào)用模型中的del方法绽诚，并傳遞學(xué)號給del方法典徊。運行結(jié)果如下：
image.png
