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

【Vue】Vue2（2）

news 2026/5/21 19:32:20

文章目录

1 数据代理
- 1.1 回顾Object.defineproperty方法
- 1.2 何为数据代理
- 1.3 Vue中的数据代理
2 事件处理
- 2.1 事件的基本使用
- 2.2 事件修饰符
- 2.3 键盘事件

1 数据代理

1.1 回顾Object.defineproperty方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>回顾Object.defineproperty方法</title></head><body><script type="text/javascript" >let number = 18let person = {name:'张三',sex:'男',//age: 18 直接写可以随意修改和删除//age: number，number变化age不变}Object.defineProperty(person,'age',{// value:18,// enumerable:true,  //控制属性是否可以枚举（不参与遍历），默认值是false// writable:true,    //控制属性是否可以被修改，默认值是false// configurable:true //控制属性是否可以被删除，默认值是false//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值get(){console.log('有人读取age属性了')return number},//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值set(value){console.log('有人修改了age属性, 且值是',value)number = value}})//不可枚举就不能遍历// console.log(Object.keys(person)) /*for(let key in person){console.log(person[key]);}*/console.log(person)</script></body>
</html>

1.2 何为数据代理

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>何为数据代理</title></head><body><!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）--><script type="text/javascript" >let obj = {x: 100}let obj2 = {y: 200}Object.defineProperty(obj2,'x',{ // obj2也能访问和操作xget(){return obj.x },set(value){obj.x = value}})</script></body>
</html>

1.3 Vue中的数据代理

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue中的数据代理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。--><!-- 准备好一个容器--><div id="root"><h2>学校名称：{{name}}</h2> <!-- 若没有数据代理：{{_data.name}}麻烦 --><h2>学校地址：{{address}}</h2></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// vm身上没有name和address，但有_data// vm._data === data// vm.name => setter => dataconst vm = new Vue({ // 配置对象el:'#root',data:{name:'尚硅谷',address:'宏福科技园'}})</script>
</html>

2 事件处理

2.1 事件的基本使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件的基本使用</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 事件的基本使用：1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；2.事件的回调需要配置在methods对象中，最终会在vm上；3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><!-- <button v-on:click="showInfo">点我提示信息</button> --><button @click="showInfo1">点我提示信息1(不传参)</button><button @click="showInfo2($event, 66)">点我提示信息2(传参)</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'尚硅谷',},methods:{ // 方法没有数据代理showInfo1(event){// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert('同学你好！')},showInfo2(event, number){console.log(event, number)// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert('同学你好！！')}}})</script>
</html>

2.2 事件修饰符

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件修饰符</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style></head><body><!-- Vue中的事件修饰符：1.prevent：阻止默认事件（常用）；2.stop：阻止事件冒泡（常用）；3.once：事件只触发一次（常用）；4.capture：使用事件的捕获模式；5.self：只有event.target是当前操作的元素时才触发事件；6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 阻止默认事件(跳转页面)（常用） --><a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button><!-- 修饰符可以连续写 --><!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> --></div><!-- 事件只触发一次（常用） --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件的捕获(捕获--由外向内，冒泡--由内向外)模式，在捕获阶段就处理事件(正常是在冒泡阶段处理事件) --><div class="box1" @click.capture="showMsg(1)">div1 输出: 1<div class="box2" @click="showMsg(2)"><!-- 若box1没有.capture，输出：2 1 -->div2 输出: 1 2</div></div><!-- 只有event.target是当前操作的元素时才触发事件； --><div class="demo1" @click.self="showInfo"><!-- 若不加.self，点击按钮时就冒泡了，弹出两次框 --><button @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； --><ul @wheel.passive="demo" class="list"> <!-- .passive对scroll没有影响，scroll本身就是先移动滚动条 --><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷'},methods:{showInfo(e){alert('同学你好！')console.log(e.target)},showMsg(msg){console.log(msg)},demo(){ // 正常情况下：滑动滚轮 => demo回调函数执行 => 滚动条移动，加.passive后先移动滚动条for (let i = 0; i < 100000; i++) {console.log('#')}console.log('累坏了')}}})</script>
</html>

2.3 键盘事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>键盘事件</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)(tab能把焦点从当前元素上切走，keyup就切走了)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名，例如CapsLock是两个单词，要转换为caps-lock）3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(win)(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。4.也可以使用keyCode去指定具体的按键(@keydown.13)（不推荐），不同键盘编码不统一5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不太推荐）--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"> <!-- @keyup.ctrl.y，ctrl + y时触发 --></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche = 13 //定义了一个别名按键new Vue({el:'#root',data:{name:'尚硅谷'},methods: {showInfo(e){// console.log(e.key, e.keyCode) //按键的名字(Enter)，按键的编码(13)console.log(e.target.value)}},})</script>
</html>

【Vue】Vue2（2）

文章目录 1 数据代理1.1 回顾Object.defineproperty方法1.2 何为数据代理1.3 Vue中的数据代理 2 事件处理2.1 事件的基本使用2.2 事件修饰符2.3 键盘事件 1 数据代理 1.1 回顾Object.defineproperty方法 <!DOCTYPE html> <html><head><meta charset&quo…...

编程日记 2024/10/8 23:20:13

如何实现一个基于 HTML+CSS+JS 的任务进度条

如何实现一个基于 HTMLCSSJS 的任务进度条在网页开发中，任务进度条是一种常见的 UI 组件，它可以直观地展示任务的完成情况。本文将向你展示如何使用 HTML CSS JavaScript 来创建一个简单的、交互式的任务进度条。用户可以通过点击进度条的任意位置来…...

编程日记 2024/10/8 23:19:12

学会流体力学，冬天洗澡再也不冷啦

前些日子收到一位网友“究极理性怪物”的私信，说最近在学校的公共浴室洗澡时，快被冻死了，希望我从流体力学角度帮他分析一下浴室的温度分布，以便找到相对温暖的洗澡位置。我看到后觉得很有意思，就与他展开了关于澡堂…...

编程日记 2024/10/8 23:18:10

WPF下使用FreeRedis操作RedisStream实现简单的消息队列

Redis Stream简介 Redis Stream是随着5.0版本发布的一种新的Redis数据类型：高效消费者组：允许多个消费者组从同一数据流的不同部分消费数据，每个消费者组都能独立地处理消息，这样可以并行处理和提高效率。阻塞操作：消费者可以设置阻塞操作，这样它们会在流中有新数据…...

编程日记 2024/10/8 23:17:09

踩坑NVTX

最开始在【简说】NVTX Nsight Nvidia性能分析利器看到NVTX的时候，我觉得这是一个好东西啊，可以详细说明每一段时间对应的是哪一段程序。看了一下github，他的文章已经过时，现在已经不需要链接动态库了，直接includ…...

编程日记 2024/10/8 23:15:06

Ubuntu修改IP方法

方法一：通过图形化界面修改IP 打开网络设置： 点击桌面右上角的网络图标，然后选择“设置”或“网络设置”。选择网络接口： 在网络设置窗口中，选择你正在使用的网络接口（有线或无线网络）。进…...

编程日记 2024/10/8 23:14:05

C++——STL简介

目录一、什么是STL 二、STL的版本三、STL的六大组件没用的话..... 不知不觉两个月没写博客了，暑假后期因为学校的事情在忙，开学又在准备学校的java免修，再然后才继续开始学C，然后最近打算继续写博客沉淀一下最近学到的几周…...

编程日记 2024/10/8 23:12:02

[linux] 磁盘清理相关

在 CentOS 7 中清理磁盘空间可以通过多种方法实现，以下是一些常用的步骤和命令： 1. 查找和删除大文件你可以使用 find 命令查找占用大量空间的文件： find / -type f -size 100M 2>/dev/null这条命令会查找大于 100 MB 的文件。你可以根…...

编程日记 2024/10/8 23:08:59

【笔记】DDD领域驱动设计

同名读书笔记，对于一些自觉重要的点进行记录。扩展资源：github.com/evancyz/ddd-learning UML中类图的一些基本知识 - jack_Meng - 博客园最后的第四部分暂时没看 Part Two 模型驱动设计的构造块 Chapter 5 软件中所表示的模型 5.2 模式：…...

编程日记 2024/10/8 23:05:56

用AI构建小程序需要多久？效果如何？

随着移动互联网的快速发展，多端应用的需求日益增长。为了提高开发效率、降低成本并保证用户体验的一致性，前端跨端技术在如今的开发界使用已经非常普遍了，技术界较为常用的跨端技术有小程序技术、HTML5技术两大类。 2023年以来，伴…...

编程日记 2024/10/8 23:03:54

深度学习的应用综述

文章目录引言深度学习的基本概念深度学习的主要应用领域计算机视觉自然语言处理语音识别强化学习医疗保健金融分析深度学习应用案例公式1.损失函数(Loss Function) 结论引言深度学习是机器学习的一个子领域，通过模拟人脑的神经元结构来处理复杂的数据。近年来&…...

编程日记 2024/10/8 23:00:51

whereis命令：查找命令的路径

一、命令简介 whereis 命令用于查找命令的：可执行文件、帮助文件和源代码文件。例如 $ whereis ls ls: /usr/bin/ls /usr/share/man/man1/ls.1.gz找到了 ls 命令的可执行文件、帮助文件的位置。 ‍ 二、命令参数命令格式 whereis [选项] [命令名称]选项…...

编程日记 2024/10/8 22:58:49

【ECMAScript 从入门到进阶教程】第四部分：项目实践（项目结构与管理，单元测试，最佳实践与开发规范，附录）

第四部分：项目实践第十四章项目结构与管理在构建现代 Web 应用程序时，良好的项目结构和管理是确保代码可维护性、高效开发和部署成功的关键因素。这一章将深入讨论项目初始化与配置，以及如何使用构建工具来简化和优化项目建设过程。 14…...

编程日记 2024/10/8 22:57:48

算法讲解—最小生成树（Kruskal 算法）

算法讲解—最小生成树（Kruskal 算法） 简介根据度娘的解释我们可以知道，最小生成树(Minimum Spanning Tree, MST)就是：一个有 n n n 个结点的连通图的生成树是原图的极小连通子图，且包含原图中的所有 n n n 个结点…...

编程日记 2024/10/8 22:53:43

掌握 C# 多线程与异步编程

现代应用程序通常需要执行复杂的计算或处理 I/O 操作，这些操作可能会导致主线程阻塞，从而降低用户体验。C# 提供了多线程与异步编程的多种工具，让我们能够高效地并发处理任务。本文将介绍 C# 中的多线程与异步编程，包括 Thread 类…...

编程日记 2024/10/8 22:51:41

Angular 2 用户输入

Angular 2 用户输入 Angular 2 是一个由 Google 维护的开源前端 web 框架，用于构建单页应用程序（SPA）。它以其高效的双向数据绑定、模块化架构和强大的依赖注入系统而闻名。在 Angular 2 应用程序中，处理用户输入是核心功能之一，因为它允许应用程序响应用户的操作。 Ang…...

编程日记 2024/10/8 22:50:38

线程安全的单例模式 | 可重入 | 线程安全 |死锁（理论）

🌈个人主页： 南桥几晴秋 🌈C专栏： 南桥谈C 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据…...

编程日记 2024/10/8 22:48:36

解决方案：梯度提升树（Gradient Boosting Trees）跟GBDT（Gradient Boosting Decision Trees）有什么区别

文章目录一、现象二、解决方案梯度提升树（GBT）GBDT相同点区别一、现象在工作中，在机器学习中，时而会听到梯度提升树（Gradient Boosting Trees）跟GBDT（Gradient Boosting Decision Trees&…...

编程日记 2024/10/8 22:46:34

亚马逊国际商品详情API返回值：电商精准营销的关键

亚马逊国际商品详情API（Amazon Product Advertising API）为开发者提供了一种获取商品信息的方式，这些信息对于电商精准营销至关重要。通过分析API返回的详细数据，商家可以制定更精准的营销策略，提高用户购买转化率。 …...

编程日记 2024/10/8 22:44:32

python爬虫 - 进阶requests模块

🌈个人主页：https://blog.csdn.net/2401_86688088?typeblog 🔥 系列专栏：https://blog.csdn.net/2401_86688088/category_12797772.html 目录前言一、SSL证书问题 （一）跳过 SSL 证书验证 &#xff0…...

编程日记 2024/10/8 22:43:30

别再只把 AI 当聊天框了！探索 Google DeepMind 的 `agy` 命令行工具与人机协同新姿势

别再只把 AI 当聊天框了！探索 Google DeepMind 的 agy 命令行工具与人机协同新姿势在 AI 辅助编程（AI Coding）卷到飞起的今天，大部分开发者最习惯的可能还是在 IDE 侧边栏里装个插件，或者在网页端和 AI 缝缝补补地复制…...

编程新知 2026/5/21 17:50:00

Python 3.x 下修复MD5编码报错：手把手教你搞定BUUCTF那道‘丢失的MD5’题

Python 3.x下MD5编码报错全解析：从CTF实战到通用解决方案当你在BUUCTF中遇到那道关于"丢失的MD5"的题目时，是否也曾被那个看似简单的编码错误困扰？这不仅仅是一道CTF题目的解法，更是Python 3.x版本中字符串处理机制变…...

编程新知 2026/5/21 17:19:33

告别花屏！手把手教你为STM32H743的RGB屏配置LVGL显示驱动（基于CubeIDE）

告别花屏！STM32H743的RGB屏LVGL显示驱动全流程实战（基于CubeIDE） 在嵌入式GUI开发中，LVGL凭借轻量级、高性能和丰富的控件库成为热门选择。但对于STM32H743这类高性能MCU，如何充分发挥硬件潜力并避免常见显示问题&…...

编程新知 2026/5/21 17:05:27

Redis 集群脑裂深度剖析：成因、危害与防丢失策略

Redis 集群脑裂深度剖析：成因、危害与防丢失策略 1. 引言在 Redis 高可用架构中，主从复制哨兵（Sentinel）模式为我们提供了自动故障转移的能力。然而，在分布式系统中，网络并不可靠——脑裂（Sp…...

编程新知 2026/5/21 16:38:13

淘宝淘金币自动化脚本终极指南：每天节省25分钟的高效神器

淘宝淘金币自动化脚本终极指南：每天节省25分钟的高效神器【免费下载链接】taojinbi 淘宝淘金币自动执行脚本，包含蚂蚁森林收取能量，芭芭农场全任务，解放你的双手项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi 在…...

编程新知 2026/5/21 15:58:39

基于 RPA 自动化技术的私域机器人助手构建指南

利用自动化工作流实现私域运营中的消息智能响应与多任务协同能力介绍在私域流量运营中，如何高效响应用户需求、精细化管理社群是提升转化率的关键。传统的人工客服模式往往面临响应不及时、重复性劳动繁重等问题。本方案基于 RPA（机器人流程自动化…...

编程新知 2026/5/21 13:58:03

智能图像分层革命：5分钟将任何图片转换为可编辑PSD图层

智能图像分层革命：5分钟将任何图片转换为可编辑PSD图层【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider 你是否曾面对一张精美的插画&#xff…...

编程新知 2026/5/21 13:27:22