理解事件处理及相关修饰符 | 重学Vue3

这个月开始重新开始学习Vue3,从理解基本使用到模拟实现!

本文是关于Vue的事件处理及相关修饰符

看文本篇,你将会对Vue的事件处理有个清晰的认识

本文目录结构如下:

image.png

监听事件

此处分3点来讲:

image.png

1. 可以使用 v-on 指令来监听事件

2. 触发事件时执行一些JS代码

3. 用法

用法如下:

v-on:click="xxx"

也可以使用简写模式@

@click="xxx"

注意:

xxx可以是一个js表达式,也可以是一个事件处理函数

一般使用第二种方式@

事件处理函数

此处分3点来讲:

image.png

1. 简介

通常事件处理逻辑比较复杂,所以我们会写成一个函数,这个函数就被称为事件处理函数,也叫事件处理器

2. 形式

如下代码

@click="methodName"

上面代码中,methodName就是事件处理函数,它会自动去组件实例身上找对应的函数

3. 注意

事件处理函数默认会传递原生event对象

处理函数可传递参数

  1. 可以像正常函数调用一样,给事件处理函数传递参数

  2. 如果需要访问原始的DOM事件,需手动传递$event,表示原生event

多个处理函数

  1. vue支持一个事件多个处理函数

  2. 多个函数通过逗号分隔即可

事件修饰符

此处分一下8点来讲:

image.png

1. 简介

Vue为 v-on 提供了事件修饰符

2. 形式

以点开头

3. 几个常见修饰符

.stop
表示停止冒泡

.prevent
表示阻止默认事件

.capture
表示使用事件捕获模式

.self
表示当在event.target 是当前元素自身时触发处理函数

.once
表示事件只会触发一次

.passive
表示处理事件函数中不会调用preventDefault函数

4. 修饰符可以连续出现多个

形式,如:

v-on:click.prevent.self

注意:多个修饰符顺序不同,效果会不一样

5. 按键修饰符

.enter
表示当按下键盘的Enter键时触发

.tab
表示按下Tab键时

.delete
表示按下删除或退格键时

.esc
表示按下Esc时

.space
表示按下空格时

.up
表示按向上箭头时

.down
表示按向下箭头时

.left
表示按向左箭头时

.right
表示按向右箭头时

除此以外,还可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符,比如:


6. 系统修饰键

系统修饰符其实就是按下ctrlaltshiftmeta,同时按下某个键时,才触发

例如:



需要注意修饰符的顺序

7. .exact 修饰符

用于更精准的控制修饰符





8. 鼠标按钮修饰符

.left
左键

.right
右键

.middle
中间滚轮

使用v-on的好处

  1. 扫一眼模板便能轻松定位在js中对应的方法

  2. 因为你无须在 JS 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM完全解耦,更易于测试

  3. 无须担心如何清理它们;
    当一个ViewModel 被销毁时,所有的事件处理器都会自动被删除

END~

以上就是事件相关的所有内容

如有问题,欢迎留言告知,感谢~

为了方便下载,我将相关的高清思维导图及源文件上传至GitHub,可移步下载:https://github.com/jCodeLife/mind-map

You may also like...