侦听器
当数据发生变化的时候,及时作出响应处理
基本使用:
创建一个侦听器,就是在vm上去挂载一个watch属性,用来监听data中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h2>{{state}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '消息',
state:'未更改'
},
watch: {
//绑定侦听器,侦听属性 侦听器的名字可以直接用要侦听的数据名
msg: function (newVal, oldVal) { //两个参数 更新后的数据--更新前的数据
//逻辑代码
this.state='已更改'
}
}
})
</script>
</body>
</html>
购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>商品名称:<input type="text" v-model="name"></div>
<button @click="cut">减少一个</button>
购买数量{{count}}
<button @click="add">增加一个</button>
<button @click="addCart">加入购物车</button>
<div :key="index" v-for="(item,index) in list">{{item.name}}</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
count: 0,
isMax: false,
list: []
},
methods: {
cut: function () {
this.count -= 1
this.isMax = false
},
add: function () {
this.count += 1
},
addCart: function () {
this.list.push({
name: this.name,
count: this.count
})
}
},
watch: {
count: function (newVal, oldVal) {
console.log(newVal + '---' + oldVal);
if (newVal > 10) {
this.isMax = true
} else if(newVal < 0){
this.count = 0
}
},
name:function(){
this.count=0
this,isMax=false
},
isMax:function(newVal){
if(newVal){
alert('别买了,没钱了,差不多行了');
}
},
list:function(){
console.log('购买的数量发生了变化');
}
}
})
</script>
</body>
</html>
其实这个案例非常简单,数据产生变化的时候一定伴随着发生了事件,所以用侦听器监听事件下的数据变化即可
侦听器的高级用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<!--
侦听器的高级用法:
handler方法:当属性发生改变的时候,会触发handler方法
immediate属性:如果需要在最初绑定的时候就触发一次,需要使用这个immediate属性
deep属性:对对象的某个属性监听,通过指明某个对象的属性
-->
<div id="app">
名称: <input type="text" v-model="product.name">
数量: <input type="text" v-model="product.count">
标题: <input type="text" v-model="product.title">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
product: {
name: '',
count: '',
title: ''
}
},
// 常规的侦听方式
// watch: {
// // name: function (newVal,oldVal) {
// // console.log(newVal, oldVal);
// // },
// 使用ieeediate属性
// name: {
// handler: function (newVal, oldVal) {
// console.log(newVal, oldVal);
// },
// immediate: true //先触发一次 取值是布尔值 true是执行
// }
// }
//使用deep属性
watch:{
product:{
handler:function(newVal){
console.log(newVal);
},
deep:true
}
}
})
</script>
</body>
</html>
immediate属性可以在初始绑定时先侦听一次
deep属性可以深度侦听整个对象的变化
感谢伙伴们耐心观看,本文是个人的学习笔记,今年27岁转行前端程序员,笔记中如有错误还请指正,非常感谢! 如果本篇笔记能给你带来帮助,还请点个关注点个赞 感谢支持 您的支持也是我不断更新学习笔记的动力~
