VUE·17：事件处理之 @keyup、@keydown 等键盘按键触发及 @keyup.enter 等别名

一、keyup · 最常用的键盘按键模式

1.原理

只要按下按键，如果不抬起手来，就不会触发事件。只有将按键抬起，这个事件才算是触发。

2.代码示例

2.1 我们可以控制按下哪个键才能触发事件，而其他的键不能。

2.2 在这个例子中，一旦我们在 input 中没有敲击回车，那么事件showInfo就不会被触发，一旦我们敲击回车，才能够触发事件showInfo。

2.3 @keydown.enter=“showInfo” 中的 enter，被称为“别名”，也就是vue的简写写法，表示 “一旦我们按下并抬起空格，事件 showInfo 才能够被触发”

HTML代码：

<div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>

JS代码：

new Vue({el:'#root',data:{name:'尚硅谷'},methods: {showInfo(e){// console.log(e.key,e.keyCode)console.log(e.target.value)}},
})

二、别名

1.别名都有哪些

2.等多的别名请看课程

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=16&vd_source=38d6ea3466db371e6c07c24eed03219b

VUE·17：事件处理之 @keyup、@keydown 等键盘按键触发及 @keyup.enter 等别名相关推荐

vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
html js绑定键盘按键触发事件(按回车键登陆)
document.onkeydown =cdk; function cdk(){ if(event.keyCode ==13){submit();} } 13代表的是回车键,说明在页面中按下回车键,执 ...
keydown等键盘事件日记
键盘事件由用户击打键盘触发,主要有keydown.keypress.keyup三个事件,它们都继承了KeyboardEvent接口. keydown:按下键盘时触发. keypress:按下有值的键时 ...
vue 项目中使用键盘回车或空格按键触发事件
话不多说上代码!!! 一开始以为很复杂,经过一番摸索和查找,发现也没有那么难,具体如下: 1.先在 created 里边开启键盘按键的监听事件,如下: created() {window.addEve ...
jQuery 绑定3种键盘事件 keypress(键盘键按下，功能键和中文不触发)，keydown(键盘键按下，所有键都触发)，keyup(键盘键松开)
1 keypress() 说明:当键盘键被按下时触发 keypress 事件,按特定的功能键和输入中文时不能触发. 语法: $(selector).keypress(function1); 实例: 文 ...
Vue.js 事件处理
监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"><butto ...
【猿说VUE】事件处理，Vue奠基之石
VUE基础:事件处理在前端小伙伴开发生涯中,经常要面对各种画面表单.各种按钮,针对表单和按钮的处理都包含一个共通事件:点击 (click),前端最常见的场景: 表单提交按钮点击列表折叠 9.1 ...
(Keydown,KeyCode)键盘事件的简单使用
开发工具与关键技术: VS Keydown,KeyCode 作者:听民谣的老猫撰写时间:2019/4/1 16:15 W.A.S.D 是我们玩游戏时经常用到的几个键盘按键.通过W来触发游戏人物向上移 ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...