Vue中的事件修饰符和按键事件

简介: 事件修饰符prevent阻止默认事件(常用)stop阻止事件冒泡once事件只触发一次capture使用事件的捕获模式self只有 event.target 是当前操作的元素才触发事件passive事件的默认行为立即执行,无需等待事件回调执行完毕

文章目录


事件修饰符

prevent

阻止默认事件(常用)

stop

阻止事件冒泡

once

事件只触发一次

capture

self

只有 event.target 是当前操作的元素才触发事件

passive

事件的默认行为立即执行,无需等待事件回调执行完毕


如何使用

<button @click.事件修饰符='xxx'><button>

按键事件


常用按键

回车 => enter

删除 => delete

空格 => esc

换行 => space

上 => up

下=> down

左 => left

右 => right


系统修饰符

ctrl, alt , shift , meta

1.配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才能触发

2.配合keydown使用:正常触发事件


注意事项

vue未提供别名的按键,可以使用按键的原始的key值去绑定,但注意要转为kebab——case


目录
相关文章
|
19小时前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
53 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
20 2
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
11 3
|
10天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
3天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
16 2
|
3天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
10 2