vue指令的事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获机制
- .once 事件只触发一次
- .self 只在元素本身被触发时触发回调事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: rgb(16, 153, 172);
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click="div1Handler">
<!-- 使用.stop 阻止冒泡 -->
<!-- 本来点button先触发btnHandle再触发div1Handler,添加.stop后阻止了冒泡,只触发了btnHandle -->
<input type="button" value="点击" @click.stop="btnHandle">
</div>
<!-- .prevent 阻止默认事件 -->
<!-- link默认跳转,使用.prevent后只触发linkHandle事件,不会自动跳转 -->
<a href="http://www.baidu.com" @click.prevent="linkHandle">baidu</a>
<!-- .capture 添加事件侦听器时使用事件捕获机制 -->
<!-- 本来点button先触发btnHandle再触发div1Handler,添加.capture后先触发div1Handler再触发btnHandle -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="点击" @click.stop="btnHandle">
</div>
<!-- .once 事件只触发一次 -->
<a href="http://www.baidu.com" @click.prevent="linkHandle">baidu</a>
<!-- .self 只在元素本身被触发时触发回调事件 -->
<!-- 本来点子元素button会先触发btnHandle再触发div1Handler,添加.self后只有点击inner自身才会触发div1Handler -->
<div class="inner" @click.self="div1Handler">
<input type="button" value="点击" @click.stop="btnHandle">
</div>
<!-- 注:事件修饰符可以串联 -->
<!-- v-model可以双向绑定数据,而且v-bind只能从model到view单项绑定 -->
<h4 v-text="msg"></h4>
<input type="text" :value="msg">
<input type="text" v-model="msg">
<!-- 注:v-model只能运用在表单元素上,即input(radio、text、address、email等)、select、checkbox -->
</div>
<script>
//创建Vue实例,得到ViewModel
var vm = new Vue({
el: "#app",
data: {
msg: "绑定数据"
},
methods: {
div1Handler() {
console.log("触发inner点击事件")
},
btnHandle() {
console.log("触发btn点击事件")
},
linkHandle() {
console.log("触发link点击事件")
}
}
});
</script>
</body>
</html>
参考: