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

Vue (3)

news 文章来源：https://blog.csdn.net/mu_tong_/article/details/128993819 2025/1/31 7:36:21

文章目录

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

web应用 —— JavaScript

Web应用(acwing) 三、JavaScript 1.JS的调用方式与执行顺序 ①使用方法 HTML页面中任意位置加上<script type"module"></script>标签即可常见使用方式： 直接在<script type"module"></script>标签内写JS代码。直…...

编程日记 2023/2/12 14:30:59

SSM整合SpringSecurity简单使用

一、SpringSecurity 1.1 什么是SpringSecurity Spring Security 的前身是 Acegi Security ，是 Spring 项目组中用来提供安全认证服务的框架。(官网地址) Spring Security 为基于J2EE企业应用软件提供了全面安全服务。特别是使用领先的J2EE解决方案-Spring框架开发…...

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

Java零基础教程——数据类型

目录数据类型数据类型的分类运算符算术运算符符号做连接符的识别自增、自减运算符赋值运算符关系运算符逻辑运算符短路逻辑运算符三元运算符运算符优先级数据类型数据类型的分类引用数据类型（除基本数据类型之外的，如String ） 基本数据类…...

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

【Linux 信号】信号的产生方式、信号的捕捉的全过程

信号的处理方式是远远比信号的产生当闹钟响了就知道时间到了，说明对应信号处理方法比信号产生更早操作系统的信号处理方法在编写操作系统的时候就已经编写好了signal函数1.1所有的信号1.2 signal函数的概念和简单使用捕捉信号就是自定义对应的信号的处理方法9号信号…...

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

代码随想录第58天（动态规划）：● 392.判断子序列 ● 115.不同的子序列

一、判断子序列题目描述： 思路和想法： 这道题目还是最长公共子序列的拓展，只是这里进行删除的一定是t字符串，当不相等时，dp[i][j] dp[i][j - 1]；其余基本一致。当最长公共子序列个数等s.size()时&#x…...

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

代码随想录第55天（动态规划）：● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费

一、最佳买卖股票时机含冷冻期题目描述: 思路和想法： 这道题相较于之前的题目，注重对状态的分析，这里分为四个状态。 （1）状态一，买入状态 dp[i][0] 操作一：前一天就是持有状态（状…...

编程日记 2023/2/12 14:25:15

字符串装换整数(atoi)-力扣8-java

一、题目描述请你来实现一个 myAtoi(string s) 函数，使其能将字符串转换成一个 32 位有符号整数（类似 C/C 中的 atoi 函数）。函数 myAtoi(string s) 的算法如下：读入字符串并丢弃无用的前导空格检查下一个字符（假设还未…...

编程日记 2023/2/12 14:24:07

毕业5年，从月薪3000到年薪40w，我掌握了那些核心技能？（建议收藏）

大家好，我是静静~~是一枚一线大厂的测试开发工程师很多读者私信问我，自己时间不短了，随着工作年限的不断增长，感觉自己的技术水平与自己的工作年限严重不符。想跳槽出去换个新环境吧，又感觉自己的能力达不到心仪公司的…...

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

C++中的并行与并发

1.1 并行基础std::thread 用于创建一个执行的线程实例，所以它是一切并发编程的基础，使用时需要包含 <thread> 头文件， 它提供了很多基本的线程操作，例如 get_id() 来获取所创建线程的线程 ID，使用 join() 来加入…...

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

h2database源码解析-如何更新一条行记录

这里的更新包括两种操作：删、改。更新操作涉及的内容在其他文章里面已经做过介绍了，本文主要是介绍更新的代码流程，以了解更新操作都做了哪些事情。如果有未介绍过的知识点会详细介绍。目录改(update)如何判读是否加了行锁删(delete)改(upda…...

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

手机wap网站建设/优化网络的软件下载

在移动端的开发中经常遇到横向滚动的样式，有时候UI对滚动条的样式有要求，系统自带的滚动条样式就不能满足需求了，下面来分享下手动实现滚动条样式的简单写法。先看效果图吧核心就是1、隐藏系统自带样式；2、计算好滚动条长度的…...

编程日记 2025/1/31 6:12:15

旅游网站设计的意义/上海全网推广

Mysql的Join就是联表查询，常用链接分为：内连接，右连接，左连接。Mysql是不支持外连接，还有自然链接没用用过。首先下图是链接数学几何定义 1》笛卡尔积：CROSS JOIN 笛卡尔积就是将A表的每一条记录与B表的每…...

编程日记 2025/1/31 5:12:53

css 手机网站字体重叠/简阳seo排名优化课程

1 前言最近看了一些同学的面经，发现无论什么技术岗位，还是会问到 get 和 post 的区别，而搜索出来的答案并不能让我们装得一手好逼，那就让我们从 HTTP 报文的角度来撸一波，从而搞明白他们的区别。2 标准答案在开撸之前吗…...

编程日记 2025/1/31 5:10:46

日本哪个浏览器可以在中国用/seo是什么意思为什么要做seo

– Start 点击此处观看本系列配套视频。我们先来看一段 if 语句代码。 score 60if score > 80:grade 优秀 elif score > 60:grade 及格 else:grade 不及格print(grade)事实上，我们还可以这么写。 score 60grade 优秀 if score > 80 else 及格 if…...

编程日记 2025/1/31 2:00:37

购物网站前台功能模块分析/免费推广引流软件

1、关键类 Lucene的搜索过程中涉及的主要类有以下几个： （1）IndexSearcher：执行search()方法的类 （2）IndexReader：对索引文件进行读操作，并为IndexSearcher提供搜索接口 （…...

编程日记 2025/1/30 20:27:41

单位网站建设费用什么会计科目/下载百度

解决方案：在eclipse的目录下创建一个jre文件夹，在jre文件夹里创建一个jdk的bin目录的链接 1、进入到eclipse目录下，右键在终端打开。 2、创建jre目录：mkdir jre 3、进入jre目录：cd jre/ 4、创建jdk的bin目录的…...

编程日记 2025/1/30 19:58:19

文章目录

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 对比

相关文章：