# 🏅 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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/zYVjzLv) |
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/poXPQmY) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/eYwWQwq) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/bGPWOGx) |
| mu mu | [CodePen](https://codepen.io/ishuki916/pen/vYqmvKW) |
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/XWLRodm) |
| Aden | [CodePen](https://codepen.io/Osases/pen/ExBmGWy) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/OJemrOa) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/XWLRoqj) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/NWZjovN) |
|阿鵝|[CodePen](https://codepen.io/noracami/pen/xxodMpJ)|
| Shin | [CodePen](https://codepen.io/shin9626/pen/RwzVvzP) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/jOjmJNG) |
| 好了啦 | [CodePen](https://codepen.io/j-z-the-flexboxer/pen/ExBmMQq) |
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/mdZmoLW) |
| Jay | [CodePen](https://codepen.io/yeeyaha-jay/pen/RwzVdgG) |
| Charis_Lai | [CodePen](https://codepen.io/charislai/pen/BagREvE) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/abgWrZq) |
| dodo | [CodePen](https://codepen.io/MissDouble/pen/oNrWKNY) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/RwzVjgo) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/XWLgrWR) |
| 皮克| [CodePen](https://codepen.io/bad-527boy/pen/poXwzPR) |
| YO| [CodePen](https://codepen.io/Y-1717/pen/KKjqPjX) |
| KK | [CodePen](https://reurl.cc/345258) |
| 蛋黃 |[Codepen](https://codepen.io/yiyun12o9/pen/OJegJmm)
| zhen |[Codepen](https://codepen.io/yunnnz/pen/wvLevqq)
| anthy7154 |[Codepen](https://codepen.io/hnhmgzbw-the-sans/pen/xxorbQr)
|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/gONRwmz)|
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/Porjbqg) |
|chichi|[Codepen](https://codepen.io/chichihuang/pen/gONRLaE)|
| duchi |[Codepen](https://codepen.io/sqaz0502/pen/vYqZgwx) |
|陳睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/qBzjRgO)|
| Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/xxorqxw)|
| Steven1220 | [CodePen](https://codepen.io/Steven1220/pen/GRbEEmq)|
| imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/QWXggzx)|
| Barry1104 | [CodePen](https://codepen.io/barry1104/pen/abgwypN)|
| Tanyaaaa | [CodePen](https://codepen.io/tanya77777/pen/MWMovXY) |
| ling | [CodePen](https://codepen.io/yen-kg/pen/ZENoaro) |
| JC | [CodePen](https://codepen.io/jy_123/pen/VwJWyMz) |
| willy0719 | [CodePen](https://codepen.io/DOBEST/pen/abgwqNL) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KKjqrXQ)|
| kuolun |[Codepen](https://codepen.io/kuolun/pen/zYVzMRe)|
| Renee |[Codepen](https://codepen.io/renee_wu/pen/JjQJgGY)|
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/rNEzBOW) |
| Yuwen |[Codepen](https://codepen.io/Yuwen-the-reactor/pen/BagdQBv)
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/RwzZLpY) |
| Abby | [CodePen](https://codepen.io/abby1125/pen/KKjvyxQ) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/dyBzQLP) |
| Chieh | [CodePen](https://codepen.io/Chieh_/pen/OJejqPP) |
| 咖咖 | [CodePen](https://codepen.io/gon790219/pen/vYqJwJa) |
| Rumi | [CodePen](https://codepen.io/Tzuru-Chen/pen/poXrXRw) |
| jacky | [CodePen](https://codepen.io/yen-kg/pen/ZENoaro) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/oNrGadp) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/mdZBZGd) |
| Danny | [Codepen](https://codepen.io/danny666/pen/poXdZqP) |
| Peter | [Codepen](https://codepen.io/peterhsj/pen/MWMrEzg) |
| Triple | [CodePen](https://codepen.io/riku30/pen/xxopBqr) |
| cami | [CodePen](https://codepen.io/irisLife/pen/MWMQpKm) |
| 小葉 | [CodePen](https://codepen.io/rsosijvr-the-flexboxer/pen/VwJQqBO) |
| Erin | [CodePen](https://codepen.io/erin-feng/pen/rNEdRpV) |
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/OJeZyea) |
| Ching | [CodePen](https://codepen.io/huangching/pen/PorVWBL) |
| Eden | [Codepen](https://codepen.io/iseden/pen/QWeKdYm)|
| 叮咚 | [Codepen](https://codepen.io/yen-kg/pen/ZENoaro)|
<!--

| user | [CodePen]() |

-->