vue的事件监听（v-on）

3月

本文最后更新于2020年03月16日，已经过了1768天没有更新，若内容或图片失效，请留言反馈

在vue中我们用v-on来监听用户发生的事件，点击、拖拽、键盘等。
语法糖（简写）@

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    
    <div id="app">
        <h1>{{count}}</h1>
        <hr>
        <button type="button" v-on:click="count++">加</button>
        <button type="button" @click="count--">减</button>
        <hr>
        <button type="button" v-on:click="add">加</button>
        <button type="button" @click="sub">减</button>
    </div>
        
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">

        const app = new Vue({
            el:"#app",
            data:{
                count:0
            },
            
            methods:{
                add(){
                    this.count++
                },
                sub(){
                    this.count--
                }
            }
        })
    </script>
</body>
</html>

通过v-on监听四个按钮的点击事件，事件可以写简单的表达式如代码中的count++，也可以在methods中定义触方法供@click调用。

v-on的参数问题

当methods中定义触方法供@click调用时

若该方法不需要额外参数，则括号可以省略
在省略括号时，方法本身是需要一个参数的，这时候vue会默认将浏览器生成的event事件对象作为参数传入方法。
如果方法本身有一个参数，那么会默认将原生事件的event参数传递进去
如果在传入某个参数时同时需要even时，可以通过#event传入事件
若函数需要参数但没有传参，那函数的形参为undefined

text 代码:

    <div id="app">
        <button type="button" v-on:click="add">加</button>
        <button type="button" @click="sub(10,$event)">减</button>
    </div>

text 代码:

     const app = new Vue({
            el:"#app",
            data:{
                count:0
            },
            
            methods:{
                add(event){
                    console.log(event);
                    this.count++;
                },
                sub(counter,event){
                    console.log(event);
                    this.count-=counter;
                }
            }             
       })