018 V 修饰符
本帖最后由 不二如是 于 2018-9-17 16:26 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了@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、添加事件监听器时使用事件捕获模块的写法？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.F
2.可以
3.@click.capture="methodName" 1 0 F
T
.capture 1
页:
[1]