# 1-5 事件處理

事件是 JavaScript 的靈魂，一個具有高度互動性的網頁介面，對於各種事件的管理必定少不了。

在進入本篇之前，我們大多透過 v-model 指令來與 Vue 實體的資料溝通，但那畢竟只是語法糖的一種， Vue.js 甚至是 JavaScript 能做到的遠遠不僅於此。

本篇的內容將帶領各位讀者理解， Vue.js 如何來操作與管理網頁的事件。

# 事件綁定 - v-on

有別於前面一篇介紹了一堆與模板相關的指令，在 Vue.js 與事件有關係的指令就只有一個 v-on 。 使用方式也很簡單，最常見的方式是 v-on:[事件名稱]="運算式" ，如:

const vm = Vue.createApp({
  data () {
    return {
      count: 0
}).mount('#app');

<!-- 模板裡無需加上 this -->
<p>Count: {{ count }}</p>
<button v-on:click="count++">Plus</button>

或者也可以把 event handler function 寫在 methods 裡頭：

const vm = Vue.createApp({
  data () {
    return {
      count: 0
  methods: {
    plus () {
      this.count++;
}).mount('#app');

<p>Count: {{ count }}</p>
<button v-on:click="plus">Plus</button>