1、@click.stop 阻止事件冒泡
//只彈出“noclick”
<div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止單擊事件繼續傳播</button> </div> </div> <script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>
2、@click.prevent 阻止事件的默認行爲 （提交事件不再重載頁面）
<a href="http://www.baidu.com" @click.prevent="test1">百度一下</a> //阻止a標籤跳轉，僅執行函數test1
<form action="/xxx" @submit.prevent="test2"> //阻止表單提交，僅執行函數test2
<input type="submit" value="註冊">
</form>
//有時右鍵點擊會帶出提示框，用.prevent 只會執行show2
<template>
<div >
<div>
<div @contextmenu.prevent="show2()">右鍵點擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
}
}
}
</script>
3、@click.capture 優先觸發
//添加事件監聽器時使用事件捕獲模式 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理
<div id="app" v-on:click="show">
1
<div id="app2" v-on:click.capture="show2">
2
<div id="app3" v-on:click="show3">3</div>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
},
methods:{
show:function(){
console.log("這是app的方法")
},
show2:function(){
console.log("這是app2的方法")
},
show3:function(){
console.log("這是app3的方法")
}
}
})
</script>
//此處的代碼因爲div2有capture關鍵字，所以此時冒泡的順序發生了改變
//正常情況下：
//點擊div3一層一層冒泡，先div3=》div2=》div1
//加了關鍵字之後：
//點擊div3時，先div2=》div3=》div1
4、@click.self 只有自己能觸發，子元素無法觸發
（1）v-on:click.prevent.self 會阻止所有的點擊
（2）v-on:click.self.prevent 只會阻止對元素自身的點擊。
//此時點擊a標籤會依次彈出2，1，跳轉。點擊div標籤會依次彈出3，2，1，跳轉。這發生了事件冒泡。
<div id="box">
<div @click="alert(1)">
<a href="/#" @click="alert(2)">a標籤
<div @click="alert(3)">div標籤</div>
</a>
</div>
</div>
//此時點擊a標籤會依次彈出2，1。點擊div標籤會依次彈出3，1。此時各位看官已經發現，a標籤不僅沒有冒泡，也沒有跳轉，這就是官網說的會阻止所有的點擊。
<div @click="alert(1)">
<a href="/#" @click.prevent.self="alert(2)">a標籤
<div @click="alert(3)">div標籤</div>
</a>
</div>
//點擊div標籤會依次彈出3，1，跳轉。此時a標籤沒有響應彈框，但是發生了跳轉，這就是官網說的只會阻止對元素自身的點擊。
<div @click="alert(1)">
<a href="/#" @click.self.prevent="alert(2)">a標籤
<div @click="alert(3)">div標籤</div>
</a>
</div>
5、@click.once 只能提交一次（.once 修飾符還能被用到自定義的組件事件上。）
6、@click.native
//給vue組件綁定事件時候，必須加上native ，不然不會生效（監聽根元素的原生事件，使用 .native 修飾符）
//等同於在自組件中：
子組件內部處理click事件然後向外發送click事件：$emit("click".fn)
7、.passive
<!-- 滾動事件的默認行爲 (即滾動行爲) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<!-- 這個 .passive 修飾符尤其能夠提升移動端的性能。 -->
<div v-on:scroll.passive="onScroll">...</div>
不要把 .passive 和 .prevent 一起使用，因爲 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。
8、@keyup.enter //按鍵修飾符（按鍵碼的別名：.enter ，.tab ，.delete ，.esc ，.space ，.up ，.down ，.left ，.right ）
//按下enter時，執行方法test3
<input type="text" @keyup.enter="test3">
methods: {
test3 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
你還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
9、系統修飾鍵（.ctrl , .alt , .shift ,.meta ）
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
10、.exact修飾符
//.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>