侦听器的基本使用

最新推荐文章于 2023-01-15 21:02:54 发布

Mikeylllllll

最新推荐文章于 2023-01-15 21:02:54 发布

阅读量74

点赞数

文章标签： servlet java spring

本文链接：https://blog.csdn.net/Mikeylllllll/article/details/127197334

版权

【侦听器的基本结构】
作用：用来侦听数据有没有变化,一旦有变化就调用函数

语法: 在和data、methods这些平级的位置写一个watch

new Vue({
el:'',
data:{},
methods:{},
//侦听器
watch:{
// 参数一：改变前的值
// 参数二：改变后的值

要侦听的数据(newValue,oldValue){

}
}
})
基本使用：
<body>
<div id="app">
<button @click="msg = '我好喜欢'">点我有惊喜</button>
<p>{{ msg }}</p>
</div>

<script src="../vue.js"></script>

<script>
new Vue({
el:'#app',
data:{
msg:'你好坏',

},
//写侦听器的地方
watch:{
//侦听的数据变化
//基本数据类型，这两个参数有意义。
msg(newValue,oldValue){
//侦听到数据变化之后，需要完成的行为。
console.log('数据改变了',newValue,oldValue);
}
}
})
</script>
</body>

数组中使用侦听器
【对数组进行侦听】
数组是应用类型,存在比较复杂的侦听规则。
从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue b.当你修改数组的长度时,例如:vm.items.length = newlength

2.使用标准方法修改数组可以被侦听到
https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

push() 尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除
splice()删除、添加、替换
sort()排序
reverse()逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

<body>
<div id="app">
<ul>
<li v-for = "item in list" key:>{{item}}</li>
</ul>
<button @click="list.push('李嘉图')">添加</button>
<button @click="list.pop()">删除</button>

<button @click="list[0] = '绘梨衣' ">修改第一项</button>
<button @click="list.splice(1,0,'零')">修改第一项</button>

</div>
<script src="../vue.js"></script>

<script>
new Vue({
el:'#app',
data:{
list:['诺诺','凯撒','楚子航','路明非']
},
watch:{
//复杂数据类型，这两个参数没有意义，因为地址没变。
//所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，就算写也只写一个。
list(newValue,oldValue){
console.log('数据改变了',newValue,oldValue);
}
}
})
</script>