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

【后端速成Vue】模拟实现翻译功能

news 2025/9/4 19:35:12

前言：

本期将会介绍 Vue 中的 watch 侦听器，它语法是怎么样的呢？具有怎样的功能呢？最后用模拟实现百度翻译来更进一步练习 watch 侦听器

篮球哥找工作专属IT岗位内部推荐：

专属内推链接：内推通道

1、认识翻译功能

翻译软件相信大家都不陌生，通常网页版的翻译就是，在给定的左侧文本框中输入英文，过一小会右侧的文本框就会给出中文的翻译。

实现这个翻译功能，这里先不考虑后端是如何执行翻译这个业务的，只考虑前端的设计。

设计方案：

① 可以是在用户输入 英文 后，假设 0.5s 中用户没有任何输入了，右侧文本框就会自动展示出翻译后的结果。

② 当用户输入 英文 后，需要敲回车，或者单击翻译按钮，右侧的文本框才会展示出翻译后的结果。

方案 ② 就容易实现一点，无非就是单击按钮，提交请求给后端翻译，就OK了，而方案 ① 相当于是捕捉用户的行为，自动的提交请求给后端翻译，这里就需要用到本期讲解的 Vue 中的 watch侦听器了！

2、watch侦听器(监视器)语法

首先需要先了解 watch 的作用：

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

语法如下：

  1. watch同样声明在跟data同级的配置项中
  2. 简单写法： 简单类型数据直接监视
  3. 完整写法：添加额外配置项
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 的完整体。

完整写法 —>添加额外的配置项

  1. deep:true 对复杂类型进行深度监听
  2. 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】模拟实现翻译功能

前言&#xff1a; 本期将会介绍 Vue 中的 watch 侦听器&#xff0c;它语法是怎么样的呢&#xff1f;具有怎样的功能呢&#xff1f;最后用模拟实现百度翻译来更进一步练习 watch 侦听器 篮球哥找工作专属IT岗位内部推荐&#xff1a; 专属内推链接&#xff1a;内推通道 1、认识翻…...

编程日记 2024/11/14 10:27:25

人脸识别技术：从算法到深度学习的全面解析

一、人脸识别技术综述 人脸识别技术作为一种重要的生物识别技术&#xff0c;在当今社会中具有举足轻重的地位。它广泛应用于各个领域&#xff0c;如金融领域的实名认证、安保领域的门禁系统、通行领域的火车站和地铁站检票、泛娱乐领域的美颜相机和短视频特效处理、公安和司法…...

编程日记 2024/11/14 10:26:24

WPF学习之路，控件的只读、是否可以、是否可见属性控制

C#的控件学习之控件属性操作 控件的只读、是否可以、是否可见&#xff0c;是三个重要的参数&#xff0c;在很多表单、列表中都有用到&#xff0c;正常表单控制可以在父层主键控制参数是否可以编辑和可见&#xff0c;但是遇到个别字段需要单独控制时&#xff0c;可以在初始化wi…...

编程日记 2024/11/14 10:25:23

植物神经紊乱不用怕，科学锻炼助你找回平衡✨

在这个快节奏、高压力的时代&#xff0c;你是否经常感到身心疲惫&#xff0c;情绪波动大&#xff0c;甚至偶尔还会出现心慌、失眠、消化不良等症状&#xff1f;这些可能都是植物神经功能紊乱在作祟&#xff01;&#x1f631;别担心&#xff0c;今天就来聊聊如何通过科学锻炼&am…...

编程日记 2024/11/14 10:24:22

shell 100例

