本文我们来详细介绍下vue中的事件修饰符

2024年2月8日 171次阅读 来源: 小莫

 本文我们来详细介绍下vue中的事件修饰符

Vue事件修饰符
事件修饰符概览
修饰符 说明
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次

事件修饰符具体介绍
.stop
  .stop用来防止冒泡，我们先来看看冒泡的场景
<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
        .inner {
          height: 150px;
          background-color: gold;
        }
    
        .outer {
          padding: 40px;
          background-color: red;
        }
      </style>

</head>
<body>


<div id="app">
        <div class="inner" @click="div1Handler">
                <input type="button" value="点击" @click="btnHandler">
        </div>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {

        },
        methods: {
            div1Handler() {
                console.log('这是触发了 inner div 的点击事件')
            },
            btnHandler() {
                console.log('这是触发了 btn 按钮 的点击事件')
            }
        }
    })
</script>

</body>
</html>

    原文作者：小莫
    原文地址: https://segmentfault.com/a/1190000019942982
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