【Vue2】 Watch 监听器
监听器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
<script src="./../lib/jquery-3.6.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>
</head>
<body>
<!--
1.什么是watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下:
-->
<div id="app">
<input type="text" v-model="username">
<br>
<input type="password" v-model="form.password">
</div>
<script> const VIEW_MODEL1 = new Vue({
el: '#app',
data: {
username: '爱大叔大婶',
form: {
password: '12131243'
}
},
watch: {
/**
* 监听的函数名就是变量名
* newValue, 新的val值
* oldValue 旧的值变化
*
* 问题1：
* 如果组件刚加载进入就存在默认值，则监听器是不会触发的
* 里面的校验接口也就不会触发，要想组件进入时就要对默认值校验
*/ // 写法一
// username(newValue, oldValue) {
// console.log(newValue)
// // 输入项清空则不发请求
// if (!newValue) return
// // 发起请求，检查用户名是否占用
// $.get(`https://www.escook.cn/api/finduser/${newValue}`, function(result) {
// console.log(result)
// })
// } // 写法二，改换成对象形式
username: {
immediate: true, // 要求组件加载时立刻触发监听器（也就是刚进入组件，手动触发一次）
handler(newValue, oldValue) { // 监听函数
console.log(newValue)
// 输入项清空则不发请求
if (!newValue) return
// 发起请求，检查用户名是否占用
$.get(`https://www.escook.cn/api/finduser/${newValue}`, function(result) {
console.log(result)
})
}
}, /**
* deep属性，用来监听属性内的属性变化
*/
// 写法一
// form: {
// deep: true, // 开启深度监听
// handler(newValue, oldValue) {
// // 通过属性访问变化的值
// console.log(newValue.password)
// }
// } // 写法二
// 通过点属性的方式写法繁琐，简化写法
'form.password'(newValue, oldValue) {
console.log(newValue)
}
}
})
</script>
</body>
</html>
【Vue2】 Watch 监听器的更多相关文章
- Vue2.0 【第一季】第5节 v-on：绑定事件监听器
目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...
- 【Vue2.x源码系列07】监听器watch原理
上一章 Vue2计算属性原理,我们介绍了计算属性是如何实现的?计算属性缓存原理?以及洋葱模型是如何应用的? 本章目标 监听器是如何实现的? 监听器选项 - immediate.deep 内部实现 初始 ...
- Vue2.0源码阅读笔记--双向绑定实现原理
上一篇 文章 了解了Vue.js的生命周期.这篇分析Observe Data过程,了解Vue.js的双向数据绑定实现原理. 一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向 ...
- 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...
- 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- vue2.0之render函数
虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
随机推荐
- c# winfrom DataGridView 动态UI下载功能(内含GIF图) || 循环可变化的集合 数组 datatable 等
Gif演示 分解步骤 1,使用组件DataGridView 2,使用DataSource来控制表格展示的数据来源(注意:来源需要是DataTable类型) 3,需要用到异步线程.如果是不控制数据源的话 ...
- kettle从入门到精通 第五十二课 ETL之kettle Avro output
1.上一节课我们学习了avro input,本节课我们一起学习下avro out步骤. 本节课通过json input 加载json文件,通过avro out 生成avro二进制文件,写日志步骤打印日 ...
- FlashDuty Changelog 2023-09-21 | 自定义字段和开发者中心
FlashDuty:一站式告警响应平台,前往此地址免费体验! 自定义字段 FlashDuty 已支持接入大部分常见的告警系统,我们将推送内容中的大部分信息放到了 Lables 进行展示.尽管如此,我们 ...
- node.js常用命令总结
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,用于构建快速.可扩展的网络应用程序.它使用事件驱动.非阻塞 I/O 模型,使其非常适合构建数据密集型的实时应用 ...
- IDEA环境编译Spring源码
一.下载源码 1.官网下载 官网地址 如下图 2.github git下载 github地址 如下图 3.gitee git下载(国内推荐使用) gitee地址 如图 查看对应的gradle版本 在下 ...
- Python做点击率数据预测
点击率(Click-Through Rate, CTR)预测是推荐系统.广告系统和搜索引擎中非常重要的一个环节.在这个场景中,我们通常需要根据用户的历史行为.物品的特征.上下文信息等因素来预测用户点击 ...
- [flask]统一API响应格式
前言 在设计API返回内容时,通常需要与前端约定好API返回响应体内容的格式.这样方便前端进行数据反序列化时相应的解析处理,也方便其它服务调用.不同公司有不同的响应内容规范要求,这里以常见的JSON响 ...
- nginx 添加 模块
--- title: nginx 添加 模块 date: 2019-10-31 11:21:46 categories: tags: - config - nginx --- 说明: 已经安装好的Ng ...
- Ubuntu下的NVIDIA显卡【安装与卸载、CUDA安装】
@ 目录 0. 显卡GPU的基础知识 1. 显卡安装 Optional: 卸载显卡(当你要换显卡的时候) 2. 安装CUDA 碎碎念:主要是把显卡相关的整合出来,基础知识后面再放上来 显卡安装后可以有 ...
- LaTeX 编辑协作平台 Overleaf 安装和使用教程
在学术界和科技行业,LaTeX 已成为撰写高质量文档的标准工具.然而,传统的 LaTeX 使用体验常常伴随着以下挑战: 学习曲线陡峭 环境配置复杂 多人协作困难 实时预览不便 当然,市面上不乏很多在线 ...