事件修飾符、按鍵修飾符

事件修飾符

.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 隻當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.{keyCode | keyAlias} - 隻當事件是從特定鍵觸發時才觸發回調。
.native - 監聽元件根元素的原生事件。
.once - 隻觸發一次回調。
.left - (2.2.0) 隻當點選滑鼠左鍵時觸發。
.right - (2.2.0) 隻當點選滑鼠右鍵時觸發。
.middle - (2.2.0) 隻當點選滑鼠中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器      

這裡舉2個典型例子簡單說一下

.stop

<div @click="doThis('wade',$event)">
     <button @click.stop="sayHi()">點選</button>
</div>      

上面代碼，父元素跟子元素各自綁定相應的事件觸發不同的方法，子元素采用事件修飾符阻止了父元素事件的處罰

<button @click.stop="sayHi()">點選</button>

// 等同于
methods: {
    sayHi(e) {
        e.stopPropagation();
    }
}      

<a href="https://www.baidu.com/" @click.prevent="toSay">百度</a>

// 相當于
methods: {
    toSay(e) {
        e.preventDefault();
    }
}      

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止預設行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止預設行為，沒有表達式 -->
<form @submit.prevent></form>

<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符，鍵别名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點選回調隻會觸發一次 -->
<button v-on:click.once="doThis"></button>

<!-- 對象文法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>