1.事件處理：

on-click="param"

這個(gè)param可以是javascript代碼，可以是方法名，可以是調(diào)用js方法（可傳值）。

1）監(jiān)聽事件
可使用v-bind指令監(jiān)聽DOM事件，并且在觸發(fā)時(shí)候運(yùn)行一些Javascript代碼。（注意：運(yùn)行js代碼，在這里也叫：內(nèi)聯(lián) JavaScript 語(yǔ)句）

示例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

2）事件處理方法

v-on指令可以接受一個(gè)需要調(diào)用的方法名稱。也就是說(shuō)，可以直接寫方法在v-on:click="方法名稱"。

示例：

<div id="app">
  <button id="button01" @click="greet">Click me</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    msg: "a=1\nb=2\nc=3\nd=4\ne=5\n"
  },
  methods: {
    greet: function (event) {
      alert(self.msg)
      if (event) {
        alert(event.target.id)  // event.target就是這個(gè)Button對(duì)象。`event` 是原生 DOM 事件
      }
    }
  }
})

這里也可以不寫event參數(shù)：

methods: {
    greet: function () {
      alert(self.msg)
      
    }
  }

3）內(nèi)聯(lián)處理器中的方法

除了直接綁定到一個(gè)方法，也可以在內(nèi)聯(lián)Javascript語(yǔ)句中調(diào)用方法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

這里的say(hi)就是：內(nèi)聯(lián) JavaScript 語(yǔ)句。

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：
注意：這里的$event就是DOM原始的事件。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 現(xiàn)在我們可以訪問原生事件對(duì)象
    if (event) event.preventDefault()
    alert(message)
  }
}

preventDefault() 方法阻止元素發(fā)生默認(rèn)的行為（例如，當(dāng)點(diǎn)擊提交按鈕時(shí)阻止對(duì)表單的提交）。
在js中，event.preventDefault()是不讓事件執(zhí)行。

$("a").click(function(event){
  event.preventDefault();
});

內(nèi)聯(lián)語(yǔ)句處理器：

4）事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。

event.preventDefault()  # 阻止事件發(fā)生
event.stopPropagation() # 該方法將停止事件的傳播，阻止它被分派到其他 Document 節(jié)點(diǎn)。在事件傳播的任何階段都可以調(diào)用它。注意，雖然該方法不能阻止同一個(gè) Document 節(jié)點(diǎn)上的其他事件句柄被調(diào)用，但是它可以阻止把事件分派到其他節(jié)點(diǎn)。

盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個(gè)問題，Vue.js 為 v-on 提供了事件修飾符。之前提過(guò)，修飾符是由點(diǎn)開頭的指令后綴來(lái)表示的。

.stop
.prevent
.capture
.self
.once

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

注意：使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 @click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能對(duì)原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。如果你還沒有閱讀關(guān)于組件的文檔，現(xiàn)在大可不必?fù)?dān)心。

Vue 還對(duì)應(yīng) addEventListener 中的 passive 選項(xiàng)提供了 .passive 修飾符。

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能。

不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。

5）按鍵修飾符

在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查常見的鍵值。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：

<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 縮寫語(yǔ)法 -->
<input @keyup.enter="submit">

全部的按鍵別名：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

可以通過(guò)全局 config.keyCodes 對(duì)象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自動(dòng)匹配按鍵修飾符
你也可直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來(lái)作為修飾符：

<input @keyup.page-down="onPageDown">

在上面的例子中，處理函數(shù)僅在 $event.key === 'PageDown' 時(shí)被調(diào)用。

注意：有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，它們的內(nèi)置別名應(yīng)該是首選。

6）系統(tǒng)修飾鍵

可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系統(tǒng)鍵盤上，meta 對(duì)應(yīng) command 鍵 (?)。在 Windows 系統(tǒng)鍵盤 meta 對(duì)應(yīng) Windows 徽標(biāo)鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上，meta 對(duì)應(yīng)實(shí)心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機(jī)器的鍵盤、以及其后繼產(chǎn)品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標(biāo)記為“META”。在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”。

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

注意：請(qǐng)注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下狀態(tài)。換句話說(shuō)，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會(huì)觸發(fā)事件。

.exact修飾符

.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。

鼠標(biāo)按鈕修飾符

.left
.right
.middle

這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。

7）為何在HTML中監(jiān)聽事件？
所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會(huì)導(dǎo)致任何維護(hù)上的困難。實(shí)際上，使用 v-on 有幾個(gè)好處：

1.掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。
2.因?yàn)槟銦o(wú)須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測(cè)試。
3.當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。你無(wú)須擔(dān)心如何自己清理它們。