• Vue 事件监听


    事件监听

    v-on

    使用v-on进行事件绑定监听,回调函数写在methods中。可以使用@的这种简写形式来代替v-on,当事件源无参数传递时,可省略括号。

    语法如下所示:

    <button @:事件=回调函数(参数)>点我</button>
    

    下面是一个小的示例:

    <body>
    
    <div id="app">
        <button @click="func">点我</button>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            methods: {
                func() {
                    console.log("点击事件发生了");
                }
            }
        })
    </script>
    </body>
    

    $event

    事件源传入形参$event,则是当前事件对象。

    <body>
    
    <div id="app">
        <button @click="func($event)">点我</button>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            methods: {
                func(ev) {
                    console.log(ev);
                }
            }
        })
    </script>
    </body>
    

    修饰符

    .once

    使用.once修饰符后,该事件只会监听一次。当执行完这一次动作后将取消监听。

    <div id="app">
        <button @click.once="func">点我</button>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            methods: {
                func() {
                    console.log("只执行一次");
                }
            }
        })
    </script>
    </body>
    
    

    .prevent

    使用.prevent修饰符来阻止默认事件的发生:

    <body>
    
    <div id="app">
        <a href="http://www.google.com/" @click.prevent="func">点我</a>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            methods: {
                func() {
                    console.log("不执行默认事件");
                }
            }
        })
    </script>
    </body>
    

    .stop

    使用.stop修饰符阻止事件冒泡。

    <style>
        .f {
             100px;
            height: 100px;
            background-color: red;
            text-align: center;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .s {
             50px;
            height: 50px;
            background: blue;
            text-align: center;
            color: white;
        }
    </style>
    
    <body>
    
    <div id="app">
        <section @click="father" class="f">
            <!-- 父亲事件不会触发 -->
            <article @click.stop="son" class="s"></article>
        </section>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                son() {
                    console.log("儿子事件触发");
                },
                father() {
                    console.log("父亲事件触发")
                }
            },
        });
    </script>
    </body>
    

    .self

    使用.self修饰符,也可以防止冒泡。只有点击到自己时才触发,不会通过冒泡触发。

    <style>
        .f {
             100px;
            height: 100px;
            background-color: red;
            text-align: center;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .s {
             50px;
            height: 50px;
            background: blue;
            text-align: center;
            color: white;
        }
    </style>
    
    <body>
    
    <div id="app">
        <!-- 点儿子时父亲事件不会触发 -->
        <section @click.self="father" class="f">
            <article @click="son" class="s"></article>
        </section>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                son() {
                    console.log("儿子事件触发");
                },
                father() {
                    console.log("父亲事件触发")
                }
            },
        });
    </script>
    </body>
    

    .capture

    使用.capture,开启事件捕获。当子元素点击事件后,冒泡到父元素时,先执行完父元素监听事件的回调函数,再执行子元素监听事件的回调函数。

    正常情况下是先执行子元素回调,再执行父元素回调

    <style>
        .f {
             100px;
            height: 100px;
            background-color: red;
            text-align: center;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .s {
             50px;
            height: 50px;
            background: blue;
            text-align: center;
            color: white;
        }
    </style>
    <body>
    
    <div id="app">
        <section @click.capture="father" class="f">
            <article @click="son" class="s"></article>
        </section>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                son() {
                    console.log("儿子事件触发");
                },
                father() {
                    console.log("父亲事件触发")
                }
            },
        });
    </script>
    </body>
    

    键盘修饰符

    使用@事件.键位的形式,来监听用户按下的键盘键位。

    当按下的键位与监听的键位相同,则执行监听回调函数。

    如下示例,使用组合监听。当再输入框内按下ctrla键时将触发事件的回调函数。

    <body>
        <div id="app">
            <input type="text" @keyup.ctrl.a="func">
        </div>
        <script src='./vue.js'></script>
        <script>
            "use strict";
            const app = new Vue({
                el: "#app",
                data: {
                },
                methods:{
                    func(){
                        console.log("执行了");  
                    },
                },
            });
        </script>
    </body>
    

    鼠标修饰符

    使用@事件.按键的形式,来监听用户按下的鼠标按键。

    当按下的按键与监听的键位相同,则执行监听回调函数。

    如下所示,当用户在特定区域内按下右键后,阻止默认的右键弹出菜单事件,并执行事件的回调函数。

    <body>
        <div id="app">
            <section @contextmenu.prevent="func" :style={"300px",height:"300px",backgroundColor:"red"}>
            </section>
        </div>
        <script src='./vue.js'></script>
        <script>
            "use strict";
            const app = new Vue({
                el: "#app",
                data: {
                },
                methods:{
                    func(){
                        console.log("执行了");  
                    },
                },
            });
        </script>
    </body>
    

    修饰符连用

    修饰符支持连用,如下所示:

    <button @click.once.stop=func>点我</button>
    

    意思非常明显,只执行一次,阻止默认事件。

  • 相关阅读:
    【纯水题】POJ 1852 Ants
    【树形DP】BZOJ 1131 Sta
    【不知道怎么分类】HDU
    【树形DP】CF 1293E Xenon's Attack on the Gangs
    【贪心算法】CF Emergency Evacuation
    【思维】UVA 11300 Spreading the Wealth
    【树形DP】NOI2003 逃学的小孩
    【树形DP】BZOJ 3829 Farmcraft
    【树形DP】JSOI BZOJ4472 salesman
    【迷宫问题】CodeForces 1292A A NEKO's Maze Game
  • 原文地址:https://www.cnblogs.com/plyc/p/14813668.html
Copyright © 2020-2023  润新知