（简）事件指令v-on：修饰符

修饰符

1.在@绑定的事件后加小圆点“.”，在跟一个后缀来使用修饰符。Vue支持以下修饰符：

• .stop
• .prevent
• .capture
• .self
• .once
  具体用法如下：

<!--阻止单击事件冒泡 -->
<a @click.stop="handle"></a>
<!--提交事件不再重载页面 -->
<form @submit.prevent="handle"></form>
<!--修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>
<!--只要修饰符 -->
<form @submit.prevent></form>
<!--添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="handle"></div>
<!--只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div @click.self="handle"></div>
<!--只触发一次，组件同样适用 -->
<div @click.once="handle"></div>

2.在表单上监听键盘事件时，还可使用按键修饰符，比如按下具体某个键时才调用方法：

<!--只有在keyCode是13时调用vm.submit()-->
<input @keyup.13="submit">

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

Vue.config.keyCodes.f1=112;
//全局定义后，就可以使用@keyup.f1

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

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

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

• .ctrl
• .alt
• .shift
• .meta(Mac下是Command键,Windows下是窗口键)

例如：

<!--shift+s-->
<input @keyup.shift.83="handleSave">
<!--ctrl+click-->
<div @click.ctrl="doSomething">Do something</div>

以上就是事件指令v-on的基本内容—修饰符。.