监听器
侦听器:用于监听数据变化,然后做事
侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
watch_name(newVal,oldVal){}
- 方法格式的侦听器
缺点1：无法在刚进入页面的时候，自动触发！！！
缺点2：如果侦听的是一个对象Object，如果对象中的属性发生了变化，不会触发侦听器！！！
- 对象格式的侦听器
好处1：可以通过 *immediate* 选项，让侦听器自动触发！！！
好处2：可以通过 *deep* 选项，让侦听器深度监听对象中每个属性的变化！！！
方法格式的侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch！</title>
</head>
<body>
<!-- --------------------------------------这里是方法格式的侦听器 ----------------------------------->
<div id="app">
<input type="text" v-model="username">
<input type="text" v-model="username1">
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script src="./lib/jquery-v3.6.0.js"></script>
<script>
var i = 0;
const vm = new Vue({
el: '#app',
data: {
username: 'admin',
shownow: 'shownow',
username1:'shownow'
},
watch: {
username(newVal, oldVal) {
console.log("监听到了变化", oldVal, newVal);
console.log("原本是" + oldVal);
console.log("现在是" + newVal);
},
// 监听器的作用:监视username1,用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
username1(newVal) {
if (newVal === '') return
$.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
console.log(result)
})
}
}
})
</script>
</body>
</html>
对象格式的侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器</title>
</head>
<body>
<!-- --------------------------------------这里是对象格式的侦听器 ----------------------------------->
<div id="app2">
<!-- 对象格式:单个属性 -->
<input type="text" v-model="shownow">
<!-- 对象格式:多个属性 -->
<input type="text" v-model="info.username">
<input type="text" v-model="info.address.city">
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script src="./lib/jquery-v3.6.0.js"></script>
<script>
var i = 0;
const vm1 = new Vue({
el: '#app2',
data: {
username3: '三号用户',
info: {
username: 'admin是属性之一',
address: {
city: '北京是属性之二'
}
},
watch: {
shownow: {
// 侦听器的处理函数
handler(oldVal, newVal) {
if (i == 0) {
console.log("自动触发:第一次对象格式的侦听处理");
console.log(i);
} else {
console.log("这是第" + i + "次对象格式的侦听处理", newVal, oldVal)
console.log(i);
}
i++;
},
// immediate 的作用是：控制侦听器是否自动触发一次,打开网页时就能看到. 默认值是 false
immediate: true
},
info: {
handler(newVal) {
console.log("开启深度监听任何一个属性变化了都会触发", newVal)
},
// 开启深度监听
deep: true
}
// 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
// 'info.username'(newVal) {
// console.log(newVal)
// }
}
}
})
</script>
</body>
</html>