vue3-事件处理

事件监听

  • DOM 事件监听指令 v-on 简写@

v-on:click="handler"
或者
@click="handler"
  • 事件处理器 (handler) 的值可以是:

  1. 内联事件处理器:比如 click

  2. 方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

  3. 在内联处理器中调用方法(自定义参数)

  4. 在内联事件处理器中访问事件参数 (自定义参数和原生 event 事件)

  • 方式 1 你可以向该处理器方法传入一个特殊的 $event 变量

  • 方式 2 使用内联箭头函数

<script lang="ts" setup>
import { ref } from "vue"

const count = ref(0)

// 自定义方法
const name = ref('Vue.js')
function greet(event: any) {
    alert(`Hello ${name.value}!`)
    // `event` 是 DOM 原生事件
    if (event) {
        alert(event.target.tagName)
    }
}

function say(message: string) {
    alert(message)
}

function warn(message: string, event: any) {
    // 这里可以访问原生事件
    if (event) {
        event.preventDefault()
    }
    alert(message)
}

function onClick() {
    alert(123);
}

</script>

<template>
    <div class="container">
        <button @click="count++">(@click事件) 点击 +1</button>
        <p>计数器: {{ count }}</p>

        <!-- `greet` 是上面定义过的方法名 -->
        <button @click="greet">调用方法 @click="greet" 默认是event参数</button>


        <br />
        <!-- 自定义方法传参 -->
        <button @click="say('你好')">自定义方法传参say('你好')替换掉原生event事件参数</button>


        <br />
        <!-- 自定义参数 并 传入原生事件 形式1 -->
        <!-- 使用特殊的 $event 变量 -->
        <button @click="warn('表单还未提交 形式1拦截.', $event)">
            Submit提交 - 形式1 $event 变量
        </button>


        <br />
        <!-- 自定义参数 并 传入原生事件 形式2 -->
        <!-- 使用内联箭头函数 -->
        <button @click="(event) => warn('表单还未提交 形式2拦截.', event)">
            Submit提交- 形式2 箭头函数
        </button>
        <br />
    </div>
</template>

<style lang="scss" scoped>
.container {}
</style>

示例

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。

v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀,包含以下这些:

修饰符简介
stop单击事件将停止传递
prevent提交事件将不再重新加载页面
self元素本身时才会触发事件处理器
capture事件冒泡时,优先触发该修饰符事件,多个嵌套则由外而内触发
once点击事件最多被触发一次
passive一般用于触摸事件的监听器,可以用来改善移动端设备的滚屏性能
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如:事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

<!-- 添加事件监听器时,使用 `capture` 捕获模式 -->
<!-- 例如:指向内部元素的事件,在被内部元素处理前,先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。

  1. @click.prevent.self

会阻止元素及其子元素的所有点击事件的默认行为

  1. @click.self.prevent

则只会阻止对元素本身的点击事件的默认行为

按键修饰符

在监听键盘事件时,我们经常需要检查特定的按键。

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符,但需要转为 kebab-case 形式。

<input @keyup.page-down="onPageDown" />

在上面的例子中,仅会在 $event.key 为 'PageDown' 时调用事件处理。

常用按键别名

  • enter

  • tab

  • delete (捕获“Delete”和“Backspace”两个按键)

  • esc

  • space

  • up

  • down

  • left

  • right

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发

  • .ctrl

  • .alt

  • .shift

  • .meta

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

请注意,系统按键修饰符和常规按键不同。与 keyup 事件一起使用时,该按键必须在事件发出时处于按下状态。换句话说,keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

.exact 修饰符

.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。

<!-- 只要按下 Ctrl 时,不管按不按其他按键都会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

  • .left

  • .right

  • .middle 这些修饰符将处理程序限定为由特定鼠标按键触发的事件。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

搭建属于自己的内容付费平台:开发知识付费APP教学

