一 概述
- 侦听器-判断用户名是否被暂用
- 侦听器-immediate选项
- 侦听器-deep选项
二 侦听器-判断用户名是否被暂用
2.1 什么是watch侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
2.2 侦听器示例
布局代码
1
2
3
| <div id="app">
<input type="text" v-model="username">
</div>
|
vue代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| const vm = new Vue({
el: '#app',
data: {
username: ''
},
// 所有的侦听器，都应该被定义到 watch 节点下
watch: {
// 新值在前，旧值在后
username(newVal,oldVal){
console.log(newVal,oldVal)
}
}
})
|
2.3 使用watch检测用户名是否可用
监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const vm = new Vue({
el: '#app',
data: {
username: ''
},
watch: {
async username(newVal) {
if (newVal === '') return
// 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
$.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
console.log(result)
})
}
}
})
|
3.1 侦听器格式
- 方法格式的侦听器：无法在刚进入页面的时候，自动触发
- 对象格式的侦听器：可以通过Immediate选项，让侦听器自动触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const vm = new Vue({
el: '#app',
data: {
username: 'admin'
},
watch: {
username: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
// immediate 选项的默认值是 false
immediate: true
}
}
})
|
四 侦听器-deep选项
4.1 侦听器格式
- 方法格式的侦听器：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
- 对象格式的侦听器：可以通过deep选项，让侦听器深度监听对象中每个属性的变化
4.2 侦听器-deep示例
布局代码
1
2
3
| <div id="app">
<input type="text" v-model="info.username">
</div>
|
vue代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const vm = new Vue({
el: '#app',
data: {
// 用户的信息对象
info: {
username: 'admin',
},
watch: {
info: {
handler(newVal) {
console.log(newVal)
},
deep: true
}
}
})
|
4.2 监听对象单个属性的变化
如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器
布局代码
1
2
3
| <div id="app">
<input type="text" v-model="info.username">
</div>
|
vue代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const vm = new Vue({
el: '#app',
data: {
// 用户的信息对象
info: {
username: 'admin',
}
},
watch: {
// 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
'info.username'(newVal) {
console.log(newVal)
}
}
})
|