一、常见的键盘事件

  • 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="?"即可