018 V 修饰符

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了@click和$event两个方法，本次来学习一个超简单的修饰符。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了修饰符。

修饰符是由点开头的指令后缀来表示的。

在@绑定事件后面加上“.”，再跟一个后缀来使用修饰符。

Vue支持一下修饰符：

.stop、.prevent、.capture、.self、.once

具体用法有很多，我们从常用的几个方法开始。

阻止单击事件冒泡：

1. <a @click.stop="handle"></a>

复制代码

提交事件不再重载页面：

1. <form @submit.prevent="handle"></form>

复制代码

修饰符可以串联：

1. <a @click.stop.prevent="handle">

复制代码

只有修饰符：

1. <form @submit.prevent></form>

复制代码

添加事件监听器时使用事件捕获模块：

1. <div @click.capture="handle"></div>

复制代码

只当事件在该元素本身（自元素不算）触发时，才触发回调：

1. <div @click.self="handle"></div>

复制代码

只触发一次，组件同样适用：

1. <template @click.onec="handle"></template>

复制代码

在表单上监听键盘事件时，还可以使用按键修饰符，比如按下某个键才会触发相应的方法。

只有在keyCode是33时调用fishcShow()方法：

1. <input @keyup.33="fishcShow">

复制代码

也可以自己配置具体按键：

1. Vue.config.keyCodes.myFishc = 112;

复制代码

全局定义后，就可以使用@keyup.myFishc。

除了具体的某个keyCode外，Vue还提供了一些快捷操作，以下是全部的别名：

.enter、.tab、.delete（捕获和退格）、.esc、.space、.up、.down、.left、.right

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

.ctrl、.alt、.shift、.meta(Mac下Command，Windows下是窗口键)

例如：

1. <div @click.ctrl="doSomething"></div>

复制代码

本次只做介绍，只需要了解，以后我们会用很多次的。

---

课后作业


1、修饰符不一定由点开头的指令后缀来表示。（T/F）

2、修饰符可以串联的写法？

3、添加事件监听器时使用事件捕获模块的写法？




答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

1.F
2.可以
3.@click.capture="methodName"

优时风

1

一笙彤

0

suweixuan1998

F
T
.capture

jack6666

1