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

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

news 文章来源：https://blog.csdn.net/m0_61784621/article/details/143563362 2025/5/22 23:04:42

前言：

本期将会介绍 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

前端基础的讲解-JS(11)

对象 对象是什么&#xff1f; 在 JavaScript 中&#xff0c;对象是一组无序的相关属性和方法的集合&#xff0c;所有的事物都是对象&#xff0c;所有的数据类型都可以存放在内。 属性&#xff1a;即事物的特征&#xff0c;在对象中用属性来表示&#xff08;常用名词&#xf…...

编程日记 2024/11/14 9:52:45

Python魔法方法深度解析：解密__call__、__new__和__del__的核心奥义

解锁Python编程的无限可能&#xff1a;《奇妙的Python》带你漫游代码世界 《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门&#xff01; Python中的魔法方法&#xff08;Magic Methods&#xff09;是构建Python高级功能的基础&#xff0c;它们使得对象可以…...

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

当微软windows的记事本被AI加持

1985年&#xff0c;微软发布了Windows 1.0&#xff0c;推出了一款革命性的产品&#xff1a;记事本&#xff08;Notepad&#xff09;。这款软件旨在鼓励使用一种未来主义的新设备——鼠标&#xff0c;并让人们可以不依赖VI等键盘工具就能书写文本和编写代码。记事本因其简洁和高…...

编程日记 2024/11/14 9:49:42

Python酷库之旅-第三方库Pandas(213)

目录 一、用法精讲 996、pandas.DatetimeIndex.day属性 996-1、语法 996-2、参数 996-3、功能 996-4、返回值 996-5、说明 996-6、用法 996-6-1、数据准备 996-6-2、代码示例 996-6-3、结果输出 997、pandas.DatetimeIndex.hour属性 997-1、语法 997-2、参数 99…...

编程日记 2024/11/14 9:47:40

普林斯顿：LLM基于边际优化的梯度纠缠

&#x1f4d6;标题&#xff1a;A Common Pitfall of Margin-based Language Model Alignment: Gradient Entanglement &#x1f310;来源&#xff1a;arXiv, 2410.13828 &#x1f31f;摘要 &#x1f538;从人类反馈中强化学习&#xff08;RLHF&#xff09;已成为对齐语言模型…...

编程日记 2024/11/14 9:44:37

通俗易懂：什么是 Java 类加载？

文章目录 类加载过程的三个阶段一个简单的案例&#xff1a;类加载的工作原理使用这个类类加载的顺序类加载的特点类加载的好处总结推荐阅读文章 在 Java 中&#xff0c; 类加载是一种将我们写的 Java 类文件加载到内存中的过程&#xff0c;让 JVM&#xff08;Java 虚拟机&…...

编程日记 2024/11/14 9:43:35

Dijkstra 算法的实现方案

下面是一个基于 Dijkstra 算法的实现方案，能够在 DEM（数字高程模型）数据上进行寻路，并满足以下需求： 使用 Qt C++ 编写； 规避 DEM 中的障碍物； 支持指定起点和终点； 使用 GDAL 库读取 DEM 文件； 输出路径到 TXT 文件； 输出的坐标为地理坐标（例如经纬度），而不是像…...

编程日记 2024/11/14 9:42:33

OpenGL 进阶系列07 - 阴影贴图（shadowmap ）

一：概述： 在 OpenGL 中，Shadow Mapping（阴影贴图）是一种常用的实时阴影技术，用于渲染物体的阴影效果。这种方法通过生成光源视角下的深度贴图，再在场景渲染时使用它来判断物体是否被遮挡，从而实现阴影效果。下面是实现 Shadow Mapping 的基本步骤和相关知识。 二：绘制…...

编程日记 2024/11/14 9:40:31

【CAN介绍】【第一篇章】

1. CAN简介 • CAN 总线&#xff08; Controller Area Network Bus &#xff09;控制器局域网总线 • CAN 总线是由 BOSCH 公司开发的一种简洁易用、传输速度快、易扩展、可靠性高的串行通信总线&#xff0c;广泛应用于汽车、嵌入式、工业控制等领域 • CAN 总线特征&#xff1…...

编程日记 2024/11/14 9:38:20

【统计子矩阵——部分前缀和+双指针】

题目 代码 #include <bits/stdc.h> using namespace std; typedef long long ll; const int N 510; int s[N][N]; int main() {ios::sync_with_stdio(0);cin.tie(0);int n, m, k;cin >> n >> m >> k;for(int i 1; i < n; i)for(int j 1; j <…...

编程日记 2024/11/14 9:37:18