vue中的事件修饰符
修饰符
: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制
常用的事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
1.事件修饰符
stop修饰符
用来阻止事件冒泡
事件冒泡
详情:https://www.jianshu.com/p/3f0ee1f6ec30
prevent 事件修饰符
用来阻止标签的默认行为
self 事件修饰符
用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡
once 事件修饰符
once 一次 作用: 就是让指定事件只触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01.Vue中事件修饰符使用</title>
<style>
.aa{
background: red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<!--只触发标签自身的事件-->
<div class="aa" @click.self="divClick">
<!--用来阻止事件冒泡-->
<input type="button" value="按钮" @click.stop="btnClick">
<input type="button" value="按钮1" @click="btnClick1">
</div>
<hr>
<!--
.prevent : 用来阻止事件的默认行为
.once : 用来只执行一次特定的事件
-->
<a href="http://www.baidu.com/" @click.prevent.once="aClick">百度</a>
</div>
<div id="app2" class="aa">
<!--事件冒泡-->
<div @click="aconsole1">
<input type="submit" value="app2-2" @click="aconsole2">
</div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {},
methods: {
btnClick(){
alert('button被点击了');
},
divClick(){
alert('div被点击了');
},
aClick(){
alert('a被点击了');
},
btnClick1(){
alert('btn1被点击了');
}
}
});
const app2 = new Vue({
el:"#app2",
data:{},
methods: {
aconsole1: function () {
console.log("div被触发了");
alert('div');
},
aconsole2: function () {
console.log("按钮被触发了");
alert('按钮');
}
}
})
</script>
</body>
</html>
按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
如 enter 回车键
用来在触发回车按键之后触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02.按键修饰符</title>
</head>
<body>
<div id="app">
<!--
enter 按键修饰符 在回车之后触发的事件
-->
<input type="text" v-model="msg" @keyup.enter="keyups">
<input type="text" @keyup.left="keytabs">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:"",
},
methods: {
keyups(){
console.log(this.msg);
},
keytabs(){
console.log("left键触发");
}
}
});
</script>
</body>
</html>