前端笔记八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的区别