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

vue(5)

news 2025/12/16 22:14:01

文章目录

1. 监测数据原理
- 1.1 通过问题引出
- 1.2 开始
- 1.3 Vue.set() 方法
- 1.4 vue 监视数组
- 1.5 小练习
2. 收集表数据
3. 过滤器
4. 内置指令
- 4.1 v-text
- 4.2 v-html
- 4.3 v-cloak
- 4.4 v-once
- 4.5 v-pre

1. 监测数据原理

1.1 通过问题引出

在这里插入图片描述

1.2 开始

要想解决上面的这个问题，需要知道 Vue 是如何监测数组里元素的改变 , 但是为了更好的理解，这里先来说说 vue 是如何监测对象里数据改变的。

回顾：数据代理 Vue (3) ，之前说过数据代理，是让 vm._data = data , 其实这是第二步，第一步是对 data 进行加工 ,

vue 监视原理：

在这里插入图片描述

简单来说，监视数据的原理就是靠 set ，当我们修改 data中的属性是 (比如上面的 name ， address) ， vue 就会重新解析模板，

生成新的虚拟 DOM ，然后新旧虚拟 DOM 对比，更新页面 .

知道了 set ，下面就来看看 set 这个 API

1.3 Vue.set() 方法

在这里插入图片描述

图二：上面是在控制台上写 ,下面写一个按钮，点击添加学校年龄

在这里插入图片描述

图三： set 的局限性

在这里插入图片描述

1.4 vue 监视数组

在这里插入图片描述

vue 文档 : 列表渲染 — Vue.js (vuejs.org)

图二：

在这里插入图片描述

可以看到想要 vue 监视到数组的变化，需要通过上面列举的方法，其实还可以通过之前说过的 set 来改 .

在这里插入图片描述

同理 $set 一样，这里不展示了 .

1.5 小练习

将之前说过的 API 使用以下 :

<!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><script src="../../js/vue.js"></script></head><body><div id="root"><button @click="student.age++">年龄+1岁</button><br /><br /><button @click="addSex()">添加性别属性, 默认值: 男</button><br /><br /><button @click="removeSex()">隐藏 性别</button><button @click="updateSex()">修改性别</button><br /><br /><button @click="addFriend()">在列表首页添加一名朋友</button><br /><br /><button @click="updateFirstFriendName">修改第一个朋友的名字为: 鲲鹏</button><br /><br /><button @click="addHobby">添加一个爱好</button><br /><br /><button @click="updateHobby">修改第一个爱好为: 打羽毛球</button><h3>姓名: {{student.name}}</h3><h3>年龄: {{student.age}}</h3><h3 v-if="student.sex">性别: {{student.sex}}</h3><h2>爱好: </h2><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h2>朋友: </h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}-{{f.age}}</li></ul></div><script>// let flag = false;let vm = new Vue({el: "#root",data: {student: {name: "张三",age: 18,// 爱好hobby: [// 数组 "抽烟","喝酒","烫头",],flag: false,friends: [{name: '张三', age: 35},{name: "李四", age: 60}]},},methods: {addSex() {// this.$set(this.student,'sex','男')Vue.set(this.student, 'sex', '男')this.flag = true},updateSex() {if (this.flag) {if (this.student.sex === '男') {this.student.sex = '女'} else {this.student.sex = '男'}}},removeSex() {if (this.student.sex) {this.flag = falsethis.student.sex = null}},addFriend() {this.student.friends.unshift({ name: "坤哥", age: 80 })},updateFirstFriendName() {this.student.friends[0].name = '鲲鹏'},addHobby() {this.student.hobby.push('学习')},updateHobby(){this.student.hobby.splice(0,1,'打羽毛球')// 方法二 :// Vue.set(this.student.hobby,0,'打羽毛球')// 方法三 :// this.$set(this.student.hobby,0,'打羽毛球')}}})</script>
</body></html>

总结 :

Vue 监视数据的原理 :

vue 会监视 data 中所有层次的数据 .
如何监测对象中的数据 ?

a.通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据 (data 中写的)
- 对象中后追加的属性， Vue 默认不做响应式处理
- 如需要给后添加的属性做响应式，请使用这如下 API
- Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)
如何监测数组中的数据？

a. 通过包裹数组更新元素的方式实现，本质就是做了两件事 :
- 通过调用原生对应的方法对数组进行更新.
- 重新解析模板，进而更新页面
在Vue 修改数组中的某个元素一定要用如下方法 :