近期知识付费的热度非常高&#xff0c;本篇文章小编将为你提供一份关于如何搭建属于自己的内容付费平台的简要教程&#xff0c;让你能够逐步实现一个功能完备的知识付费APP。 1.明确目标和功能需求 在开始开发之前&#xff0c;首先需要确定你的APP是面向哪个领域的用户&#x…

JSONObject - 用最通俗的讲解,教你玩转 JSON 数据的解析和修改

目录 一、JSONObject 1.1、为什么要使用他&#xff1f; 1.2、应用 1.2.1、依赖 1.2.2、JSON 数据示例 1.2.3、JSON 数据的构建 1.2.4、JSON 数据的解析 一、JSONObject 1.1、为什么要使用他&#xff1f; 在还没有接触过这个东西的时候&#xff0c;一直是通过 ObjectMap…

保护国家机密:Java国密加解密算法在信息安全中的应用与挑战

目录 1、简介 1.1 信息安全的重要性 1.2 Java国密加解密算法的概述 2、Java国密加解密算法的应用 2.1 数据加密与解密 2.2 网络通信加密 2.3 数字签名与验证 2.4 安全存储与传输 3、Java国密加解密算法的特点 3.1 安全性强 3.2 效率高 3.3 弹性可调 4、Java国密加…

(2024,密集量子电路,量子 U-Net,幺正单采样)量子去噪扩散模型

Quantum Denoising Diffusion Models 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 2. 相关工作 2.1. 扩散模型 2.2. 变分量子电路 2.3. 量子扩散模型 3. 量子去噪扩散模…

HarmonyOS 转场动画 ForEach控制

本文 我们继续说组件的专场特效 上文 HarmonyOS 转场动画 我们通过if控制了转场效果 本文 我们通过 ForEach 控制它的加载和删除 这时候就有人会好奇 ForEach 怎么控制删除呢&#xff1f; 很简单 循环次数不同 例如 第一次 10个 第二次 5个 那么后面的五个就相当于删除啦 我们…

JVM垃圾回收机制及思维导图

一、Java垃圾回收机制 在java中&#xff0c;程序员是不需要显示的去释放一个对象的内存的&#xff0c;而是由虚拟机自行执行。在JVM中&#xff0c;有一个垃圾回收线程&#xff0c;它是低优先级的&#xff0c;在正常情况下是不会执行的&#xff0c;只有在虚拟机空闲或者当前堆内…

【Alibaba工具型技术系列】「EasyExcel技术专题」实战技术针对于项目中常用的Excel操作指南

这里写目录标题 EasyExcel教程Maven依赖 EasyExcel API分析介绍EasyExcel 注解通用参数ReadWorkbook&#xff08;理解成excel对象&#xff09;参数ReadSheet&#xff08;就是excel的一个Sheet&#xff09;参数注解参数通用参数 WriteWorkbook&#xff08;理解成excel对象&#…

k8s学习-Deployment

Kubernetes通过各种Controller来管理Pod的生命周期 。 为了满足不同业 务 景 &#xff0c; Kubernetes 开发了Deployment、ReplicaSet、DaemonSet、StatefuleSet、Job等多种Controller。我们⾸先学习最常用Deployment。 1.1 Kubectl命令直接创建 第一种是通过kubectl命令直接…

java读取配置文件数据

在实际开发中&#xff0c;项目中难免会有一些秘钥或者不经常使用到的配置信息&#xff0c;此时&#xff0c;就可以将这些配置信息统一写到配置文件中。随后使用Value注解读取配置文件的值来向Spring中Bean的属性设置值。 例如&#xff0c;一些系统环境变量信息&#xff0c;数据…

路飞项目--02

补充&#xff1a;axios封装 # 普通使用&#xff1a;安装 &#xff0c;导入使用 const filmListreactive({result:[]}) axios.get().then() async function load(){let responseawait axios.get()filmList.resultresponse.data.results } # 封装示例&#xff1a;请求发出去之前…

让代码运行得更快:深入理解进程、线程和协程

