<div id="example-2">
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: ‘#example-2‘,
  data: {
    name: ‘Vue.js‘
  },
  methods: {
    greet: function (event) {
      alert(‘Hello ‘ + this.name + ‘!‘)
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
 

在內聯語句處理器中訪問原生 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)
  }
}

事件修飾符

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

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

<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當事件在該元素本身 (比如不是子元素) 觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

<!-- 只調用一次，.once 修飾符還能被用到自定義的組件事件上 -->
<div v-on:click.once="doThat">...</div>

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

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

鍵值修飾符

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

按鍵別名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

常用按鍵別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

可以通過全局 config.keyCodes 對象自定義鍵值修飾符別名：
Vue.config.keyCodes.f1 = 112

修飾鍵

附加按鍵：
.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

鼠標按鈕修飾鍵：

.left
.right
.middle

在html中監聽事件優點：解耦，無須清理

vue-6-事件處理