1.基本用法

<div id="app">
  <button v-on:click="clickFn('你好')">點一點</button>
</div>
 
<script>
var app = new Vue({
  el: '#app',
  data: {
    name: '，Vue.js'
  },
  methods: {                      // 在 `methods` 物件中定義方法
    clickFn: function (str) {        // `event` 是原生 DOM 事件
      alert( str + this.name + '!')    // `this` 在方法裡指當前 Vue 例項
    }
  }
})
app.greet()           // 也可以用 JavaScript 直接呼叫方法
</script>
 

2.事件修飾符

五種事件修飾符來處理DOM事件細節及預設行為，詳解如下：

<!-- 阻止單擊事件冒泡，相當於：event.stopPropagation() -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再過載頁面，相當於：event.preventDefault()取消有的預設行為 -->
<form v-on:submit.prevent="doThis"></form>

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

<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回撥 -->
<div v-on:click.self="doThis">...</div>

<!-- 事件只能點選一次，版本新增修飾符 -->
<a v-on:click.once="doThis"></a>

<!-- 修飾符可以串聯，按照前後順序執行  -->
<a v-on:click.stop.prevent="doThis"></a>

<!-- 只有修飾符，其不進行回撥處理 -->
<form v-on:submit.prevent></form>
 

3.鍵盤事件修飾符

Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符，且為了方便使用，提供了十幾種別名，且其可以串聯，詳解如下：

<!-- keyCode 是 13（enter鍵） 時呼叫 -->
<input v-on:keyup.13="dothis">

<!-- 別名寫法，同上 -->
<input v-on:keyup.enter="dothis">

<!-- 按下Alt + Ctrl才可呼叫 -->
<input @keyup.alt.ctrl="dothis">

按鍵別名一覽：

enter 回車鍵

tab tab鍵

delete "刪除" 和 "退格" 鍵

esc esc鍵

space 空格鍵

up 方向鍵-上

down 方向鍵-下

left 方向鍵-左

right 方向鍵-右

ctrl ctrl鍵

alt alt鍵

shift shift鍵

meta window鍵（mac上是四朵小花花）

 4.補充知識

（a）computed定義事件函式，初始化會執行一次，methods不會初始化執行；

（b）傳入當前元素，需使用$event物件，

         <button v-on:click="doThis('hi',$event)">say hi</button>

（c）定義事件大多應該參照DOM事件的規則，避免一些不必要的錯誤；

前端工作不好做，具有耐心不用說。

加油學習別放棄，勤奮就是可補拙。