光脚丫思考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
光脚丫思考Vue3与实战：第04章 模板语法 第03节 指令的修饰符相关推荐
- 光脚丫思考Vue3与实战：第04章 模板语法 第02节 指令的参数+动态参数
下面是本文的屏幕录像的在线视频: 第02节 指令的参数+动态参数 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/11_hwQF ...
- 光脚丫思考Vue3与实战：第04章 模板语法 第01节 概述+插值
下面是本文的屏幕录像的在线视频: 光脚丫思考Vue3与实战:第04章 模板语法 第01节 插值 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baid ...
- 光脚丫思考Vue3与实战：第04章 模板语法 第04节 指令的缩写
下面是本文的屏幕录像的在线视频: 第04节 指令的缩写 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1Dd2HeUXH6DZ ...
- 光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第01节 计算属性
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1MiGKmrzp40i1ZD_4borteQ ...
- 光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第02节 侦听器
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg ...
- 光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第03节 计算属性的其他玩法
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw ...
- 光脚丫思考Vue3与实战：第02章 安装Vue.js
下面是本文的屏幕录像的在线视频: 02-安装Vue.js 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZf ...
- 光脚丫思考Vue3与实战：第03章 Vue实例
下面是本文的屏幕录像的在线视频: 03-Vue实例 04-生命周期示意图+钩子函数 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 03-Vue实例:https://pan.baid ...
- 光脚丫思考Vue3与实战：第01章 初步认识Vue3
下面是本文的屏幕录像的在线视频: 01-初步认识Vue.js-PART1 01-初步认识Vue.js-PART2 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: PART1:http ...
最新文章
- 试过不用循环语句撸代码吗？
- java for(o t :object) 获取顺序号_java中线程的生命周期
- 使用饼图_使用R做饼图展示单细胞的cluster的比例
- html中通过定位 实现下拉,JS+CSS相对定位实现的下拉菜单
- git命令出现fatal: unable to access SSL certificate problem: self signed certificate
- Bailian2818 密码【密码+置换】
- 员工主动辞职公司也要支付经济补偿金的17种情况
- linux 网络监控 邮件,一种基于Linux的邮件监控方法与流程
- 好好的虚拟机不能用了, 出现无法打开内核设备\\.\Global\vmx86: 系统找不到指定的文件的错误, 以下是网上找到的解决方法,亲测可用...
- 如何在 macOS 中锁定文件和文件夹？
- 传媒业进入B2C领域：香港商报推爱购商城
- Atitit 项目沟通管理 艾提拉总结 目录 1. 项目中沟通对象 2 1.1. 主要为项目干系人 产品部门 运营部门组员等 2 1.2. 适当越级沟通， 与高层直接沟通 3 2. 沟通频率 3
- 阿里巴巴 研发工程师Java暑期实习一面
- 基于加速度计的倾角检测算法-C语言程序
- 谷歌浏览器上传图片和图片另存为就卡死崩溃解决方案
- UI实用素材|衬线字体素材的应用要点
- 第三人称和第一人称互相切换【Low版】
- TopCoder教程
- 用计算机刻录光盘,刻录光盘,教您怎么用电脑将文件刻录到光盘
- 中山大学计算机学院选课要求,39所985高校3+1+2选科要求汇总! 报考必看！