vue ---- 监听器

watch 监听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

 const vm = new Vue({el: '#app',data: {username: ''},//监听器需要定义在watch节点下watch: {//监听 username 值的变化，要监听哪个值，就做为方法名username(newVal,oldVal){console.log(newVal,oldVal)}}

案例
应用场景：登录的用户校验

数据绑定使用 v-model
方法格式的监听器使用
对象格式监听器使用
发送Ajax请求

<body><div id="app"><input type="text" v-model="username"></div><script src="./lib/vue-2.6.12.js"></script><script src="./lib/jquery-v3.6.0.js"></script><script>const vm = new Vue({el: "#app",data: {username: 'admin'},watch: {/*username(newVal,oldVal){console.log("新值： " + newVal, "旧值： " + oldVal)}*///建议定义成方法/*username(newVal){if(newVal === '') return;$.get('https://www.escook.cn/api/finduser/' + newVal,function(result){console.log(result);})}*/username: {handler(newVal) {//判空if (newVal === '') return;$.get('https://www.escook.cn/api/finduser/' + newVal, function(result) {console.log(result);})},//默认为false,不自动触发immediate: true}}});</script>
</body>

案例
如果监听的是一个对象，对象中的属性的变化不会被监听到，处理方法如下

<body><div id="app"><input type="text" v-model="info.username"></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: "#app",data: {info: {username: ''}},watch: {//使用对象格式定义方式，打开deep的值，默认为false// info: {//     handler(newVal) {//         console.log(newVal);//     },//     deep: true// }//单独监听对象中的某个属性的变化'info.username': {handler(newVal){console.log(newVal);}}}});</script>
</body>

vue ---- 监听器相关推荐

Vue监听器的基本使用(监听属性-深度监听和立即执行)
一:vue监听器-基本使用语法是: watch: {"被监听的属性名" (newVal, oldVal){}} 方便理解,示例代码: <template><di ...
Vue监听器与监听滥用
昨天工作的时候遇到了这么一个问题 watch里面是这么写的然后想了想 id of null id?什么id? 想了想是prop嘛就是userinfo 的id 没有呗为啥没有先不管这些我们 ...
模糊查询 vue 监听器/侦听器实现版本
<template><div><input type="text" v-model="keyWord&q ...
尚硅谷在线教育五：尚硅谷在线教育讲师管理开发
文章目录 1. 前端登录功能的地址改变 1.1. 修改配置文件的请求地址 2.2登录调用的两个方法 2.2.1编写login和info接口 3 最终测试以及出现的问题 3.1跨域问题 3.2 跨域解决 ...
2021-05-25
VUE:监听器&&助记码(包括汉字转拼音以及其首字母) 1.监听器: 2.助记码: 一.编写汉字和编码文件对应的js: pyconst.js 二.把此文件导入js方法中,重新定义一个j ...
003-读书笔记-Vue官网计算属性与监听器
1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性,和 data 方法中返回的对象中的属性是等同的存在.通常来说,计算属性可以简单理解: 计算属性其实就是 Vue 实例的一个属性计 ...
vue计算属性与监听器的区别
vue计算属性与监听器的区别计算属性(computed) 监听器(watch) 监听data中没有的值监听data中有的值使用时触发使用不会触发值有变化就触发值有变化就触发没有settt ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
vue 计算属性和监听器区别
上海疫情还没过去,裁员的噩耗又来了,,,快卷不动了!最近火急火燎的搞面试,趁复习面试题,总结一下.关于计算属性和监听器vue官方文档写的很简单,博客上也大相径庭.(我也只记的大概,哈哈)懒得查来查去所 ...

vue ---- 监听器

vue ---- 监听器相关推荐

最新文章

热门文章