a. 使用这些 API ： push() , pop() , shift() , unshift(), splice() , sort() ， reverse() ,

b. Vue.set() 或 vm.$set()

特别注意： Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象 (data) 添加属性

最后说以下数据劫持 :

在这里插入图片描述

2. 收集表数据

要求：

在这里插入图片描述

实现：

在这里插入图片描述

图二：

在这里插入图片描述

图三：

在这里插入图片描述

图四：

在这里插入图片描述

图五：补充

在这里插入图片描述

附上代码：

<!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"><form @submit.prevent="demo"><!-- form 表单提交数据 --><label for="demo"> 账号 :</label><input type="text" id="demo" v-model.trim="account"><br /><br /><label for="demo2"> 密码 :</label><input type="text" id="demo2" v-model="password"><br /><br /><label for="demo3">年龄 : </label><input type="number" id="demo3" v-model.number="age"><br /><br />男 <input type="radio" name="sex" v-model='sex' value="male">女 <input type="radio" name="sex" v-model='sex' value="female"><br /><br />爱好 :学习 <input type="checkbox" v-model='hobby' value="study">打游戏<input type="checkbox" v-model='hobby' value="game">吃饭<input type="checkbox" v-model='hobby' value="eat"> <br /><br /><select v-model="city"><option value="">请选择小区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select><br /><br />其他信息 :<textarea v-model.lazy="other"></textarea><br /> <br /><input type="checkbox" v-model="agree">阅读并接收<a href="#">《用户协议》</a><button>提交</button></form></div>
</body><script>let vm = new Vue({el: "#root",data: {account: '',password: '',sex: 'female',hobby: [],city: 'beijing',other: '',agree: '',age: '',},methods: {demo() {console.log(JSON.stringify(this._data))}}})
</script></html>

总结：

收集表单数据 :

若 <input type="text" /> ，则 v-model 收集的是 value 值，用户输入的就是 value值 .
若 <input type="radio" /> , 则 v-model 收集的就是 value 值，且要给标签配置 value 值
若 <input type="checkbox" />

a. 没有配置 inpput 的value 属性，那么收集的就是 checked (勾选 or 未勾选，是布尔值)

b. 配置 inputd value 属性 :
- v-model 的初始值是非数组，那么收集的就是 checked (勾选 or 未勾选，是布尔值)
- v-model 的初始值是数组，那么收集的就是 value 组成的数组
备注： v-model的三个修饰符

a. lazy ：失去焦点再收集数据

b. number : 数组字符串转为有效的数字

c. trim : 输入首位空格过滤

3. 过滤器

在这里插入图片描述

注意：过滤器并不是必要的，而是 vue 提供一个新的数据处理的方式，不想用，正常使用计算属性， methods也能完成.

下面这里通过第三方库来操作我们的时间 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

在这里插入图片描述

下面先通过计算属性来完成要求 :

计算属性实现 :

在这里插入图片描述

methods 实现

在这里插入图片描述

过滤器实现

在这里插入图片描述

上面写的过滤器都是局部的过滤器，只能由创建过滤的 vue 实例使用 , 如果在出现一个vue 实例就无法使用了 .

下面来学习创建全局的过滤器 :

在这里插入图片描述

总结：

过滤器：

定义：对要显示的数据进行特定格式化再显示(适用一些简单逻辑的处理) .

语法：

