《Vue零基础入门教程》第十七课：侦听器
往期内容
《Vue零基础入门教程》第九课：插值语法细节
《Vue零基础入门教程》第十课：属性绑定指令
《Vue零基础入门教程》第十一课：事件绑定指令
《Vue零基础入门教程》第十二课：双向绑定指令
《Vue零基础入门教程》第十三课：条件渲染
《Vue零基础入门教程》第十四课：列表渲染
《Vue零基础入门教程》第十五课：样式绑定
《Vue零基础入门教程》第十六课：计算属性
1) 什么是侦听器
可以通过watch配置项, 监听data中已经存在的属性的改变
2) 语法
watch: {// 监听data中的firstName属性firstName() {// 执行一系列的操作},
},示例
<!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="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">姓: <input type="text" v-model="lastName" /> <br />名: <input type="text" v-model="firstName" /> <br />全名(侦听器实现): {{fullName}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {lastName: '',firstName: '',fullName: '',}},watch: {// 侦听lastName的变化, 当lastName变化时, 执行该函数lastName() {this.fullName = this.lastName + this.firstName},// 侦听firstName的变化, 当firstName变化时, 执行该函数firstName() {this.fullName = this.lastName + this.firstName},},}).mount('#app')</script></body>
</html>
3) 特点
在watch对应的回调函数中, 可以获取到新值和 旧值
示例
const vm = new Vue({el: '#app',data: {firstName: '',lastName: '',},// 使用watch这个配置项watch: {// 在watch对应的回调函数中, 可以得到新值和旧值// 对于简单数据类型, 可以获取新旧值// 对于引用数据类型, 不能获取旧值firstName(newValue, oldValue) {// 一对多: 监听某一个属性的改变, 做一系列的操作console.log('firstName改变了...')console.log('新的值:', newValue)console.log('旧的值:', oldValue)},},
})4) 深度监听
默认情况下watch配置项只会对data中第一层的数据进行侦听.
如果第一层的数据是引用类型(如, 数组, 对象). 需要开启深度监听
示例
<!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="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">姓: <input type="text" v-model="lastName" /> <br />名: <input type="text" v-model="firstName" /> <br /><!-- 侦听器: 一因多果(关注一个已经存在的属性的改变) --><!-- 1. 如果是基本类型数据, 可以获取到新旧值2. 默认是浅层次的侦听3. 如果是引用类型, 如果需要深层次数据的改变, 开启深度侦听-->全名(侦听器实现): {{fullName}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {lastName: '',firstName: '',fullName: '',obj: { name: 'xiaoming' },}},watch: {// 侦听lastName的变化, 当lastName变化时, 执行该函数lastName(newValue, oldValue) {console.log('新的值: ', newValue)console.log('旧的值: ', oldValue)this.fullName = this.lastName + this.firstName},// 侦听firstName的变化, 当firstName变化时, 执行该函数firstName() {this.fullName = this.lastName + this.firstName},// obj() {// console.log('obj被修改了')// },obj: {handler() {console.log('obj被修改了...')},deep: true,},},}).mount('#app')</script></body>
</html>
5) 回调执行的时机
默认情况下
watch在DOM更新之前调用. 得到的是 DOM更新之前的数据
可以通过flush: 'post'设置在DOM更新之后调用回调
示例
<!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="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">{{msg}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {msg: 'hello',}},watch: {// 默认情况下. watch在DOM更新之前调用. 得到的是 DOM更新之前的数据// msg() {// console.log(app.innerHTML)// },msg: {handler() {console.log('更新之后的DOM', app.innerHTML)},flush: 'post',},},}).mount('#app')</script></body>
</html>
相关文章：
《Vue零基础入门教程》第十七课：侦听器
往期内容 《Vue零基础入门教程》第九课：插值语法细节 《Vue零基础入门教程》第十课：属性绑定指令 《Vue零基础入门教程》第十一课：事件绑定指令 《Vue零基础入门教程》第十二课：双向绑定指令 《Vue零基础入门教程》第十三课&…...
【人工智能-基础】SVM中的核函数到底是什么
文章目录 支持向量机（SVM）中的核函数详解1. 什么是核函数？核函数的作用：2. 核技巧：从低维到高维的映射3. 常见的核函数类型3.1 线性核函数3.2 多项式核函数3.3 高斯径向基函数（RBF核）4. 总结支持向量机（SVM）中的核函数详解 支持向量机（SVM，Support Vector Machine）…...
RoBERTa- 稳健优化的 BERT 预训练模型详解
一、引言 自 BERT（Bidirectional Encoder Representations from Transformers）问世，预训练语言模型在自然语言处理（NLP）领域掀起革命浪潮，凭卓越表现大幅刷新诸多任务成绩。RoBERTa 承继 BERT 架构&#x…...
20.（开发工具篇github）Git上次超过100M单文件
1:安装lfs git lfs install 2: 撤销所有更改（包括未暂存的更改） git reset --hard 3:查找大于100M的文件 find ./ -size 100M 4:加入到 track git lfs track “./data/geo_tif_zzjg/2023年_种植结构影像.tif” git lfs track “./data/geo_tif_zz…...
Redis使用场景-缓存-缓存击穿
前言 之前在针对实习面试的博文中讲到Redis在实际开发中的生产问题，其中缓存穿透、击穿、雪崩在面试中问的最频繁，本文加了图解，希望帮助你更直观的了解缓存击穿😀 （放出之前写的针对实习面试的关于Redis生产问题的博…...
uniapp Electron打包生成桌面应用exe文件
1.uniapp Electron打包生成桌面应用exe文件 随着跨平台开发的需求日益增长，UniApp 成为了开发者们的首选之一。通过 UniApp，你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端…...
【机器学习】Sigmoid函数在深层神经网络中存在梯度消失问题，如何设计一种改进的Sigmoid激活函数，既能保持其概率预测优势，又能避免梯度消失？
为了解决 Sigmoid 函数在深层神经网络中的梯度消失问题，可以设计一种改进的 Sigmoid 激活函数，使其同时具备以下特性： 减缓梯度消失问题：避免在输入值远离零时梯度趋于零的问题。保持概率预测能力：保留 Sigmoid 的单调…...
SpringBoot中实现EasyExcel实现动态表头导入（完整版）
前言 最近在写项目的时候有一个需求，就是实现动态表头的导入，那时候我自己也不知道动态表头导入是什么，查询了大量的网站和资料，终于了解了动态表头导入是什么。 一、准备工作 确保项目中引入了处理 Excel 文件的相关库ÿ…...
前端用到的一些框架
拖拽框架：Vue.Draggable Vue.Draggable是一款基于Sortable.js拖拽插件 官网：https://github.com/SortableJS/Vue.Draggable 分屏插件：fullPage.js fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站…...
“量子跃迁与数据织网：深入探索K最近邻算法在高维空间中的优化路径、神经网络融合技术及未来机器学习生态系统的构建“
🎼个人主页：【Y小夜】 😎作者简介：一位双非学校的大二学生，编程爱好者， 专注于基础和实战分享，欢迎私信咨询！ 🎆入门专栏：🎇【MySQL࿰…...
10个Word自动化办公脚本
在日常工作和学习中，我们常常需要处理Word文档（.docx）。 Python提供了强大的库，如python-docx，使我们能够轻松地进行文档创建、编辑和格式化等操作。本文将分享10个使用Python编写的Word自动化脚本，帮助新…...
【青牛科技】D35摄氏温度传感器芯片，低功耗，静态工作电流小于60 μA
概述： D35是基于模拟电路的一种基本摄氏温度传感器，其作用是将感测的环境温度/物体温度精确的以电压的形式输出，且输出电压与摄氏温度成线性正比关系，转换公式为Vo0 10 mV / ℃*T（℃），0C时输出为…...
无分类编址的IPv4地址
/20含义：前20比特位为网络号，后面32-2012为主机号 路由聚合：找共同前缀 所有可分配地址的主机都能接收广播地址，...
LeetCode - #150 逆波兰表达式求值
文章目录 前言1. 描述2. 示例3. 答案关于我们 前言 我们社区陆续会将顾毅（Netflix 增长黑客，《iOS 面试之道》作者，ACE 职业健身教练。）的 Swift 算法题题解整理为文字版以方便大家学习与阅读。 LeetCode 算法到目前我们已经更新…...
如何避免数据丢失:服务器恢复与预防策略
在当今数字时代，数据对于个人和企业来说都至关重要。数据丢失可能会导致严重的财务损失、业务中断甚至法律责任。因此，采取措施防止数据丢失至关重要。本文将讨论服务器数据丢失的常见原因以及如何防止数据丢失的有效策略。 服务器数据丢失的常见原因 服…...
pytorch中model.eval的理解
在复现simsam的过程中，看到在线性评估部分的训练函数中设置了model.eval,不太理解，印象中一直觉得，model.eval会影响梯度的回传，这里来拨乱反正一下。 事实上，model.eval()主要影响 BatchNorm 和 Dropout 层的行为&am…...
【AI+教育】一些记录@2024.11.19-11.25
通向AGI之路：大型语言模型（LLM）技术精要 https://zhuanlan.zhihu.com/p/597586623 在Bert和GPT模型出现之前，NLP领域流行的技术是深度学习模型，而NLP领域的深度学习，主要依托于以下几项关键技术࿱…...
CSS变量用法及实践
目录 一、基本用法 1.1、定义变量 1.2、使用变量 1.3 、修改变量的值 二、命名规范 2.1、使用有意义的名称 2.2、使用命名空间 三、变量值类型 3.1、如果变量值是一个字符串，可以与其他字符串拼接，例如： 3.2、 如果变量值是数值&a…...
【Python网络爬虫笔记】8- （BeautifulSoup）抓取电影天堂2024年最新电影，并保存所有电影名称和链接
目录 一. BeautifulSoup的作用二. 核心方法介绍2.1 构造函数2.2 find()方法2.3 find_all()方法2.4 select()方法 三. 网络爬虫中使用BeautifulSoup四、案例爬取结果 一. BeautifulSoup的作用 解析HTML/XML文档：它可以将复杂的HTML或XML文本转换为易于操作的树形结构…...
STM32 ADC --- 知识点总结
STM32 ADC — 知识点总结 文章目录 STM32 ADC --- 知识点总结cubeMX中配置注解单次转换模式、连续转换模式、扫描模式单通道采样的情况单次转换模式：连续转换模式： 多通道采样的情况禁止扫描模式（单次转换模式或连续转换模式）单次…...
使用PHP脚本实现GitHub API搜索与数据库同步
在现代软件开发中，自动化数据收集和同步是提高效率的关键。今天，我将分享一个我最近开发的PHP脚本，它能够自动从GitHub API搜索特定关键词的仓库，并将这些数据同步到MySQL数据库中。这个过程不仅涉及到API调用和数据处理ÿ…...
使用docker-compese部署SFTPGo详解
官网：SFTP & FTP as a Managed Service (SaaS) and On-premise 一、SFTPGo简介 SFTPGo 是一款功能强大的文件传输服务器软件。它支持多种协议（SFTP、SCP、FTP/S、WebDAV、HTTP/S）和多个存储后端。 借助 SFTPGo，您可以利用本地…...
JavaScript根据数据生成柱形图
分析需求 // 定义一个数组来存储四个季度的数据 dataArray = []// 循环4次，获取用户输入的数据并存储到数组中 for i from 0 to 3// 获取用户输入的数据inputData = 获取用户输入的第(i + 1)季度的数据// 将数据存入数组dataArray[i] = inputData// 遍历数组，根据数据生成柱…...
Android笔记【12】脚手架Scaffold和导航Navigation
一、前言 学习课程时，对于自己不懂的点的记录。 对于cy老师第二节课总结。 二、内容 1、PPT介绍scaffold 2、开始代码实操 先新建一个screen包，写一个Homescreen函数，包括四个页面。 再新建一个compenent包，写一个displayText…...
)
VirtualBox注册已有虚拟机:未能打开位于虚拟电脑E_INVALIDARG (0X80070057)
错误如下 解决办法1 产生虚拟机的机器，与当前使用机器不兼容。建议在当前机器重新产生虚拟机。比如我家里电脑是WIN7，公司电脑是WIN11。 原来的虚拟机内容，找老机器导出。 解决办法2（存疑） 搜索到一个说法…...
开发中使用UML的流程_08 PIM-4：定义操作及方法
目录 1、序列图概述 2、序列图调用方式 3、创建消息与销毁消息 4、几项建议 1、序列图概述 在PIM-4中，系统分析员可以用序列图来表达，系统内部一群对象合力完成某一个系统用例时，执行期间的交互情形。之后，序列图可能通过设计…...
软件设计 —— 检测按键单击、多击、长按或组合动作
目 录 按键单一动作识别按键组合动作识别 按键单一动作识别 带有按键的作品设计时，按键动作检测是必不可少的，如何判断按键是单击、双击、三击和长按动作呢？ 1、定时器定时一个10ms周期 2、把按键检测函数放到这个周期内执行，即…...
【GPT】主要影响代谢的因素
代谢的快慢受到多种因素的影响，包括遗传、生活习惯和健康状况等。以下是主要影响代谢的因素： 1. 年龄 影响：年龄增长会导致基础代谢率（BMR）逐渐降低，这是因为随着年龄增加，肌肉量减少ÿ…...
LLM Agents can Autonomously Hack Websites 论文阅读
paper:LLM Agents can Autonomously Hack Websites abstract:近年来，大型语言模型（llm）已经变得越来越有能力，现在可以与工具交互（例如，调用函数），读取文档，并递归地调用自己。因此，这些llm现在可以作为代理自主运行。随着这些代理能力的提高，最近的工作推测了LLM代…...
STM32标准库-FLASH
FLASH模仿EEPROM STM32本身没有自带EEPROM，但是自带了FLASH存储器。 STM32F103ZET6自带 1M字节的FLASH空间，和 128K64K的SRAM空间。 STM32F4 的 SPI 功能很强大，SPI 时钟最高可以到 37.5Mhz，支持 DMA，可以配置为 SPI协…...
【机器学习】机器学习的基本分类-监督学习-决策树-ID3 算法
ID3（Iterative Dichotomiser 3）是决策树的一种构造算法，由 Ross Quinlan 在 1986 年提出。它主要用于分类问题，通过信息增益选择特征来构建决策树。ID3 假设数据是离散型特征，且不支持连续型数据。 1. 核心思想 划分标…...
nginx配置http及https
nginx配置http及https 1.动静分离2.负载均衡3.配置https4.请求重定向5.常用参数配置介绍 现在日常工作中的项目大多数都是采用前后端分离，就用到了nginx进行反向代理、处理静态资源等；因此，记录整理了nginx一些常用的配置； 1.动静…...
威联通-001 手机相册备份
文章目录 前言1.Qfile Pro2.Qsync Pro总结 前言 威联通有两种数据备份手段：1.Qfile Pro和2.Qsync Pro，实践使用中存在一些区别，针对不同备份环境选择是不同。 1.Qfile Pro 用来备份制定目录内容的。 2.Qsync Pro 主要用来查看和操作文…...
柔性数组详解+代码展示
系列文章目录 🎈 🎈 我的CSDN主页:OTWOL的主页，欢迎！！！👋🏼👋🏼 🎉🎉我的C语言初阶合集：C语言初阶合集，希望能…...
【oracle数据库提示oracle initialization or shutdown in process】
问题如下截图： 解决方案： 1.进入sqlplus，下图中红圈即处理方式 备注：redo03.log是数据库路径“E:\app\Administrator\oradata\MKDB3D\”下最新的归档日志文件 2.alter database open resetlogs 3.netmanager测试登录是否成功&am…...
面试题-RocketMQ的基本架构、支持的消息模式、如何保证消息的可靠传输
相关问题 1、RocketMQ的基本架构是怎样的？请简述各组件的作用。 2、RocketMQ支持哪几种消息模式（如点对点、发布/订阅）？请简要说明它们的区别。 3、如何使用Java客户端实现一个简单的消息生产者和消费者？ 4、RocketMQ…...
VUE脚手架练习
脚手架安装的问题： 1.安装node.js,配置环境变量,cmd输入node -v和npm -v可以看到版本号（如果显示不是命令，确认环境变量是否配置成功，记得配置环境变量之后重新打开cmd，再去验证） 2.在安装cnmp时…...
在Scala中栈的认识
package gjhs114import scala.collection.mutableobject fx {队列 // def main(args: Array[String]): Unit { // val q1 mutable.Queue(1) // q1.enqueue(2) // q1.enqueue(3) // q1.enqueue(4) // // println(q1.dequeue())//出队 1 // println(q1.dequ…...
小程序-基于java+SpringBoot+Vue的音乐播放器小程序设计与实现
项目运行 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.硬件环境：…...
)
在21世纪的我用C语言探寻世界本质——字符函数和字符串函数(2)
人无完人，持之以恒，方能见真我！！！ 共同进步！！ 文章目录 一、strncpy函数的使用二、strncat函数的使用三、strncmp函数的使用四、strstr的使用和模拟实现五、strtok函数的使用六、strerror和perr…...
oracle to postgresql使用Oracle Golden Gate同步数据
参考 https://www.ktexperts.com/replication-to-gcp-postgresql-using-oracle-goldengate/ https://www.ktexperts.com/how-to-change-remote-trail-file-location-in-oracle-goldengate/...
基于Java Springboot校园导航微信小程序
一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术：Html、Css、Js、Vue、Element-ui 数据库：MySQL 后端技术：Java、Spring Boot、MyBatis 三、运行环境 开发工具：IDEA/eclipse微信开发…...
【软件安全专题文档】系统安全设计规范，网络与信息系统安全设计规范，信息系统安全架构方案设计规范（Word原件）
1.1安全建设原则 1.2 安全管理体系 1.3 安全管理规范 1.4 数据安全保障措施 1.4.1 数据库安全保障 1.4.2 操作系统安全保障 1.4.3 病毒防治 1.5安全保障措施 1.5.1实名认证保障 1.5.2 接口安全保障 1.5.3 加密传输保障 1.5.4终端安全保障 软件项目全周期文档清单部分文件概览&a…...
【青牛科技】SCU2N60E/SCD2N60E N沟道增强型功率场效应晶体管采用Silicore先进的VDMOS技术生产
描述： 这些N沟道增强型功率场效应晶体管采用Silicore先进的VDMOS技术生产，为设计人员提供了卓越的开关性能、坚固的器件设计、低导通电阻和成本效益。 特点： 在VGS10V时，600V，2.0A，Rdson4.5Ω（…...
常见限流算法介绍 和 Spring Cloud Sentinel使用方式
sentinel 限流及熔断 为什么要限流呢？对于一些突发流量，如双11大促，甚至恶意攻击，这时系统的访问量远远超出系统的承受能力，如果不做任何保护措施， 服务器资源会耗尽，进而系统不可用。 限流就…...
工业齐套管理虚拟现实仿真模拟软件
工业齐套管理虚拟现实仿真模拟软件是与法国最大的汽车制造商合作开发的一款虚拟现实仿真模拟软件，借助身临其境的虚拟现实环境，无需停止生产线，即可模拟仓库和提货区域。 工业齐套管理虚拟现实仿真模拟软件不仅适用于汽车工业，安全…...
性能优化之状态管理最佳实践)
HarmonyOS(60)性能优化之状态管理最佳实践
状态管理最佳实践 1、避免在循环中访问状态变量1.1 反例1.2 正例 2、避免不必要的状态变量的使用3、建议使用临时变量替换状态变量3.1 反例3.2 正例 4、参考资料 1、避免在循环中访问状态变量 在应用开发中，应避免在循环逻辑中频繁读取状态变量，而是应该…...
Qt5语法的connect指定多个重载信号槽函数中的具体某一个
Qt5新语法的connect函数，使用起来更加简洁明了，但如果信号槽有同名的多个重载函数，只用类名和函数名就无法绑定，这时，可以使用qOverload来指定参数类型，例如： connect(ui->comboBox, qOverlo…...
Mysql远程工具Navicat Premium连接报错1130、2003解决方案
这里写自定义目录标题 1130报错：2003报错： 1130报错： 原因： 连接异常 1130，没有远程登录权限。 解决方案ÿ…...
ShardingSphere介绍
1. ShardingSphere简单介绍 ShardingSphere是一款目前业内比较流行的分库分表框架，到现在为止有接近十年的开发历程了，其 已经不仅仅只是⽤来做分库分表，⽽是形成了⼀个围绕 分库分表核⼼的技术⽣态。他的核⼼功能已经包括了数据分⽚、分布式…...