vue中键盘事件的处理

一、常见的键盘事件

1、

keydown

键盘按下

2、

keyup

键盘抬起

补充说明:如果要确定用户按下是哪个键盘需要使用

keyCode===?

来确认键盘

二、在

vue

中键盘事件一般的使用

1、在模板中定义事件名称,并传递

$event

作为参数

<input type="text" placeholder="请输入书名" ref="inputBook" @keydown="submit($event)"/>

2、在

js

中确认键盘按键进行相对于的操作

methods:{
submit(e){
// key.Code === 13表示回车键
if(e.keyCode === 13){
//逻辑处理
}
}
}

三、使用

vue

的语法糖进行键盘事件操作

1、在模板

<input type="text" placeholder="请输入书名" ref="inputBook" @keydown.13="submit"/>

2、在

js

中直接使用函数

methods:{
submit(){
// 业务逻辑处理
}
}

四、阻止事件冒泡

只需要

@click

改成

@click.stop="?"

即可

五、阻止默认事件

只需要

@click

改成

@click.prevent="?"

即可