过滤器<!不再适用vue3>
filter用于文本格式化。
用在插值表达式和v-bind属性绑定。
类似管道符的使用。
1
| <p>{{message|msgFilter}}</p>
|
在管道符|后，指定一个过滤器函数，message作为参数传入函数，函数必须返回处理后的结果。
msgFilter函数可在filters节点中进行定义。
1
2
3
4
5
6
7
8
9
10
11
| const vm=new Vue({
el:'#app',
data:{
message:"我是测试信息。"
},
filters: {
msgFilter(msg){
return msg+"(过滤后)"
}
},
})
|
私有过滤器和全局过滤器
在filters节点中定义的过滤器，均为私有过滤器。私有过滤器仅作用于el节点绑定的作用域中。
声明一个全局过滤器的语法：
1
2
3
4
| Vue.filter('过滤器名',(参数)=>{
...
return ...
})
|
全局过滤器作用于所有vm实例绑定的作用域中。
过滤器重名处理方式
根据就近原则，若全局处理器与私有处理器重名，则私有处理器生效。
过滤器传参
过滤器函数的第一个参数已固定，参数从第二个参数开始传递。
传参方式
1
| <p>{{message|msgFilter(arg1,arg2,...)}}</p>
|
函数定义方式
1
2
3
4
| Vue.filter('过滤器名',(固定参数,arg1,arg2,...)=>{
...
return ...
})
|
侦听器
watch用于监视数据变化，然后做出相应的动作。
在watch节点中定义函数，函数名为data节点中对于的数据名，函数的参数分别为新值和旧值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const vm = new Vue({
el: '#app',
data: {
username: "test"
},
watch: {
username(newV, oldV) {
if (newV != oldV)
$.get("http://127.0.0.1:8080/api/isExists", {
userName: this.username
},
function (res) {
if (res.status === 1)
$('label').html(res.msg)
if (res.status === 0)
$('label').html(res.msg)
})
}
}
});
|
方法与对象侦听器
方法形式的侦听器语法如上文所示。在watch节点直接定义方法，方法名对应要监听的数据名。
对象形式的侦听器，在watch节点定义侦听器对象，然后在对象中定义handle方法，以及immediate属性。
immediate属性，值为bool型，能够时侦听器在页面渲染完毕后自动执行一次再监视数据变化。deep属性，值为bool型，开启深度监听，能够监听对象中属性值的变化。
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
const vm = new Vue({
el: '#app',
data: {
username: "test",
username2: "test",
info: {
username3: "test"
}
},
watch: {
username(newV, oldV) {
$.get("http://127.0.0.1:8080/api/isExists", {
userName: this.username
},
function (res) {
if (res.status === 1)
$('#lb1').html(res.msg)
if (res.status === 0)
$('#lb1').html(res.msg)
})
},
username2: {
handler(newV, oldV) {
$.get("http://127.0.0.1:8080/api/isExists", {
userName: this.username
},
function (res) {
if (res.status === 1)
$('#lb2').html(res.msg)
if (res.status === 0)
$('#lb2').html(res.msg)
})
},
immediate: true
},
info: {
handler(newV, oldV) {
$.get("http://127.0.0.1:8080/api/isExists", {
userName: this.info.username3
},
function (res) {
if (res.status === 1)
$('#lb3').html(res.msg)
if (res.status === 0)
$('#lb3').html(res.msg)
})
},
immediate: true,
deep: true
}
}
});
|
对象子属性侦听的简写
类似普通数据监听方法的书写，但要使用单引号。如：
1
2
3
4
5
6
7
8
9
10
11
| 'info.username3'(newV, oldV) {
$.get("http://127.0.0.1:8080/api/isExists", {
userName: this.info.username3
},
function (res) {
if (res.status === 1)
$('#lb3').html(res.msg)
if (res.status === 0)
$('#lb3').html(res.msg)
})
},
|
比较
|
方法侦听器 |
对象侦听器 |
| 监听普通数据 |
√ |
√ |
| 监听对象属性 |
× |
√ |
| 立即执行一次 |
× |
√ |
计算属性
计算属性是通过一系列运算得到属性值的属性。
计算属性定义在computed节点中，并以方法的形式定义，方法必须有返回值。
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
|
<div id="app">
<p>RGB</p>
<input type="text" v-model="r">
<input type="text" v-model="g">
<input type="text" v-model="b">
<p class="box" :style="{background:rgb}">
{{rgb}}
</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
r: 0,
g: 0,
b: 0
},
computed:{
rgb(){
return `RGB(${this.r},${this.g},${this.b})`
}
}
});
</script>
|
用于网络请求，获取网络数据。
1
2
3
4
5
6
7
8
9
10
11
| axios({
method: 'GET',
url: 'http://127.0.0.1:8080/api/isExists',
params: {
userName: this.username
},
})
.then((res) => {
this.msg=res.data;
console.log(res.data);
})
|
Wechat
