v-on绑定事件
- 简写为
@ - 使用v-on已经进行一些事件绑定, 最常用的比如click点击事件
事件修饰符
.stop
阻止冒泡
当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面
而.stop就是阻止冒泡使用的
.prevent
阻止默认事件
在
form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转
.self
只当事件在该元素本身（比如不是子元素）触发时触发回调
这个修饰符跟
.stop目的差不多,
.stop是阻止点击到自己身上的点击事件冒泡到其它标签上
.self是除非你直接点击到我标签本身, 不接受其它标签上面的点击事件冒泡到我身上的事件
.once
事件只触发一次
绑定后只会触发一次
下面为代码演示, 主要功能就是有一个遮罩层,
代码
<!--
File: demo_10_时间修饰符.html
Created Date: 2020-12-17 23:17:06
Author: 蓝小白
Contact: <[email protected]>
Last Modified: Thursday December 17th 2020 23:49:03 pm
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入本地的vue -->
<script src="/VUE/vue.js"></script>
<!-- 下面遮罩层的样式 -->
<style>
#overlay{
background: rgba(0, 0, 0, 0.6);
width: 100%;
margin: auto;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#center {
background: #ffffff;
border-radius: 5px;
/* 边框圆角 */
padding-top: 15px;
padding-left: 30px;
padding-bottom: 15px;
width: 290px;
height: 160px;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="box">
<!-- 修饰符 .prevent 会阻止默认行为,比如跳转 -->
<br> <a href="http://www.baidu.com" @click.prevent>点击后不会跳转</a>
<br><hr>
<!-- 修饰符 .once 被绑定的事件只触发一次 -->
<button @click.once="onceFunc"> 你只能点击一次 </button>
<br><hr>
<!-- 点击按钮后吧isShow的状态置位true -->
<button @click="isShow=true">点击显示遮罩层</button>
<!-- 这个div标签就是出现的遮罩层 -->
<div id="overlay" v-show="isShow" @click="isShow=false">
<!-- 这个div标签是在遮罩层上面显示的,当点击这个标签会冒泡到他下面的div
这个时候就要使用 .shop 阻止冒泡行为 -->
<div id="center" @click.stop>
点击灰色部分会关闭遮罩层, <br>而点击白色部分这不会
<hr>
<div>用户名: <input type="text"></div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
isShow:false,
},
methods:{
onceFunc(){
alert("你没有机会在点了!!!")
}
}
})
</script>
</body>
</html>
注: 代码显示不一样注意一下
vue.js是否导入