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

Vue (3)

news 2025/7/7 5:37:55

文章目录

1. 数据代理
- 1.1 回顾
- 1.2 开始
2. 事件处理
- 2.1 v-on:click 点击事件
- 2.2 事件修饰符
- 2.3 键盘事件
3. 计算属性
- 3.1 插值语法实现
- 3.2 methods实现
- 3.3 计算属性实现
4. 监视属性
- 4.1 深度监视
- 4.2 监视属性的简写形式
- 4.3 watch 与 computed 对比

1. 数据代理

在学习数据代理时先来回顾一下 Object中的 defineProperty方法.

1.1 回顾

图一：

在这里插入图片描述

图二：

在这里插入图片描述

回顾完 defineProperty 方法后下面来学习一下数据代理

1.2 开始

数据代理定义：通过一个对象代理对另一个对象中属性的操作 读 / 写

给以场景 : 有两个对象 obj 和 obj2 ， obj 含有 x ， obj2 含有 y ，我想要 obj2 可以读到 obj 的 x ，还能修改 obj 的 x ，请问如何做？

答：这里就可以使用 defineProperty 完成，这就是一个简单的数据代理

<!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>理解数据代理</title>
</head><body><script>let obj = {x: 100}let obj2 = {y: 200}// 通过 obj2 读到 x  和 修改 xObject.defineProperty(obj2, 'x', {get() {return obj.x},set(value) {obj.x = value}})</script>
</body></html>

效果 :

在这里插入图片描述

此时我们就明白了啥是数据代理了，下面来看看 Vue 中的数据代理

在这里插入图片描述

通过：修改 name 引出 vm_data 与我们传递的 data 是同一个

在这里插入图片描述

小补充：

在这里插入图片描述

简单的流程图：

在这里插入图片描述

总结：

Vue中的数据代理 :

a.通过 vm 对象来代理 data 对象中属性的操作 (读 / 写)
Vue 中数据代理的好处 :

a. 更方便的操作 data 中的数据
基本原理 :

a. 通过Object。defineProperty() 把 data 对象中所有属性添加到 vm 伤

b.为每一个添加到 vm 上的属性，都指定一个 getter / setter

c. 在 getter / setter 内部去操作 (读 / 写) data 中对应的属性

补充：展开_data

在这里插入图片描述

2. 事件处理

2.1 v-on:click 点击事件

在这里插入图片描述

另外：这里我们的 showInfo 是可以接收参数的，

在这里插入图片描述

注意：这里 showInfo 里面写成了箭头函数，此时 this 就代表 window ，而不是 vm （vue 实例对象了）

在这里插入图片描述

ES6 语法中的箭头函数

v-on:click 简写：@clike

在这里插入图片描述

补充：这里指定的回调函数可以传递参数，不止是 event ，

在这里插入图片描述

总结: 事件的基本使用：

使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名
事件的回调需要配置在 methods 对象中，最终会在 vm 上
methods 中配置的函数，不要使用箭头函数！否则 this 就是是 vm了
methods 中配置的函数，都是被 Vue 所管理的函数， this 的指向是 vm 或组件实例对象
@click = “demo” 和 @click = “demo($event)” 效果一致，但后者可以传参 .

2.2 事件修饰符

1. prevent ：阻止默认事件

在这里插入图片描述

2. stop : 阻止事件冒泡

在这里插入图片描述

3. once: 事件只触发一次

在这里插入图片描述

4. capture ：使用事件的捕获模式

在这里插入图片描述

5. self : 只有 event.target 是当前操作的元素时才触发

在这里插入图片描述

6. passive ：事件的默认行为立即执行，无序等待事件的回调执行完毕

在这里插入图片描述

注意：这里主要掌握前三个即可，后面这三个用的少

最后补充一下小技巧：我们的事件修饰符是可以连着写的

比如：

@click.stop.prevent  此时就相当于 先阻止冒泡 ，在阻止默认事件

2.3 键盘事件

关于键盘事件常用的有两个：

键盘按下事件：keydown() 是在键盘按下就会触发
键盘弹起事件：keyup() 是在键盘松手就会触发

简单说一下 Keyup与Keydown区别为：触发不同、焦点不同、用途不同。

一、触发不同

1、Keyup：Keyup的事件在键盘按键按下时立即触发。

2、Keydown：Keydown的事件在键盘按键放开时立即触发。

二、焦点不同

1、Keyup：Keyup事件触发的时候需要保证控件拥有焦点。

2、Keydown：Keydown事件触发的时候不需要保证控件拥有焦点。

图一：

在这里插入图片描述

