vue中的 事件修饰符.prevent的使用---阻止事件的默认行为

vue中的 事件修饰符.prevent的使用

事件修饰符.prevent 作用：阻止事件的默认行为

<div id="app">
<!-- vue中的 事件修饰符.prevent的使用 
        
        事件修饰符.prevent 作用：阻止事件的默认行为
        -->

<p>
<!-- @click.prevent 阻止事件的默认行为，
            
                阻止a超链接 ，自动刷新页面的默认行为
            -->
<a href="" @click.prevent="play">百度一下</a>
</p>
<p>
<!-- 
                @submit.prevent  阻止事件的默认行为，

                阻止 点击提交按钮，表单自动跳转，这个默认行为
             -->
<form action="https://www.163.com" method="post" @submit.prevent="run">
<input type="submit" value="提交">
</form>
</p>
</div>


<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
methods:{
play(){
// window.location.href="https://www.baidu.com"
alert('吴灿上午好')
},
run(){
alert('小谈上午好')
}
}
})
</script>

预览效果，如下所示：

点击超链接，超链接的默认行为，被阻止了。直接调用执行play函数

点击提交按钮，表单自动跳转的默认行为，被阻止了，直接调用执行run函数