vue学习记录-05 事件监听
vue学习记录-05 事件监听
这篇文章是根据codewhy老师在b站的视频进行的学习记录
文章目录
- vue学习记录-05 事件监听
- 一、v-on的基本使用
- 二、v-on的参数问题
- 1、方法不需要参数的情况
- 2、 方法需要参数没传的情况
- 3、方法需要参数和event对象的情况
- 三、v-on的修饰符
- 1、.stop修饰符
- 2、.prevent修饰符
- 3、监听键盘的某个按键
- 4、.native修饰符
- 5、.once修饰符
一、v-on的基本使用
v-on用于绑定事件监听器,最常见的就是click点击事件,其他也有鼠标移入移出、键盘按下松开等。一般也可以写为“@”便于使用。
下面是一个简单的步进器小案例。
<div id='app'><h2>{{counter}}</h2><button v-on:click="increment">+</button><button @click="decrement">-</button>
</div>
const app = new Vue({el: '#app',data: {counter: 0},methods:{increment(){this.counter++},decrement(){this.counter--}}})
二、v-on的参数问题
关于v-on的参数问题,我们分为三种情况来讲:
1、方法不需要参数的情况
如果在事件监听时,方法不需要额外参数,那么方法后面的小括号可以省略
<button @click='btnClick()'>1</button><button @click='btnClick'>1</button>
btnClick(){console.log('btnClick');},
2、 方法需要参数没传的情况
在事件定义时,写函数时省略了小括号,但是方法本身又是需要一个参数的,那么VUE会怎么传值呢?
正常传值的写法:
<button @click='btn2Click(123)'>2</button>
btn2Click(a){console.log('btn2Click',a);},
省略了小括号,所以没有传值的情况:
<button @click='btn2Click'>2</button>
这个时候,Vue会默认将浏览器生产的event事件对象作为参数传入到方法
引申:如果没有省略小括号,但是没有传值呢?
<button @click='btn2Click()'>2</button>
此时打印结果会显示undefined
3、方法需要参数和event对象的情况
方法定义时,我们需要event对象,同时又需要其他参数,这种情况我们需要怎么做呢?
按照情况2我们可以直接省略小括号,这样就可以拿到值了。
<button @click='btn3Click'>3</button>
btn3Click(event,a){console.log(event,a);}
但是,这个时候参数a又该怎么传值呢?或者把a和event对调一下,参数event还能正确的拿到event对象吗?
btn3Click(a,event){console.log(a,event);}
这种情况下,拿到event对象的是参数a,参数event显示为undefined
其实很简单,我们直接把a的值和event对象与方法中参数的位置相互对应的写就完事了。
<button @click='btn3Click(123,event)'>3</button>
当然,上面这个写法也是错的,因为这样传过去的只是一个event字符串而已。
想要将event对象传过去,就得加个$符号,告诉浏览器这是event对象不是字符串才行。
<button @click='btn3Click(123,$event)'>3</button>
在调用方法时,手动的获取到浏览器参数的event对象:$event
三、v-on的修饰符
1、.stop修饰符
现在我们有这样的一行代码,点击button按钮后,你觉得会发生什么呢?
<div @click="divClick"><button @click="btnClick">按钮</button></div>
btnClick(){console.log('btnClick');},divClick(){console.log('divClick');},
它会把div的点击事件也给执行一遍!而我们仅仅只是点击了button而已!
这种情况是可以避免的,给button按钮的@click加个.stop修饰符,就可以告诉浏览器:停!到此为止,不要再深究了!
<div @click="divClick"><button @click="btnClick.stop">按钮</button></div>
2、.prevent修饰符
有的时候,我们不希望某些元素执行他们默认的事件,这个时候我们可以给它加个.prevent修饰符。
比如表单的submit按钮,我们不希望点击后直接提交上去了,而是希望对数据做些修改再提交,就可以这么做。
<form action="baidu"><input type="submit" value="提交" @click.prevent="submitClick"></form>
submitClick(){console.log('submitClick');// 这里给它做一些数据处理之类的总之没那么快提交上去},
3、监听键盘的某个按键
在监听键盘时,一个键盘上有那么多个键,如果不加个修饰符给它限定一下是哪个键,那么对这个监听事件进行绑定实际上也没有什么太大的用处。
input type="text" @keyup="keyUp">
keyUp(){console.log('keyUp');},
因为如果每个键都能触发绑定的方法,就起不到使用特定的按键进行控制的效果了,想想打拳皇如果随便搓几下就放出了大招,这样玩会有啥意思呢?
对按键进行绑定,最常用的就是回车键了,这里就以回车键来举个例子:
<input type="text" @keyup.enter="keyUp">
如果希望监听的是其他键,那可以把“.enter”改为“.”+按键对应的keycode 就可以了,这是keycode对照表:
字母和数字键的键码值(keyCode)
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
---|---|---|---|---|---|---|---|
A | 65 | J | 74 | S | 83 | 1 | 49 |
B | 66 | K | 75 | T | 84 | 2 | 50 |
C | 67 | L | 76 | U | 85 | 3 | 51 |
D | 68 | M | 77 | V | 86 | 4 | 52 |
E | 69 | N | 78 | W | 87 | 5 | 53 |
F | 70 | O | 79 | X | 88 | 6 | 54 |
G | 71 | P | 80 | Y | 89 | 7 | 55 |
H | 72 | Q | 81 | Z | 90 | 8 | 56 |
I | 73 | R | 82 | 0 | 48 | 9 | 57 |
数字键盘上的键的键码值(keyCode)
按键 | 键码 | 按键 | 键码 |
---|---|---|---|
0 | 96 | 8 | 104 |
1 | 97 | 9 | 105 |
2 | 98 | * | 106 |
3 | 99 | + | 107 |
4 | 100 | Enter | 108 |
5 | 101 | - | 109 |
6 | 102 | . | 110 |
7 | 103 | / | 111 |
功能键键码值(keyCode)
按键 | 键码 | 按键 | 键码 |
---|---|---|---|
F1 | 112 | F7 | 118 |
F2 | 113 | F8 | 119 |
F3 | 114 | F9 | 120 |
F4 | 115 | F10 | 121 |
F5 | 116 | F11 | 122 |
F6 | 117 | F12 | 123 |
控制键键码值(keyCode)
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
---|---|---|---|---|---|---|---|
BackSpace | 8 | Esc | 27 | Right Arrow | 39 | -_ | 189 |
Tab | 9 | Spacebar | 32 | Dw Arrow | 40 | .> | 190 |
Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 |
Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 |
Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
Control | 17 | Home | 36 | ;: | 186 | \丨 | 220 |
Alt | 18 | Left Arrow | 37 | =+ | 187 | ]} | 221 |
Cape Lock | 20 | Up Arrow | 38 | ,< | 188 | '" | 222 |
多媒体键码值(keyCode)
按键 | 键码 |
---|---|
音量加 | 175 |
音量减 | 174 |
停止 | 179 |
静音 | 173 |
浏览器 | 172 |
邮件 | 180 |
搜索 | 170 |
收藏 | 171 |
来源:https://segmentfault.com/a/1190000005828048
4、.native修饰符
我们现在做了这么一个组件< cpon ></ cpon >,想要给它绑定一个点击事件完成某件事,但是如果直接给他绑定一个@click肯定是不能生效的。
<cpon @click="cpnClick"></cpon>
所以我们得借助.native修饰符,才能监听到该组件根元素的原生事件。
<cpon @click.native="cpnClick"></cpon>
5、.once修饰符
大家应该都有双十一双十二到点秒杀的经历,在抢秒杀商品时恨不得把屏幕都点穿,都不知道自己点过多少次。
也许点的人会觉得很爽,但是对于我们程序员来说就是个灾难,想象一下,数以万计的人同时在点击,而且单一个人就不知道点击了多少次,那这个秒杀的方法又需要执行多少次呢?
所以程序员就生气了,天天点点点的烦不烦,于是他就给程序加了个.once修饰符,告诉程序只有第一次的点击你要听,其他的时候装聋做哑就好了。
<button @click.once="btn2Click">按钮</button>
这样一来就皆大欢喜了,我们的第一位幸运儿抢到了东西很开心,其他人不知道自己的点击被无视了还在那里点得很开心,而我们作为程序员不用担心程序点击太多次而卡死也很开心。
其实这也是我们在做防抖节流优化时的一个思路,比如发现有人发信息给你分配任务时,先来一手假装不在,过会回来再看看他还有没有别的任务要你做,没有把第一件事做了再回信息告诉他这段时间你把他任务完成了,保证他不会因为你之前不回他信息而不高兴,而你也不用担心因为第一时间接了他的话而多了更多活。
之后我也会写一篇文章详细讲讲防抖节流,欢迎大家一起来讨论。
vue学习记录-05 事件监听相关推荐
- vue中的v-on事件监听机制
监听dom事件使用v-on指令: v-on:事件类型="一个函数" 这个事件类型可以自定义 简写: @事件类型="一个函数"⭐ 1.作用:绑定事件监听,表达式可 ...
- html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...
- 50 调度器事件监听
scheduler的基本应用在前面已经介绍过了,但仔细思考以下:如果程序异常抛出会影响整个调度任务嘛?请看下面的代码,运行一下看看会发生什么情况. 运行结果如下: 可以看出每5秒抛出一次报错信息.任何 ...
- 二、Vue基础语法学习笔记——事件监听v-on、条件判断(v-if、v-else-if、v-else、v-show)、循环遍历(v-for遍历数组对象,key属性、检测数组更新)、图书案例、双向绑定
四.事件监听 在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 作用:绑定事件监听 ...
- Vue学习(二)动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言 一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
- vue+百度地图——事件监听函数的绑定和解绑
事件监听函数如果绑定之后不进行解绑的话,再触发其他事件的时候这个绑定时间依旧会被触发.比如: <el-button type="primary" @click="t ...
- Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例
1 插值操作 1.1 Mustache语法 也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
- Android学习按键事件监听与Command模式
Android学习按键事件监听与Command模式 - Dufresne - 博客园 Android学习按键事件监听与Command模式 一 Command模式 意图: 将一个请求封装为一个对象,从而 ...
- vue用户行为收集_vue 实现移动端键盘搜索事件监听
1.首先注意,input的type="serch" 2.监听keypress事件 (1)KeyDown.KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) ...
最新文章
- 网页鼠标滚动实现图片缩放
- 【作死】更新macOS Mojave后Vagrant无法使用
- Nacos配置管理模型
- 接口包含内容概述2——委托与事件之惑
- redis连接被拒绝
- 自考计算机系统结构知识点,2019自考计算机系统结构复习精讲资料一
- butterfly配置 hexo_Hexo博客之butterfly主题优雅魔改系列(持续更新)
- 如今,进北大要看脸了
- 本地建mysql数据库_mysql 安装及新建本地数据库遇到的问题
- 完美:Docker遇到Intellij IDEA这个插件,再次解放生产力~
- 跨平台linux组态软件-紫金桥跨平台详细介绍
- 使用html查看dicom,LEADTOOLS构建HTML5 DICOM/PACS查看器(二)
- 安装mysql时一直卡在starting the server这一位置,解决办法
- Spring中Bean生命周期、实例化与初始化
- 【战神引擎】设置GM管理员账号
- 1.11CSS的基本语法
- 小度智能音箱维修点_小度音箱客服电话
- java 调用博思得条码打印机
- 九度OJ 1177:查找 (字符串操作)
- AI开源的硬核战场:领军者百度如何亮剑?
热门文章
- DDD-经典四层架构应用
- pe进不去linux系统怎么办,u盘启动不了pe系统怎么办_电脑进不去u盘的pe系统解决方法-win7之家...
- java 解决数据同步
- 微信公众号、订阅号、服务号之间的关系和区别
- MATLAB环境下利用Liblinear工具箱实现Logistic Regression
- 锁定计算机使用时间,易通电脑锁多用户控制版
- 如何在Ubuntu里安装中文输入法(SCIM)
- Vue/Nuxt.js仿Tinder|探探翻牌特效|vue仿探探卡片滑动
- workload选择
- 使用squid代理时出现 The requested URL could not be retrieved