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

第六节——Vue中的事件

一、定义事件

Vue 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同

使用@修饰符(v-on:的缩写)+事件名的方式 给dom添加事件后面跟方法名,方法名可以直接加括号如@click="add()"里面进行传参。对应的事件处理函数必须在 methods对象中定义。

<template><div><!-- 在button上定义点击事件 --><button @click="hello('传入的参数')">你好</button></div>
</template>
<script>
export default {/*** methods 在vue定义 方法的属性对象* 所有的方法都必须在methods里面定义*/methods: {hello (msg) {console.log("事件触发啦哈哈哈")console.log(msg)}}
}</script>

二、事件修饰符

为了更好地处理事件,Vue3提供了一些便利的事件修饰符。事件修饰符可以用于改变默认事件行为、限制事件触发条件等如.stop、.prevent、.capture、.self、.once等等。下面是一些常用的事件修饰符用法

1、.stop

阻止事件冒泡,即停止事件在父元素中的传播。

<template><div class="box"  @click="handle2"><div class="box2" @click="handle"></div></div>
</template><script>
export default {methods: {handle () {console.log('触发')},handle2 () {console.log("冒泡")}}
}</script>

2、.prevent

阻止事件的默认行为,如提交表单或点击链接后的页面跳转。

<template><!-- 只触发点击事件,不触发跳转 --><a href="https://www.baidu.com" @click.prevent="handle">百度</a>
</template><script>
export default {methods: {handle() {console.log("触发");}},
};
</script>

3、.once

只触发一次事件处理方法,之后解绑事件

<template><button @click.once="handle">点击一次就失效</button>
</template><script>
export default {methods: {handle() {console.log("触发");},},
};
</script>

三、event对象

1、默认传入获取event

<template><!-- 如果事件什么都不传、并且不写()那么事件处理函数会默认接收到event对象--><button @click="handle">点击</button>
</template><script>
export default {methods: {handle(event) {console.log(event);},},
};
</script>

2、携带其他参数获取event

<template><!-- 使用在template里面使用$event获取当前事件的event对象--><button @click="handle('第一个参数', $event)">点击</button>
</template><script>
export default {methods: {handle(msg, event) {console.log(event);},},
};
</script>

四、在函数内使用this获取当前Vue上下文

可以直接使用this.xx 使用data里定义的状态,或者使用this.xx()调用methods里面定义的其他函数

注意:this指向问题

<template><button @click="handle">点击</button>
</template><script>
export default {data() {return {num: 1,};},methods: {handle() {console.log(this.num);this.handle2()},handle2() {console.log("第二个方法");},},
};
</script>

相关文章:

第六节——Vue中的事件

一、定义事件 Vue 元素的事件处理和 DOM 元素的很相似&#xff0c;但是有一点语法上的不同 使用修饰符&#xff08;v-on:的缩写&#xff09;事件名的方式 给dom添加事件后面跟方法名&#xff0c;方法名可以直接加括号如click"add()"里面进行传参。对应的事件处理函…...

设置GridView单选

/// <summary> /// 设置GridView单选 /// </summary> /// <param name"view"></param> /// <param name"selectCaption"></param> public static void SetGridViewSingleSel…...

[Python从零到壹] 七十二.图像识别及经典案例篇之OpenGL入门及绘制基本图形和3D图

十月太忙,还是写一篇吧!祝大家1024节日快乐O(∩_∩)O 欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家,希…...

论文-分布式-并发控制-Lamport逻辑时钟

目录 前言 逻辑时钟讲解 算法类比为面包店内取号 Lamport算法的时间戳原理 Lamport算法的5个原则 举例说明 算法实现 参考文献 前言 在并发系统中&#xff0c;同步与互斥是实现资源共享的关键Lamport面包店算法作为一种经典的解决并发问题的算法&#xff0c;它的实现原…...

长三角实现区块链电子医疗票据互联互通,蚂蚁链提供技术支持

10月25日&#xff0c;记者从浙江省财政厅发布的消息获悉&#xff0c;上海、浙江、江苏和安徽三省一市基于蚂蚁链实现区块链电子医疗票据互联互通&#xff0c;商业保险理赔作为首个规模化应用场景正式落地&#xff0c;蚂蚁保“安心赔”理赔服务率先接入。 今后&#xff0c;老百…...

Redis快速上手篇(三)(事务+Idea的连接和使用)

Redis事务 可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的 所有命令都会序列化&#xff0c;按顺序地串行化执行而不会被其它命令插入&#xff0c;不许加塞。 单独的隔离的操作 官网说明 https://redis.io/docs/interact/transactions/ MULTI、EXEC、…...

Spring三级缓存解决循环依赖问题

文章目录 1. 三级缓存解决的问题场景2. 三级缓存的差异性3. 循环依赖时的处理流程4. 源码验证 1. 三级缓存解决的问题场景 循环依赖指的是在对象之间存在相互依赖关系&#xff0c;形成一个闭环&#xff0c;导致无法准确地完成对象的创建和初始化&#xff1b;当两个或多个对象彼…...

Unity 中使用波浪动画创建 UI 图像

如何使用 只需将此组件添加到画布中的空对象即可。强烈建议您将此对象放入其自己的画布/嵌套画布中&#xff0c;因为它会弄脏每一帧的画布并导致重新生成整个网格。 注意&#xff1a;不支持切片图像。 using System.Collections.Generic; using UnityEngine; using UnityEng…...

