事件方法中 $event 为 undefined 问题

在 使用 v-on 为元素绑定处理函数时，本质上只有 2 种规范写法：

<!-- 写法一 -->
<button v-on:click="increase($event)">单击增加计数</button>

<!-- 写法二 -->
<button v-on:click="increase()">单击增加计数</button>

第 1 种写法意味着 increase 方法被触发执行时，你要求 vue 将事件对象传递到处理函数中。与之对应，你的事件处理函数自然需要有一个参数来『接收』vue 传给你的 $event 对象。

increase: function (event) {
  this.counter++; // `this` 在方法里指向当前 Vue 实例
  if (event) {    // `event` 是 DOM 事件对象，记录了所发生的事件的相关信息
    console.info(event.target.tagName)
}

第 2 种写法在你的 increase 方法被触发执行时，vue 不会传入事件对象。此时，哪怕你的 increase 方法有参数，那么它的值必然是 undefined 。

除了上述 2 种写法之外，看似还有第 3 种写法：

<!-- 写法三 -->
<button v-on:click="increase">单击增加计数</button>

『写法三』看似和『写法二』很像，但是它本质上是『写法一』的简写！

我们这里要说明的 $event 为 undefined 的问题的原因在于：你本想写所谓的『写法三』（本质上就是『写法一』），但是一不小心多加了一对 ()，写成了『写法二』，vue 压根就不会往你的事件处理函数中传入 event 对象。你的参数值自然就是 undefined 。

所以，在你需要使用事件对象时，注意不要在 v-on 种多写了括号！