# Vue學習#12 Vue指令集 - 事件觸發
###### tags: `Vue 直播班 - 2022 春季班` `Vue`

## v-on

能夠將 HTML 標籤綁定 Vue 元件的 methods 來執行事件 ， 效果跟 JS 的 addEventListener 一樣，也可以直接操作元件內的資料
用 v-on 指令監聽網頁上的事件（如同純 JS 的 DOM 事件），並在觸發時運行一些 Vue 的方法。

### 語法

    // v-on:事件類型="方法"
    <button type="button" v-on:click="method"

**縮寫**

    @事件類型="方法"

### 範例 -- 直接操作元件內資料

#### HTML

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

#### JS

  const app = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(app).mount('#example-1')

利用 v-on 將 data 內的資料 counter 進行修改 ， 每按一次按鈕就將 counter +1

### 範例 -- 運作元件內的method，將事件綁定在標籤上

#### HTML

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

#### JS

const app = {
  methods: {
    say: function (message) {
      alert(message)
    }
  }
}

Vue.createApp(app).mount('#example-3')

透過兩個不同的按鈕，執行兩個不同的 method ( say(message) ) ， 並放入不同的參數顯示不同的 alert

## 事件修飾符
說明：HTML 中本身有預設的事件，如 `a` 的預設事件則是跳制特定連結，而事件修飾符可以增加或移除事件

### prevent

<font color=#B1187C>**效果:**</font> 移除預設的 HTML 事件
<font color=#B1187C >**重點:**</font>
1. `v-on:click.prevent`，加在 click (或是其他事件名稱) 的後方
2. <font color='red'> **移除預設事件後會執行觸發器內的事件**</font>，如果放在 a 連結，即可移除 a 連結的預設事件（不會開啟新頁）

### stop

<font color=#B1187C>**效果:**</font> 就像 event.stopPropagation() ， 用來阻擋事件冒泡
<font color=#B1187C >**重點:**</font>
1. `v-on:click.stop`，加在 click (或是其他事件名稱) 的後方
2. 加入 stop 後，事件就不會向外層傳遞

### once

<font color=#B1187C>**效果:**</font> 讓指定事件只會觸發一次，執行後就解除事件監聽
<font color=#B1187C >**重點:**</font>
1. `v-on:click.once`，加在 click (或是其他事件名稱) 的後方

## 更多指令參考
[官方Vue的v-on更多事件參考](https://cn.vuejs.org/v2/api/#v-on)

## 按鍵修飾符

除了移除事件外，也可以在觸發器上增加額外的事件監聽，如 Enter、Key（按下特定案鍵） 等等

<font color=#B1187C >**重點:**</font>
1. 針對 input 標籤額外增加按鍵修飾符，按下特定按鍵時則會運行 methods 中的方法
2. methods 的方法只有特定按鍵才能觸發，如：enter、keyup.a …

### 按鍵修飾符範例
[按鍵修飾符](https://codepen.io/binlandz123/pen/MWrxgoQ?editors=1010)