支付功能测试用例测试点?

支付功能测试用例测试点是指在测试支付功能时&#xff0c;需要关注和验证的各个方面。根据不同的支付场景和需求&#xff0c;支付功能测试用例测试点可能有所不同&#xff0c;但一般可以分为以下几类&#xff1a; 功能测试&#xff1a;主要检查支付功能是否符合设计和业务需求…...

HFS 快速搭建 http 服务器

HFS 是一个轻量级的HTTP 服务工具&#xff0c;3.0版本前进提供Windows平台安装包&#xff0c;3.0版本开提供Linux和macOS平台的安装包。 HFS更适合在局域网环境中搭建文件共享服务或者安装配置源服务器。 甲 非守护进程的方式运行 HFS &#xff08;Ubuntu 22.04&#xff09; 一…...

学生专用台灯怎么选?双十一专业学生护眼台灯推荐

台灯应该是很多家庭都会备上一盏的家用灯具&#xff0c;很多大人平时间看书、用电脑都会用上它&#xff0c;不过更多的可能还是给家中的小孩学习、阅读使用的。而且现在的孩子近视率如此之高&#xff0c;这让家长们不得不重视孩子的视力健康问题。那么孩子学习使用的台灯应该怎…...

Go 常用标准库之 fmt 介绍与基本使用

Go 常用标准库之 fmt 介绍与基本使用 文章目录 Go 常用标准库之 fmt 介绍与基本使用一、介绍二、向外输出2.1 Print 系列2.2 Fprint 系列2.3 Sprint 系列2.4 Errorf 系列 三、格式化占位符3.1 通用占位符3.2 布尔型3.3 整型3.4 浮点数与复数3.5 字符串和[]byte3.6 指针3.7 宽度…...

antv/x6 导出图片方法exportPNG

antv/x6 导出图片方法exportPNG antv/x6 版本如下&#xff1a; "antv/x6": "2.14.1","antv/x6-plugin-export": "2.1.6",在文件中导入 import { Graph, Shape, StringExt } from antv/x6 import { Export } from antv/x6-plugin-exp…...

Decomposed Meta-Learning for Few-Shot Named Entity Recognition

原文链接&#xff1a; https://aclanthology.org/2022.findings-acl.124.pdf ACL 2022 介绍 问题 目前基于span的跨度量学习&#xff08;metric learning&#xff09;的方法存在一些问题&#xff1a; 1&#xff09;由于是通过枚举来生成span&#xff0c;因此在解码的时候需要额…...

C++经典面试题:内存泄露是什么?如何排查?

1.内存泄露的定义&#xff1a;内存泄漏简单的说就是申请了⼀块内存空间&#xff0c;使⽤完毕后没有释放掉。 它的⼀般表现⽅式是程序运⾏时间越⻓&#xff0c;占⽤内存越多&#xff0c;最终⽤尽全部内存&#xff0c;整个系统崩溃。由程序申请的⼀块内存&#xff0c;且没有任何⼀…...

Hadoop+Hive+Spark+Hbase开发环境练习

1.练习一 1.数据准备 在hdfs上创建文件夹&#xff0c;上传csv文件 [rootkb129 ~]# hdfs dfs -mkdir -p /app/data/exam 查看csv文件行数 [rootkb129 ~]# hdfs dfs -cat /app/data/exam/meituan_waimai_meishi.csv | wc -l 2.分别使用 RDD和 Spark SQL 完成以下分析&#xf…...

使用Spring Boot限制在一分钟内某个IP只能访问10次

有些时候&#xff0c;为了防止我们上线的网站被攻击&#xff0c;或者被刷取流量&#xff0c;我们会对某一个ip进行限制处理&#xff0c;这篇文章&#xff0c;我们将通过Spring Boot编写一个小案例&#xff0c;来实现在一分钟内同一个IP只能访问10次&#xff0c;当然具体数值&am…...

ES 数据迁移最佳实践

ES 数据迁移最佳实践与讲解 数据迁移是 Elasticsearch 运维管理和业务需求中常见的操作之一。以下是不同数据迁移方法的最佳实践和讲解&#xff1a; 一、数据迁移需求梳理 二、数据迁移方法梳理 三、各方案对比 方案 优点 缺点&#xff08;限制&#xff09; 适用场景 是否有…...

C++中低级内存操作

C中低级内存操作 C相较于C有一个巨大的优势&#xff0c;那就是你不需要过多地担心内存管理。如果你使用面向对象的编程方式&#xff0c;你只需要确保每个独立的类都能妥善地管理自己的内存。通过构造和析构&#xff0c;编译器会帮助你管理内存&#xff0c;告诉你什么时候需要进…...

Linux硬盘大小查看命令全解析 (linux查看硬盘大小命令)

Linux操作系统是一款广泛应用于服务器和嵌入式设备的操作系统&#xff0c;相比于Windows等其他操作系统&#xff0c;Linux的优点之一就是支持强大的命令行操作。在日常操作中&#xff0c;了解和掌握一些简单但实用的命令可以提高工作效率。比如硬盘大小查看命令&#xff0c;在L…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14

什么是 Pattern Matching&#xff08;模式匹配&#xff09; ❝ 模式匹配就是一种“描述式”的写法&#xff0c;不需要你手动判断、提取数据&#xff0c;而是直接描述你希望的数据结构是什么样子&#xff0c;系统自动判断并提取。❞ 你给的定义拆解&#xff1a; ✴ Instead of …...