【后端速成Vue】模拟实现翻译功能
前言：
本期将会介绍 Vue 中的 watch 侦听器，它语法是怎么样的呢？具有怎样的功能呢？最后用模拟实现百度翻译来更进一步练习 watch 侦听器
篮球哥找工作专属IT岗位内部推荐：
专属内推链接：内推通道
1、认识翻译功能
翻译软件相信大家都不陌生，通常网页版的翻译就是，在给定的左侧文本框中输入英文，过一小会右侧的文本框就会给出中文的翻译。
实现这个翻译功能，这里先不考虑后端是如何执行翻译这个业务的，只考虑前端的设计。
设计方案：
① 可以是在用户输入 英文 后，假设 0.5s 中用户没有任何输入了，右侧文本框就会自动展示出翻译后的结果。
② 当用户输入 英文 后，需要敲回车，或者单击翻译按钮，右侧的文本框才会展示出翻译后的结果。
方案 ② 就容易实现一点，无非就是单击按钮，提交请求给后端翻译，就OK了，而方案 ① 相当于是捕捉用户的行为，自动的提交请求给后端翻译，这里就需要用到本期讲解的 Vue 中的 watch侦听器了！
2、watch侦听器(监视器)语法
首先需要先了解 watch 的作用：
监视数据变化，执行一些业务逻辑或异步操作
语法如下：
- watch同样声明在跟data同级的配置项中
- 简单写法： 简单类型数据直接监视
- 完整写法：添加额外配置项
data: { words: 'hello',obj: {words: 'cat'}
},watch: {// 该方法会在数据变化时，触发执行words (newValue, oldValue) {// code ... 一些业务逻辑 或 异步操作。 },'obj.words' (newValue, oldValue) {// code ... 一些业务逻辑 或 异步操作。 }
}
简单来说，就是在 watch 配置项中配置要监视的 数据名，或者对象，一旦监视的对象，的内容发生变化了，就会立刻执行配置项中对应的代码块。
有了上述的简单认识，后面就模拟实现一个翻译功能，来更直观的感受侦听器。
3、模拟实现翻译功能
这里直接看代码，主要关注最终的运行结果和 js 里面的代码部分。
<!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><style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}</style></head><body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const getRandomCharacter = () => {const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';const randomIndex = Math.floor(Math.random() * characters.length);return characters[randomIndex];}const getRandomEnglishString = (length) => {let randomString = '';for (let i = 0; i < length; i++) {randomString += getRandomCharacter();}return randomString;}const app = new Vue({el: '#app',data: {obj: {words: ''},result: '', // 翻译结果timer: null // 延时器},watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用）'obj.words' (newValue) {// 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行clearTimeout(this.timer)this.timer = setTimeout(() => {this.result = getRandomEnglishString(10) // 随机生成长度为10的字符串}, 300)}}})</script></body>
</html>
上述代码的功能就是，随便输入，300 毫秒未输入，就会自动更新 result 里面的只，代码层面看，就是当 obj.words 这个变量的值发生的变化，那么就会立马触发对应代码块的代码。
看到这可能有点小疑问，我难道不能直接侦听 obj 整个对象吗？当然可以，但是这里就需要用到深度监视了！
也就是后面要讲到的 watch 的完整写法。
4、watch 的深度监视
这里才是真正的 watch 的完整体。
完整写法 —>添加额外的配置项
- deep:true 对复杂类型进行深度监听
- immdiate:true 初始化 立刻执行一次
data: {obj: {words: 'hello',lang: 'italy'},
},watch: {// watch 完整写法obj: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}
深度监视，也就是 obj 这个对象中的 words 或者 lang 属性任何一个发生变化，都会立即执行里面的 handler 函数！
上面的模拟实现翻译的代码留了个小坑，当切换语言的时候，是不会触发翻译效果的，这时用上深度监听整个 obj 对象，就可以实现了，快去优化一下吧！
相关文章：
【后端速成Vue】模拟实现翻译功能
前言： 本期将会介绍 Vue 中的 watch 侦听器，它语法是怎么样的呢？具有怎样的功能呢？最后用模拟实现百度翻译来更进一步练习 watch 侦听器 篮球哥找工作专属IT岗位内部推荐： 专属内推链接：内推通道 1、认识翻…...
人脸识别技术：从算法到深度学习的全面解析
一、人脸识别技术综述 人脸识别技术作为一种重要的生物识别技术，在当今社会中具有举足轻重的地位。它广泛应用于各个领域，如金融领域的实名认证、安保领域的门禁系统、通行领域的火车站和地铁站检票、泛娱乐领域的美颜相机和短视频特效处理、公安和司法…...
WPF学习之路，控件的只读、是否可以、是否可见属性控制
C#的控件学习之控件属性操作 控件的只读、是否可以、是否可见，是三个重要的参数，在很多表单、列表中都有用到，正常表单控制可以在父层主键控制参数是否可以编辑和可见，但是遇到个别字段需要单独控制时，可以在初始化wi…...
植物神经紊乱不用怕，科学锻炼助你找回平衡✨
在这个快节奏、高压力的时代，你是否经常感到身心疲惫，情绪波动大，甚至偶尔还会出现心慌、失眠、消化不良等症状？这些可能都是植物神经功能紊乱在作祟！😱别担心，今天就来聊聊如何通过科学锻炼&am…...
shell 100例
1、每天写一个文件 (题目要求） 请按照这样的日期格式(xxxx-xx-xx每日生成一个文件 例如生成的文件为2017-12-20.log，并且把磁盘的使用情况写到到这个文件中不用考虑cron，仅仅写脚本即可 [核心要点] date命令用法 df命令 知识补充࿱…...
CSS教程（二）- CSS选择器
1. 作用 匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类 分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等 1 标签选择器 介绍 又称为元素选择器，根…...
Ubuntu20.04 解决一段时间后键盘卡死 输入延迟很大的问题 ubuntu
Ubuntu20.04 解决一段时间后键盘卡死 输入延迟很大的问题 为了确保您能顺利通过双击快捷方式来重启 IBus，下面详细描述了从脚本创建到快捷方式设置的每一步，包括具体的命令行操作和必要的说明，以确保您能够按步骤成功执行。 步骤 1: 创建并…...
接口设计注意事项)
http(s)接口设计注意事项
http(s)在设计时应考虑： 一、签名认证 鉴权，如jwt方式等。 二、重要参数加密 如：用户的登录密码、银行卡号、转账金额、用户身份证等。 三、IP白名单 为了进一步加强API接口的安全性，防止接口的签名或者加密被破解了&#x…...
Font Awesome Web 应用图标
Font Awesome Web 应用图标 引言 在当今的数字时代，图标在Web应用中扮演着至关重要的角色。它们不仅增强了用户界面的视觉吸引力，而且还提高了用户体验和互动性。Font Awesome是一个广受欢迎的图标库，它为开发人员提供了一系列高质量的图标，可以轻松地集成到Web应用中。本…...
bridge-vlan
# 1.topo # 2.创建命名空间 ip netns add ns0 ip netns add ns1 ip netns add ns2 ip netns add ns3 # 3.创建veth设备 ip link add ns0-veth0 type veth peer name hn0-veth0 ip link add ns1-veth0 type veth peer name hn1-veth0 ip link add ns2-veth0 type veth pe…...
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
MySQL与Oracle一样都是通过逻辑存储结构来管理物理存储结构，即管理硬盘上存储的各种文件。下面将详细介绍InnoDB存储引擎中的数据文件和重做日志文件。 一、数据文件 “.ibd”文件和ibdata文件 这两种文件都是存放Innodb数据的文件，之所以有两种文件来…...
华为云前台展示公网访问需要购买EIP，EIP流量走向
华为云前台网络（VPC,安全组，EIP） 1.EIP网段是从哪里划分的？ 管理员在后台Service_OM已设置 Service_OM-网络资源-外部网络-创建外部网络基本信息：配置参数：*名称 public*网络类型 LOCAL 不带标签 类似开…...
排序算法 -插入排序
文章目录 1.插入排序（Insertion Sort）1.1 简介1.2 插入排序的步骤1.3 插入排序的C实现1.4 插入排序的时间复杂度1.5 插入排序的空间复杂度1.6 插入排序的动画 2. 二分插入排序（Binary Insertion Sort）2.1 简介2.2 二分插入排序步骤…...
如何使用.bat实现电脑自动重启？
1、在电脑桌面新建一个记事本文档，将如下内容写进去： echo off shutdown /r /t 02、然后，保存一下，再把桌面此文件重命名为电脑重启.bat 3、双击此程序，可以立刻重启电脑。 PS：① 此程序会不保存任何当前…...
使用VSCode远程连接服务器并解决Neo4j无法登陆问题
摘要：本文介绍了如何通过VSCode连接内网部署的Neo4j服务器，并启动服务。在访问Neo4j登录界面时，遇到了端口映射问题导致无法登录。通过手动添加7687端口的映射后，成功登录Neo4j。 我在内网部署了一台服务器，并在其上运…...
使用React和Vite构建一个AirBnb Experiences克隆网站
这一篇文章中，我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。 克隆网站最终呈现的效果： 1. 使用vite构建基础框架 npm create vitelatestcd airbnb-project npm install npm run dev2. 构建网站的3个部分 网站从上…...
HBase压测 ycsb
## ycsb 导入数据 rootXX.14.40.1971、对portrait压测 ansible hadoop -i hosts_hbase_portrait_20230730.txt -m shell -a "hostname && chdir/data/workspace/ycsb-0.17.0 nohup bin/ycsb load hbase20 -P workloads/workload_insert -cp /usr/local/fqlhadoop/…...
基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统
项目名称：基于PythonDjangoVue3MySQL实现的前后端分离商场车辆管理系统 技术栈 开发工具：PyCharm、Visual Studio Code (VSCode)运行环境：Python 3.10、MySQL 8.0、Node.js 18技术框架：Django 5、Vue 3.4、Ant-Design-Vue 4.12 …...
网络安全web基础_HTML基础（扫盲篇）
web基础_HTML扫盲篇 一、什么是 HTML？ 二、HTML 的基本特点 三、HTML 基本结构概述 1.文档声明（!DOCTYPE html） 2. html元素 3. head元素 4. body 元素 四、HTML5的主要标签清单 文档结构标签 文本内容标签 链接和锚点标签 表格标…...
（附项目源码）Java开发语言，监督管家APP的设计与实现 58，计算机毕设程序开发+文案（LW+PPT）
摘要 随着互联网的快速发展和智能手机的普及，越来越多的用户选择通过移动应用程序进行事项设定、提醒通知和事项打卡。监督管家APP作为一个专注于事项设定、提醒通知、事项打卡的监督管理平台，具有广泛的应用前景和商业价值。本研究旨在构建一个功能丰富…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
图解JavaScript原型：原型链及其分析 | JavaScript图解
忽略该图的细节（如内存地址值没有用二进制） 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么：保存在堆中一块区域，同时在栈中有一块区域保存其在堆中的地址（也就是我们通常说的该变量指向谁&…...