# 🏅 Day6 - Vue.js 的基礎魔法：v-on

## 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="Composition API：v-on 範例 (1)" src="https://codepen.io/yen-kg/embed/RwmMxVL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/RwmMxVL">
Composition API：v-on 範例 (1)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</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="Composition API：v-on 範例 (2)" src="https://codepen.io/yen-kg/embed/zYQWpzG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/zYQWpzG">
Composition API：v-on 範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</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="Composition API：v-on 範例 (3)" src="https://codepen.io/yen-kg/embed/XWwEqKr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/XWwEqKr">
Composition API：v-on 範例 (3)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</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="Composition API：v-on 範例 (4)" src="https://codepen.io/yen-kg/embed/KKLoLqV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/KKLoLqV">
Composition API：v-on 範例 (4)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</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="Composition API：v-on 範例 (5)" src="https://codepen.io/yen-kg/embed/XWwEwaR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/XWwEwaR">
Composition API：v-on 範例 (5)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

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

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/ZENoaro)，執行以下要求（只能操作 HTML 的部分）：

* 請利用 `v-on:click` 替「加入購物車」按鈕加上點擊事件，並能正確的觸發運行 alert。


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
<template>
<div id="app" class="container">
<div class="row">
<template v-for="(fruit, index) in fruitData" :key="index">
<div class="col-md-6 mb-3">
<div class="card" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">水果名稱：{{ fruit.title }}</h5>
<p class="card-text my-2">價錢：{{ fruit.price }}</p>
<p class="card-text mb-3">數量：{{ fruit.count }}</p>
<a href="#" class="btn btn-primary" @click="addProduct(fruit)">加入購物車</a>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:------------------------------------------------------------:|
| DaRon | [CodePen](https://codepen.io/daron0811/pen/dPYRxNJ) |
| Dean | [CodePen](https://codepen.io/ch933114/pen/LEpLwxz) |
| kat | [CodePen](https://codepen.io/Nek0u0/pen/XJmgvPR) |
| Clove_墨 | [CodePen](https://codepen.io/CloveTseng1026/pen/KwdqOZp) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/vENZoQQ) |
| han | [CodePen](https://codepen.io/iamHanCheng/pen/empRqbv) |
| Gui | [CodePen](https://codepen.io/guitimliu/pen/qEOXBxb) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/LEpjYox) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/KwdvwWK) |
| dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/YPyxzrp) |
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/JoYyoXW) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/NPGvKPx) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KKjqrXQ)|
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/MYavwJv) |
| 小羊 | [CodePen](https://codepen.io/allen9630308/pen/WbQEvWZ) |
| haohaoliao | [CodePen](https://codepen.io/yuyuyuhaohao/pen/myeMepw) |
| wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/WbQExNX)|
| 地呱 | [Codepen](https://codepen.io/LHung/pen/YPyxWBQ) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/MYavbjo) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/vENJgMJ) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/azvyJbZ) |
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/RNWZZxB) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/azvyEeV) |
| Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/EaVvQWE) |
| William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/XJmaVQR) |
| 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/QwjMxEN) |
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/ZYbJqLy) |
| Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/zxvdeJa) |
| jimmy | [CodePen](https://codepen.io/JimmyMao/pen/empEXBQ) |
| David0799 | [CodePen](https://codepen.io/David0799/pen/MYapGep) |
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/wBKqZoY) |
| 阿昌 | [CodePen](https://codepen.io/ychleo102615/pen/wBKqZjO) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/JoYyqyB) |
| yi | [CodePen](https://codepen.io/5-1/pen/LEpzEmj) |
| rio_wei |[CodePen](https://codepen.io/wei_wu/pen/KwdXXoN)|
| 黛西 |[CodePen](https://codepen.io/ChiashengLin/pen/KwdXLjm)|
| yu005620 |[CodePen](https://codepen.io/yu-chin-chiang/pen/VYvrLQE)|
| bonnieli1414 |[CodePen](https://codepen.io/bonnieli1414/pen/KwdyNGg)|
| Momoze |[CodePen](https://codepen.io/mleczmam-the-typescripter/pen/QwjOpwx)|
| 禹成林 | [CodePen](https://codepen.io/useirin/pen/YPyYNdz) |
| 肉桂卷 | [CodePen](https://codepen.io/ginnlee/pen/PwPEQgg) |
| Sam | [CodePen](https://codepen.io/Sammy-the-styleful/pen/dPYJaeJ) |
| Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/ogjEgwg) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/YPyLEKx) |
| 白雪 | [CodePen](https://codepen.io/weiwei032835-the-styleful/pen/WbQJzpW) |
| Chen | [CodePen](https://codepen.io/JGM-C/pen/ZYbRyZW) |
| ScarT | [CodePen](https://codepen.io/Acadia/pen/ZYbjOGP) |
| Toung | [Codepen](https://codepen.io/Toung/pen/VYvGdvV) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/YPwKpMm) |
<!--

| user | [CodePen]() |

-->