Vue中键盘事件
键盘事件:
keyCode 实际值
- 48到57 0 - 9
- 65到90 a - z ( A-Z )
- 112到135 F1 - F24
- 8 BackSpace ( 退格 )
- 9 Tab
- 13 Enter ( 回车 )
- 20 Caps Lock ( 大写)
- 32 Space ( 空格键 )
- 37 Left ( 左箭头 )
- 38 Up ( 上箭头 )
- 39 Right ( 右箭头)
- 40 Down ( 下箭头 )
别名按键设置
- .delete 删除
- .tab Tab
- .enter 回车
- .esc 退出
- .space 空格
- .left 左箭头
- .right 右箭头
- .down 上箭头
- .up 下箭头
- .ctrl Ctrl
- .alt Alt
- .shift Shift
修饰符
- .stop 阻止事件冒泡 (等同于JavaScript中的
event.stopPropagation()) - .prevent 阻止默认行为 (等同于JavaScript中的
event.preventDefault()) - .self 当事件在该元素本身触发回调
- .capture 触发事件捕获
- @once 只执行一次
Vue中键盘事件的更多相关文章
- Vue_(基础)Vue中的事件
Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...
- html中键盘事件----在路上(16)
键盘事件,这里以onkeyup为例: 解析:当在一个input中输入文本时,在另一个div中输出文本 在下面是本人写的小demo,供分享. 代码如下: <!DOCTYPE html> &l ...
- Vue中的事件与常见的问题处理
Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue中滚动事件绑定的函数无法调用问题
问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...
- (二)咋使用VUE中的事件修饰符
1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...
- 029——VUE中键盘语义修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中的事件监听之——v-on vs .$on
跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...
随机推荐
- bash运行脚本的几种方式
转载自https://www.jianshu.com/p/ba6efda13e23 转载地址:http://www.jquerycn.cn/a_8354 bash shell 脚本执行的方法有多种,本 ...
- C# winform 打包成安装程序(exe)
C# 打包成安装程序 1.扩展-> 安装扩展 联网搜索 install 2.新建安装程序项目 3.添加程序 4.添加打包需要的文件 5. 添加x86与x64文件夹,并添加s ...
- 栈帧的内部结构--动态链接 (Dynamic Linking)
每个栈帧中包含: 局部变量表(Local Variables) 操作数栈(Opreand Stack) 或表达式栈 动态链接 (Dynamic Linking) (或指向运行时常量的方法引用) 动态返 ...
- Cookies题解
来源:<算法竞赛进阶指南> Describe: 有M块饼干要分给N个孩子.当有k个孩子分到的饼干数比第i个孩子分到的多时,会产生g[i]*k的贡献.求最小的贡献及任意一种方案. Solut ...
- 【Django】将多个querysets拼接,使用djangorestframework序列化
concern_set = models.Concern.objects.filter(user_id=1).values("concern_id") querysets = mo ...
- 《SpringCloudDubbo开发日记》(一)Nacos连官方文档都没写好
背景 现在的微服务框架一般分dubbo和springcloud两套服务治理体系,dubbo是基于zookeeper为注册中心,springcloud是基于eureka作为注册中心. 但是现在eurek ...
- 重启springboot
前言:springboot项目开发时,会遇到项目重新启动的情况.在百度上资料比较零碎需要整理,实践时需要踩坑,自己在项目中已经实现的功能拿出来与大家分享.希望每一位coder能在编程的路上少走一些弯路 ...
- Vue编写的页面部署到springboot网站项目中出现页面加载不全问题
问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...
- 【Python】类
初探类 类定义与函数定义( def语句 )一样必须被执行才会起作用 调用 x.f() 其实就相当于 MyClass.f(x) 补充说明 数据属性会覆盖掉具有相同名称的方法属性 命名方法 方法名称使用大 ...
- C++中_T()和L的区别
转载:https://blog.csdn.net/amusi1994/article/details/53898960 前言 本文旨在介绍于VC++常见的两个类型:_T()和L 概念 字符串前面加 ...