北风网-Vue.js 学习笔记(2)
第二章、指令
第1节视频：指令的格式
一、Vue指令
1、在Vue.js 的模板中，除了可以有插值之外，还可以含有指令。Vue.js的指令比AngularJS要简单得多，容易掌握。
2、指令是带有 v- 前缀的特殊属性，指令的职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。
二、指令必须是属性
1、Vue.js中的指令只会以带前缀的HTML属性的形式出现：
属性：
<div v-if = "role == admin">
<ul>
<li>备份</li>
<li>......</li>
</ul>
</div>
三、指令的参数
1、有的指令能接受参数，可以在指令后以冒号指明。
<a v-bind: href = "url"> 返回首页</a>
<input type = "button" value = "登录系统" v-on:click = "login" />
四、指令的修饰符
1、修饰符是以“ . ” 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如， .prevent 修饰符告诉 v-on 指令对于触发的事件调用
event.preventDefault() ， .once 修饰符告诉指令只处理一次事件。
<form v-on:submit.prevent = "onSubmit"></form>
<input type = "button" value = "按钮" v-on:click.once = "test" />
五、指令的缩写
1、Vue.js 为 v-bind 和 v-on 指令提供了缩写语法：
（1）、 v-bind 的缩写语法
<a v-bind:href = "url">首页</a>
<a :href = "url">首页</a>
（2）、 v-on 的缩写语法
<input type = "button" value ="OK" v-on:click = "test">
<input type = "button" value ="OK" @click = "test">
举实栗（类似于百度检索）：
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>title</title> </head> <body> <div> <form action = "http://www.baidu.com/s" method = "get"> <p> <input type = "text" name = "wd" /> <input type = "submit" value = "检索" /> </p> </form> </div> <script src = "../vue.js"></script> <script src = "example_01.js"></script> </body> </html>
第2节视频：条件指令
一、v-if 条件渲染指令
1、Vue.js的指令中有一些用作条件渲染的指令，它们是 v-if 、 v-else 、 v-else-if 指令。这些条件指令执行的流程与编程语言条件语句相同。
<div v-if ="age >= 18 && sex == 'male' ">
<p>报名流程</p>
</div>
<div v-else>
<p>不能报名</p>
</div>
2、Vue.js 的条件判断与编程语言基本相同。
<div v-if ="role == 'admin' ">
管理员面板
</div>
<div v-else-if ="role == 'manager' ">
管理者面板
</div>
<div v-else>
员工面板
</div>
3、v-if 是 “真正的” 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
<div id = "test " v-if = "role == 'manager' ">
<p><input type = "button" @click = "add" value ="累加" ></p>
</div>
methods:{
add: function(){
var test = document.getElementById("test");
var e = document.createElement("p");
e.innerHTML = "HelloWorld";
test.appendChild(e);
}
}
第3节视频：v-show指令
一、v-show 条件渲染指令
1、v-show 是另一个条件渲染指令。无论表达式条件是否成立，v-show 都会把内容添加到DOM中，条件成立就用CSS将内容显示出来，否则就用CSS把内容隐藏。
<div v-show = "age >= 18 && sex == 'male' ">
<h2>报名流程</h2>
<p>......</p>
</div>
2、另外，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-showd的对比
1、v-if 指令在切换显示的时候都会把内容重新渲染一次，而 v-show 指令在切换的时候不会再渲染内容。
2、只有符合条件的情况下，v-if 指令才会渲染，然而 v-show 指令无论条件是否成立都会渲染内容。
3、v-if 指令切换时的开销大，v-show 指令切换时的开销小。v-if 指令初始渲染的开销小，v-show指令初始渲染开销大。频繁切换时，使用v-show指令，不频繁切换使用v-if 指令。
第4节视频：v-bind指令
1、v-bind 指令可以为属性绑定特定的值。
<p v-bind:class = "male == 'female' ? 'pink' : '' ">HelloWorld</p>
2、所有的属性都可以用v-bind 指令绑定。
<input type = "button" v-bind:disabled = "age < 18" value = "报名" />
3、样式属性用 v-bind 指令绑定动态值的做法非常普遍。下面的栗子中，isActive 为true 的时候，控件的 class 属性值为 active
<div v-bind:class = "{ active : isActive }"></div>
4、我们可以在参数中传入更多属性用来动态切换多个 class ，动态 CSS 也可以与普通的class 属性共存。
<div class = "static " v-bind:class = "{ active : isActive, danger: hasError }">
5、我们还可以绑定一个数据对象，甚至是数组。
<div v-bind:class = "styleObject"></div>
data:{
styleObject:{
active:true,
danger:false
}
}
数组形式：
<div v-bind:class = "[ { active: isActive}, errorClass]">
第5节视频：列表渲染
一、列表渲染指令
1、v-for 指令可以把数组的数据渲染输出到模板中。
<li v-for = "student in students">
{{student.name}}，{{student.sex}}
</li>
data: {
students:[
{name: "Jack", sex: "male"},
{name: "Tome", sex: "male"}
]
}
2、在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<li v-for ="(student,index) in students">
{{school}} {{index}}，{{student.name}}，{{student.sex}}
</li>
data:{
school:"金山小学"，
students:[
{name: "Jack", sex: "male"},
{name: "Tom", sex: "male"}
]
}
3、在 v-for 块中，我们可以获得对象的 key 和 value
<div v-for = "(value,key) in object">
{{ key }} ： {{ value }}
</div>
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age:30
}
}
第6节视频：过滤器
1、Vue.js 允许自定义过滤器，用作一些常见的文本格式化。过滤器可以用在两个地方：插值和 v-bind 指令。
2、Vue 1.0 含有一些过滤器，但是在 Vue 2.0 中，所有自带的过滤器都被废止了。因此说，需要用户自定义过滤器。
<p>{{ message | capitalize }}</p>
3、过滤器可以串联：
<p>{{ username | uppercase | abbr }}</p>
filters: {
uppercase:function(value){
return value.toUpperCase();
},
abbr:function(value){
return value.slice(0,3);
}
}
<p>{{ tel | hide }}</p>
data: {
tel: "18612345678"
},
filters: {
hide: function(val){
return val.slice(0,3) + "****" + val.slice(7,11);
}
}
