详解Vue3中的事件监听方式

在这里插入图片描述

本文主要介绍Vue3中的事件监听方式。

目录

  • 一、v-on指令
  • 二、使用@符号简写
  • 三、事件修饰符
  • 四、动态事件名
  • 五、常见的监听事件
  • 六、自定义事件

在Vue3中,事件监听的方式与Vue2有一些不同。

下面是Vue3中事件监听方式的详细介绍:

一、v-on指令

Vue3中仍然使用v-on指令来绑定事件处理函数。例如,可以使用v-on:click来监听点击事件:

<button v-on:click="handleClick">Click me</button>

在组件的方法中定义事件处理逻辑:

methods: {handleClick() {console.log('Button clicked');}
}

二、使用@符号简写

Vue3中引入了一个新的语法糖,可以使用@符号来代替v-on指令,更加简洁易读。例如,可以使用@click来监听点击事件:

<button @click="handleClick">Click me</button>

三、事件修饰符

Vue3中仍然支持事件修饰符,可以使用.stop、.prevent、.capture和.once来控制事件的行为。例如,可以使用.stop修饰符阻止事件冒泡:

<div @click.stop="handleClick">Click me</div>

四、动态事件名

Vue3中可以使用动态表达式来指定事件名。

例如,可以使用v-bind:动态事件名来动态绑定事件处理函数。动态事件名可以是一个计算属性的结果,或者是一个组件的属性。例如:

<button v-bind:[eventName]="handleClick">{{ buttonText }}</button>
data() {return {eventName: 'click',buttonText: 'Click me',}
},
methods: {handleClick() {console.log('Button clicked');}
}

五、常见的监听事件

在Vue3中,有以下几种常见的事件:

  1. 点击事件(click):当元素被点击时触发。

    <button @click="handleClick">Click me</button>
    
  2. 输入事件(input):当输入框的值发生改变时触发。

    <input type="text" @input="handleInput" />
    
  3. 提交事件(submit):当表单提交时触发。

    <form @submit="handleSubmit"><input type="text" /><button type="submit">Submit</button>
    </form>
    
  4. 鼠标移入事件(mouseenter):当鼠标移入元素时触发。

    <div @mouseenter="handleMouseEnter">Mouse Enter</div>
    
  5. 鼠标移出事件(mouseleave):当鼠标移出元素时触发。

    <div @mouseleave="handleMouseLeave">Mouse Leave</div>
    
  6. 键盘事件(keydown、keyup):当按下或释放键盘上的键时触发。

    <input type="text" @keydown="handleKeyDown" />
    
  7. 聚焦事件(focus):当元素获得焦点时触发。

    <input type="text" @focus="handleFocus" />
    
  8. 失焦事件(blur):当元素失去焦点时触发。

    <input type="text" @blur="handleBlur" />
    

这些只是Vue3中的一些常见事件示例,实际上还有许多其他事件可供使用。

此外,Vue3还支持自定义事件,可以使用$emit方法在组件内触发自定义事件,并在父组件中监听并处理这些事件。

六、自定义事件

Vue3中使用emit方法来触发自定义事件。在父组件中使用v-on监听事件,然后在子组件中使用emit方法触发事件。例如:

<template><button @click="handleClick">Click me</button>
</template><script>
import { defineEmit } from 'vue';export default {emits: ['customEvent'],methods: {handleClick() {this.$emit('customEvent', 'Hello from child component');}}
}
</script>

父组件中监听自定义事件并处理:

<template><ChildComponent @customEvent="handleCustomEvent" />
</template><script>
export default {methods: {handleCustomEvent(message) {console.log(message);}}
}
</script>

在Vue3中,事件处理的方式基本与Vue2保持一致,但引入了一些新的语法糖,如@符号简写和动态事件名。同时,Vue3还支持自定义事件的触发和监听。这些改进使得事件处理更加简洁和灵活。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/594322.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

​LeetCode解法汇总2487. 从链表中移除节点

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一个…

vue 使用 splice 删除元素UI视图不同步怎么办?

vue 使用 splice 删除元素UI视图不同步怎么办&#xff1f; https://www.zhihu.com/question/585036077?write#:~:text%E5%9C%A8Vue%E4%B8%AD%E4%BD%BF%E7%94%A8splice,%28%29%E6%96%B9%E6%B3%95%E5%88%A0%E9%99%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E6%…

(PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测

目录 I. 前言II. TCNIII. TCN-RNN/LSTM/GRU3.1 TCN-RNN3.2 TCN-LSTM3.3 TCN-GRU IV. 实验结果 I. 前言 前面已经写了一系列有关LSTM时间序列预测的文章&#xff1a; 深入理解PyTorch中LSTM的输入和输出&#xff08;从input输入到Linear输出&#xff09;PyTorch搭建LSTM实现时…

算法训练第五十二天|300. 最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

300. 最长递增子序列&#xff1a; 题目链接 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组…

Arduino驱动VL53L0X ToF激光测距传感器(距离传感器)

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 VL53L0X激光测距传感器是一款基于意法半导体(STMicroelectronics&#

python实现简易的flask后端接口

先安装插件pip install flask 新建py脚本文件编码&#xff1a; # -*- coding: utf-8 -*- from flask import Flask from flask_cors import CORS # 跨域依赖&#xff0c;通过pip install flask-cors安装app Flask(__name__) cors CORS(app) # 跨域设置&#xff0c;这样设置…

WPF容器的背景对鼠标事件的影响

背景&#xff1a;在实现鼠标拖动窗口的过程中发现对父容器设置了鼠标拖动窗口的事件MouseLeftButtonDown private void DragWindow(object sender, MouseButtonEventArgs e) {if (e.LeftButton MouseButtonState.Pressed)DragMove(); } 问题&#xff1a;非常困惑的是&#x…

C# windows服务程序开机自启动exe程序

我们使用传统的Process.Start(".exe")启动进程会遇到无法打开UI界面的问题&#xff0c;尤其是我们需要进行开启自启动程序设置时出现诸多问题&#xff0c;于是我们就想到采用windows服务开机自启动来创建启动一个新的exe程序&#xff0c;并且是显式运行。 首先是打开…

软件测试入门(知识汇总)

1、黑盒测试、白盒测试、灰盒测试 1.1 黑盒测试 黑盒测试又叫功能测试、数据驱动测试 或 基于需求规格说明书的功能测试。该类测试注重于测试软件的功能性需求。 采用这种测试方法&#xff0c;测试工程师把测试对象看作一个黑盒子&#xff0c;完全不考虑程序内部的逻辑结构和…

clickhouseSQL日期相关

1. 毫秒级时间戳转日期/小时 --13位时间戳转具体时间 toDateTime(report_time / 1000) as _c00 -- 获取时间戳对应的时间点整点(结果&#xff1a;%Y-%m-%d %H:00:00.0) eg&#xff1a;2022-09-28 23:00:00.0 toStartOfHour(toDateTime(report_time / 1000)) AS _10-- 获取时间…

Rust使用gRPC

需要先安装protoc&#xff08;Protocol Buffers Compiler&#xff09;&#xff0c;可据此Protobuf Compiler Installation下载 第一步&#xff1a;创建项目 创建两个新的Rust项目&#xff0c;分别作为服务端与客户端&#xff1a; cargo new rust_grpc_servercargo new rust_grp…

简单的数组移动问题

https://leetcode.cn/problems/move-zeroes/?envTypestudy-plan-v2&envIdprogramming-skills 思路&#xff1a; 1.在原数组上直接操作&#xff0c;采用双指针的思想&#xff0c;每次移动r&#xff0c;当r不为0时交换num中的值 class Solution {public void moveZeroes(in…

超级解压馆帮助与支持

游戏目标&#xff1a; 将相同颜色的筹码移动到同一排&#xff0c;当一排筹码颜色相同并装满时&#xff0c;你可以合成新数字。挑战你的智力&#xff0c;看你能拼出的最大数字是多少&#xff01; 游戏玩法&#xff1a; 将相同颜色的数字币移动到相同颜色的数字币槽中。 观察所…

【操作系统习题】处理机调度与死锁

一、单选题 FCFS算法的就绪队列是按照进程的&#xff08;&#xff09;排列。 B A、等待时间 B、到达时间 C、响应时间 D、运行时间设有4个作业同时到达&#xff0c;每个作业的执行时间均为2个小时&#xff0c;它们在一台处理机上按单道方式执行&#xff0c;则平均周转时间为&a…

LeetCode2413. Smallest Even Multiple

文章目录 一、题目二、题解 一、题目 Given a positive integer n, return the smallest positive integer that is a multiple of both 2 and n. Example 1: Input: n 5 Output: 10 Explanation: The smallest multiple of both 5 and 2 is 10. Example 2: Input: n 6 O…

PAT 乙级 1042 字符统计

请编写程序&#xff0c;找出一段给定文字中出现最频繁的那个英文字母。 输入格式&#xff1a; 输入在一行中给出一个长度不超过 1000 的字符串。字符串由 ASCII 码表中任意可见字符及空格组成&#xff0c;至少包含 1 个英文字母&#xff0c;以回车结束&#xff08;回车不算在内…

Winform中使用Fleck实现Websocket服务端并读取SQLite数据库中数据定时循环群发消息

场景 Winform中使用Websocket4Net实现Websocket客户端并定时存储接收数据到SQLite中&#xff1a; Winform中使用Websocket4Net实现Websocket客户端并定时存储接收数据到SQLite中-CSDN博客 Winform中操作Sqlite数据增删改查、程序启动时执行创建表初始化操作&#xff1a; Wi…

Vue3 结合typescript 组合式函数(2)

安装axios&#xff1a;npm install axios 1、hooks文件夹下新建useURLLoader 在APP.VUE中使用useURLLoader 使用Dog API 2、使用对象中的属性&#xff0c;必须使用toRefs&#xff0c;否则Reactive响应失效 3、使用泛型 结果&#xff1a;

Linux iptables地址转换

一.SNAT场景配置 实现内网主机通过防火墙访问公网&#xff0c;需要使用SNAT(源地址转换POSTROUTING) 1、指定从哪个ip地址转换出去(静态公网地址) SNAT配置&#xff1a;必须使用nat表&#xff1b;iptables -t nat -I POSTROUTING -s 172.16.1.0/24 -j SNAT --to 10.0.0.200 ip…

C++不懂就问:std::vector的push_back和emplace_back函数的差别?

欢迎关注公众号(20YC编程)&#xff0c;视频号也有免费视频课程哦&#xff01; -今日内容- 1 emplace_back介绍 std::vector的emplace_back&#xff08;包括emplace&#xff09;函数是C11引入的新特性&#xff0c;用于在容器中直接构造元素&#xff0c;而不是先构造元素再插入…