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>