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

vue中数据代理和事件处理

news 2025/11/19 0:16:54

数据代理

  • 直接在对象下可直接修改属性的值，而Object提供defineProperty()对属性进行控制

  • <script>let perosn = {name: '小蜜',sex: '男',//age: 19 }Object.defineProperty(perosn,'age',{value: 19//enumerable: true ,添加enumerable将默认值改为true，即可对枚举出age属性，控制属性是否可以枚举，默认值是faule//writable： true ,控制属性是否可以被修改，默认值为false//configurable: true ,控制属性是否可以被删除，默认值为false})//输出的对象person中，age为颜色淡且值为19，该值不可以被枚举出来console.log(person)//将person的属性值遍历出来。第一条只能遍历数组，第二条for-each能遍历数组和对象console.log(Object.keys(person))for(let key in person ){console.log(perosn[key])}</script>

  • 当修改age属性时，get函数也就是getter就会被调用，返回值为age的值

  • 当修改age属性时，set函数也会被调用，且会受到修改的具体值

  • get函数只用于获取获取number,set函数用于number修改时age值也被修改

  • <script>let number = 18let perosn = {name: '小蜜',sex: '男',}Object.defineProperty(perosn,'age',{//简写形式:get(){} ,如果修改number的值，那么get的值也会被修改get: function(){console.log('修改了age')return number},set(val){console.log('修改age属性，值为val')number = val}})}</script>

事件处理

  • methods方法的引用

  • <body>//不传入参数的时候直接show01<button @click="show01">点击我显示啊</button>//既想传入参数又想event显示则，show02($event,66)<button @click="show02($event,66)">点击我显示</button>
</body>
<script>const vm = new Vue({el: '#root',data: {name: '小米'},methods: {//number为show02方法的参数变量show02(event,number){console.log(event,number)//console.log(event.target.innerText)输出的是点击我显示//console.log(this)。this指代vm}}})
</script>

  • 事件的修饰符

  • Vue中事件修饰符：

  • prevent : 阻止默认事件（常用）

  • stop: 阻止事件冒泡（常用）

  • once: 事件只显示一次（常用）

  • capture: 使用事件的捕获模式

    capture作用是让事件在捕获中获取数据。默认是冒泡的时候输出shu'ju

  • self： 自有even.target是当前操作的元素才触发事件

  • passive: 事件的默认行为立即执行，无需等待事件回调执行完毕；

  • <body>//click.prevent使点击的a标签不进行跳转网页<a href="http://www.baidu.com" @click.prevent="show">点我显示</a>//当下面的情况出现，运行后会弹框两次，阻止冒泡引用stop<div @click="showInfo"><botton @click.stop="showInfo">点我</botton></div>
</body>
<script>const vm = new Vue({el: '#root',data: {name: '小米'},methods: {//用e代替eventshow(e){alter('你好')            }}//输出的结果是只显示你好提示框                     })
</script>

相关文章：

vue中数据代理和事件处理

数据代理 直接在对象下可直接修改属性的值&#xff0c;而Object提供defineProperty()对属性进行控制 <script>let perosn {name: 小蜜,sex: 男,//age: 19 }Object.defineProperty(perosn,age,{value: 19//enumerable: true ,添加enumerable将默认值改为true&#xff0c…...

编程日记 2023/11/13 1:47:33

Unity之NetCode多人网络游戏联机对战教程(8)--玩家位置同步

文章目录 前言添加相机玩家添加对应组件服务端权威&#xff08;server authoritative&#xff09;客户端权威&#xff08;client authoritative&#xff09;服务端同步位置阅读与理解PlayerTransformSync.csNetworkVariableUploadTransformSyncTransform 后话 前言 承接上篇&a…...

编程日记 2023/11/13 1:46:32

spring boot 中@Value读取中文配置时乱码

1.spring boot 读取application.properties 该文件是iso8859编码 如果是直接写中文 读取时会乱码 显示成?? 必须得转ascii码才能正常显示 其他方法测试也不行 Value("${apig.order.tiaokong.qianzi}") private String apigOrderTiaokongQianzi;...

编程日记 2023/11/13 1:45:31

选择.NET 还是 Java？

1、.NET Framework的演变&#xff1a; .NET Framework&#xff1a; 最初由Microsoft引入&#xff0c;是一个Windows上的全功能框架。它包含了ASP.NET、Windows Presentation Foundation&#xff08;WPF&#xff09;、Windows Communication Foundation&#xff08;WCF&#xff…...

编程日记 2023/11/13 1:44:30

vue 高阶组件；高阶组件

vue 高阶组件;高阶组件 文章目录 vue 高阶组件;高阶组件1. 什么是高阶组件2. 高阶组件的作用3. 高阶组件的使用 例子1&#xff1a;创建一个简单的高阶组件例子2&#xff1a;使用element-ui的高阶组件 1. 什么是高阶组件 高阶组件是一个函数&#xff0c;传给它一个组件&#xf…...

编程日记 2023/11/13 1:42:28

数据结构：树的基本概念（二叉树，定义性质，存储结构）

目录 1.树1.基本概念1.空树2.非空树 2.基本术语1.结点之间的关系描述2.结点、树的属性描述3.有序树、无序树4.森林 3.树的常考性质 2.二叉树1.基本概念2.特殊二叉树1.满二叉树2.完全二叉树3.二叉排序树4.平衡二叉树 3.常考性质4.二叉树的存储结构1.顺序存储2.链式存储 1.树 1.…...

编程日记 2023/11/13 1:40:26

【Qt之QStandardItemModel类】介绍

描述 QStandardItemModel类提供了一个通用的模型&#xff0c;用于存储自定义数据。QStandardItemModel可以用作Qt标准数据类型的存储库。它是 Model/View类 之一&#xff0c;是 Qt的model/view框架 的一部分。 QStandardItemModel提 供了一种基于项目的传统方法来处理模型。 Q…...

编程日记 2023/11/13 1:39:25

01-Spring中的工厂模式

工厂模式 工厂模式的三种形态: 工厂模式是解决对象创建问题的属于创建型设计模式,Spring框架底层使用了大量的工厂模式 第一种&#xff1a;简单工厂模式是工厂方法模式的一种特殊实现,简单工厂模式又叫静态工厂方法模式不属于23种设计模式之一第二种&#xff1a;工厂方法模式…...

编程日记 2023/11/13 1:37:23

Linux是什么，Linux系统介绍

很多小伙伴都不是那么了解和知道Linux&#xff0c;到底Linux是什么&#xff1f; 像大家用到的安卓手机&#xff0c;生活中用到的各种智能设备&#xff0c;比如路由器&#xff0c;光猫&#xff0c;智能家具等&#xff0c;很多都是在Linux操作系统上。 Linux是什么&#xff1f;Li…...

编程日记 2023/11/13 1:36:23

爬虫项目（11）：使用多线程对36手机高清壁纸批量抓取

文章目录 书籍推荐目标网址单线程实现多线程实现爬取结果书籍推荐 如果你对Python网络爬虫感兴趣，强烈推荐你阅读《Python网络爬虫入门到实战》。这本书详细介绍了Python网络爬虫的基础知识和高级技巧，是每位爬虫开发者的必读之作。详细介绍见👉： 《Python网络爬虫入门到…...

编程日记 2023/11/13 1:35:22

JavaScript_动态表格_删除功能

1、动态表格_删除功能 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>动态表格_添加和删除功能</title><style>table{border: 1px solid;margin: auto;width: 100%;}td,th{text-align: …...

编程日记 2023/11/13 1:34:21

一步一步开发微信小程序（Django+Mysql）

前提&#xff1a;假设你已经安装好Anaconda&#xff0c;微信开发者工具&#xff0c;MySQL数据库&#xff0c;IDE等工具 工具下载地址&#xff1a; Anaconda&#xff1a;https://www.anaconda.com/download MySQL&#xff1a;https://dev.mysql.com/downloads/mysql/ 微信开…...

编程日记 2023/11/13 1:33:19

mysql 讲解(1)

文章目录 前言一、基本的命令行操作二、操作数据库语句2.1、创建数据库2.2、删除数据库2.3、使用数据库2.4 查看所有数据库 三、列的数据类型3.1 字符串3.2 数值3.3 时间日期3.4 空3.5 int 和 varchar问题总结&#xff1a; 四、字段属性4.1 UnSigned4.2 ZEROFILL4.3 Auto_InCre…...

编程日记 2023/11/13 1:32:18

k8s关于metadata、spec.containers、spec.volumes的属性介绍（yaml格式）

目录 一.metadata常用属性 二.spec.containers子属性介绍 explain pod.spec.containers给出的参考 1.command示例演示 2.env和envFrom示例演示 3.ports部分详解 4.resources部分详解 5.startupProbe格式演示 6.terminationMessagePath和terminationMessagePolicy格式演…...

编程日记 2023/11/13 1:31:17

腾讯域名优惠卷领取

腾讯域名到到期了&#xff0c;听说申请此计划&#xff0c;可获得优惠卷&#xff0c;看到网上5年域名只需要10元&#xff0c;姑且试试看。 我的博客即将同步至腾讯云开发者社区&#xff0c;邀请大家一同入驻&#xff1a;https://cloud.tencent.com/developer/support-plan?in…...

编程日记 2023/11/13 1:28:14

elastic-job 完结篇

一 elastic-job 1.1 案例场景分析 1.设置4个分片&#xff0c;10秒执行一次。 分片弹性扩容缩容机制测试&#xff1a; 测试1&#xff1a;测试窗口1不关闭&#xff0c;再次运行main方法查看控制台日志&#xff0c;注意修改application.properties中的 server.port&#xf…...

编程日记 2023/11/13 1:27:13

基于 Gin 的 HTTP 代理 demo

上次用 TCP 模拟了一个 HTTP 代理之后&#xff0c;感觉那样还是太简陋了&#xff0c;想着是不是可以用框架来做一个有点实际用处的东西。所以&#xff0c;就思索如何用 golang 的 Gin 框架来实现一个&#xff1f;嗯&#xff0c;对的你没有听错&#xff0c;是 gin 框架。你可能会…...

编程日记 2023/11/13 1:26:12

【ATTCK】MITRE Caldera - 测试数据泄露技巧

CALDERA是一个由python语言编写的红蓝对抗工具&#xff08;攻击模拟工具&#xff09;。它是MITRE公司发起的一个研究项目&#xff0c;该工具的攻击流程是建立在ATT&CK攻击行为模型和知识库之上的&#xff0c;能够较真实地APT攻击行为模式。 通过CALDERA工具&#xff0c;安全…...

编程日记 2023/11/13 1:25:11

【数据结构】树与二叉树（十二）：二叉树的递归创建（算法CBT）

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…...

编程日记 2023/11/13 1:23:09

Qt绘制网格和曲线

绘制网格&#xff1a; void Widget::drawGrid(QPainter &p, QRect &windRect) {QRect rect(windRect.left()m_margins.left(),windRect.top()m_margins.top(),windRect.width()-m_margins.left()-m_margins.right(),windRect.height()-m_margins.top()-m_margins.bo…...

编程日记 2023/11/13 1:22:08

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/11/18 10:01:27

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/11/18 6:33:37

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/11/18 11:28:54

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/9/21 1:58:01

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

编程新知 2025/11/16 22:11:58

CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？

在现代前端开发中&#xff0c;Utility-First (功能优先) CSS 框架已经成为主流。其中&#xff0c;Tailwind CSS 无疑是市场的领导者和标杆。然而&#xff0c;一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...

编程新知 2025/11/17 9:32:47

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...

编程新知 2025/11/16 23:52:12