事件修饰符 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="../0-01初始vue/vue.js"></script>
</head>
<style>
    * {
        margin-top: 20px;
        padding: 0;
    }

    .out {
        background-color: skyblue;
    }

    a {
        background-color: rgb(90, 86, 86);
    }

    .mag1 {
        background-color: rosybrown;
        padding: 10px;
    }

    .mag2 {
        background-color: royalblue;
    }

    .but {
        background-color: saddlebrown;


    }

    ul {
        width: 400px;
        height: 400px;
        background-color: saddlebrown;
        overflow: auto;
    }

    li {
        width: 200px;
        height: 200px;
        background-color: salmon;
    }
</style>

<body>
    <!-- Vue 中的事件修饰符：
        1.prevent：阻止默认事件（常用）相当于相当于preventDefault()方法
        2.stop:阻止事件冒泡（常用）相当于stopPropagation()方法
        3.once：事件只执行一次（常用）
    不太常用
        4.captrue：使用事件的捕获模式
        5.self:只有event.target是当前操作的元素时才触发事件
        6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕

-->

    <div id="root">
        <h1>{{name}}</h1>
        <!-- .prevent  阻止默认行为(常用)==>  a标签的默认跳转页面 -->
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我</a>

        <!-- 阻止事件冒泡(常用) -->
        <div class="out" @click="showInfo">
            <button @click.stop='showInfo'>点我1</button>
        </div>

        <!-- 事件只触发一次 -->
        <button class="but" @click.once='showInfo'>点我2</button>

        <!-- 使用事件的捕获模式 -->
        <div class="mag1" @click.capture='mag(1)'>mag1
            <div class="mag2" @click='mag(2)'>mag2</div>
        </div>

        <!--self 只有event.target是当前操作元素触发的事件  -->
        <div class="out" @click.self="showInf">
            <button @click='showInf'>点我1</button>
        </div>

        <!-- passive 默认行为立即执行，无需等待事件回调执行 -->
        <ul @wheel.passive='dem'>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<script>
    Vue.config.productionTip = false;   //阻止vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data: {
            name: 'AAA',
        },
        methods: {
            showInfo() {
                console.log('欢迎来到AAA');
            },
            showInf(e) {
                console.log(e.target);
            },
            mag(mag) {
                console.log(mag);

            },
            dem() {
                for (let i = 0; i < 10000; i++) {
                    console.log(i);

                }
                console.log("累坏了");
            }
        }
    })
</script>

</html>

 

posted @ 2022-10-09 23:29  小忱  阅读(44)  评论(0)    收藏  举报