Vdue之模版语法&指令&过滤器&计算属性&监听属性
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，
结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
html模板语法：
这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。
插值
文本
使用{{msg}}的形式，标签将会被替换成为数据对象（data）上msg属性值，当绑定的数据对象上的msg属性值发生变化时，插值处的值也会发生变化（双向绑定）
示例：上节课的hello vue示例使用的就是插值。
html
{{}}的方式将数据处理为普通文本，如果要输出html，需要使用v-html指令
示例：
在data中定义一个html属性，其值为html
data: {
html: ''
}
1
2
3
在html中取值
1
属性
HTML属性中的值应使用v-bind指令。类型与jQuery中的$(“#xxx”).attr(propName, propVal)
示例，以修改元素的class属性为例：
定义一个样式
1
2
3
4
5
6
在data中定义一个属性，其值为上面定义的样式名
data: {
red: 'redClass'
}
1
2
3
在html使用v-bind指令设置样式
设置之前: aaaa
设置之后: aaa
1
2
在浏览器中可以看到相应的效果
表达式
几种常见的表达式：
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }} 三元运算符
我的Id是js动态生成的
示例1：
在html中加入元素，定义表达式
{{str.substr(0,6).toUpperCase()}}
在data中加入一个属性，名为str与html中对应
data: {
str: 'hello vue'
}
查看效果：字符串被截取，并转换为大写
1
2
3
4
5
6
7
8
9
示例2：
{{ number + 1 }}
在data中加入一个属性，名为str与html中对应
data: {
number: 10
}
在data中定义的number值将会被加1
1
2
3
4
5
6
示例3：
这是一个三元运算，如果ok为true，表达式值为YES ，如果ok为false则表达式值为NO
{{ ok ? 'YES' : 'NO' }}
在data中加入一个属性，名为str与html中对应
data: {
ok: true
}
1
2
3
4
5
6
7
8
示例4：
演示id属性绑定和动态赋值
data: {
bookId: 'book001',
id: 'book002'
}
该示例可以通过开发者工具查看生成的id属性值。
1
2
3
4
5
6
7
8
9
10
11
12
指令
指令指的是带有“v-"前缀的特殊属性
1.2.1 核心指令
1.2.1.1 v-if |v-else-if|v-else
根据其后表达式的bool值进行判断是否渲染该元素， 指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)
示例：
type == A
type == B
other value
JS
var vm = new Vue({
el: '#app',
data: {
type: 'C'
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
可以修改data中的type值观察页面的输出。
注： js = == === 之间的区别
一个等号是赋值操作，==先转换类型再比较，===先判断类型，如果不是同一类型直接为false
alert(1 == “1”); // true
alert(1 === “1”); // false
1.2.1.2 v-show
与v-if类似，只是不会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”。
当v-show 表达式true则显示，否则不显示。
注意：使用v-show，虽然不显示，但在页面的dom中是存在的，只是display属性为none
示例： 在HTML中加入如下内容
show == yes
在data中定义show属性
var vm = new Vue({
el: '#app',
data: {
show: 'yes'
}
});
1
2
3
4
5
6
7
8
9
10
11
修改show值，观察页面显示
1.2.1.3 v-for
循环遍历
遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
遍历对象: v-for=“(value,key,index) in stu”, value属性值, key属性名，index下标
示例：
定义一个div，使用v-for指令输出，items是vue实例中data中定义的对象数组
{{item.name}} -- {{item.id}}
{{key}}-{{o}}
var vm = new Vue({
el: '#app',
data: {
itmes:[
{name: 'zs',age:18},
{name: 'ww',age:19},
{name: 'ls',age:20},
{name: 'zl',age:21}
],
obj: {
name:'张三',
age: 21,
addr: '湖南长沙'
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1.2.1.4 v-on|v-model|v-for
创建一组多选框，可以获取到用户选择项
{{index}}: v-model="selected">{{item.name}}
var vm = new Vue({
el: '#app',
data: {
type: 'C',
show: 'no',
items:[
{name: '长沙',id:18},
{name: '昆明',id:19},
{name: '武汉',id:20},
{name: '南京',id:21}
],
obj: {
name:'张三',
age: 21,
addr: '湖南长沙'
},
selected:[]
},
methods: {
getSelected: function() {
console.log(this.selected);
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1.2.1.5 参数 v-bind:href,v-on:click
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
注意：在动态参数中，作为参数的变量名（如：attrname）要全部小写，否则无效 ！！
var vm = new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com',
attrname:'href',
evname: 'click'
},
methods: {
clickme: function() {
console.log("点到我了");
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.2.1.6 简写
Vue为v-bind和v-on这两个最常用的指令，提供了特定简写
指令 简写 示例
v-bind:xxx :xxx v-bind:href 简写为 :href
v-on:xxx @xxx v-on:click 简写为 @click
2. 过滤器
vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符"|"
2.1 局部过滤器
局部过滤器的定义：
var vm = new Vue({
filters: {
'filterName': function(value) {
//过滤器实现
}
}
});
过滤器的使用
{{ name | capitalize }}
1
2
3
4
5
6
7
8
9
10
11
注1：过滤器函数接受表达式的值作为第一个参数 注2：过滤器可以串联 {{ message | filterA | filterB }} 注3：过滤器是JavaScript函数，因此可以接受参数： {{ message | filterA('arg1', arg2) }} 示例：
{{msg | toUpperCase}}
var vm = new Vue({
el: '#app',
data: {
msg:"hello vue"
},
//局部过滤器
filters:{
toUpperCase: function(value) {
return value.toUpperCase();
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2.2 全局过滤器
拷入date.js（日期格式化）放入项目js目录中，在页面中引入。
定义全局过滤器
//全局过滤器
Vue.filter('fmtDate',function(value) {
return fmtDate(value, 'yyyy年MM月dd日')
});
1
2
3
过滤器的使用
{{date | fmtDate}}
1
2
3
计算属性
计算属性用于快速计算视图（View）中显示的属性，这些计算将被缓存，并且只在需要时更新
使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了
声明计算属性的格式：
computed:{
xxx:function(){
}
}
1
2
3
4
示例： 使用计算属性，计算书本的总价
定义测试数据，和计算属性，计算属性遍历书本记录，计算总价
var vm = new Vue({
el: '#app',
data: {
//定义测试数据
books: [
{name:'红楼梦', price:"120"},
{name:'三国演义', price:"100"},
{name:'水浒传', price:"90"},
]
},
//计算属性
computed: {
compTotal: function() {
let sum = 0;
for(index in this.books) {
sum += parseInt(this.books[index].price);
}
return sum;
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
计算属性在页面中的使用
{{book.name}} -> {{book.price}}
总价：{{compTotal}}
1
2
3
4
5
6
7
关于var 与 let
var声明为全局属性
let为ES6新增，可以声明块级作用域的变量（局部变量）
建议使用let声明变量
4.监听属性
使用场景：我们可以使用监听属性watch来响应数据的变量， 当需要在数据变化时执行异步或开销较大的操作时，这种方式比较有用。回想一下是否做过下拉列表的级联选择？
watch声明语法:
watch: {
xxxx: function(val) {
//监听器实现
}
}
1
2
3
4
5
示例： 米和厘米的单位换算
设置监听器：
var vm = new Vue({
el: '#app',
data: {
m: 1,
cm: 100
},
//设置监听属性
watch: {
m: function(val) {
if(val)
this.cm = parseInt(val) * 100;
else
this.cm = "";
},
cm: function(val) {
if(val)
this.m = parseInt(val) / 100;
else
this.m = "";
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
HTML中使用v-model实现与数据的双向绑定
米:
厘米:
———————————————