vue中的v-on事件監聽機制

監聽dom事件使用v-on指令： v-on:事件類型="一個函數" 這個事件類型可以自定義

簡寫： @事件類型="一個函數"⭐

1、作用：綁定事件監聽，表達式可以是一個方法的名字或一個內聯語句，
如果沒有修飾符也可以省略，用在普通的html元素上時，只能監聽 原生
DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

2、常用事件：
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
....

3、示例：
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 阻止默認行為，沒有表達式 -->
<form v-on:submit.prevent></form>

5、v-on的縮寫形式：可以使用@替代 v-on:
<button @click="doThis"></button>

6、按鍵修飾符
觸發像keydown這樣的按鍵事件時，可以使用按鍵修飾符指定按下特殊的鍵后才觸發事件

寫法：
<input type="text" @keydown.enter="kd1"> 當按下回車鍵時才觸發kd1事件

由於回車鍵對應的keyCode是13，也可以使用如下替代
<input type="text" @keydown.13="kd1"> 當按下回車鍵時才觸發kd1事件

但是如果需要按下字母a（對應的keyCode=65）才觸發kd1事件，有兩種寫法：
1、由於默認不支持a這個按鍵修飾符，需要Vue.config.keyCodes.a = 65 添加一個對應,所以這種寫法為：

Vue.config.keyCodes.a = 65
<input type="text" @keydown.a="kd1"> 這樣即可觸發

2、也可以之間加上a對應的數字65作為按鍵修飾符
<input type="text" @keydown.65="kd1"> 這樣即可觸發

鍵盤上對應的每個按鍵可以通過 http://keycode.info/ 獲取到當前按下鍵所對應的數字