Vue事件处理器

花开富贵城

已于 2024-09-03 02:56:05 修改

阅读量132

点赞数 2

文章标签： vue.js javascript 前端

于 2024-09-03 02:34:57 首次发布

本文链接：https://blog.csdn.net/qq_42498352/article/details/141834223

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="box">
        {{count}}

        <!-- 内联表达式写法 -->
        <button @click="count++">add1</button>

        <!-- 最强大 内联调用函数表达式 主动传入事件对象   传入$event可以拿到事件源-->
        <button @click="handleAdd2()">add2</button>

        <!-- 方法事件处理器 -->
        <button @click="handleAdd3">add3</button>

        <!-- .self 事件源在自身上才触发 -->
        <ul @click.self="handleUlClick">
            <!-- 传入$event可以拿到事件源 -->
            <li @click="handleClick(1,2,3,$event)">111</li>

            <!-- 匿名函数 -->
            <li @click.stop="(evt)=>handleClick2(1,2,3,evt)">222</li>
        </ul>
        
    </div>
    <script>
        let obj = {
            data(){
                return{
                    count:'0'
                }
            },
            methods:{
                handleAdd2(){
                    this.count++
                },
                handleAdd3(evt){
                    console.log(evt.target) // 拿到事件源
                    this.count++
                },
                handleClick(a,b,c,evt){
                    console.log('111-----',evt)
                },
                handleClick2(a,b,c,evt){
                    console.log('222---',evt)
                    // evt.stopPropagation(); // 阻止冒泡
                },
                handleUlClick(){
                    console.log('ul-click')
                }

            }
        }
        Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>