在 Javascript 中會用 onclick, onchange...等方式監聽 DOM 物件，而 Vue 則是在 HTML 的標籤裡面加上 v-on 就可以做事件綁定，馬上來練習該怎麼使用吧。

JS 範例程式碼

同樣的，先寫一段 JS 範例，下面不再重複撰寫

const vm = Vue.createApp({
  data () {
    return {
      num: 0,
      text: '',
    }
  },
  methods: {
    addOne () {
      this.num++;
    },
    changeNum(n) {
      this.num = n;
    }
  }
}).mount('#app');

v-on

Vue 的事件綁定寫法是在 HTML 標籤裡面加上 v-on:使用者行為="執行程式"，可以直接寫程式碼，或是呼叫函式；除此之外，v-on: 也能簡寫成一個 @，非常簡潔方便：

1. 直接在標籤內執行程式碼。

   <p>一共點了 {{ num }} 下</p>
   <button v-on:click="num++"></button>
   

2. 呼叫函式。

   <p>一共點了 {{ num }} 下</p>
   <button v-on:click="addOne"></button>
   

3. 簡寫方式

   <p>一共點了 {{ num }} 下</p>
   <button @click="addOne"></button>
   

v-on & 修飾子

在處理事件時，時常會用到 preventDefault, stopPropagation...等等方法，Vue 提供了修飾子快速達成需要的功能。

1. .stop
   等同於 stopPropagation，下面這段程式碼在點擊 "show 2" 的文字後 num 會變成 2，而不會變成 1。

   <div @click="changeNum(1)">
     <p>num: {{ num }} </p>
     <div @click.stop="changeNum(2)">show 2</div>
   </div>
   

2. .prevent
   等同於 preventDefault，最常用在超連結上。

   <a href="#" @click.prevent="text='prevent'">Prevent</a>
   <p>{{text}}</p>
   

3. .capture
   capture 會先觸發，所以下面的程式碼點擊後是顯示 2。

   <div @click.capture="changeNum(1)">
     <div @click="changeNum(2)">
       <div @click="changeNum(3)">clickMe!</div>
     </div>
   </div>
   <p>{{num}}</p>
   

4. .self
   只會觸發自己和外層的元素事件，內層元素不會觸發。
5. .once
   只會觸發一次，之後都不會再觸發事件。
6. .passive
   .passive 就是 anti-prevent，只要有他在， prevent 就不能作用，主要用來改善 scroll 事件的順暢度。

鍵盤修飾子

• Vue 提供了各種常用案件的修飾子，列表如下：
  • .enter
  • .tab
  • .delete (Delete & Backspace 都適用)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .shift
  • .alt
  • .meta ( Windows 的視窗鍵 || MacOS 的 command 鍵）
• 功能鍵幾乎都用對應的修飾子，而普通按鍵則是使用對應代碼，以下是官方的範例碼：

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

• 精確判斷按鍵事件（.exact）
  預設如果同時按下兩個以上按鍵，只要有一個有撰寫事件，就會觸發，如果想避免這個狀況，就在最後加上.exact，這樣只有在按下一樣的按鍵（或組合）的時候才會觸發。

滑鼠修飾子

滑鼠相對簡單多

• .left
• .right
• .middle