vue事件處理器

可以用v-on指令監聽dom事件來觸發一些javascript代碼

許多事件處理的邏輯都很複雜,是以直接把javascript代碼寫在v-on指令中是不可行的;是以v-on可以接收一個定義

的方法來調用

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

有時也需要在内聯語句處理器中通路原生 dom 事件。可以用特殊變量 $event 把它傳入方法：

在事件處理程式中調用event.preventdefault()或event.stoppropagation()是常見的需求；盡管我們可以在

methods中輕松實作這點，但更好的方式是：methods隻有純粹的資料邏輯，而不是去處理dom事件細節

為了解決這個問題，vue.js為v-on提供了 事件修飾符；通過由點(.)表示的指令字尾來調用修飾符

eg.stop/.prevent/.capture/.self/.once

使用修飾符時順序很重要；相應的代碼會以同樣的順序産生。是以用@click.prevent.self會阻止所有的點選，而

@click.self.prevent隻會阻止元素上的點選

不像其它隻能對原生的dom事件起作用的修飾符，.once修飾符還能被用到自定義的元件事件上

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

記住所有的 keycode 比較困難，是以 vue 為最常用的按鍵提供了别名：

全部的按鍵别名：.enter/.tab/.delete (捕獲“删除”和“倒退”鍵)/.esc/.space/.up/.down/.left/.right;

可以通過全局config.keycodes對象自定義鍵值修飾符别名：

可以用如下修飾符開啟滑鼠或鍵盤事件監聽，使在按鍵按下時發生響應:.ctrl/.alt/.shift/.meta

注意：在mac系統鍵盤上meta對應指令鍵 (⌘)。在windows系統鍵盤meta對應windows徽标鍵(⊞)。在sun作業系統鍵

盤上meta對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在mit和lisp鍵盤及其後續，比如knight鍵盤，space-

cadet鍵盤，meta被标記為“meta”。在symbolics鍵盤上，meta被标記為“meta”或“meta”

修飾鍵比正常的按鍵不同；修飾鍵和keyup事件一起用時，事件引發必須按下正常的按鍵。換種說法：如果要引發

keyup.ctrl，必須按下ctrl時釋放其他的按鍵；單單釋放ctrl不會引發事件

.left/.right/.middle；這些修飾符會限制處理程式監聽特定的滑鼠按鍵

你可能注意到這種事件監聽的方式違背了關注點分離（separation of concern）傳統理念。不必擔心，因為所有的vue.js事件處理方法和表達式都嚴格綁定在目前視圖的viewmodel上，它不會導緻任何維護上的困難。實際上，使用v-on有幾個好處：

1.掃一眼html模闆便能輕松定位在javascript代碼裡對應的方法

2.你無須在javascript裡手動綁定事件，你的viewmodel代碼可以是非常純粹的邏輯，和dom完全解耦，更易于測試

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