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

vue中数据代理和事件处理

news 2026/1/7 14:34:38

数据代理

  • 直接在对象下可直接修改属性的值，而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

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/12/31 19:47:17

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/1/6 8:01:21

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

【大模型】RankRAG：基于大模型的上下文排序与检索增强生成的统一框架

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理&#xff1a;检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目&#xff1a;RankRAG&#xff1a;Unifying Context Ranking…...

编程新知 2026/1/1 23:42:37

js 设置3秒后执行

如何在JavaScript中延迟3秒执行操作 在JavaScript中&#xff0c;要设置一个操作在指定延迟后&#xff08;例如3秒&#xff09;执行&#xff0c;可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法&#xff0c;它接受两个参数&#xff1a; 要执行的函数&…...

编程新知 2025/11/27 19:05:42

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...

编程新知 2025/12/11 8:10:41

ZYNQ学习记录FPGA(二)Verilog语言

一、Verilog简介 1.1 HDL&#xff08;Hardware Description language&#xff09; 在解释HDL之前&#xff0c;先来了解一下数字系统设计的流程&#xff1a;逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端&#xff0c;在这个过程中就需要用到HDL&#xff0c;正文…...

编程新知 2026/1/7 13:15:29

Ray框架：分布式AI训练与调参实践

Ray框架&#xff1a;分布式AI训练与调参实践 系统化学习人工智能网站&#xff08;收藏&#xff09;&#xff1a;https://www.captainbed.cn/flu 文章目录 Ray框架&#xff1a;分布式AI训练与调参实践摘要引言框架架构解析1. 核心组件设计2. 关键技术实现2.1 动态资源调度2.2 …...

编程新知 2026/1/5 7:59:44

【Linux】使用1Panel 面板让服务器定时自动执行任务

服务器就是一台24小时开机的主机&#xff0c;相比自己家中不定时开关机的主机更适合完成定时任务&#xff0c;例如下载资源、备份上传&#xff0c;或者登录某个网站执行一些操作&#xff0c;只需要编写 脚本&#xff0c;然后让服务器定时来执行这个脚本就可以。 有很多方法实现…...

编程新知 2026/1/4 9:41:32

【Elasticsearch基础】Elasticsearch批量操作（Bulk API）深度解析与实践指南

目录 1 Bulk API概述 1.1 什么是批量操作 1.2 Bulk API的优势 2 Bulk API的工作原理 2.1 请求处理流程 2.2 底层机制 3 Bulk API的使用方法 3.1 基本请求格式 3.2 操作类型示例 3.3 响应格式 4 Bulk API的最佳实践 4.1 批量大小优化 4.2 错误处理策略 4.3 性能调…...

编程新知 2025/12/25 20:12:37