Vue3前端开发自学demo,事件修饰符-阻止默认事件和冒泡事件

Vue3前端开发自学demo,事件修饰符-阻止默认事件

下面演示的代码是，vue3前端开发技术里面经常遇到的，阻止默认事件，例如，阻止a标签的href属性，跳转到一个别的地址去。

正常情况下，传统的javaScript里面是可以调用event(简写：e)，调用e.preventDefault();

这是传统的方式，阻止默认事件的发生。但是在vue3开发里面，为了节省程序员的开发时间，提升办事效率，植入了很多修饰符。

比如今天这个修饰符【.prevent】,

下面贴出来代码给大家看一下。

<template>
    <h3>事件修饰符练习</h3>
    <div>
        <div>
            <a @click.prevent="clickHandle" href="http://www.baidu.com">baidu</a>
        </div>
        <hr>
        <div @click="clickDiv">
               <p @click="clickP">P</p> 
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                
            }
        },
        methods:{
            clickHandle(e){
                //阻止默认事件
                //e.preventDefault();
                console.log('点击了');
            },
            clickDiv(e){
                console.log('Div');
            },
            clickP(e){
                //e.stopPropagation();
                console.log('P');
            }
        }
    }
</script>

如图片指向的位置，就是，vue3的事件修饰符，效果案例展示。

直接在事件后面使用.prevent即可实现，阻止默认事件的效果。

同理，如果你想阻止冒泡事件，只需要写成【@click.stop】即可实现了。

效果和传统的e.stopPropagation()一模一样，省时间！效率高了。许多。