让代码运行得更快&#xff1a;深入理解进程、线程和协程 什么是执行体 在深入探讨进程、线程和协程之前&#xff0c;我想先介绍下执行体这个概念。 执行体这个词语是我从七牛云创始人许式伟大佬的专栏中学到的&#xff0c;它代表操作系统中程序执行的载体&#xff0c;涉及到…

makefile,make,gcc/g++ 编译流程分析

文章目录 makefile&#xff0c;make&#xff0c;gcc/g 编译流程分析 makefile&#xff0c;make&#xff0c;gcc/g 编译流程分析 C实现加减乘除四个运算 // // Created by qiufh on 2024-01-17. //#include "add.h"int add(int a, int b) {return a b; } // // Cre…

C++的命名空间域

一、域作用限定符 :: 即是域作用限定符&#xff0c;它的作用是指明一个标识符&#xff08;变量、函数或类&#xff09;来自哪一个作用域范围 二、编译器搜索变量、函数等的原则 1.先搜索局部变量&#xff0c;2.再搜索全局变量&#xff0c;3.最后搜索指定的命名空间域 三、…

python数字图像处理基础(十)——背景建模

目录 背景建模背景消除-帧差法混合高斯模型 背景建模 背景建模是计算机视觉和图像处理中的一项关键技术&#xff0c;用于提取视频中的前景对象。在视频监控、运动检测和行为分析等领域中&#xff0c;背景建模被广泛应用。其基本思想是通过对视频序列中的像素进行建模&#xff…

构建中国人自己的私人GPT—限时免费部署

在现实生活中&#xff0c;很多公司或个人的资料是不愿意公布在互联网上的&#xff0c;但是我们又要使用人工智能的能力帮我们处理文件、做决策、执行命令那怎么办呢&#xff1f;于是我们构建自己或公司的本地专属GPT变得非常重要。 先看效果&#xff1a; 解方程&#xff0c;24小…

用友GRP-U8 obr_zdybxd_check.jsp SQL注入漏洞复现

0x01 产品简介 用友GRP-U8R10行政事业内控管理软件是用友公司专注于国家电子政务事业,基于云计算技术所推出的新一代产品,是我国行政事业财务领域最专业的政府财务管理软件。 0x02 漏洞概述 用友GRP-U8R10行政事业内控管理软件 obr_zdybxd_check.jsp 接口处存在SQL注入漏洞…

day-13 拿出最少数目的魔法豆

思路 将beans的每个数值当做袋子最后豆子剩余数&#xff0c;选择取豆子最少的一种方案 解题方法 //从小到大&#xff0c;将每个beans[i]作为剩余豆子数 //对于beans[i]&#xff0c;i之前的全为零&#xff0c;i之后的全变为beans[i] ansMath.min(ans,sum-(beans.length-i)*bean…

esp32-idf eclipse 定时器的使用demo

esp32定时器的使用demo 1、介绍 ESP32芯片包含两个硬件定时器组。每组有两个通用硬件定时器。它们都是基于16位预分频器和64位自动重载功能的向上向下计数器的64位通用定时器。 2、API接口函数 创建定时器函数&#xff1a; esp_timer_create(); esp_err_t esp_timer_create …

动态pv(nfs方式挂载)

1、定义 发布pvc之后可以生成pv&#xff0c;还可以在共享服务器上直接生成挂载目录 pvc直接绑定和使用pv 2、动态pv依赖两个组件 &#xff08;1&#xff09;provisioner卷插件&#xff1a;k8s本身支持的动态pv创建不包括nfs&#xff0c;需要声明和安装一个外部插件provisio…

16.鸿蒙HarmonyOS App(JAVA)滑块组件Slider与评级组件Rating

16.鸿蒙HarmonyOS App(JAVA)滑块组件Slider与评级组件Rating ability_main.xml <?xml version"1.0" encoding"utf-8"?> <DirectionalLayoutxmlns:ohos"http://schemas.huawei.com/res/ohos"ohos:height"match_parent"oh…