vue事件修饰符 

<!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">
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .dem{
            height: 50px;
            background-color: blueviolet
        }
        .box1{
            padding: 5px;
            background-color: cadetblue
        }
        .box2{
            padding: 5px;
            background-color: orangered
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: springgreen;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
    <title>事件修饰符</title>
</head>
<body>
    <!-- vue中的事件修饰符
    1.prevent:阻止默认事件；
    2.stop:阻止冒泡事件
    3.once:事件只触发一次
    4.capture:使用事件的捕获模式
    5.self:只有event.target是当前操作的元素时才触发的事件
    6.passsive:事件默认立即执行，无需等待事件回调完成
    -->
    <div id="root">
        <h1>你好 {{name}}</h1>
        <!--  1.prevent:阻止默认事件；-->
        <a href="https://www.baidu.com/" @click.prevent="shouwInfo">点我提示信息</a>
        <!--2.stop:阻止冒泡事件  -->
        <div class="dem" @click="shouwInfo">
            <button @click.stop="shouwInfo">点我提示</button>
        </div>
        <!--  3.once:事件只触发一次 -->
        <button @click.once="shouwInfo">点我提示</button>
        <!--  4.capture:使用事件的捕获模式-->
        <div class="box1" @click.capture="showMessage(1)">
            div1
            <div class="box2" @click.capture="showMessage(2)">
                div2
            </div>
        </div>

        <!-- 5.self:只有event.target是当前操作的元素时才触发的事件  -->
        <div class="dem" @click.self="shouwInfo">
            <button @click="shouwInfo">点我提示</button>
        </div>

        <!-- 6.passsive:事件默认立即执行，无需等待事件回调完成  手机等移动端用的较多 -->
        <ul @wheel="demo.passsive" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        const vm=new Vue({
            el:"#root",
            data:{
                name:"xiao bai"
            },
            methods:{
                shouwInfo(){
                    alert("你好呀")
                },
                showMessage(num){
                    console.log(num)
                },
                demo(){
                    for (let i = 0; i < 10000; i++) {
                       console.log("#");
                        
                    }
                    alert("累了");
                }
            }
            

        })
    </script>
</body>
</html>

 

posted @ 2022-10-28 14:15  小白字太白  阅读(48)  评论(0)    收藏  举报