1)默认行为和阻止默认行为
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<a href="https:www.baidu.com" @click="showInfo">点我提示信息</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时提示
const vm = new Vue({
el:'#root',
data:{
name:'爪哇开发'
},
methods: {
showInfo(event){
alert('同学你好')
}
}
})
</script>
</body>
打开之后效果如下:
大家可以发现,在点击了showInfo事件并且确定之后,页面自动跳转到超链接了。这是一个默认事件。那么如何阻止这个默认行为呢?可以将时间改成如下形式。这样就不会跳转了。
以上就演示了默认行为和阻止事件默认行为
2)事件冒泡和阻止事件冒泡
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- 阻止默认事件 (常用) -->
<a href="https:www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<div class="demo1" @click="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时提示
const vm = new Vue({
el:'#root',
data:{
name:'爪哇开发'
},
methods: {
showInfo(event){
alert('同学你好')
}
}
})
</script>
</body>
阻止事件冒泡:
打开后:
3)让事件只触发一次
总结:
Vue中的事件修饰符:
1)prevent:阻止默认事件(常用)
2)stop:阻止事件冒泡
3)once:事件只触发一次(常用)
4)capture:使用事件的捕获模式
5) self:只有event.target是当前操作的元素才触发事件
6)passive:事件的默认行为立即执行,无需等待事件回调执行完毕