Vue监听器简单使用及注意事项说明
更新时间：2024年08月15日 09:30:47 作者：专注写bug
这篇文章主要介绍了Vue监听器简单使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
监听器，在官网中称为侦听器，个人还是喜欢称之为监听器。
官方文档如下：
编写简单demo
侦听器在项目中通常用于监听某个属性变量值的变化，并根据该变化做出一些处理操作。
最简单的案例如下所示：
<template>
<h1>侦听器</h1>
<p>{{ msg }}</p>
<button @click="changeMsgHandler">点击一下 就送屠龙宝刀</button>
</template>
<script>
export default{
data(){
return{
msg:"专注写 bug"
}
},
methods:{
changeMsgHandler(){
var newMessage = this.msg.split('').reverse().join('');
this.msg = newMessage;
}
},
// 侦听器
watch:{
// 监听器的名称必须与被监听的属性名称保持一致
msg(newVal,oldVal){
console.log("newVal===>"+newVal);
console.log("oldVal===>"+oldVal);
}
}
}
</script>页面初次加载时，页面中显示效果如下所示：
当按钮点击后，页面与控制台中的信息如下所示：
注意事项
对某个变量进行侦听变化时，需要使用到watch选项。
侦听器watch中的方法名必须与实际变量名称保值一致，否则会出现无法侦听的问题。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue数组中出现__ob__:Observer无法取值问题的解决方法
__ob__: Observer这个属性其实是Vue监控变量产生的,下面这篇文章主要给大家介绍了关于Vue数组中出现__ob__: Observer无法取值问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue3.0父子传参,子修改父数据的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue如何监听页面缓存事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
elementui的el-popover修改样式不生效的解决
在使用element-ui的时候，有一个常用的组件，那就是el-popover，本文就介绍一下elementui的el-popover修改样式不生效的解决方法，感兴趣的可以了解一下2021-06-06
这篇文章主要介绍了Vue实现dom元素拖拽并限制移动范围的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于vue路由守卫及路由守卫无限循环问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
本篇文章主要介绍了详解Vue微信公众号开发踩坑全记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了vue3+elementPlus项目支持设置默认附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
渲染器用于完成渲染操作,比如在浏览器平台上渲染器可以将虚拟DOM转换为真实DOM,本文将通过一个简单例子来带大家理解Vue中渲染器的工作过程,并通过代码示例讲解的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论