https://jsrun.pro/ZLfKp/edit ### 監聽事件 可以用v-on指令監聽DOM事件，　并在觸發時運行一些JavaScript代碼。 ``` <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ``` ### 事件處理方法 除了把JS代碼寫在指令中，v-on還可以接收調用的方法名。 ### 內聯處理器中的方法 除了綁定方法名， 還可以內嵌JS調用方法 ``` <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> ``` 使用$event 特殊變量，可以在內聯語句處理器中訪問原始的DOM事件。 ``` <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> ``` ``` // ... methods: { warn: function (message, event) { // 現在我們可以訪問原生事件對象 if (event) { event.preventDefault() } alert(message) } } ``` ### 事件修飾符 在時間處理程序調用， `event.preventDefault()`或`event.stopPropagation()` 是非常常見的需求， 但是更好的方式是： 方法只有純粹的數據邏輯， 而不是去處理DOM事件細節。 為此， Vue為v-on提供了事件修飾符，由點開頭的指令前綴來表示。包括： * .stop * .prevent * .capture * .self * .once * .passive ``` <!-- 阻止單擊事件繼續傳播 --> <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> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> ``` 使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。 #### .once 2.1.4新增， 觸發一次， .once 修飾符還能被用到自定義的組件事件上。 ``` <!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> ``` #### 2.3.0 新增 Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。 ``` <!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div> ``` 這個 .passive 修飾符尤其能夠提升移動端的性能，不要把`.passive`和`.prevent`一起使用，因為`.prevent`將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，`.passive`會告訴瀏覽器你*不*想阻止事件的默認行為。 ### 按鍵修飾符 Vue 允許為`v-on`在監聽鍵盤事件時添加按鍵修飾符 ``` <!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` --> <input v-on:keyup.enter="submit"> ``` 你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符。 ``` <input v-on:keyup.page-down="onPageDown"> ``` 在上述示例中，處理函數只會在 $event.key 等于 PageDown 時被調用。 #### 按鍵碼 keyCode 的事件用法已經被廢棄了并可能不會被最新的瀏覽器支持。 ``` <input v-on:keyup.13="submit"> ``` 按鍵的別名： * .enter * .tab * . delete (包含刪除和退格) * .esc * .space * .up * .down * .left * .right ### 系統修飾鍵 2.1.0 新增 可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器 * `.ctrl` * `.alt` * `.shift` * `.meta` ``` <!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> ``` 警告： 請注意修飾鍵與常規按鍵不同，在和`keyup`事件一起用時，事件觸發時修飾鍵必須處于按下狀態。換句話說，只有在按住`ctrl`的情況下釋放其它按鍵，才能觸發`keyup.ctrl`。而單單釋放`ctrl`也不會觸發事件。如果你想要這樣的行為，請為`ctrl`換用`keyCode`：`keyup.17`。 #### .exact修飾符 2.5.0 新增 `.exact`修飾符允許你控制由精確的系統修飾符組合觸發的事件。 ``` <!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的時候才觸發 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button @click.exact="onClick">A</button> ``` ### 鼠標按鈕修飾符 提示： 2.2.0 新增 * `.left` * `.right` * `.middle`