vue2.x的事件系统

带参和不带参

如果要传参数，必须写（），如不传参数，爱写不写
不写（）,默认参数就是event
写（）显式传参，event名字叫：$event
常用的修饰符

阻止默认事件 .prevent
阻止事件冒泡 .stop
一次性事件 .once
自身事件 .self
按键事件 .enter
代码片段

<!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="./vue.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: #333333;
        }
        .outer{
            width: 300px;
            height: 300px;
            background: #333333;
            margin: 20px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: orange;
        }
        .mask{
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            left: 0px;
            top: 0px;
        }
        .con{
            width: 200px;
            height: 100px;
            position: absolute;
            left:0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            background: #ffffff;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- @click="alert1()" 如果要传参数，必须写（），如不传参数，爱写不写 -->
        <button @click="alert1(10)">弹1</button>
        <button @click="alert2(10,20)">弹2</button>
        <!-- event  -->
        <!-- 1.不写（）,默认参数就是event -->
        <button @click="getEvent">event1</button>

        <!-- 2.写（） 显式传参，event名字叫：$event -->
        <button @click="getEvent2($event)">event2</button>
        <button @click="getEvent3(10,$event)">event3</button>

        <!-- 阻止默认事件 .prevent-->
        <div class="box" @contextmenu="contextmenu"></div>
        <div class="box" @contextmenu.prevent="contextmenu2"></div>

        <!-- 阻止事件冒泡 .stop-->
        <div class="outer" @click="outerClick">
            <div class="inner" @click.stop.prevent="innerClick"></div>
        </div>
        <!-- 一次性绑定 .once-->
        <div class="inner" @click.once="innerClick"></div>

        <!--目标元素是自己才出发 .self -->
        <div class="outer" @click.self="outerClick">
            <div class="inner" @click="innerClick"></div>
        </div>

        <button @click="isClose=true;">退出登录</button>
        <div class="mask" v-if="isClose" @click.self="isClose=false;">
            <div class="con">
                <h2>你确定要退出吗？</h2>
                <button>确定</button>
                <button @click="isClose=false;">取消</button>
            </div>
        </div>

        <!-- enter 按键 -->
        <input type="text" @keydown.enter="down()" @keydown.up.prevent="up"
        @keydown.down="down2"
        >
    </div>
    <script>
        new Vue({
            el:"#app",//挂载点
            data:{//属性
                isClose:false
            },
            methods:{//方法
                alert1(n){
                    alert(n)
                },
                alert2(a,b){
                    alert(a+b)
                },
                getEvent(e){
                    console.log(e)
                },
                getEvent2(ev){
                    console.log(ev)
                },
                getEvent3(e,n){
                    console.log(e)
                },
                contextmenu(e){
                    e.preventDefault();
                    console.log("yjl");
                },
                contextmenu2(){
                    console.log("yjl2")
                },
                innerClick(){
                    console.log("inner Click")
                },
                outerClick(){
                    
                    console.log("outer Click")
                },
                down(){
                    console.log("enter")
                },
                up(){
                    console.log("up")
                },
                down2(){
                    console.log("down")
                }
            }
        })
    </script>
</body>
</html>
vue2.x的事件系统

带参和不带参

常用的修饰符

代码片段

悦读
