Vue事件绑定总结（v-on）

最新推荐文章于 2024-04-24 09:32:44 发布

书院二层楼

最新推荐文章于 2024-04-24 09:32:44 发布

阅读量318

点赞数

分类专栏： Vue JS

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108851529

版权

Vue 同时被 2 个专栏收录

62 篇文章 3 订阅

订阅专栏

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>事件绑定</title>
</head>
<body>
    <div id="test">
        <!-- v-on事件绑定指令 -->
        <button v-on:click="handleClick0">全写-无参数点击</button>
        <!-- @事件绑定简写形式 -->
        <button @click="handleClick1('Hello v-on!')">简写-有参数点击</button>
        <button @click="handleClick2('Hello @',$event)"> 简写-有参数-传递事件参数点击</button>
        <button @click.once="handleClick3">只能点击一次</button>
        <!-- 表达式操作 -->
        <button @click="num++">点击增加</button> {{num}}

        <!-- 
        总结：
        v-on可以实现事件绑定，简写形式为@；不传递参数时，()可以省略，方法默认接收一个事件变量。传递参数时，如果还想接收事件变量，需要传入$event；
        事件绑定可以使用修饰符，详情如下：
            .stop - 调用 event.stopPropagation()。停止冒泡
            .prevent - 调用 event.preventDefault()。阻止默认行为
            .capture - 添加事件侦听器时使用 capture 模式。
            .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
            .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
            .native - 监听组件根元素的原生事件。
            .once - 只触发一次回调。
            .left - (2.2.0) 只当点击鼠标左键时触发。
            .right - (2.2.0) 只当点击鼠标右键时触发。
            .middle - (2.2.0) 只当点击鼠标中键时触发。
            .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
         -->
    </div>
    <script>
        const app = new Vue({
            el:"#test",
            data:{
                num:0,
            },
            methods:{
                handleClick0(e){
                    console.log("全写-无参数点击");
                    console.log(e);
                },
                handleClick1(msg){
                    console.log("简写-有参数点击");
                    console.log(msg);
                },
                handleClick2(msg,e){
                    console.log("简写-有参数-传递事件参数点击");
                    console.log(msg);
                    console.log(e);
                },
                handleClick3(){
                    console.log("我就响应一次");
                },

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

效果截图