这节课我们主要来学习监听键盘和鼠标的事件，在vue中我们同样可以使用v-on来监听键盘和鼠标的事件，并且还提供了特定的按键修饰符。我们来新建一个demo20.html文件，复制好基础代码。

input监听enter(回车按键)

我们先来编写一个input，给input使用v-on绑定一下键盘按下事件,再给它定一个响应方法handelKeyDown。让它键盘被按下时触发handelKeyDown方法。

 methods: {
      handelKeyDown(){
        alert("键盘被按下")
      },
    },
    template: `
      <div>
        <input @keydown="handelKeyDown"/>
      </div>
      `

这样编写表示了只要键盘任意键被按下都会触发执行，在某些场景中我们可能更希望它去按下指定按键才触发我们事件响应。所以vue为我们提供了按键修饰符。当我们设置了指定按键修饰符之后，只有指定按键被按下才会触发事件响应。

比如我们来设置了一个回车键盘。

template: `
      <div>
        <input @keydown.enter="handelKeyDown"/>
      </div>
      `

这样只有按下会车键时才会执行弹出alter。

类似这样的修饰符有很多，大家根据自己需求选择使用，下面是比较常用的按键修饰符

最常用的按键修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统按键修饰键

• .ctrl
• .alt
• .shift
• .meta

这些我就不给大家演示了，可以自行去测试。

鼠标事件修饰符

常规的鼠标它一般只有三个按键分别是 left(左键)、right(右键)、还有 middle(滚轮)。

methods: {
      handelClick(){
        alert("我被点击了")
      }
    },
template: `<div @click.right="handelClick">{{message}}</div>`