注册过滤器 : Vue.filter(name,callback) 或 new Vue {filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind : 属性 = “xxx | 过滤器名”

备注：

过滤器也可接收额外参数，多个过滤器也可以串联
并没有改变原本的庶几乎，是产生新的对应的数据

4. 内置指令

之前学过 v-on , v-bind , v-if , v-for ，这里就来学习一下 vue 提供的其他指令 .

回顾一下之前学过的：

在这里插入图片描述

4.1 v-text

从 v-text 名字就可以知道，这个指令是将一个文本渲染到页面上，下面演示一下下：

在这里插入图片描述

图二：

在这里插入图片描述

4.2 v-html

v-html ：向指定节点中渲染含 html 结构的内容 .

在这里插入图片描述

4.3 v-cloak

在这里插入图片描述

4.4 v-once

在这里插入图片描述

4.5 v-pre

在这里插入图片描述

vue(5)

文章目录1. 监测数据原理1.1 通过问题引出1.2 开始1.3 Vue.set() 方法1.4 vue 监视数组1.5 小练习2. 收集表数据3. 过滤器4. 内置指令4.1 v-text4.2 v-html4.3 v-cloak4.4 v-once4.5 v-pre1. 监测数据原理 1.1 通过问题引出 1.2 开始要想解决上面的这个问题 ，需要…...

编程日记 2023/4/21 10:10:46

Android OTA 相关工具(一) 虚拟 A/B 之 snapshotctl

Android 虚拟 A/B 分区推出快三年了，不论是 google 还是百度结果，除了源代码之外，竟然没有人提到这个 Android Virtual A/B 的调试工具 ，着实让人感觉意外。所以我相信还有不少人不知道 Android OTA 到底都有哪些调试工具&#…...

编程日记 2023/5/9 12:43:30

QT for Android BLE Bluetooch QT BLE

小白式的介绍，很详细了，很多主要内容写在程序的注释里，慢慢看下面是我的源码 https://download.csdn.net/download/qq_27620407/87464307 源码打不开的话可以试试下图的操作，之后电机确定，可能是加图标搞的&#xff0…...

编程日记 2023/4/26 7:06:08

【蓝桥集训】第四天——双指针

作者：指针不指南吗专栏：Acwing 蓝桥集训每日一题 🐾或许会很慢，但是不可以停下🐾 文章目录1.字符串删减2.最长连续不重复子序列3.数组元素的目标和1.字符串删减给定一个由 n 个小写字母构成的字符串。现在&#xff…...

编程日记 2023/5/2 18:29:35

List＜Map＜String, Object＞＞的数据结构的添加和删除实例

对List<Map<String, Object>>的数据结构的添加和删除实例添加//初始化List<Map<String, Object>> products new ArrayList<Map<String,Object>>();//也可以这样初始化List<Map<String, Object>> products null//初始Map<…...

编程日记 2023/5/6 19:54:17

5.2 线程实际案例练习

文章目录1.概述2.实现方案一：继承Thread2.1 代码实现2.2 代码分析3.实现方案二：实现Runnable接口3.1 代码实现3.2 代码分析4.实现方案三：构建线程池4.1 代码实现4.2 代码分析1.概述接下来我们通过一个售票案例的实际操作来深入理解线程的相…...

编程日记 2023/5/7 22:30:29

stm32f407探索者开发板（十七）——串口寄存器库函数配置方法

文章目录一、STM32串口常用寄存器和库函数1.1 常用的串口寄存器1.2 串口相关的库函数1.3 状态寄存器（USART_ SR）1.4 数据寄存器（USART_ DR）1.5 波特率寄存器（USART_BRR）二、串口配置一般步骤一、STM32串口常…...

编程日记 2023/5/3 8:03:39

山西省2023年软考报名3月14日开始

根据2023年上半年计算机技术与软件专业技术资格(水平)考试工作计划，可以得知，全国考务管理服务平台将于2023年3月13日开放，各地开始组织报名，如山西已发布2023上半年报名简章，从3月14号开始报名。软考报名官网大部…...

编程日记 2023/5/5 15:18:57

进程章节总结性实验

进程实验课笔记本节需要有linux基础，懂基本的linux命令操作即可。 Ubuntu镜像下载 https://note.youdao.com/s/VxvU3eVC ubuntu安装 https://www.bilibili.com/video/BV1j44y1S7c2/?spm_id_from333.999.0.0 实验环境ubuntu22版本，那个linux环境都可以…...

编程日记 2023/5/7 22:31:59

【MyBatis】MyBatis的缓存

10、MyBatis的缓存 10.1、MyBatis的一级缓存一级缓存是SqlSession级别的，通过同一个SqlSession查询的数据会被缓存，下次查询相同的数据，就会从缓存中直接获取，不会从数据库重新访问使一级缓存失效的四种情况： 不…...

编程日记 2023/5/6 3:08:06

MyBatis基本使用

一、简介 MyBatis 中文文档 https://mybatis.org/mybatis-3/zh/index.html 1.什么是 MyBatis 概述：MyBatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBa…...

编程日记 2023/5/8 12:14:17

如何运行YOLOv6的代码实现目标识别？

YOLOv6是由美团视觉团队开发的1.环境配置我们先把YOLOv6的代码clone下来git clone https://github.com/meituan/YOLOv6.git安装一些必要的包pip install pycocotools2.0作者要求pytorch的版本是1.8.0,我的环境是1.7.0，也是可以正常运行的pip install -r requirement…...

编程日记 2023/5/7 22:33:28

新品BCM6755A1KFEBG/MT7921LE/MT7921AU WiFi芯片

博通在WiFi市场具有相当的实力。在WiFi6上有下面这几个解决方案：型号：BCM6755 BCM6755A1KFEBG类型：四核1.5GHz CPU封装：BGA批次：新BCM6755和BCM6750还是A7架构，更多的用在中低端型号上。BCM6755和BCM6750 C…...

编程日记 2023/4/30 7:50:25

析构函数、拷贝构造

1、析构函数析构函数的定义方式函数名和类名相同，在类名前加~，没有返回值类型，没有函数形参（不能重载）当对象生命周期结束的时候，系统会自动调用析构函数先调用析构函数，再释放对象的空间析构函…...

编程日记 2023/5/9 12:45:38

光学镜头是制作过程阶段理解

光学镜头是由多组镜片组合而成，它是摄影机投影一及显微镜上必不可少的部件。那么光学镜头是如何制造的呢？光学镜头的制作分为以下四个阶段：第一、首先将一大块光学玻璃用钻石锯片进行切片，然后用钻头在每一块玻璃切片上钻出多块冰…...

编程日记 2023/5/9 16:02:45

实验室设计|实验室设计要点SICOLAB

一、实验室设计规划要素1、实验室布局：实验室的布局要符合实验室工作流程，可以将实验室划分为干净区和污染区，以确保实验室的卫生和实验的准确性。2、设备选购：根据实验需要选择适当的设备，并确保设备的质量和性能符合…...

编程日记 2023/5/7 5:30:40

I.MX6ULL_Linux_系统篇(16) uboot分析-启动流程

原文链接：I.MX6ULL_系统篇(16) uboot分析-启动流程 – WSY Personal Blog (cpolar.cn) 前面我们详细的分析了 uboot 的顶层 Makefile，了解了 uboot 的编译流程。本章我们来详细的分析一下 uboot 的启动流程，理清 uboot 是如何启动的。通过对 …...

编程日记 2023/5/7 6:49:39

【C#】async关键字修饰后有无await的影响

文章目录测试总结拓展：js的async await问题参考测试来自微软官网的说法： 异步方法通常包含 await 运算符的一个或多个匹配项，但缺少 await 表达式不会导致编译器错误。如果异步方法未使用 await 运算符标记悬挂点，则该方法将作…...

编程日记 2023/4/28 22:43:51

Interspeech2022 | 一种基于元辅助学习的低资源口语语义理解方法

中国移动研究院首席科学家冯俊兰博士带领人工智能与智慧运营中心语音团队共同撰写的文章《Meta Auxiliary Learning for Low-resource Spoken Language Understanding》被语音国际顶会Interspeech2022接收。关于Interspeech Interspeech 是国际最大且最全面关于言语科学与技…...

编程日记 2023/5/3 21:57:52

File类的用法和InputStream，OutputStream的用法

这里写自定义目录标题一、File类1.构造方法2.普通方法二、InputStream1.方法2.FileInputStream3.Scanner类的应用三、OutputStream1.方法2.FileOutputStream3.PrintWriter类的应用一、File类 1.构造方法签名说明File(File parent, Stringchild)根据父目录孩子文件路径&…...

编程日记 2023/5/2 4:55:05

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2025/9/22 15:46:39

python/java环境配置

环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...

编程新知 2025/12/15 13:15:32

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/12/13 2:58:08

k8s业务程序联调工具-KtConnect

概述原理工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...

编程新知 2025/12/14 20:43:55

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘一、系统概述本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置五、字节码修改实现代码&#…...

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

《C++ 模板》

目录函数模板类模板非类型模板参数模板特化函数模板特化类模板的特化模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。函数模板函数模板可以简化函数重载的代码。格式：templa…...

编程新知 2025/6/11 3:20:47

Python Ovito统计金刚石结构数量

大家好，我是小马老师。本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/12/9 22:26:37

C++ 设计模式《小明的奶茶加料风波》

👨‍🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...

编程新知 2025/12/14 4:06:59

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天，通信网络的角色正变得愈发关键。 2025年6月6日，为期三天的华南国际工业博览会在深圳国际会展中心（宝安）圆满落幕。作为国内工业通信领域的技术型企业，光路科技（Fiberroad&…...

编程新知 2025/12/14 23:52:18

文章目录

1. 监测数据原理

1.1 通过问题引出

1.2 开始

1.3 Vue.set() 方法

1.4 vue 监视 数组

1.5 小练习

2. 收集表数据

3. 过滤器

4. 内置指令

4.1 v-text

4.2 v-html

4.3 v-cloak

4.4 v-once

4.5 v-pre

相关文章：

1.4 vue 监视数组