当前位置： 首页 > news >正文

Vue--1.7watch侦听器（监视器）

news 2025/9/8 15:43:07

作用：监视数据变化，执行一些业务逻辑或异步操作。

语法：

1.简单写法->简单类型数据，直接监视

    const app = new Vue({el: '#app',data: {words:''},watch:{words(newValue,oldValue){}}})
    const app = new Vue({el: '#app',data: {obj: {words: ''}},watch: {'obj.words'(newValue) {}}})

案例：翻译软件

<!doctype html>
<html><head><meta charset="utf-8">
</head><body><div id="app"><textarea rows="10" cols="40" v-model="obj.words"></textarea><textarea rows="10" cols="40" v-model="result"></textarea></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {obj: {words: ''},result: '',timer: null},watch: {'obj.words'(newValue) {clearTimeout(this.timer)//防抖this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.data}, 300)}}})</script>
</body></html>

2.完整写法->添加额外配置项

1）deep:true对复杂类型深度监视

2）immediate:true初始化立刻执行一次handler方法

    const app = new Vue({el: '#app',data: {obj: {words: '',lang:''}},watch: {数据属性名:{deep:true,//深度监视immediate: true,//立即执行，一进入页面handler就立刻执行handler(newValue){}}}})

案例：翻译软件Pro

<!doctype html>
<html><head><meta charset="utf-8">
</head><body><div id="app">翻译成语言：<select v-model="obj.lang"><option value="english">英语</option><option value="franch">法语</option><option value="italy">意大利</option></select><br><br><textarea rows="10" cols="40" v-model="obj.words"></textarea><textarea rows="10" cols="40" v-model="result"></textarea></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {obj: {words: '',lang: 'english'},result: '',timer: null},watch: {obj: {deep: true,immediate: true,handler(newValue) {clearTimeout(this.timer)//防抖this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.data}, 300)}}}})</script>
</body></html>

相关文章：

Vue--1.7watch侦听器（监视器）

作用&#xff1a;监视数据变化&#xff0c;执行一些业务逻辑或异步操作。 语法&#xff1a; 1.简单写法->简单类型数据&#xff0c;直接监视 const app new Vue({el: #app,data: {words:},watch:{words(newValue,oldValue){}}}) const app new Vue({el: #app,data: {obj…...

编程日记 2023/10/9 12:52:24

序列：全序关系

一个序列满足全序关系必须满足以下条件&#xff1a; 反对称性&#xff1a;若 a ≤ b a\le b a≤b&#xff0c;则 b ≥ a b\ge a b≥a传递性&#xff1a;若 a ≤ b a\le b a≤b 且 b ≤ c b\le c b≤c&#xff0c;则 a ≤ c a\le c a≤c完全性&#xff1a; a ≤ b a\le b …...

编程日记 2023/10/9 12:50:22

100M服务器能同时容纳多少人访问？

100M的服务器带宽能够同时容纳的用户访问量需要考虑以下几个关键因素: &#x1f449;1.单个用户的平均访问流量大小 这取决于网站内容,是否有多媒体等。一般文本类网站每用户每次访问在50-100KB。 &#x1f449;2.每个用户的平均访问页面 通常每次访问会打开多个页面 &…...

编程日记 2023/10/9 12:49:21

Javascript 笔记：函数调用与函数上下文

在 JavaScript 中&#xff0c;函数上下文通常指的是函数在执行时的当前对象的引用&#xff0c;这通常用 this 关键字表示。this 关键字在不同的执行上下文中可能引用到不同的对象。 1 全局上下文 当 this 关键字用在全局上下文&#xff08;不在任何函数内部&#xff09;&#…...

编程日记 2023/10/9 12:48:20

【WebService】C#搭建的标准WebService接口，在使ESB模版作为参数无法获取参数数据

一、问题说明 1.1 问题描述 使用C# 搭建WebService接口&#xff0c;并按照ESB平台人员的要求&#xff0c;将命名空间改为"http://esb.webservice",使用PostmanESB平台人员提供的入参示例进行测试时&#xff0c;callBussiness接口参数message始终为null。 以下是ES…...

编程日记 2023/10/9 12:47:19

Sqlserver关于tempdb临时数据库文件个数的最佳实践

官方文档 https://learn.microsoft.com/zh-cn/sql/relational-databases/databases/tempdb-database?viewsql-server-ver16 https://learn.microsoft.com/en-US/troubleshoot/sql/database-engine/performance/recommendations-reduce-allocation-contention 一般而言&#x…...

编程日记 2023/10/9 12:46:18

【Java】微服务——微服务介绍和Eureka注册中心

目录 1.微服务介绍2.服务拆分和远程调用2.1.提供者与消费者 3.Eureka注册中心3.1.Eureka的结构和作用3.2.Eureka的结构3.3.搭建Eureka服务3.3.1.引入eureka依赖3.3.2.编写配置文件 3.4.服务注册及拉1&#xff09;引入依赖2&#xff09;配置文件3&#xff09;启动多个user-servi…...

编程日记 2023/10/9 12:45:17

C++ virtual 虚函数 虚基类

https://blog.csdn.net/xbb123456rt/article/details/81986691 基类指针可以指向一个派生类对象&#xff0c;但派生类指针不能指向基类对象。 可以在基类中将被重写的成员函数设置为虚函数&#xff0c;其含义是&#xff1a;当通过基类的指针或者引用调用该成员函数时&#xf…...

编程日记 2023/10/9 12:44:17

redis分布式秒杀锁

-- 获取锁标识&#xff0c;是否与当前线程一致&#xff1f; if(redis.call(get, KEYS[1]) ARGV[1]) then-- 一致&#xff0c;删除return redis.call(del, KEYS[1]) end -- 不一致&#xff0c;直接返回 return 0package com.platform.lock;public interface ILock {/*** 获取锁…...

编程日记 2023/10/9 12:43:16

【Redis】String内部编码方式

String内部编码方式 int: 8个字节的长整型embstr: 小于等于39个字节的字符串raw: 大于39个字节的字符串...

编程日记 2023/10/9 12:42:15

川西旅游网系统-前后端分离（前台vue 后台element UI，后端servlet）

前台&#xff1a;tour_forword: 川西旅游网前端----前台 (gitee.com) 后台&#xff1a;tour_back: 川西旅游网-------后台 (gitee.com) 后端 &#xff1a;tour: 川西旅游网------后端 (gitee.com)...

编程日记 2023/10/9 12:41:15

Paddle使用pyinstaller打包出错的解决方法

使用PyQt5开发了一个基于paddle ocr的文字识别程序&#xff0c;打包的时候报错了。给大家分享一下解决方法https://juejin.cn/post/7287562282669883451 为了测试paddle模块的打包问题&#xff0c;所以当前demo.py只引用了paddleOCR模块demo.py from paddleocr import PaddleO…...

编程日记 2023/10/9 12:40:14

【Java acm】特殊输入

input: [[1,2,3 ], [4, 5,6], [7,8]] output: [[1, 2, 3], [4, 5, 6], [7, 8]] 思路 按行读入, 然后进行字符串处理, 将其他字符替换为空字符.在split(,) repalceAll(“\s”,“”), 将所有空白字符替换成空字符(包括空格, 制表, 换行等) 代码实现 import java.util.*;publ…...

编程日记 2023/10/9 12:38:12

在Ubuntu 20.04搭建最小实验环境

sudo apt-get -y install --no-install-recommends wget gnupg ca-certificates安装导入GPG公钥所需的依赖包。 sudo wget -O - https://openresty.org/package/pubkey.gpg | sudo apt-key add -导入GPG密钥。 sudo apt-get -y install --no-install-recommends software-p…...

编程日记 2023/10/9 12:37:11

使用uwsgi部署Flask

安装 这里直接使用包管理器提供的版本&#xff0c;不过建议大家使用pip来安装&#xff0c;会少一些坑&#xff1a; (Debian/Ubuntu) apt-get install uwsgi uwsgi-plugin-python3 或使用pip安装&#xff1a; pip3 install uwsgi 试试看 [demo.py] from flask import Flas…...

编程日记 2023/10/9 12:36:09

Android平台实现lottie动画

1、lottie动画简介 Lottie 是一个应用十分广泛动画库&#xff0c;适用于Android、iOS、Web、ReactNative、Windows的库&#xff0c;它解析了用Bodymovin导出为json的Adobe After Effects动画&#xff0c;并在移动和网络上进行了原生渲染。它提供了一套完整得从AE到各个终端的…...

编程日记 2023/10/9 12:35:07

JAVA练习百题之求矩阵对角线之和

题目&#xff1a;求一个3*3矩阵对角线元素之和 程序分析 求一个3x3矩阵的对角线元素之和&#xff0c;我们需要将矩阵的左上到右下以及左下到右上两条对角线上的元素相加。 一个3x3矩阵如下所示&#xff1a; 1 2 3 4 5 6 7 8 9左上到右下的对角线元素和为1 5 9 15&…...

编程日记 2023/10/9 12:34:05

MEM备考打卡

今天是2023.10.9距离考试还有75天 三年前就想考MEM每次总是有各种原因最后选择了放弃&#xff0c;没时间、自制力差、害怕失败。。。。放弃后确还是会想如果自己当时没有放弃是不是就能考上&#xff0c;所以这次不管能不能考上拼搏75天&#xff0c;不能总是停留在想象。加油&a…...

编程日记 2023/10/9 12:32:02

短视频矩阵源码开发部署---技术解析

一、短视频SEO源码搜索技术需要考虑以下几点&#xff1a; 1. 关键词优化&#xff1a;通过研究目标受众的搜索习惯&#xff0c;选择合适的关键词&#xff0c;并在标题、描述、标签等元素中进行优化&#xff0c;提高视频的搜索排名。 2. 内容质量&#xff1a;优质、有吸引力的内…...

编程日记 2023/10/9 12:31:01

百度小程序制作源码 百度引流做关键词排名之技巧

百度作为国内最大的搜索引擎&#xff0c;对于关键词排名和流量获取的策略格外重要&#xff0c;下面给大家分享一个百度小程序制作源码和做百度引流、关键词排名的一些技巧。 移动设备的普及和微信小程序的火热&#xff0c;百度也推出了自己的小程序。百度小程序与微信小程序类…...

编程日记 2023/10/9 12:30:00

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/9/7 10:00:09

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/9/4 2:02:06

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/9/2 17:00:34

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/7/20 12:09:50

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/9/4 19:54:49

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/9/6 15:54:02

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/8/30 20:41:56

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/8/8 2:02:16

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/9/7 8:51:23

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/9/3 22:35:50