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 部署上线清除浏览器缓存的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
相信大部分兄弟都体验过Vite了,都知道它很快,在学习的时候,官网上的各种配置也是看的眼花缭乱,不知道哪些是必要掌握的,下面这篇文章主要给大家介绍了关于Vite常见配置选项的相关资料,需要的朋友可以参考下2024-09-09
今天小编就为大家分享一篇解决Vue 项目打包后favicon无法正常显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue生命周期activated之返回上一页不重新请求数据操作
这篇文章主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了antd日期选择器禁止选择当天之前的时间操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue中自定义日志打印插件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue实现按钮的长按功能,点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件，本文通过实例代码给大家分享实现思路，感兴趣的朋友一起看看吧2022-01-01
这篇文章主要介绍了vue3.0-monaco组件封装存档代码解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
文章介绍了在使用keep-alive缓存组件时,如何在组件被缓存后清理定时器以避免干扰其他组件的逻辑,通过在deactivated钩子中清理定时器,可以确保组件被缓存时不会继续运行定时器,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要为大家介绍了前端高效配置化vue2 element ui省时又省力,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论