本篇来介绍 v-on 指令的特别之处，使用 JavaScript 撰写一个事件处理，除了 DOM 的绑定还需要撰写监听事件，这边只要加上 v-on ， Vue.js 就都帮你处理好了，以下来介绍这特别的功能。

开始之前先来复习 JavaScript 的 addEventListener() ，透过 addEventListener 注册的 Event Handler (EventListener) 事件监听器，就像是告诉JavaScript环境我在等待或监听什麽事件，例如点击滑鼠、按键盘...等，当发生事件时Browser就会去执行指定的function，这时 EventListener 会去建立一个事件物件 (Event Object)，里面包含了该事件有关的属性，并以参数形式回传给 EventListener。

<button id="btn">Click</button>

let btn = document.getElementById('btn');
btn.addEventListener('click', function(e){
  console.log(e);
});

e就是事件物件，名称可以自己定义，当点击时触发 EventListener ， console.log 就会跳出很多属性：

v-on

将运算式直接写在模板的实作：

<div id="app">
  <h3>{{ count }}</h3>
  <button @click="count++">Click</button>
</div>

v-on:事件名称="运算式"，等同於@事件名称"="运算式"，@是 v-on 缩写，运算式可以直接写在模板或是methods里。

const vm = Vue.createApp({
  data() {
    return {
      count: 0,
    }
  }
});

vm.mount("#app");

先在 data 定义 count 为0，之後靠 v-on 改变 count 的值。

运算式写在methods实作：

<div id="app">
  <h3>{{ count }}</h3>
  <button @click="add">Click</button>
</div>

const vm = Vue.createApp({
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    add() {
      this.count++;
    }
  }
});

vm.mount("#app");

JavaScript 的 EventListener 事件监听器，已经先在 methods宣告，再透过 v-on 绑定 click 的事件。

v-on 带参数

@事件名称="functionName(参数, $event)"。

1.设定参数100。
2. num 接受100的参数，开始做运算，运算完再回传到 data 里的 count 再送回画面。

需要访问原始 DOM 事件时，再带上特殊变量 $event就可以了，如果没有参数，预设就会将 event 物件当参数传入 metheds 的 function(event)。

Kuro Vue.js 1-5 事件处理
Kuro JavaScrip Day 15 隐藏在 "事件" 之中的秘密
Vue.js 官网