1、每天写一个文件 (题目要求&#xff09; 请按照这样的日期格式(xxxx-xx-xx每日生成一个文件 例如生成的文件为2017-12-20.log&#xff0c;并且把磁盘的使用情况写到到这个文件中不用考虑cron&#xff0c;仅仅写脚本即可 [核心要点] date命令用法 df命令 知识补充&#xff1…...

编程日记 2024/11/14 10:22:20

CSS教程（二）- CSS选择器

1. 作用 匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类 分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等 1 标签选择器 介绍 又称为元素选择器&#xff0c;根…...

编程日记 2024/11/14 10:21:19

Ubuntu20.04 解决一段时间后键盘卡死 输入延迟很大的问题 ubuntu

Ubuntu20.04 解决一段时间后键盘卡死 输入延迟很大的问题 为了确保您能顺利通过双击快捷方式来重启 IBus&#xff0c;下面详细描述了从脚本创建到快捷方式设置的每一步&#xff0c;包括具体的命令行操作和必要的说明&#xff0c;以确保您能够按步骤成功执行。 步骤 1: 创建并…...

编程日记 2024/11/14 10:20:16

http(s)接口设计注意事项

http(s)在设计时应考虑&#xff1a; 一、签名认证 鉴权&#xff0c;如jwt方式等。 二、重要参数加密 如&#xff1a;用户的登录密码、银行卡号、转账金额、用户身份证等。 三、IP白名单 为了进一步加强API接口的安全性&#xff0c;防止接口的签名或者加密被破解了&#x…...

编程日记 2024/11/14 10:19:15

Font Awesome Web 应用图标

Font Awesome Web 应用图标 引言 在当今的数字时代，图标在Web应用中扮演着至关重要的角色。它们不仅增强了用户界面的视觉吸引力，而且还提高了用户体验和互动性。Font Awesome是一个广受欢迎的图标库，它为开发人员提供了一系列高质量的图标，可以轻松地集成到Web应用中。本…...

编程日记 2024/11/14 10:15:11

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…...

编程日记 2024/11/14 10:14:10

【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件

MySQL与Oracle一样都是通过逻辑存储结构来管理物理存储结构&#xff0c;即管理硬盘上存储的各种文件。下面将详细介绍InnoDB存储引擎中的数据文件和重做日志文件。 一、数据文件 “.ibd”文件和ibdata文件 这两种文件都是存放Innodb数据的文件&#xff0c;之所以有两种文件来…...

编程日记 2024/11/14 10:13:09

华为云前台展示公网访问需要购买EIP，EIP流量走向

华为云前台网络&#xff08;VPC,安全组&#xff0c;EIP&#xff09; 1.EIP网段是从哪里划分的&#xff1f; 管理员在后台Service_OM已设置 Service_OM-网络资源-外部网络-创建外部网络基本信息&#xff1a;配置参数&#xff1a;*名称 public*网络类型 LOCAL 不带标签 类似开…...

编程日记 2024/11/14 10:12:07

排序算法 -插入排序

文章目录 1.插入排序&#xff08;Insertion Sort&#xff09;1.1 简介1.2 插入排序的步骤1.3 插入排序的C实现1.4 插入排序的时间复杂度1.5 插入排序的空间复杂度1.6 插入排序的动画 2. 二分插入排序&#xff08;Binary Insertion Sort&#xff09;2.1 简介2.2 二分插入排序步骤…...

编程日记 2024/11/14 10:10:05

如何使用.bat实现电脑自动重启？

1、在电脑桌面新建一个记事本文档&#xff0c;将如下内容写进去&#xff1a; echo off shutdown /r /t 02、然后&#xff0c;保存一下&#xff0c;再把桌面此文件重命名为电脑重启.bat 3、双击此程序&#xff0c;可以立刻重启电脑。 PS&#xff1a;① 此程序会不保存任何当前…...

编程日记 2024/11/14 10:07:02

使用VSCode远程连接服务器并解决Neo4j无法登陆问题

摘要&#xff1a;本文介绍了如何通过VSCode连接内网部署的Neo4j服务器&#xff0c;并启动服务。在访问Neo4j登录界面时&#xff0c;遇到了端口映射问题导致无法登录。通过手动添加7687端口的映射后&#xff0c;成功登录Neo4j。 我在内网部署了一台服务器&#xff0c;并在其上运…...

编程日记 2024/11/14 10:04:59

使用React和Vite构建一个AirBnb Experiences克隆网站

这一篇文章中&#xff0c;我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。 克隆网站最终呈现的效果&#xff1a; 1. 使用vite构建基础框架 npm create vitelatestcd airbnb-project npm install npm run dev2. 构建网站的3个部分 网站从上…...

编程日记 2024/11/14 10:03:58

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/…...

编程日记 2024/11/14 10:02:57

基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统

项目名称&#xff1a;基于PythonDjangoVue3MySQL实现的前后端分离商场车辆管理系统 技术栈 开发工具&#xff1a;PyCharm、Visual Studio Code (VSCode)运行环境&#xff1a;Python 3.10、MySQL 8.0、Node.js 18技术框架&#xff1a;Django 5、Vue 3.4、Ant-Design-Vue 4.12 …...

编程日记 2024/11/14 9:56:51

网络安全web基础_HTML基础（扫盲篇）

web基础_HTML扫盲篇 一、什么是 HTML&#xff1f; 二、HTML 的基本特点 三、HTML 基本结构概述 1.文档声明&#xff08;!DOCTYPE html&#xff09; 2. html元素 3. head元素 4. body 元素 四、HTML5的主要标签清单 文档结构标签 文本内容标签 链接和锚点标签 表格标…...

编程日记 2024/11/14 9:54:48

（附项目源码）Java开发语言，监督管家APP的设计与实现 58，计算机毕设程序开发+文案（LW+PPT）

摘要 随着互联网的快速发展和智能手机的普及&#xff0c;越来越多的用户选择通过移动应用程序进行事项设定、提醒通知和事项打卡。监督管家APP作为一个专注于事项设定、提醒通知、事项打卡的监督管理平台&#xff0c;具有广泛的应用前景和商业价值。本研究旨在构建一个功能丰富…...

编程日记 2024/11/14 9:53:46

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/8/23 1:29:46

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/8/22 3:26:26

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/8/6 0:15:41

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/9/2 16:56:24

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/7/26 19:10:34

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/9/4 7:03:26

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/9/2 17:58:06

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/9/1 13:30:26

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19