018 V 修饰符

不二如是

                               
登录/注册后可看大图

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

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

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

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

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

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

Vue支持一下修饰符：

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

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

阻止单击事件冒泡：

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

提交事件不再重载页面：

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

修饰符可以串联：

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

只有修饰符：

<form @submit.prevent></form>

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

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

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

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

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

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

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

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

<input @keyup.33="fishcShow">

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

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下是窗口键)

例如：

<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