Vue 事件处理

v-on事件处理

v-on 可以关联事件与事件的处理逻辑，形式上看可以分成三个类型，一、简单的 js 语句 二、函数名 三、函数调用。

---

简单的 js 语句

如果事件对应的逻辑比较简单的话，这个处理方式就是非常优雅的，比如官方给的 +1 例子。

<div id="app">
    <p>{{counts}}</p>
    <button @click="counts = counts + 1">加一</button>
</div>

@click 是 v-on:click 的简写(下同)。

---

函数名

这种方案有一个好处就是逻辑尽可能的写在了 js 里面。

<div id="app">
    <p>{{counts}}</p>
    <button @click="addOne">加一</button>
</div>

const vm = new Vue({
    el: "#app",
    data: {
        counts:0
    },
    methods: {
        addOne:function() {
            this.counts = this.counts + 1;
        }
    }
});

其实吧，在只给事件关联函数名的情况下，Vue 是会在调用函数的时候传一个参数的，这个参数就是触发的事件对象。

const vm = new Vue({
    el: "#app",
    data: {
        counts:0
    },
    methods: {
        addOne:function(...args) {
            console.log("enter function add with args = " + args + " .");
            let object = args[0];
            console.log(object);

            for (const key in object) {
                if (Object.hasOwnProperty.call(object, key)) {
                    const element = object[key];

                }
            }
            this.counts = this.counts + 1;
        }
    }
});

---

函数名带参数

如果我们给事件关联到的是一个函数调用的话，那么函数的参数在执行的时候就是我们给出的参数，并且不会附加任何其它的参数。

<div id="app">
    <p>{{counts}}</p>
    <button @click="add(2)">加二</button>
</div>

const vm = new Vue({
    el: "#app",
    data: {
        counts:0
    },
    methods: {
        add:function(...args) {
            // 由于我们传递了参数所以这个时候 args[0] 就是我们传进来的值
            console.log("enter function with args = " + args);
            console.log("args type = " + typeof(args) + " args length = " + args.length);
            // 因为我们只传了一个参数，所以这个参数可以通过 args[0] 取得
            let detal = args[0];
            this.counts = this.counts + detal ;
        }
    }
});

如果是以上面这种函数调用的方式关联事件的话，又想拿到事件，我们可以用 $event 来取得事件的引用。

<div id="app">
    <p>{{counts}}</p>
    <button @click="add(2,$event)">加二</button>
</div>

---