Vue指令之v-on的缩写和事件修饰符
Posted junlinsky
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue指令之v-on的缩写和事件修饰符相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
</style>
</head>
<div id="app">
<div class="inner" @click="divHandler">
<button @click="btnHandler">有冒泡</button>
<button @click.stop="btnHandler">无冒泡</button>
</div>
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
divHandler() {
alert(‘div‘);
},
btnHandler() {
alert(‘btn‘);
}
}
}
);
</script>
</html>
.prevent阻止默认事件
- html一些标签有默认的事件，比如a 标签
- 使用.prevent修饰事件可以阻止标签的默认事件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<a href="https://www.baidu.com/" @click="href">去百度</a>
<br />
<a href="https://www.baidu.com/" @click.prevent="href">去不了百度</a>
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
href() {
alert(‘去百度‘);
}
}
}
);
</script>
</html>
.capture 添加事件侦听器时使用事件捕获模式
- 捕获机制与冒泡机制相反，指先触发最外层的事件，再触发内层事件。
- 在外层事件使用.capture修饰会捕获标签内部的事件。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
</style>
</head>
<div id="app">
<div class="inner" @click.capture="divHandler">
<button @click="btnHandler">捕获机制</button>
</div>
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
divHandler() {
alert(‘div‘);
},
btnHandler() {
alert(‘btn‘);
}
}
}
);
</script>
</html>
.self只当事件在该元素本身(比如不是子元素)触发时触发回调
-
在外层标签的事件中使用该修饰符修饰则事件不能通过冒泡机制触发
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <style> .inner { height: 150px; background-color: pink; } </style> </head> <div id="app"> <div class="inner" @click="divHandler"> <button @click="btnHandler">有冒泡</button> <button @click.stop="btnHandler">无冒泡</button> </div> <br /> <div class="inner" @click.self="divHandler"> <button @click="btnHandler">冒泡机制失效</button> </div> </div> <body></body> <script> var vm = new Vue({ el: "#app", data: {}, methods: { divHandler() { alert(‘div‘); }, btnHandler() { alert(‘btn‘); } } } ); </script> </html>
.once事件只触发1次
- 事件修饰符是可以串联的
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
</style>
</head>
<div id="app">
<!--这样串联起来只会阻止第一次点击的默认事件-->
<a href="https://www.baidu.com/" @click.prevent.once="href">去百度</a>
<input type="button" @click.once="href" value="不串联" />
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
href() {
alert(‘再点一次去百度‘);
}
}
}
);
</script>
</html>
以上是关于Vue指令之v-on的缩写和事件修饰符的主要内容，如果未能解决你的问题，请参考以下文章