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

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

news 2026/3/27 17:00:27

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

语法：

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

5分钟搞定PaddleOCR文字识别：Python版保姆级教程（附完整代码）

5分钟极速上手PaddleOCR&#xff1a;Python实战指南与避坑手册 第一次接触OCR技术时&#xff0c;我被那些复杂的配置参数和晦涩的文档吓退了三次。直到发现PaddleOCR这个"开箱即用"的工具&#xff0c;才明白原来文字识别可以如此简单。本文将带你用最直接的方式&…...

编程新知 2026/3/27 16:41:30

二相四线步进电机驱动全解析：从原理到Proteus仿真避坑指南

二相四线步进电机驱动全解析&#xff1a;从原理到Proteus仿真避坑指南 在工业自动化与嵌入式开发领域&#xff0c;步进电机因其精准的位置控制能力成为不可或缺的执行元件。而二相四线制步进电机凭借结构简单、成本低廉的优势&#xff0c;尤其受到电子工程师和创客群体的青睐。…...

编程新知 2026/3/27 15:59:16

车辆信号震动信号的滤波、幅值与能量分析——基于测试台采集文件ssjlbpp.m等的研究

车辆信号的震动信号的滤波、幅值以及能量分析&#xff0c;信号是利用测试台采集回来的 文件列表&#xff1a; ssjlbpp.m cxssjlbpp.m ssj.m fuzhissj.m翻了翻硬盘里压箱底的车辆测试台数据&#xff0c;哦对&#xff0c;还有那堆当时随手起的.mat之外的.m文件&#xff1a;ssjlbp…...

编程新知 2026/3/27 15:59:16

STM32串口环形队列IAP固件更新方案

基于STM32串口环形队列的IAP实现方案1. 项目概述1.1 系统架构本方案实现了一种基于STM32F103C8T6微控制器的串口IAP(In-Application Programming)系统&#xff0c;采用环形队列缓冲机制解决有限SRAM空间下的固件更新问题。系统将64KB Flash空间划分为四个功能区域&#xff1a;B…...

编程新知 2026/3/27 15:28:58

从SolidWorks到Gazebo：手把手教你用SW2URDF插件为ROS2 Humble机械臂建模（含ROS2适配避坑指南）

从SolidWorks到Gazebo&#xff1a;ROS2 Humble机械臂建模全流程实战 1. 工业设计与机器人仿真的桥梁搭建 当机械工程师第一次接触机器人仿真时&#xff0c;往往会面临一个关键挑战&#xff1a;如何将精心设计的SolidWorks模型转化为可在Gazebo中运行的仿真模型&#xff1f;这个…...

编程新知 2026/3/27 15:16:55

3步颠覆性解决方案：零成本条码生成技术让企业彻底告别付费依赖

3步颠覆性解决方案&#xff1a;零成本条码生成技术让企业彻底告别付费依赖 【免费下载链接】librebarcode Libre Barcode: barcode fonts for various barcode standards. 项目地址: https://gitcode.com/gh_mirrors/li/librebarcode Libre Barcode开源字体库通过字体化…...

编程新知 2026/3/27 15:10:51

EVE舰船配置神器Pyfa全攻略：从新手到专家的实战指南

EVE舰船配置神器Pyfa全攻略&#xff1a;从新手到专家的实战指南 【免费下载链接】Pyfa Python fitting assistant, cross-platform fitting tool for EVE Online 项目地址: https://gitcode.com/gh_mirrors/py/Pyfa 在EVE Online的浩瀚宇宙中&#xff0c;每一位舰长都需…...

编程新知 2026/3/27 15:06:51

「webMAN-MOD」技术探索：构建PS3主机的多功能扩展生态

「webMAN-MOD」技术探索&#xff1a;构建PS3主机的多功能扩展生态 【免费下载链接】webMAN-MOD Extended services for PS3 console (web server, ftp server, netiso, ntfs, ps3mapi, etc.) 项目地址: https://gitcode.com/gh_mirrors/we/webMAN-MOD 一、基础认知&…...

编程新知 2026/3/27 15:00:49

如何用QuickRecorder解决macOS录屏痛点：高效专业的从入门到精通实践指南

如何用QuickRecorder解决macOS录屏痛点&#xff1a;高效专业的从入门到精通实践指南 【免费下载链接】QuickRecorder A lightweight screen recorder based on ScreenCapture Kit for macOS / 基于 ScreenCapture Kit 的轻量化多功能 macOS 录屏工具 项目地址: https://gitco…...

编程新知 2026/3/27 14:32:29

DeepSeek-R1-Distill-Qwen-7B创意写作展示：从诗歌到短篇小说

嗯&#xff0c;用户需要一篇关于DeepSeek-R1-Distill-Qwen-7B在创意写作方面效果展示的技术博客。根据标题和场景判断&#xff0c;这属于效果展示类文章&#xff0c;重点是通过实际案例展示模型在文学创作上的能力。 需要突出模型的创意写作效果&#xff0c;包括诗歌、微型小说…...

编程新知 2026/3/27 13:23:07