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

vue(5)

news 2025/10/23 22:06:06

文章目录

  • 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 监视数据的原理 :

  1. vue 会监视 data 中所有 层次的数据 .
     

  2. 如何监测对象中的数据 ?

    a.通过 setter 实现监视 ， 且要在 new Vue 时就传入要监测的数据 (data 中 写的)

    • 对象中后追加的属性 ， Vue 默认不做响应式处理
    • 如需要给后添加的属性做响应式 ， 请使用 这如下 API
    • Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)
       

  3. 如何监测数组中的数据 ？

    a. 通过包裹数组更新元素的方式实现 ， 本质就是做了两件事 :

    • 通过调用原生对应的方法对数组进行更新.
    • 重新解析模板，进而更新页面
       

  4. 在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>

 
总结 ：

收集表单数据 :

  1. 若 <input type="text" /> ， 则 v-model 收集的是 value 值 ， 用户输入的就是 value值 .

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

  3. 若 <input type="checkbox" />

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

    b. 配置 inputd value 属性 :

    • v-model 的初始值是非数组，那么收集的就是 checked (勾选 or 未 勾选 ， 是布尔值)
    • v-model 的初始值 是 数组，那么收集的就是 value 组成的数组

  4. 备注 ： v-model的三个修饰符

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

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

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

 

3. 过滤器

 

在这里插入图片描述

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

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

在这里插入图片描述

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

 
计算属性实现 :

在这里插入图片描述

 
methods 实现

在这里插入图片描述

 
过滤器实现

在这里插入图片描述

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

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

在这里插入图片描述

 
总结 ：

过滤器 ：

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

语法 ：

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

备注 ：

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

 

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 开始 要想解决上面的这个问题 &#xff0c;需要…...

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

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

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

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

QT for Android BLE Bluetooch QT BLE

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

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

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

作者&#xff1a;指针不指南吗 专栏&#xff1a;Acwing 蓝桥集训每日一题 &#x1f43e;或许会很慢&#xff0c;但是不可以停下&#x1f43e; 文章目录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.实现方案一&#xff1a;继承Thread2.1 代码实现2.2 代码分析3.实现方案二&#xff1a;实现Runnable接口3.1 代码实现3.2 代码分析4.实现方案三&#xff1a;构建线程池4.1 代码实现4.2 代码分析1.概述 接下来我们通过一个售票案例的实际操作来深入理解线程的相…...

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

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

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

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

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

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

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

进程章节总结性实验

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

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

【MyBatis】MyBatis的缓存

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

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

MyBatis基本使用

一、简介 MyBatis 中文文档 https://mybatis.org/mybatis-3/zh/index.html 1.什么是 MyBatis 概述&#xff1a;MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 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&#xff0c;也是可以正常运行的pip install -r requirement…...

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

新品BCM6755A1KFEBG/MT7921LE/MT7921AU WiFi芯片

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

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

析构函数、拷贝构造

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/10/17 17:04:15

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/9/13 17:45:05

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/7/9 0:26:24

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2025/10/15 23:53:10

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2025/10/17 10:24:10

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...

编程新知 2025/10/23 18:25:55

CVE-2023-25194源码分析与漏洞复现(Kafka JNDI注入)

漏洞概述 漏洞名称&#xff1a;Apache Kafka Connect JNDI注入导致的远程代码执行漏洞 CVE编号&#xff1a;CVE-2023-25194 CVSS评分&#xff1a;8.8 影响版本&#xff1a;Apache Kafka 2.3.0 - 3.3.2 修复版本&#xff1a;≥ 3.4.0 漏洞类型&#xff1a;反序列化导致的远程代…...

编程新知 2025/10/14 18:24:29