v-on事件修飾符及按鍵修飾符
阿新 • • 發佈：2019-01-22
v-on 事件修飾符
常用的事件修飾符有：
.stop 阻止事件冒泡
.self 當事件在該元素本身觸發時才觸發事件
.capture 新增事件偵聽器是，使用事件捕獲模式
.prevent 阻止預設事件
.once 事件只觸發一次
什麼是事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on</title> <script src="vue.min.js"></script> <style> .outer{ width: 160px; height: 160px; background: #D45F10; border: 1px solid #D45F10; } .inner{ width: 100px; height: 100px; background: #47EE26; margin: 30px; } </style> </head> <body> <div id="app"> <h2>事件冒泡</h2> <div class="outer" @click="outerClick"> <div class="inner" @click="innerClick"> <button @click="btnClick">事件冒泡</button> </div> </div> <p>當點選按鈕時，會從裡到外依次觸發按鈕點選事件、inner點選事件、outer點選事件</p> <p>當點選inner div時，會從裡到外依次觸發inner點選事件、outer點選事件</p> <p>當點選outer div時，只觸發outer點選事件</p> <p>這就是事件冒泡</p> </div> <script> var vm = new Vue({ el: '#app', data: { }, // 在methods中使用data裡面的資料的時候，要加this指向該Vue例項物件 methods: { outerClick () { console.log("觸發了outer點選事件") }, innerClick () { console.log("觸發了inner點選事件") }, btnClick () { console.log("觸發了按鈕點選事件") } } }); </script> </body> </html>
.stop 阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on</title> <script src="vue.min.js"></script> <style> .outer{ width: 160px; height: 160px; background: #D45F10; border: 1px solid #D45F10; } .inner{ width: 100px; height: 100px; background: #47EE26; margin: 30px; } </style> </head> <body> <div id="app"> <h2>.stop阻止事件冒泡</h2> <div class="outer" @click="outerClick"> <div class="inner" @click="innerClick"> <button @click.stop="btnClick">阻止事件冒泡</button> </div> </div> <p>.stop可以實現當我點選按鈕的時候，只觸發按鈕點選事件，阻止了事件冒泡</p> </div> <script> var vm = new Vue({ el: '#app', data: { }, // 在methods中使用data裡面的資料的時候，要加this指向該Vue例項物件 methods: { outerClick () { console.log("觸發了outer點選事件") }, innerClick () { console.log("觸發了inner點選事件") }, btnClick () { console.log("觸發了按鈕點選事件") } } }); </script> </body> </html>
.self 只有當事件在該元素本身觸發時才觸發事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on</title> <script src="vue.min.js"></script> <style> .outer{ width: 160px; height: 160px; background: #D45F10; border: 1px solid #D45F10; } .inner{ width: 100px; height: 100px; background: #47EE26; margin: 30px; } </style> </head> <body> <div id="app"> <h2>.self當事件在該元素本身觸發時觸發回撥（比如 不是子元素）</h2> <div class="outer" @click="outerClick"> <div class="inner" @click.self="innerClick"> <button @click="btnClick">self效果</button> </div> </div> <p>.self只能阻止自己身上冒泡行為，並不會真正的阻止冒泡行為</p> <p>只給inner div 加.self，當點選按鈕時，會從裡到外依次觸發按鈕點選事件、outer點選事件</p> <p>而不會觸發inner點選事件，跳過了inner div冒泡</p> <p>當點選inner div時，依然會從裡到外依次觸發inner點選事件、outer點選事件</p> </div> <script> var vm = new Vue({ el: '#app', data: { }, // 在methods中使用data裡面的資料的時候，要加this指向該Vue例項物件 methods: { outerClick () { console.log("觸發了outer點選事件") }, innerClick () { console.log("觸發了inner點選事件") }, btnClick () { console.log("觸發了按鈕點選事件") } } }); </script> </body> </html>
.capture 新增事件偵聽器是，使用事件捕獲模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on</title>
<script src="vue.min.js"></script>
<style>
.outer{
width: 160px;
height: 160px;
background: #D45F10;
border: 1px solid #D45F10;
}
.inner{
width: 100px;
height: 100px;
background: #47EE26;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">
<h2>.capture新增事件偵聽器時使用事件捕獲模式(即為實現捕獲觸發事件的機制)</h2>
<div class="outer" @click.capture="outerClick">
<div class="inner" @click.capture="innerClick">
<button @click="btnClick">事件捕獲</button>
</div>
</div>
<p>當給inner div、outer div都新增.capture修飾符的時候</p>
<p>當點選按鈕時，會從外到裡依次觸發outer點選事件、inner點選事件、按鈕點選事件</p>
<p>當點選inner div時，會從外到裡依次觸發outer點選事件、inner點選事件</p>
<p>當點選outer div時，只觸發outer點選事件</p>
<p>這就是事件捕獲</p>
<h2>.capture新增事件偵聽器時使用事件捕獲模式(即為實現捕獲觸發事件的機制)</h2>
<div class="outer" @click.capture="outerClick">
<div class="inner" @click="innerClick">
<button @click="btnClick">事件捕獲</button>
</div>
</div>
<p>當只給outer div新增.capture修飾符的時候</p>
<p>當點選按鈕時，會依次觸發outer點選事件、按鈕點選事件、inner點選事件</p>
<p>即為outer和outer內部分兩部分，是事件捕獲，但outer內部還有巢狀的部分仍是事件冒泡</p>
<p>當點選inner div時，會從外到裡依次觸發outer點選事件、inner點選事件</p>
<p>當點選outer div時，只觸發outer點選事件</p>
<h2>.capture新增事件偵聽器時使用事件捕獲模式(即為實現捕獲觸發事件的機制)</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click.capture="innerClick">
<button @click="btnClick">事件捕獲</button>
</div>
</div>
<p>當只給inner div新增.capture修飾符的時候</p>
<p>當點選按鈕時，會依次觸發((inner點選事件、按鈕點選事件)(事件捕獲)、outer點選事件)(事件冒泡)</p>
<p>當點選inner div時，會從裡到外依次觸發inner點選事件、outer點選事件，事件冒泡</p>
<p>當點選outer div時，只觸發outer點選事件</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
// 在methods中使用data裡面的資料的時候，要加this指向該Vue例項物件
methods: {
outerClick () {
console.log("觸發了outer點選事件")
},
innerClick () {
console.log("觸發了inner點選事件")
},
btnClick () {
console.log("觸發了按鈕點選事件")
}
}
});
</script>
</body>
</html>.prevent 阻止預設事件
<body>
<div id="app">
<h2>.prevent阻止預設事件</h2>
<a href="http://www.baidu.com" @click.prevent="preventClick">百度一下 你就知道</a>
// 點選只會觸發preventClick事件，不會跳轉頁面，阻止了a標籤的預設跳轉
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
// 在methods中使用data裡面的資料的時候，要加this指向該Vue例項物件
methods: {
preventClick () {
console.log("阻止了a標籤的預設點選跳轉事件")
}
}
});
</script>
</body>.once 事件只觸發一次
<body>
<div id="app">
<h2>.once事件只觸發一次</h2>
<input type="button" value="只觸發一次" @click.once="onceClick">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
// 在methods中使用data裡面的資料的時候，要加this指向該Vue例項物件
methods: {
onceClick () {
console.log("事件只觸發一次,點選再多次按鈕，也只輸出一次")
}
}
});
</script>
</body>v-on 按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符
按鍵別名：
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
注意：在Windows系統鍵盤上meta對應windows徽標鍵(⊞)。
<body>
<div id="app">
// Enter鍵觸發submit事件 下面三種寫法都對
<input type="text" v-on:keyup.enter="submit" />
<input type="text" @keyup.enter="submit" />
<input type="text" @keyup.13="submit" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
submit() {
console.log("enter鍵觸發事件");
}
}
});
</script>
</body>修飾符可以串聯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
<style>
.outer{
width: 160px;
height: 160px;
background: #D45F10;
border: 1px solid #D45F10;
}
.inner{
width: 100px;
height: 100px;
background: #47EE26;
margin: 30px;
}
</style>
</head>
<body>
<div id="app">
<!--v-on: Vue中的事件繫結機制-->
<input type="button" value="按鈕1" v-on:click="show" />
<!-- v-on: 指令可以簡寫為 @要繫結的事件-->
<input type="button" value="按鈕2" @click="show" />
<h2>修飾符串聯</h2>
<div class="outer" @click="outerClick">
<div class="inner" @click="innerClick">
<!-- 既阻止了預設事件，又阻止了事件冒泡 -->
<a href="http://www.baidu.com" @click.stop.prevent="btnClick">修飾符串聯</a>
</div>
</div>
<!-- Alt + C 觸發事件 -->
<input type="text" @keyup.alt.67="altClick">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '天天向上'
},
// methods屬性中定義當前Vue例項中所有可用的方法
methods: {
show: function () {
alert('hello!');
},
outerClick() {
console.log("觸發了outer點選事件")
},
innerClick() {
console.log("觸發了inner點選事件")
},
btnClick() {
console.log("觸發了按鈕點選事件")
},
altClick() {
console.log("Alt + C 觸發事件")
}
}
});
</script>
</body>
</html>