图二：

在这里插入图片描述

3. 计算属性

通过一个代码案例，来显示出为啥需要计算属性：

需要实现的效果：

在这里插入图片描述

3.1 插值语法实现

<!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>姓名案例_插值语法实现</title><!-- 引入 vue --><script src="../../js/vue.js"></script>
</head><body><div id="root">姓 : <input type="text" v-model="firstName"><br /><br />名 : <input type="text" v-model="lastName"><br /><br />全名 : <span>{{firstName}} - {{lastName}}</span><!-- {{firstName.slice(0,3)}}  slice(0,3) 只会读取前三位 --></div><script>new Vue({el: "#root",data: {firstName: '张',lastName: '三'}})</script>
</body></html>

3.2 methods实现

在这里插入图片描述

3.3 计算属性实现

图一：

在这里插入图片描述

图二：

在这里插入图片描述

总结：

计算属性：

定义：要用的属性不存在 , 要通过已有属性计算得出
原理：底层借助了 object.defineproperty方法提供 getter 和 setter
get 函数什么时候执行 ?

a. 初次读取时会执行一次

b. 当依赖的数据发生改变时会被再次调用
优势 : 与 methods 实现相比，内部有缓存机制(复用) ，效果更高，调试方便.
备注 :

a. 计算属性最终会出现在 vm 上，直接读取使用即可。

b. 如果计算属性要被修改，那必须写 set 函数去响应修改. 且 set 中要引起计算时依赖的数据发生改变

计算属性简写形式

计算属性 , 计算出的属性更多情况下是不会修改的，此时 set 就可以写 (只考虑读不考虑改)

