Vue.js
Vue.js 將事件偵聽放在 HTML 中，透過 ViewModel 將事件處理方法和表達式綁在當前的 View 上，你可以很容易找到事件偵聽器對應的處理方法，由於你不必手動去綁定事件，你的事件處理程序的程式碼就可以非常的單純只專注在處理事件上。偵聽事件
Vue.js 提供 v-on 指令來偵聽事件的發生，並交由指定的事件處理程式執行。v-on 指令可以接受的表達式為函式 (Function) 或行內敍述 (Inline Statement)。參數則為 event。v-on 可以用 @ 符號來縮寫。
行內敍述
使用範例：HTML<div id="app">
<p>按鈕點擊數：{{ count }}</p>
<button v-on:click="count += 1">+1</button>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 0
}
})
</script>
行內敍述就是將表達式直接寫在 v-on 事件偵聽器上，這個範例中，我們偵聽按鈕被按一次 (click) 的事件，所以整個指令的寫法是 v-on:click。行內敍述只適合處理非常簡單的運算，複雜的程式邏輯必須交由事件處理函式執行。
事件處理函式（方法）
前面我們已經用過 Vue 實體的選項物件中的el、data及 filters，現在我們要在用到一個新的叫做 methods。methods 中的屬性都是函式，如果對應的事件偵聽器沒有指定參數，事件處理函式預設會收到一個 Event Object 的參數。使用範例：
HTML<div id="vm">
<p>
按鈕點擊數：{{ count }}
<span v-show="show">{{ info }}</span>
</p>
<button @click="increase">+1</button>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
count: 0,
show: false,
info: ''
},
methods: {
increase: function(event) {
this.count += 1
if (this.count === 10) {
this.show = true
this.info = '(按 10 次了)'
} else if (this.count > 10 && this.count <= 20){
this.show = false
} else if (this.count > 20) {
this.show = true
this.info = '(按超過 20 次了～)'
alert(event.target.tagName) //BUTTON
alert(event.type) //click
}
}
}
})
// 你可以直接呼叫 methods 中的方法
vm.increase()
// 或是取得資料屬性
console.log(vm.count)
</script>
這裡用了 @click 來縮寫 v-on:click，這樣更容易閱讀。指定事件處理函式的名稱為 increase，然後在 methods 屬性中，建立這個函式的內容，因為這個函式沒有指定參數，所以會接收到一個預設事件參數值，這裡自訂的名稱為 event ，它是原生的 Event Object。最後，你也可以直接對 Vue 實體呼叫方法，或取得／設定屬性。
在事件中傳遞參數
當你要傳遞參數值給事件處理函式，你可以在事件偵聽器的表達式中使用 JavaScript 呼叫函式的方法來達成。使用範例：
HTML<div id="vm">
<p>結果：{{ count }}</p>
<button @click="increase(1)">+1</button>
<button @click="increase(5)">+5</button>
<button @click="increase(8)">+8</button>
</div>
<script>
new Vue({
el: '#vm',
data: {
count: 0
},
methods: {
increase: function(amount) {
this.count += amount
}
}
})
</script>
如果你同時還要接收 event 參數，必須在事件偵聽器中傳入特殊變數 $event：
HTML<button @click="increase(1, $event)">+1</button>
// ...略 (同前範例)
<script>
// ...略 (同前範例)
methods: {
increase: function(amount, event) {
this.count += amount
if (typeof event !== "undefined") {
console.log(event.target.tagName) //BUTTON
}
}
}
</script>
除了前面範例示範的 @click 按一下事件偵聽器，其他還有例如 @mousedown、@mouseover等等可用，你可以查原生的 HTML DOM Events。
事件修飾符號
Vue.js 對於事件的處理，另外提供了可額外選用的修飾符號，這些修飾符號可以讓你用更直覺的方式來指定事件屬性或呼叫事件的方法。事件行為修飾符號
.stop：呼叫event.stopPropagation()，停止事件的繼續傳遞。.prevent：呼叫event.preventDefault()，停止瀏覽器事件的預設行為，例如當你的表單送出時，瀏覽器預設會重新整理頁面，你可以停止這個預設行為。.capture：JavaScript 的事件傳遞分為向下補獲 (capture) 階段及向上汽泡浮升 (bubbling) 階段，這個修飾符號指定加入事件偵聽器時使用 capture 模式。.self：只有當事件是從偵聽器所綁定的元素本身（非子元素）觸發時才被呼叫。.native：偵聽元件根元素的原生事件。.once：(2.1.4版新增) 該事件只會被呼叫一次。
HTML<!-- 停止瀏覽器事件的預設行為 -->
<form @submit.prevent="onSubmit">...</form>
<form @submit.prevent>...</form>
<!-- 修飾符號可以串接 -->
<button @click.stop.prevent="onSubmit">...</button>
<!-- 只能執行一次 -->
<div @click.once="doOnce">...</div>
鍵盤按鍵事件修飾符號
在偵聽鍵盤按鍵的事件時，可能會想要知道按了哪個按鍵，你可以使用鍵盤按鍵修飾符號來指定，因為要記住所有的鍵盤按鍵碼是不太可能的事，所以 Vue.js 還為常用按鍵提供別名。.keyCode：鍵盤按鍵代碼.keyAlias：鍵盤按鍵別名
HTML<!-- 鍵盤事件，使用代碼 -->
<input @keyup.13="onEnter">
<!-- 鍵盤事件，使用別名 -->
<input @keyup.enter="onEnter">
Vue.js 提供的按鍵別名：
.enter.tab.delete(包含 delete 鍵及 backspace 鍵).esc.space.up.down.left.right
JavaScriptVue.config.keyCodes.f1 = 112
//之後就能使用 @keyup.f1
控制按鍵修飾符號
Vue.js 在 2.1.0 版新增了鍵盤上 4 個控制按鍵的修飾符號，它們能夠同時用在鍵盤及滑鼠事件上：.ctrl.alt.shift.meta：在 Mac 上是 Command (⌘) 鍵；Windows 是視窗 (⊞) 鍵。
HTML<!-- Ctrl + C -->
<input @keyup.ctrl.67="copy">
<!-- Alt + 滑鼠移動 -->
<p @mousemove.alt="doIt">...</p>
滑鼠按鍵修飾符號
Vue.js 在 2.2.0 版新增了滑鼠按鍵的修飾符號：.left：滑鼠左鍵被按下時。.right：滑鼠右鍵被按下時。.middle：滑鼠中鍵被按下時。
我要留言
留言小提醒：
1.回覆時間通常在晚上，如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言，也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼：http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行，難以閱讀者恕難回覆。
5.感謝您的留言，您的問題也可能幫助到其他有相同問題的人。