05-事件监听

李先生 2020年12月15日 87次浏览

v-on事件监听

基本使用

<!-- vue案例计数器.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="app">
            <h2>当前计数:{{counter}}</h2>
            <button v-on:click="counter--">-</button>
            <button v-on:click="counter++">+</button>
            <button v-on:click="sub">函数式:-</button>
            <button @click="add">函数式:+</button>
        </div> 

        <script src="../js/vue.js"></script>

        <script>
            
            const app = new Vue({
                el:'#app', // 用于挂载要管理的元素
                data:{
                    counter: 0 
                },
                methods: {
                    add: function(){
                        // 上面的调用方式可以看到很简单,它叫做语法糖,是因为原本的写法有点麻烦,这是一种简写,也叫做给你点甜头
                        alert("add被执行")
                        console.log("add被执行");
                        this.counter++;
                    },
                    sub: function(){
                        alert("sub被执行")
                        console.log("sub被执行");
                        this.counter--;
                    }
                }
            })

            // 以前
            // 1. 拿button元素
            // 2. 添加监听事件
        </script>
    </body>
</html>

v-on参数

  • 当通过methods中定义方法,以供@click调用时,需要注意参数问题
  • 情况一:
    • 如果该方法不需要额外参数,那么方法后的()可以不添加
    • 但是注意,如果方法本身中有一个参数,那么会默认将原生时间event参数传递进去。
  • 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件
<!-- vue案例计数器.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="app">
            <!-- 事件调用的方法没有参数 -->
            <button @click="btn1Click()">按钮1-1</button>
            <button @click="btn1Click">按钮1-2</button>
            
            <!-- 在事件调用的时候,方法本身是需要一个参数的 -->
            <button @click="btn2Click(111)">按钮2</button>
            <!-- 调用需要参数的函数时,如果忘记传入参数,那么vue会将浏览器生成的event对象作为参数传入到方法里 -->
            <button @click="btn3Click">按钮3</button>

            <!-- 在需要手动获取浏览器参数的event对象时,需要使用$event -->
            <button @click="btn4Click">按钮4-1</button>
            <button @click="btn4Click(111,$event)">按钮4-2</button>
        </div> 

        <script src="../js/vue.js"></script>

        <script>
            
            const app = new Vue({
                el:'#app', // 用于挂载要管理的元素
                data:{
                    counter: 0 
                },
                methods: {
                    btn1Click(){
                        console.log("btn1Click");
                        this.counter++;
                    },
                    btn2Click(abc){
                        console.log("btn2Click"+ "-----",abc);
                        this.counter++;
                    },
                    btn3Click(event){
                        console.log("btn3Click"+ "-----",event);
                        this.counter++;
                    },
                    btn4Click(abc,event){
                        console.log("btn4Click"+ "----- + abc=",abc);
                        console.log("btn4Click"+ "----- + event=",event);

                        this.counter++;
                    },
                }
            })

            // 以前
            // 1. 拿button元素
            // 2. 添加监听事件
        </script>
    </body>
</html>

v-on的修饰符

  • .stop 阻止时间冒泡
  • .prevent 阻止默认行为
  • .{keyCode|keyAlias} 特定键触发的事件回调
  • .native 监听组件根元素的原生事件(之后讲组件的内容时再说)
  • .once 只触发一次回调
<!DOCTYPE html>

<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></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 1. .stop -->
        <div @click="divClick">
            div
            <!-- 会事件冒泡,先执行buttonClick方法,再执行divClick方法 -->
            <button @click="buttonClick">按钮</button>
            <button @click.stop="buttonClick">阻止事件冒泡的按钮</button>
        </div>
        <br>
        <!-- 2. .prevent -->
        <form>
            <!-- 这种方式会触发submitClick函数,但是同时也会执行submit提交方法 -->
            <button type="submit" @click="submitClick">提交</button>
            <!-- 有些场景我们想要自己去控制提交 (a标签也有默认行为)-->
            <button type="submit" @click.prevent="submitClick">自己手动处理</button>
        </form>
        <br>
        <!-- 3. 监听某个键盘的键帽 -->
        <!-- 这种情况会监听所有的键盘事件 -->
        <input type="text" @keyup="keyUp">
        <!-- 这种只监听会车键 -->
        <input type="text" @keyup.enter="keyUp">
        <br>
        <!-- 4. .once -->
        <button type="submit" @click.once="submitClick">只触发一次的提交</button>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{},
           methods:{
            divClick(){
                console.log("divClick");
            },
            buttonClick(){
                console.log("buttonClick");
            },
            submitClick(){
                console.log("submitClick");
            },
            keyUp(){
                console.log("keyUp");
            }
           }
        });
    </script>
</body>

</html>