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>