<!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>姓名案例_methods实现</title><!-- 引入 vue --><script src="../../js/vue.js"></script>
</head><body><div id="root">姓 : <input type="text" v-model="firstName"><br /><br />名 : <input type="text" v-model="lastName"><br /><br />全名 : <span>{{fullName}}</span><br /><br /></div><script>let vm = new Vue({el: "#root",data: {firstName: '张',lastName: '三'},computed: {// 简写 ： // 这个函数就当作 get 使用  fullName: function () {return this.firstName + " - " + this.lastName}}})</script>
</body></html>

此时这个 fullName : function() {} 还可以简写一下

   computed: {// 简写 ： // 这个函数就当作 get 使用  fullName() {return this.firstName + " - " + this.lastName}}

4. 监视属性

通过一个代码案例引出监视属性：

需要实现效果：

在这里插入图片描述

图一：

在这里插入图片描述

图二：

在这里插入图片描述

图三：第二种方式配置监视

在这里插入图片描述

总结 :

监视属性 watch :

当被监视的属性变化是，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视
监视的两种写法

a. new Vue 时传入 watch 配置

b. 通过 vm.$watch 监视

总结完，下面来看看监视的扩展点，深度监视

4.1 深度监视

在这里插入图片描述

总结：

深度监视 :

Vue 中的watch 默认不监测对象内部值的改变 (一层)
配置 deep: true 可以监测对象内部值改变 (多层)

备注：

Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以
使用 watch时根据数据的具体结构，决定是否采用深度监视

4.2 监视属性的简写形式

当我们不需要 immediate (初始化执行一次) , deep （深度监视），即配置项中只有 handler 时可以简写。

<!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>天气案例 : </title><script src="../../js/vue.js"></script>
</head><body><div id="root"><h2>今天天气很： {{info}}</h2><button @click="changeWeather">切换天气</button></div><script>new Vue({el: "#root",data: {isHost: true,},computed: {info() {return this.isHost ? '炎热' : '凉爽';}},methods: {changeWeather() {this.isHost = !this.isHost;}},watch: {isHost(newValue, oldValue) {console.log('isHost 被修改了', newValue, oldValue)}}})</script>
</body></html>

通过 vm.$watch ，同样也可也i简写

<!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>天气案例 : </title><script src="../../js/vue.js"></script>
</head><body><div id="root"><h2>今天天气很： {{info}}</h2><button @click="changeWeather">切换天气</button></div><script>let vm = new Vue({el: "#root",data: {isHost: true,},computed: {info() {return this.isHost ? '炎热' : '凉爽';}},methods: {changeWeather() {this.isHost = !this.isHost;}},})vm.$watch("isHost", function (newValue, oldValue) {console.log("isHost被修改了", newValue, oldValue);})</script>
</body></html>

4.3 watch 与 computed 对比

图一：

在这里插入图片描述

图二：

在这里插入图片描述

图三：

在这里插入图片描述

总结 :

computed 和 watch 之间的区别：

computed 能完成的功能 , watch 都可以完成.
watch 能完成的功能， computed 不一定能完成，列如： watch 可以进行异步操作.

两个重要的小原则：

所被 Vue 管理的函数，最好写成普通函数，这 this 的指向才是 vm 或组件实例对象
所有不被 Vue 所管理的函数 (定时器的回调函数， ajax 的回调函数等) , 最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象.

Vue (3)

文章目录1. 数据代理1.1 回顾1.2 开始2. 事件处理2.1 v-on:click 点击事件2.2 事件修饰符2.3 键盘事件3. 计算属性3.1 插值语法实现3.2 methods实现3.3 计算属性实现4. 监视属性4.1 深度监视4.2 监视属性的简写形式4.3 watch 与 computed 对比1. 数据代理在学习数据代理时先…...

编程日记 2023/2/12 14:53:51

-- ddl sql 语句 -- 创建表 create table user_t( id int primary key auto_increment, -- 自增主键 name varchar(50) ); -- 查看表结构 desc user_t; desc user_test; -- 重命名表 alter table user_t rename to user_test; -- 查询数据库表 show tables; -- 添…...

编程日记 2023/2/12 14:52:43

C 语言宏定义：字符串化 stringify 的应用

字符串化通过C 语言的宏（MICRO），可以把数值或者一段字符的组合，转换为字符串。因为 C语言的宏在【预处理】阶段就展开了，所以可以实现一些比较使用的功能，比如一些数据的初始化操作比如定义一个宏&…...

编程日记 2023/2/12 14:51:35

代替swagger的api接口神器

自动化API文档-APIFOX 文章作者：老杨一：概述大家在后端开发开发过程中，最痛恨的两天事情：1.写文档，2.别人不写文档。而我们后端开发，必定经历的事情就是要和前端&测试对接，我们需要把我…...

编程日记 2023/2/12 14:50:26

2月12日,30秒知全网,精选7个热点

///北京首批29家药店开通异地参保直接结算服务试点药店已覆盖北京市东城区、西城区、朝阳区、海淀区、丰台区和石景山区，为来京就医的外省市参保人员提供便利///杭州召开平台经济健康高质量发展座谈会落实更有针对性的政策供给、提供“店小二”“保姆式”服务、建立…...

编程日记 2023/2/12 14:49:18

HTML img和video object-fit 属性

简介 Css中object-fit主要是应用到img标签和Video标签的，来控制显示缩放效果的。首先我们存在一张图片，原始图片的尺寸是 1080px x 600px, 展示效果如下： 如果我们的css样式中的img大小设定并不能满足图片的原始大小，比如我们的…...

编程日记 2023/2/12 14:48:08

Pascal版本的 - freopen

参数 filename -- 这是包含要打开的文件的名称的字符串。 mode -- 这是包含文件访问模式的字符串。它包括 - 高级编号模式&说明1个 “r” 打开文件进行读取。该文件必须存在。 2个 “w” 创建一个用于写入的空文件。如果已存在同名文件，则删除其内容并将该文件…...

编程日记 2023/2/12 14:47:00

STM32单片机OLED显示

OLED接口电路STM32单片机OLED显示程序源代码#include "sys.h"#define OLED_RST_Clr() PCout(13)0 //RST#define OLED_RST_Set() PCout(13)1 //RST#define OLED_RS_Clr() PBout(4)0 //DC#define OLED_RS_Set() PBout(4)1 //DC#define OLED_SCLK_Clr()PCout(15)0 //SCL…...

编程日记 2023/2/12 14:45:51

备战金三银四，软件测试面试题（全）

1.B/S架构和C/S架构区别 B/S 只需要有操作系统和浏览器就行，可以实现跨平台，客户端零维护，维护成本低，但是个性化能力低，响应速度较慢 C/S响应速度快，安全性强，一般应用于局域网中，因…...

编程日记 2023/2/12 14:44:42

硬件篇-配置

机箱->239元机箱选用的itx迷你机箱，为了后期nas方便拓展选了4盘位，该机箱还是比较符合我的预期的，颇有种麻雀虽小五脏俱全的感觉，机箱可以安装matx主板和itx主板，还是比较方便的，机箱带三个大散热风扇&…...

编程日记 2023/2/12 14:43:35

网页内容中文乱码解决办法

原因是因为没有网页没有设置charset是utf-8 解决办法 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><body></body> </html>...

编程日记 2023/2/12 14:42:26

【C++之容器篇】造轮子：模拟实现vector类

目录前言一、项目结构1. vector的简介2. 项目结构二、vector的底层结构三、默认成员函数(Member functions)1. 构造函数(1)无参构造函数(2)使用n个值来构造对象(3)使用一段迭代器区间来进行初始化(4)测试构造函数2. 拷贝构造函数（现代写法）3. 析构函数4.…...

编程日记 2023/2/12 14:41:18

C++中的右值引用与移动构造函数

1.右值引用右值引用是 C11 引入的与 Lambda 表达式齐名的重要特性之一。它的引入解决了 C 中大量的历史遗留问题， 消除了诸如 std::vector、std::string 之类的额外开销， 也才使得函数对象容器 std::function 成为了可能。1.1左值、右值的纯右值、将亡值…...

编程日记 2023/2/12 14:40:10

Swift如何使用依赖注入进行解藕

Swift 中可以使用依赖注入（Dependency Injection）来解耦组件之间的依赖关系。依赖注入是一种设计模式，指的是在运行时，将一个组件所依赖的其他组件通过构造函数或者属性注入的方式传递给该组件。例如，有两个组件 A 和…...

编程日记 2023/2/12 14:39:01

合宙ESP32S3-CORE开发板|保姆级|Arduino IDE|windows11|esp32S3支持库|helloword例程：Arduino 环境搭建

Arduino主页网址： Software | Arduino 以windows11版本为例： Arduino IDE最新版本为2.0.3 左边的按钮是直接下载（免捐赠）： 下载安装完成后，更改软件默认语言： 默认的库是不支持ESP32的&#…...

编程日记 2023/2/12 14:37:52

CMake中target_precompile_headers的使用

CMake中的target_precompile_headers命令用于添加要预编译的头文件列表，其格式如下： target_precompile_headers(<target><INTERFACE|PUBLIC|PRIVATE> [header1...][<INTERFACE|PUBLIC|PRIVATE> [header2...] ...]) # 1 target_preco…...

编程日记 2023/2/12 14:36:45

SpringCloud和微服务介绍

SpringCloud介绍 SpringCloud是在SpringBoot的基础上构建的,用于简化分布式系统构建的工具集。该工具集为微服务架构中所涉及的配置管理,服务发现,智能路由,断路器,微代理和控制总线等操作提供了一种简单的开发方式。 SpringCloud中包含了多个子项目： Spring …...

编程日记 2023/2/12 14:35:36

Qt源码编译过程中配置文件中的选项说明

文章目录选项说明默认值顶级安装目录-prefix 部署目录，如目标设备上所示。/usr/local/Qt-$QT_VERSION-extprefix 安装目录，如主机上所示。SYSROOT/PREFIX-hostprefix [dir]主机上运行的生成工具的安装目录。如果未给定[dir]，则将使用当前构建…...

编程日记 2023/2/12 14:34:28

Mysql 增删改查（一） —— 查询（条件查询where、分页limits、排序order by、分组 group by）

查询 select 可以认为是四个基本操作中使用最为频繁的操作，然而数据量比较大的时候，我们不可能查询所有内容，我们一般会搭配其他语句进行查询： 假如要查询某一个字段的内容，可以使用 where假如要查询前几条记录&#…...

编程日记 2023/2/12 14:33:19

VScode 结合clangd 构建linux源代码阅读环境

1、背景介绍上一篇文章：VScode 结合Global构建linux源代码阅读环境 ，介绍了在VS Code工具中通过remote-ssh远程登陆到Linux远程服务器，使用Global构建linux源代码阅读环境，对linux kernel代码进行解析，实现全局搜索、自…...

编程日记 2023/2/12 14:32:09

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

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/6/17 14:49:12

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/7/6 23:00:55

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/6/27 0:52:23

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位）三、定位元素的层级关系（z-i…...

编程新知 2025/7/5 18:36:29

今日科技热点速览

🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧。 🤖 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/6/20 19:12:10

大学生职业发展与就业创业指导教学评价

这里是引用作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。尤其让我…...

编程新知 2025/7/5 20:06:26

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/7/4 18:44:06

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/7/4 14:45:19

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论一、传统路径模型的根本缺陷在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/6/21 7:26:54

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解，现在我们就开始构建项目。目录一、构建工程目录二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/7/6 17:23:03

文章目录

1. 数据代理

1.1 回顾

1.2 开始

2. 事件处理

2.1 v-on:click 点击事件

2.2 事件修饰符

2.3 键盘事件

3. 计算属性

3.1 插值语法实现

3.2 methods实现

3.3 计算属性实现

4. 监视属性

4.1 深度监视

4.2 监视属性的简写形式

4.3 watch 与 computed 对比

相关文章：