零基础学习 Vue.JS ——（3） 指令篇
在 Vue.js 的模板中,除了可以有插值之外,还可以含有指令。Vue.js 的指令比 AngularJS 要简单得多,也更容易掌握。
那么什么是指令呢？
指令是带有 v- 前缀的特殊属性,指令的职责就是当其表达式的值改变时, 相应地将某些行为应用到 DOM 上。
指令必须是属性！！！
<div v-if="role==admin">
<ul>
<li>备份</li>
<li>......</li>
</ul>
</div>
这时v-if是作为属性存在的。
<v-if test="role==admin">
<ul>
<li>备份</li>
<li>......</li>
</ul>
</v-if>
这时v-if是作为元素存在的，但是指令必须是属性，所以这么写是错误的！
指令的参数
有的指令能接收参数，可以在指令后用冒号指明
比如：
返回首页
指令的缩写
Vue.js 为 v-bind 和 v-on 指令提供了缩写语法
v-on 的缩写语法
以上是指令格式的简单介绍，接下来让我们看一下具体的指令功能
v-if 条件渲染指令
Vue.js 的指令中有一些用作条件渲染的指令
它们是v-if、v-else、v- else-if指令。
这些指令的功能和之前接触过的if,else if else基本相同。
用法：
<div v-if="role=='admin'">
管理员
</div>
<div v-else-if="role=='manager'">
管理者
</div>
<div v-else>
员工
</div>
v-if指令是真正的渲染，因为在执行过程中它对DOM的操作是销毁和重建，而不是将DOM显示或者隐藏。
<div id="test" v-if="role=='manager'">
<p>
<input type="button" @click="add" value="累加">
</p>
</div>
/*************js*************/
methods: {
add: function () {
var test = document.getElementById("test");
var e = document.createElement("p");
e.innerHTML="HelloWorld";
test.appendChild(e);
}
}
如果v-if条件成立，那么会在div中添加一个p标签，也就是增加了DOM元素。
和v-if功能有相同的的是v-show指令
v-show指令是无论表达式条件是否成立,v-show 都会把内容添加到 DOM 中,条件成立就用 CSS 将内容显示出来,否则就用 CSS 把内容隐藏。
v-show是对css进行操作，加载内容后通过控制显示隐藏来达到效果。
另外v-show指令不支持v-else指令，如果需要的话可以用多个v-show指令来完成需求
<div v-show="age>=18 && sex=='male'">
......
</div>
<div v-show="age<18 || sex!='male'">
......
</div>
v-if和v-show的对比
- v-if 指令在切换显示的时候都会把内容重新渲染一次,而 v-show 指令在 切换的时候不会再渲染内容。
- 只有符合条件的情况下,v-if 指令才会渲染,然而 v-show 指令无论条件 是否成立都会渲染内容。
- v-if 指令切换时的开销大,v-show 指令切换时的开销小。v-if 指令初始渲 染的开销小,v-show 指令初始渲染开销大。频繁切换时,使用 v-show指 令,不频繁切换使用 v-if 指令。
v-bind指令
v-bind属性可以为属性绑定特定的值，所有属性都可以用v-bind指令去绑定
当模型层data中的age值小于18时，这个按钮将会被禁用。
当模型层data中的isActive为true时，控件的class为active。
我们可以在参数中传入更多属性用来动态切换多个 class ,动态 CSS 也可
以与普通的 class 属性共存。
当模型层data中的isActive为true,hasError为true时，控件的class为active和danger。
v-bind指令我们还可以用来绑定一个数据对象或者数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color:red;
}
.danger{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[{active:isactive},error]">
hahahah
</div>
</div>
<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app=new Vue({
el:"#app",
data:{
isactive:true,
error:"danger"
}
});
结果div拥有的class是active和danger。
列表渲染指令v-for
v-for 指令可以把数组的数据渲染输出到模板中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="student in students">
{
{
student.name}},{
{
student.age}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app=new Vue({
el:"#app",
data:{
students:[
{
name:"xiaoming",age:18},
{
name:"jack",age:19}
]
}
});
在 v-for 块中,我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(student,index) in students">
{
{
school}} {
{
index+1}},{
{
student.name}},{
{
student.age}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>
students是我们定义在模型层data中的一个数组,而student是我们设置一个用在暂时放置获取到的数据的容器。因为index索引都是从0开始的，所以要得到正确的序号我们需要+1.
var app=new Vue({
el:"#app",
data:{
school:"第一中学",
students:[
{
name:"xiaoming",age:18},
{
name:"jack",age:19}
]
}
});
因为在 v-for 块中,我们拥有对父作用域属性的完全访问权限，所以我们能获取到school的值并渲染到页面。
在v-for块中，我们可以获得对象的key值和value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in object">
{
{
key}}:{
{
value}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app=new Vue({
el:"#app",
data:{
object:{
name:"xiaoming",
age:18
}
}
});