---
tags: Vue 實戰班
---

# v-on：事件觸發器

官方文件：https://cn.vuejs.org/guide/essentials/event-handling.html

說明：可以用 v-on 指令監聽網頁上的事件（如同純 JS 的 DOM 事件），並在觸發時運行一些 Vue 的方法。

## 案例：

直接操作元件內的資料，範例重點：

- v-on 是觸發器，click 是觸發的方法
- HTML 中的 v-on:click 可以直接操作 data 內的資料

<iframe height="300" style="width: 100%;" scrolling="no" title="操作元件內的資料" src="https://codepen.io/Wcc723/embed/LYKWdEV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/LYKWdEV">
操作元件內的資料</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

運作元件內的 methods，範例重點：

- v-on:click 內可以直接帶入方法，此方法來自於 Vue 中的 methods
- 傳入的方法也同樣可以帶入參數

<iframe height="300" style="width: 100%;" scrolling="no" title="運作元件內的 methods" src="https://codepen.io/Wcc723/embed/oNrZqgj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/oNrZqgj">
運作元件內的 methods</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 事件修飾符：

說明：HTML 中本身有預設的事件，如 `a` 的預設事件則是跳制特定連結，而事件修飾符可以增加或移除事件，完整的事件修飾可[參考](https://cn.vuejs.org/api/built-in-directives.html#v-on)。

#### prevent：

移除預設的 HTML 事件，範例重點：

- prevent 加入到 v-on:click 後方，即可移除 a 連結的預設事件（不會開啟新頁）
- 移除預設事件後會執行觸發器內的事件

<iframe height="300" style="width: 100%;" scrolling="no" title="prevent" src="https://codepen.io/Wcc723/embed/dyBvmPG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/dyBvmPG">
prevent</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

#### v-on:submit.prevent：

移除預設的 HTML 事件，範例重點：

- 表單送出時會對 action 中的網址進行 post，prevent 加入到 v-on:submit 後方時則不會進行 post
- 移除預設事件後會執行觸發器內的事件

<iframe height="300" style="width: 100%;" scrolling="no" title="submit.prevent" src="https://codepen.io/Wcc723/embed/VwJpXYa?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/VwJpXYa">
submit.prevent</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

#### 按鍵修飾符：

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

範例重點：

- 針對 input 標籤額外增加按鍵修飾符，按下特定按鍵時則會運行 methods 中的方法
- methods 的方法只有特定按鍵才能觸發，如：enter、keyup.a ...

<iframe height="300" style="width: 100%;" scrolling="no" title="按鍵修飾符" src="https://codepen.io/Wcc723/embed/YzoZaPW?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/YzoZaPW">
按鍵修飾符</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

縮寫：
- v-on 可以使用 @ 縮寫
- 結果如下

<button @click="onClick">A</button>