下载掌阅APP，畅读海量书库
立即打开
2.5节和2.6节已经多次演示通过在button上绑定点击事件监听来处理点击响应的操作了，本节就来详细介绍Vue中的事件处理。在学习之前需要说明一点，Vue既支持原生DOM事件处理，也支持Vue自定义事件处理，但本节只关注原生DOM事件处理，至于Vue自定义事件处理，我们会在4.6节中进行详细讲解。
我们可以在HTML标签上使用v-on指令来绑定原生DOM事件监听，基本语法格式如下。
当然，在通常情况下，我们一般使用简化形式“＠事件名="handler"”。handler为事件处理器，Vue支持多种handler的写法。下面会对handler的写法分别进行讲解，先来看一下初始代码。
Vue代码如下。
JavaScript代码如下。
handler有3种写法，下面进行具体讲解。
（1）handler是一个方法名，对应methods配置中的一个同名方法。
当事件触发时，对应的方法会被自动调用。这是用得最多的一种写法，我们可以使用它来实现第1个按钮的点击功能。代码如下。
Vue代码如下。
JavaScript代码如下。
对于上方代码来说，当点击按钮时触发handleClick1方法。需要特别说明的是，handleClick1方法中定义的形式参数（形参）event，接收的就是事件对象，这是原生DOM事件监听回调原本的特性。
（2）handler是一条语句，只是这条语句有两种含义：可以是调用methods配置中某个方法的语句，也可以是直接更新data数据的语句。
下面分别进行说明。
①比如现在要实现点击第2个按钮，提示指定的数据。我们就可以让handler是调用methods配置中某个方法的语句，并传入自定义数据。在这种情况下，一般会省略语句最后的分号，来看下方代码。
Vue代码如下。
JavaScript代码如下。
需要特别说明的是，方法调用的语句在事件发生前不会被执行，只有在事件发生后，才会被自动调用执行。
②比如现在要实现点击第3个按钮，让num的数量加3。我们就可以让handler是直接更新data数据num的语句。同样省略分号，来看下方代码。
Vue代码如下。
（3）handler是一个箭头函数，它就是事件监听回调函数，可以接收一个event对象。
我们可以在箭头函数中调用方法或直接更新data数据，来看下方代码。
Vue代码如下。
上方代码使用箭头函数的方式重写了之前代码的实现。
当然如果不需要event，就可以在定义时省略。在这种情况下，明显第2种写法比第3种写法要简单，但如果在调用方法时既需要event，也需要自定义数据，就需要用第3种写法来实现了。比如现在要实现点击第4个按钮，提示按钮的文本和指定的数据。我们可以用handler的第3种写法来实现，代码如下。
Vue代码如下。
JavaScript代码如下。
但这并不是最简化的实现方式，当handler是方法调用语句时，Vue提供了一个隐含的变量$event来代表event对象。这样我们可以用更简化的代码实现上面的需求。
其实在实际开发中，箭头函数写法的使用频率很小。这是因为我们完全可以选择最后提供的方式来代替。
在原生DOM事件处理中，我们可以在事件监听回调函数中通过event.preventDefault来阻止事件默认行为，还可以通过event.stopPropagation来停止事件冒泡。Vue设计了简洁的事件修饰符语法来实现对事件的这两种操作及其他操作。
事件修饰符是用点表示的事件指令后缀，比如“＠事件名.事件修饰符名="handler"”。常用的事件修饰符有下面几个。
● .stop：停止事件冒泡。
● .prevent：阻止事件默认行为。
● .once：事件只处理一次。
下面通过案例来演示常用事件修饰符的使用方法。
Vue代码如下。
JavaScript代码如下。
在通常情况下，点击链接默认会跳转页面，而上方代码通过“.prevent”事件修饰符阻止事件默认行为，最终就不会跳转页面了。
我们在外部div和内部div上都绑定了点击事件。当点击内部div的绿色区域时，默认内部div会响应，但是由于事件冒泡，因此外部div也会响应。而上方代码通过“.stop”事件修饰符停止事件冒泡，外部div就不会响应了。
因为上方代码为按钮指定了“.once”事件修饰符，所以点击按钮时，其只会响应一次。
每个键盘按键都有一个对应的key值，用户可以通过event.key得到各个按键的key值。请思考下方代码的运行效果。
Vue代码如下。
JavaScript代码如下。
在输入框获取焦点后，用户按任意键盘按键其就可以提示对应的key值。比如，按Enter键提示Enter；按A键，提示a；按上方向键，提示ArrowUp。如果我们想要在按某个键盘按键时进行警告提示处理，又该如何实现呢？
最直接的处理方式就是在方法中判断key值。Vue提供了键盘按键修饰符来简化此操作，基本语法为“＠事件名.key="handler"”，事件名可以是任意DOM支持的按键事件，比如keydown或keyup，key为按键对应key值的kebab-case形式，比如Enter键为enter，上方向键为arrow-up，具体如下。
但事实上一些按键的key值并不是特别友好的，为此Vue提供了更加友好的按键别名来进一步简化代码，具体如下。
● .space：空格键。
● .up：上方向键。
● .down：下方向键。
● .left：左方向键。
● .right：右方向键。
这里以.up为例进行演示，具体如下。
除了键盘按键修饰符，Vue还提供了鼠标按键修饰符和系统按键修饰符，如表2-2所示。
表2-2 鼠标按键修饰符和系统按键修饰符
值得一提的是，系统按键修饰符一般会与键盘按键修饰符或鼠标按键修饰符配合使用，下面就是Alt键与Enter键的组合。
