Vue 事件监听
事件监听
v-on
使用v-on进行事件绑定监听，回调函数写在methods中。可以使用@的这种简写形式来代替v-on，当事件源无参数传递时，可省略括号。
语法如下所示：
<button @事件=回调函数(参数)>点我</button>
下面是一个小的示例：
<body>
<div id="app">
<button @click="func">点我</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func() {
console.log("点击事件发生了");
}
}
})
</script>
</body>
$event
事件源传入形参$event，则是当前事件对象。
<body>
<div id="app">
<button @click="func($event)">点我</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func(ev) {
console.log(ev);
}
}
})
</script>
</body>
修饰符
.once
使用.once修饰符后，该事件只会监听一次。当执行完这一次动作后将取消监听。
<div id="app">
<button @click.once="func">点我</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func() {
console.log("只执行一次");
}
}
})
</script>
</body>
.prevent
使用.prevent修饰符来阻止默认事件的发生：
<body>
<div id="app">
<a href="http://www.google.com/" @click.prevent="func">点我</a>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
func() {
console.log("不执行默认事件");
}
}
})
</script>
</body>
.stop
使用.stop修饰符阻止事件冒泡。
<style>
.f {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.s {
width: 50px;
height: 50px;
background: blue;
text-align: center;
color: white;
}
</style>
<body>
<div id="app">
<section @click="father" class="f">
<!-- 父亲事件不会触发 -->
<article @click.stop="son" class="s"></article>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {},
methods: {
son() {
console.log("儿子事件触发");
},
father() {
console.log("父亲事件触发")
}
},
});
</script>
</body>
.self
使用.self修饰符，也可以防止冒泡。只有点击到自己时才触发，不会通过冒泡触发。
<style>
.f {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.s {
width: 50px;
height: 50px;
background: blue;
text-align: center;
color: white;
}
</style>
<body>
<div id="app">
<!-- 点儿子时父亲事件不会触发 -->
<section @click.self="father" class="f">
<article @click="son" class="s"></article>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {},
methods: {
son() {
console.log("儿子事件触发");
},
father() {
console.log("父亲事件触发")
}
},
});
</script>
</body>
.capture
使用.capture，开启事件捕获。当子元素点击事件后，冒泡到父元素时，先执行完父元素监听事件的回调函数，再执行子元素监听事件的回调函数。
正常情况下是先执行子元素回调，再执行父元素回调
<style>
.f {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.s {
width: 50px;
height: 50px;
background: blue;
text-align: center;
color: white;
}
</style>
<body>
<div id="app">
<section @click.capture="father" class="f">
<article @click="son" class="s"></article>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {},
methods: {
son() {
console.log("儿子事件触发");
},
father() {
console.log("父亲事件触发")
}
},
});
</script>
</body>
键盘修饰符
使用@事件.键位的形式，来监听用户按下的键盘键位。
当按下的键位与监听的键位相同，则执行监听回调函数。
如下示例，使用组合监听。当再输入框内按下ctrl与a键时将触发事件的回调函数。
<body>
<div id="app">
<input type="text" @keyup.ctrl.a="func">
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
},
methods:{
func(){
console.log("执行了");
},
},
});
</script>
</body>
鼠标修饰符
使用@事件.按键的形式，来监听用户按下的鼠标按键。
当按下的按键与监听的键位相同，则执行监听回调函数。
如下所示，当用户在特定区域内按下右键后，阻止默认的右键弹出菜单事件，并执行事件的回调函数。
<body>
<div id="app">
<section @contextmenu.prevent="func" :style={width:"300px",height:"300px",backgroundColor:"red"}>
</section>
</div>
<script src='./vue.js'></script>
<script>
"use strict";
const app = new Vue({
el: "#app",
data: {
},
methods:{
func(){
console.log("执行了");
},
},
});
</script>
</body>
修饰符连用
修饰符支持连用，如下所示：
<button @click.once.stop=func>点我</button>
意思非常明显，只执行一次，阻止默认事件。
