.stop:阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身(比如不是子元素)触发是触发回调
.once事件只触发一次
正常情况:冒泡执行点击事件
.stop(阻止事件冒泡)
做一个链接
<a href="http://www.baidu.com" @click="lianjie">点我跳转到百度</a>
lianjie是控制台打印信息
正常情况是跳转到百度
.prevent(应该是不会跳转只是打印控制台信息的,额,没有成功)
.capture是从外层到里层触发事件
.self是只触发点击元素事件
.once是只触发一次
不再实验了,具体自己操作
贴出部分代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间修饰符</title>
<script src="vue.js"></script>
</head>
<body>
<!--容器-->
<div id="app" style="width: 200px;height: 100px;background-color: black" @click="topnormal">
<input type="button" value="点我" @click.stop="normal">
</div>
<a href="http://www.baidu.com" @click.prevent="lianjie">点我跳转到百度</a>
<script>
// 创建一个vue实例
var vm=new Vue({
el:'#app', // 绑定id为appid容器
data:{
msg:'啊啊啊啊啊啊啊啊------'
},
methods:{
normal(){
console.log("内层按钮事件")
},
topnormal(){
console.log("外层div事件")
},
lianjie(){
console.log("我是链接")
}
}
})
</script>
</body>
</html>