目录
事件修饰符
事件修饰符
如下：
.stop
.prevent
.capture
.self
.once
设置导航
导航父元素和子元素设置不同的点击事件时。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
<ul @click="handleUlClick">
<li @click="handleLiClick">11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#box',
data:{},
methods : {
handleUlClick() {
console.log('ul click');
},
handleLiClick() {
console.log('li click')
}
}
})
</script>当点击第一个li时，会触发两个事件。
效果如下：
stop修饰符
使用stop可以阻止冒泡(如果没有stop 则会触发两个点击事件)
示例如下：
<ul @click="handleUlClick">
<li @click.stop="handleLiClick">11111</li>
<li>22222</li>
<li>33333</li>
</ul>self修饰符
设置自己触发 子点击不会触发。
示例如下：
<ul @click.self="handleUlClick">
<li @click.stop="handleLiClick">11111</li>
<li @click="handleLiClick">22222</li>
<li>33333</li>
</ul>触发一次
使用once修饰符，可用来实现只触发一次的事件。
示例如下：
<li @click.once="handleLiClick">33333</li>阻止默认行为
可使用prevent修饰符来实现，阻止标签默认行为。
示例如下：
<a href="http://www.baidu.com" @click.prevent>跳转</a>常用在form表单跳转之前，进行验证。
模态框实现1
利用事件和事件修饰符，简单实现一个登录窗口的显示和隐藏。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#overlay {
margin: 0 auto;
border : 1px solid red;
width:400px;
height:300px;
}
#center {
text-align: center;
margin:20px auto;
}
#center div {
margin-top:20px;
}
</style>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="box">
<!--模态框1-->
<button @click="isShow=true">show</button>
<div id="overlay" v-show="isShow" @click="isShow=false">
<div id="center" @click.stop>
<div>用户名：<input type="text"></div>
<div>密码：<input type="password"></div>
<div>
<button>登录</button>
</div>
</div>
</div>
</div>
<script>
let vm = new Vue({
el : '#box',
data : {
isShow : false
},
methods : {
}
})
</script>
</body>
</html>效果如下：
点击show按钮显示登录窗口，然后点击登录窗口中表单外隐藏登录窗口。