vue-事件修饰符

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：事件的默认行为立即执行，无需等待事件回调执行完毕

相关阅读:
AnythingLLM 的 Docker 使用
[微信]微信JS-SDK权限签名生成及验证
计算机中丢失mfc140u.dll怎么解决
1,2,4,5-四嗪-羧基-MethylTetrazine-amine HCl salt/propylamine HCl salt的研究
算法小白的心得笔记：关于Nan
你知道视频怎么去水印吗？试试这三个方法学会怎么去视频水印
Vue3-02_Vue基础入门
java序列回显学习
华为分享---手机往电脑发送失败的处理
数据治理-数据存储和操作-数据架构类型

原文地址：https://blog.csdn.net/qq_50652600/article/details/127084491