前端笔记八vue指令的事件修饰符
Posted 桥本环奈粤港澳分奈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端笔记八vue指令的事件修饰符相关的知识，希望对你有一定的参考价值。
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>
参考：
以上是关于前端笔记八vue指令的事件修饰符的主要内容，如果未能解决你的问题，请参考以下文章
vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别