事件處理器

　　1.監聽事件

　　可以用v-on指令監聽DOM事件來觸發一些js代碼。

　　2.方法事件處理器

　　許多事件處理的邏輯都很復雜，所以直接把js代碼寫在v-on指令中是不可行的。因此v-on可以接受一個定義的方法來調用

　　3.內聯處理器方法

　　除了直接綁定到一個方法，也可以用內聯js語句

　　有時也需要在內聯語句處理器中訪問原生DOM事件。可以用特殊變量$event把它傳入方法。

4.事件修飾符

在事件處理程序中調用event.preventDefault()或event.stopPropagation()是非常常見的需求。盡管我們可以在methods中輕松實現這點，但更好的方式是：methods只有純粹的數據邏輯，而不是去處理DOM事件細節。

為了解決這個問題，vue.js為v-on提供了事件修飾符。通過由點（.）表示的指令後綴來調用修飾符。

• .stop
• .prevent
• .capture
• .self
• .once
• <!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form>
  <!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素本身（比如不是子元素）觸發時觸發回調 --> <div v-on:click.self="doThat">...</div>
• <!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a>
• 不想其它只能對原生的DOM事件起作用的修飾符，.once修飾符還能被用到自定義的組件事件中

5.鍵值修飾符

在監聽鍵盤事件時，我們經常需要監測常見的鍵值。Vue允許為v-on在監聽鍵盤事件時添加關鍵修飾符。

為什麽在HTML中監聽事件？

你可能已經註意到這種監聽事件的方式違背了關註點分離(separation of concern)傳統理念。

不必擔心，因為所有的vue.js事件處理方法和表達式都嚴格綁定在當前視圖的viewModel上，它不會導致任何維護上的困難。實際上，使用v-on有幾個好處

1，掃一眼HTML便能輕松定位在js代碼裏對應的方法。

2，因為你無須在js裏手動綁定事件，你的viewModel可以是非常純粹的邏輯，和DOM完全解耦，更易於測試。

3，當一個viewModel被銷毀時，所有的事件處理器都會被自動刪除，你無須擔心如何清理他們。

vue 事件處理器