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

前言:

本期将会介绍 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 对象,就可以实现了,快去优化一下吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/60116.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UE5.4 PCG 获取地形Layer

使用AttributeFilter&#xff1a;属性过滤器 节点 设置地形Layer名称和权重 效果&#xff1a;

使用wordpress搭建简易的信息查询系统

背景 当前有这样的一个需求&#xff0c;要实现让客户能够自助登录系统查询一些个人的信息&#xff0c;市面上没有特别符合我的需求的产品&#xff0c;经过一段时间的研究&#xff0c;想出了一个用wordpress实现简易信息查询系统&#xff0c;有两种方式。 方式一&#xff1a;使…

EasyUI弹出框行编辑,通过下拉框实现内容联动

EasyUI弹出框行编辑&#xff0c;通过下拉框实现内容联动 需求 实现用户支付方式配置&#xff0c;当弹出框加载出来的时候&#xff0c;显示用户现有的支付方式&#xff0c;datagrid的第一列为conbobox,下来选择之后实现后面的数据直接填充&#xff1b; 点击新增&#xff1a;新…

ssm079基于SSM框架云趣科技客户管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;客户管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本客户管理系统就是在这…

PICO+Unity 用手柄点击UI界面

如果UI要跟随头显&#xff0c;可将Canvas放置到XR Origin->Camera Offset->Main Camera下 1.Canvas添加TrackedDeviceGraphicRaycaster组件 2.EventSystem移动默认的Standard Input Module&#xff0c;添加XRUIInputModule组件 3.&#xff08;可选&#xff09;设置射线可…

dbt 数据分析工程实战教程(汇总篇)

最近陆续写了数据分析工程相关的系列博客&#xff0c;主要包括dbt-core相关的实战教程。本文是阶段性整理回顾&#xff0c;希望为你学习数据工程领域知识提供帮助&#xff0c;后续会持续更新。 数据工程理论 介绍数据工程基础理论&#xff0c;包括数据仓库、数据建模等内容。结…

apt镜像源制作-ubuntu22.04

# 安装必要的软件 sudo apt-get install -y apt-mirror # 编辑/etc/apt/mirror.list,添加以下内容 set base_path /var/spool/apt-mirror # 指定要镜像的Ubuntu发布和组件-null dir jammy-updates main restricted universe multiverse # 镜像的Ubuntu发布和组件的URL-n…

springboot初体验

目录 环境 controller 修改端口号 更改banner图标 运行结果 最核心的:自动装配 环境 jdk17springboot3.3.5maven3.8.2 controller controller层和启动类同级 package com.example.demo.controller; ​ import org.springframework.web.bind.annotation.RequestMapping;…

HTML 基础架构:理解网页的骨架

HTML的文档结构主要由以下几个部分组成&#xff1a;<html>、<head>和<body>。 <html>标签是HTML文档的根元素&#xff0c;用来包裹整个HTML文档的内容。<head>标签用于定义文档的头部&#xff0c;包含了一些元数据和其他不直接显示在页面上的内…

Q:警告无法解释导入PIL Pylance(reportMisssingIMports)

问题显示&#xff1a; 解决方法&#xff1a; 1.确认安装 Pillow&#xff1a;在 VS Code 的终端中运行以下命令&#xff0c;以确保环境中安装了 Pillow pip install pillow2.选择正确的解释器&#xff1a;在 VS Code 中&#xff0c;按下 CtrlShiftP&#xff0c;输入并选择 “P…

python中常见的8种数据结构之一数组的应用

在Python中&#xff0c;数组是一种常见的数据结构&#xff0c;用于存储一系列相同类型的元素。在实际应用中&#xff0c;数组可以用于解决各种问题。 以下是数组在Python中的一些常见应用&#xff1a; 1. 存储和访问数据&#xff1a;数组可以用于存储和访问一组数据。可以通过…

网络安全——下载并在kali虚拟机上启动Cobalt Strike

目录 一、下载 二、上传文件到kali虚拟机 三、启动服务端 四、启动客户端 一、下载 CobaltStrike4.8汉化版带插件-CSDN博客 下载并解压后 二、上传文件到kali虚拟机 1、打开并运行kali虚拟机&#xff0c;查看kali的ip地址 2、打开xshell&#xff0c;新建连接&#xff0c;连…

PostgreSQL 开启密码验证插件

我们知道在数据安全和等保要求中&#xff0c;用户的密码复杂度需要满足一定的条件&#xff0c;那么在 PostgreSQL 数据库中如何保证创建的用户的密码满足这些要求呢。 [rootlocalhost ~]# su - postgres [postgreslocalhost ~]$ cd /usr/local/pgsql-12.8/data/ [postgresloca…

用 Python 从零开始创建神经网络(四):激活函数(Activation Functions)

激活函数&#xff08;Activation Functions&#xff09; 引言1. 激活函数的种类a. 阶跃激活功能b. 线性激活函数c. Sigmoid激活函数d. ReLU 激活函数e. more 2. 为什么使用激活函数3. 隐藏层的线性激活4. 一对神经元的 ReLU 激活5. 在隐蔽层中激活 ReLU6. ReLU 激活函数代码7. …

22.oop-strust与class

OOP是什么&#xff1a;oop 是面向对象编程,面向对象编程是一种计算机编程架构, OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或 对象组、合而成。 OOP有什么特性&#xff1a; 1、封装性&#xff1a;也称为信息隐藏&#xff0c;就是将一个类的使用和实现分开…

【Linux】ubuntu安装图形化界面步骤

一、ubuntu 安装桌面环境 1、更新软件包列表&#xff08;命令↓&#xff09; sudo apt update 2、安装桌面环境GNOME&#xff08;命令↓&#xff09; sudo apt install ubuntu-desktop 3、安装完成后需要重启服务器&#xff08;服务器重启命令↓&#xff09; sudo reboot 二、…

【Android】轮播图——Banner

引言 Banner轮播图是一种在网页和移动应用界面设计中常见的元素&#xff0c;主要用于在一个固定的区域内自动或手动切换一系列图片&#xff0c;以展示不同的内容或信息。这个控件在软件当中经常看到&#xff0c;商品促销、热门歌单、头像新闻等等。它不同于ViewPgaer在于无需手…

Vue2 doc、excel、pdf、ppt、txt、图片以及视频等在线预览

Vue2 doc、excel、pdf、ppt、txt、图片等在线预览 安装使用目录结构直接上代码src\components\FileView\doc\index.vuesrc\components\FileView\excel\index.vuesrc\components\FileView\img\index.vuesrc\components\FileView\pdf\index.vuesrc\components\FileView\ppt\index…

网站主机介绍

网站主机介绍 1. 网站主机的定义和作用 网站主机,也常被称为网络主机或虚拟主机,是指一种互联网服务,它允许个人或企业将他们的网站内容放置在互联网上,使其可以被全球范围内的用户访问。网站主机的作用类似于实体店铺的租赁空间,只不过它是虚拟的,提供的是服务器空间和…

python os模块学习

文件&#xff1a; 文件操作&#xff1a;open(path,filename)path:绝对路径和相对路径 mode:读&#xff1a;rb,r写&#xff1a;wb w具体搞法&#xff1a; stream.open(file,mode)stream.read()stread.write()stream.close()为了节省时间可以写做with open(file,mode)as stream具…