vue之监听器的使用案例详解

 更新时间:2021年09月13日 15:23:57   作者:danniyedan  
这篇文章主要介绍了vue之监听器的使用案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

第一种,用jquery的ajax发请求 

用户注册时,判断用户名不能重复,可以用到监听器。监听器,用watch,需要监听哪个值的变化,就把这个值,放在watch里面。 

拿到新值,调用接口,去请求后端,判断用户名是否已存在。

 此时,遇到的问题,用户刷新页面的时候,并不会触发监听器,只是在username值发生变化的时候,才会触发监听器,改进方法:将方法格式的侦听器改成对象格式的侦听器。

优先推荐方法格式的监听器(最简单),如果刷新进来就需要执行一次,就定义成对象的监听器。 

当一个对象有多个属性的时候,我们必须用对象格式的监听,如果需求对象任意一个属性改变,都能触发监听器,就必须开启deep属性

当对象有多个属性,开启deep:true。 

如果要监听的是对象的某个子属性变化,则用下面的写法:

总结:

到此这篇关于vue之监听器的使用案例详解的文章就介绍到这了,更多相关vue之监听器的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue二次封装axios流程详解

    Vue二次封装axios流程详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,下面这篇文章主要给大家介绍了关于Vue3引入axios封装接口的两种方法,需要的朋友可以参考下
    2022-10-10
  • uni-app无限级树形组件简单实现代码

    uni-app无限级树形组件简单实现代码

    文章介绍了如何在uni-app中简单封装一个无限级树形组件,该组件可以无线嵌套,展开和收缩,并获取子节点数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-01-01
  • Vue(element ui)中操作row参数的使用方式

    Vue(element ui)中操作row参数的使用方式

    这篇文章主要介绍了Vue(element ui)中操作row参数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue中的get方法\post方法如何实现传递数组参数

    vue中的get方法\post方法如何实现传递数组参数

    这篇文章主要介绍了vue中的get方法\post方法如何实现传递数组参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vite vue3多页面入口打包以及部署踩坑实战

    Vite vue3多页面入口打包以及部署踩坑实战

    因为我们公司的项目是多页面应用,不同于传统单页面应用,一个包就可以了,下面这篇文章主要给大家介绍了关于Vite vue3多页面入口打包以及部署踩坑的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue3+echarts实现好看的圆角环形图

    vue3+echarts实现好看的圆角环形图

    这篇文章主要介绍了vue3+echarts实现好看的圆角环形图效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue中的v-for列表循环示例详解

    Vue中的v-for列表循环示例详解

    循环使用v-for指令,v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名,下面这篇文章主要给大家介绍了关于Vue中v-for列表循环的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue测试环境打包与生产环境打包文件数量不一致解决方案

    vue测试环境打包与生产环境打包文件数量不一致解决方案

    这篇文章主要为大家介绍了vue测试环境打包与生产环境打包文件数量不一致的解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)

    element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)

    这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    触底时,继续向后端发请求获取下一页的数据,请求回来的数据合并给options,这篇文章主要介绍了ElementPlus 中el-select自定义指令实现触底加载请求options数据的操作方法,需要的朋友可以参考下
    2024-08-08

最新评论