指令
指令是什么？由于Vue.js实现了MVVM模式，将DOM和Model进行了双向绑定，那么当数据模型中的数据变化的时候，就不需要我们进行DOM操作。指令就是当数据变化的时候，按照指令规则将变化体现到DOM中。这样我们就只关注数据变化即可，而不必管理DOM的状态和变化了。
指令 (Directives) 是带有
v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式 (v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
Vue.js中定义了许多指令，下面介绍一些常用的指令。
- v-if
- v-else
- v-show
- v-for
- v-bind
- v-on
v-if和v-else是用来按照模型数据中布尔型变量或者表达式的值来渲染DOM的。下面的例子将根据学生的模型数据，显示学生的信息。
<!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
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
运行效果如下：
image.png
v-show和v-if运行的效果一样，但是有区别。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
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
运行的结果两个h1都看不到，但是他们在DOM中的情况不同，用开发者工具可以看到如下内容，id为aaa的元素在DOM中不存在，而id为bbb的元素存在，样式为none：
image.png
v-for是用来遍历数组，集合等模型数据的。也是用来显示表格，列表等必不可少的内容。v-for在遍历的时候可以定义获取到的对象变量，如果需要获取循环因子，那么在后面加入循环因子变量名。
<!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 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" 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>学号</th>
<th>姓名</th>
<th>专业</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:'计算机科学与技术'
},{
id:15,
name:'李四',
major:'自动化'
},{
id:16,
name:'王五',
major:'软件工程'
}]
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
运行的结果如下：
image.png
v-bind是一个非常重要的指令，他是用来根据模型数据设置HTML元素属性值的指令。例如，有.aaa的样式和.bbb样式，如果DOM需要根据模型中的变量来设置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 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" 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>学号</th>
<th>姓名</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>
</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:'计算机科学与技术'
},{
id:15,
name:'李四',
major:'自动化'
},{
id:16,
name:'王五',
major:'软件工程'
}]
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model
})
</script>
</body>
</html>
运行结果是，CSS按照模型中的变量进行CSS的class绑定。效果如下：
image.png
用开发者工具查看DOM，id值按照模型进行绑定。
image.png
v-on指令是用来绑定HTML元素事件的。可以通过调用模型中的方法来操作模型数据。
<!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 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" 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>学号</th>
<th>姓名</th>
<th>专业</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:'计算机科学与技术'
},{
id:15,
name:'李四',
major:'自动化'
},{
id:16,
name:'王五',
major:'软件工程'
}]
}
// 创建一个 Vue 实例
new Vue({
el: '#app',
data: model,
methods:{
del:function (id) {
alert('删除学号是'+id+'的学生')
}
}
})
</script>
</body>
</html>
运行后，点击删除按钮，可以调用模型中的del方法，并传递学号给del方法。运行结果如下：
image.png
网友评论