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之间似乎相似但又不同,今天对 ...
随机推荐
- JVM内存结构和Java内存模型
一.JVM 首先看一张JVM结构图(某度找的) 主要看运行时数据区,里边有方法区,堆,java虚拟机栈,本地方法栈,程序计数器.其中方法区和堆是线程共享的,也是JVM进行垃圾收集的区域,java虚拟机 ...
- 2018尚硅谷最新SpringCloud免费视频教程
[课程内容] 01.前提概述 02.大纲概览 03.从面试题开始 04.微服务是什么 05.微服务是什么2 06.微服务与微服务架构 07.微服务优缺点 08.微服务技术栈有哪些 09.为什么选择Sp ...
- MiniJpegDecoder使用介绍
承接昨天写的<JPEG软解码实现介绍>,今天介绍其使用方法和一些细节说明. 1.仓库下已经包含了几个jpeg文件,以方便直接校验. 2.使用命令分为两种模式. 一种是直接解码为yuv文件, ...
- 从 LRU Cache 带你看面试的本质
前言 大家好,这里是<齐姐聊算法>系列之 LRU 问题. 在讲这道题之前,我想先聊聊「技术面试究竟是在考什么」这个问题. 技术面试究竟在考什么 在人人都知道刷题的今天,面试官也都知道大家会 ...
- lua、python对比学习
一.基本数据类型: lua: nil(空).boolean(false和nil为假).number(数值).string(字符串).table(表).function(方法).thread (线程) ...
- Laver 文件版本遍历器
系统简介 最近有个需求,需要罗列出各个目录中文件的信息,检索各类文件的最新版本.网上看了很多方式,但发现没有合适的.于是利用空余时间开始编写了一套文件遍历系统,如此便有了Laver(紫菜).Laver ...
- 《Head First 设计模式》:代理模式
正文 一.定义 代理模式为另一个对象提供一个替身或占位符以控制对这个对象的访问. 要点: 代理模式为一个对象创建了代理对象,让代理对象控制对该对象的访问.被代理的对象可以是远程的对象.创建开销大的对象 ...
- android.widget.TextView.setText() on a null object reference
错误描述 java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView. ...
- C# lock 死锁问题排查方法
多线程程序发生死锁,某些重要线程卡住,不正常工作.排查起来非常麻烦.以下内容记录排查方法 1.确定死锁的位置,一般死锁会lock到某一行具体的代码,比如我就死锁在类似如下代码中 public void ...
- Python练习题 030:Project Euler 002:偶数斐波那契数之和
本题来自 Project Euler 第2题:https://projecteuler.net/problem=2 # Each new term in the Fibonacci sequence ...