光脚丫思考Vue3与实战：第04章 模板语法 第03节 指令的修饰符

下面是本文的屏幕录像的在线视频：

第03节 指令的修饰符

温馨提示：

1、视频下载：线上视频被压缩处理，可以下载高清版本：

链接：https://pan.baidu.com/s/1J08bPvs6OITq3R_FN3riIg 提取码：ewgh 

2、示例代码：https://pan.baidu.com/s/1SyOvCLPOTG22qj_B5qtiew 提取码：eozw 

下图是文章大纲：

一、概述

Vue.js的修饰符包括两种类型：事件修饰符和按键修饰符。

二、事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在methods中轻松实现这点，但更好的方式是：methods只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。
修饰符(modifier)是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()：

在接下来对v-on和v-for等功能的探索中，你会看到修饰符的其它例子。另外，还有一些别的事件修饰符：

• .stop
• .prevent
• .capture
• .self
• .once

如下面的代码所示：

示例代码：07-EventModifier.html
其中，修饰符是可以串联的，如上述代码中的v-on:click.stop.prevent的使用。

1、.stop

修饰符.stop是用来阻止事件的继续传递。
关于冒泡和捕获的详细内容，可以参见博客文章《JS事件冒泡与捕获》，文章地址：https://blog.csdn.net/gjysk/article/details/115652900
用法如下：

示例代码：08-EventModifier-Stop.html

如上图代码所示，当我们随便在8个监听器中某一个添加.stop修饰。那么这个传递过程就会在此终止。
修饰符.stop应该放在需要阻止冒泡的位置上。

2、.prevent

修饰符.prevent的作用是：阻止浏览器默认事件，等同于JavaScript的event.preventDefault()。
什么是默认事件？例如浏览器默认右键菜单、a标签默认连接跳转等。
那么，如何使用修饰符.prevent呢？如下代码所示：

示例代码：09-EventModifier-Prevent.html
如上代码所示，在a标签上单击鼠标左键的时候，如果同时又有href属性值的话，则会跳转到该属性值也所指的页面地址去。但由于增加了修饰符.prevent，此处的代码并不会执行跳转到百度页面的操作。
和修饰符.stop的不同是：.stop阻止了事件的继续传递，而该修饰符只是阻止了默认事件的响应，而不影响事件的继续传递。

示例代码：09-EventModifier-Prevent.html
比如上面代码，点击《触发事件Stop》按钮，则只触发doLevel3()函数，事件就被终止，不再继续传递。
而点击《跳转到百度》超链接的时候，事件仍然会被继续传递，但是，由于使用了修饰符.prevent，导致不会执行超链接的默认跳转动作，所以，浏览器仍然会保持在当前页面，而不是跳转到了百度页面。

3、.capture

修饰符.capture的作用是在捕获的过程监听事件，没有修饰符.capture时都是默认冒泡过程监听。
关于冒泡和捕获的详细内容，可以参见博客文章《JS事件冒泡与捕获》，文章地址：https://blog.csdn.net/gjysk/article/details/115652900

示例代码：10-EventModifier-Capture.html
如上面的示例代码所示，事件触发的流程是从①处由上往下开始经历捕获过程，然后再由下往上经历冒泡过程。
没有添加修饰符.capture的监听是在冒泡过程监听的，而增加了修饰符.capture则是在捕获过程中监听的。

4、.self

Vue.js修饰符.self只有在事件绑定的元素与当前触发事件的元素一致时才响应事件，否则不会触发。如下代码所示：

示例代码：11-EventModifier-Self.html
当我们在最内层的div4上单击鼠标左键的时候，控制台输出的内容是：

从上控制台输出的内容可以看出，div1、div2、和div4都响应鼠标单击事件，但添加了修饰符.self的div3并没有响应。这是因为单击事件发生在div4元素上，而不是div3元素上，按照修饰.self的约定，div3上的函数是不响应的。
如果，在div3上单击，控制台会输出什么内容呢？如下图所示：

如上图控制台输出的内容来看，这次div3响应的事件，那是因为触发事件的元素就是div3元素本身，因此他的click事件绑定的函数就被执行了。

5、.once

Vue.js修饰符.once只有在第一次触发事件的时候才会被响应，之后触发的事件都不会响应。如下代码所示：

示例代码：12-EventModifier-Once.html
打开该页面，然后点击《测试.once》按钮，则会弹出如下图所示的消息对话框：

关闭该对话框，然后再次点击《测试.once》按钮，此时按钮就不再响应事件，也不会弹出上图的对话框。

这说明，凡是加上了修饰符.once的，绑定到事件上的函数只会被执行一次，执行完毕后，将不会再被重复执行了。

三、按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为v-on在监听键盘事件时添加按键修饰符：

如上图代码所示，只有在keyCode=13时才会调用test()方法。此代码也可以使用按键别名的方式编写，如下图所示：

 
也可以使用缩放的方式编写代码，如下代码所示：

记住所有的keyCode比较困难，所以Vue为最常用的按键提供了别名：

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

可以通过全局config.keyCodes对象自定义按键修饰符别名：
Vue.config.keyCodes.f1 = 112
温馨提示：在Vue3中好像是不可行的，通过Vue.config.keyCodes访问的时候出现了空引用。如下图所示：

四、参考资料

• https://v3.vuejs.org/guide/introduction.html
• https://cn.vuejs.org/v2/guide/syntax.html
• https://www.cnblogs.com/meiyh/p/6593462.html
• https://blog.csdn.net/wangxiaoxiaosen/article/details/73732752
• https://www.jianshu.com/p/a515f95d9cef
• https://www.jianshu.com/p/3f0ee1f6ec30
• https://blog.csdn.net/XuM222222/article/details/80276884