04Vue.js快速入門-Vue事件處理聯系老馬

Vue提供了協助我們為标簽綁定時間的方法，當然我們可以直接用dom原生的方式去綁定事件。Vue提供的指令進行綁定也是非常友善，而且能讓ViewModel更簡潔，邏輯更徹底。是以還是推薦大家使用的。

Vue提供了<code>v-on</code>指令幫助我們進行事件的綁定。 基本的内聯事件處理方法[官方demo]：

内聯的方式綁定的事件，隻能處理簡單的事件的處理邏輯。複雜的情況還是封裝到js中最友善，也不容易出錯。 Vue對象中可以添加methods屬性，開發者可以把事件處理函數的邏輯放到methods中。

官網上寫的非常好，這塊就直接用管網的吧。在事件處理程式中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實作這點，但更好的方式是：methods 隻有純粹的資料邏輯，而不是去處理 DOM 事件細節。 為了解決這個問題， Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令字尾來調用修飾符。

.stop

.prevent

.capture

.self

.once

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

全部的按鍵别名：

.enter

.tab

.delete (捕獲 “删除” 和 “倒退” 鍵)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

Vue中屬性的綁定的簡寫直接是<code>:</code>

=== 'v-bind:'

而事件的縮寫是直接變成<code>@</code>. 也就是說：

<code>v-on:</code>

===

<code>@</code>

看下面的例子：

Vue為了友善大家進行開發，提供了事件的相關的封裝，可以讓我們友善我們用Vue對事件進行開發，尤其是v-on指令的非常友善的跟Vue對象中methods進行配合進行複雜的事件處理，非常友善。另外事件的事件修飾符和按鍵修飾符也可以讓Vue事件這塊錦上添花。

老馬qq： 515154084

老馬微信：請掃碼

微信：Flydragon_malun 或者18911865673