vue支持的修饰符（常用整理）

vue常用的修饰符

vue支持以下修饰符：

.stop

.prevent

.capture

.self

.once

具体用法如下：

<!-- 阻止单击事件冒泡 -->
<a @click.stop="handle"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="handle"></form>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="handle">...</div>

<!-- 只有当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div @click.self="handle">...</div>

<!-- 只触发一次，组件同样调用 -->
<div @click.once="handle">...</div>

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

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

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

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

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

.enter

.tab

.delete（捕获“删除”键和“退格”键）

.esc

.space

.up

.down

.left

.right

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

.ctrl

.alt

.shift

.meta（Mac下是command键，Windows下是窗口键）

例如：

<!-- Shift + S -->
<input @keyup.shift.83="handleSave"/>
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">doSomething</div>