---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 19 - Vue 指令練習 2

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

> 在 input 欄位輸入文字後，點擊「觸發按鈕」可以觸發 callName 函式

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

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


<!-- 解答：
<div id="app">
<div class="container p-3">
<div class="d-flex flex-column">
<label for="name">請輸入姓名</label>
<input type="text" v-model="name" class="mb-3">
</div>
<button type="button" class="btn btn-primary" @click="callName">觸發事件</button>
</div>
</div>
https://codepen.io/jmimiding4104/pen/rNPXzgZ

額外挑戰：
https://codepen.io/jmimiding4104/pen/zYegdQM

模板與解答皆有使用 Bootstrap5(於 Setting 中引入)，
所以如果想要畫面呈現是相同的要記得載入 Bootstrap5 的 CDN。
-->

回報區
---

| Discord | CodePen / 答案 |
|:---------------:|:------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/LYaRWoK?editors=1010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/qBvamNW?editors=1011) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/poYEPNZ) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/abMmWpe) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/xxBEdrK) |
| kj | [CodePen](https://codepen.io/Eero-Chiao/pen/PoLGmjj) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/VwRKbpa?editors=1010) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/WNmGjdy) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/ZEPpKKV) |
| py | [CodePen](https://codepen.io/Wpypy/pen/XWGjRVL?editors=1010) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/oNVzWZj?editors=1010) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/NWJRjBz) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/ExMgWMG) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/XWGjgbm) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/MWxjoKg) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/OJqRgma?editors=1011) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/jOJMwYN) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/KKEgqGd) |
| dora | [CodePen](https://codepen.io/dorayu/pen/mdorwQQ?editors=1010) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/XWGjgQg) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/WNmGENQ) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/WNmGOWb) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/wvOzdrp?editors=1010) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/JjzRyKZ) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/poYErKW?editors=1010) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/BabLdOz?editors=1010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/abMmyMP) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/bGZwoNR?editors=1010) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/oNVzGvv) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/vYPXeWy?editors=0010) |
| PayRoom | [CodePen](https://codepen.io/water38198/pen/rNRMGvE) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/bGZwoxM) |
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/OJqRObB) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/oNVzpza?editors=1011) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/NWJRXdN) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/jOJMYQL) |
| Eden | [Codepen](https://codepen.io/iseden/pen/KKEgQVo) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/qBvaxOe) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/xxBErbE?editors=1010) |
| Neil | [CodePen](https://codepen.io/Neil1024/pen/poYEaQG?editors=1011) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/yLwavmW?editors=1010) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/xxBEjOj) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/mdorLOY) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/NWJRzdw) |
| smalljie | [CodePen](https://codepen.io/smalljie/pen/ZEPpRzR) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/PoLGamm) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/ZEPpRpq) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/ZEPpRmN) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/RwdGJvg?editors=1010) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/oNVzMBw?editors=1010) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/VwRKzJw) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/ZEPpMOK) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/eYXdMdN) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/gOEwdyP) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/oNVzaXv) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/dyrpQJZ?editors=1011) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/PoLGXOw) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/YzgGdzJ) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/mdorZpK) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/LYabPVK) |
| hua | [CodePen](https://codepen.io/LHua/pen/RwdowdY) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/GReNoYR) |
| Wei_Rio | [CodePen](https://codepen.io/wei_wu/pen/abMBBJx?editors=1010) |
| 小正 | [CodePen](https://codepen.io/colorgolden/pen/VwRKbqp?editors=1010) |
| Rita-Yang | [CodePen](https://codepen.io/Rita-Yang/pen/QWoGaWW?editors=1010) |
| celinelinnn | [CodePen](https://codepen.io/celinephoebe/pen/qBvqGOg) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/RwdKWxL) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/PoLWPER) |
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/RwdKWeQ) |
| xuan | [codePen](https://codepen.io/xuan0915/pen/oNVBxGK?editors=1010) |
| amaaaa | [codePen](https://codepen.io/Alicia-Chu/pen/ZEPLJje) |
| 保羅 | [codePen](https://codepen.io/paul-1997/pen/mdoRopM) |
| MikeLin | [codePen](https://codepen.io/MikeLin0701/pen/qBvRerX) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/GReWqaQ?editors=1010) |
|hsuhsusophie| [CodePen](https://codepen.io/hsuhsusophie/pen/NWJppMQ?editors=1010) |
| carrie | [CodePen](https://codepen.io/echocarriet/pen/MWxpvNb) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/bGZWOrm?editors=0001) |
| 翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/dyrWBKP?editors=1010) |
| chihyang | [CodePen](https://codepen.io/hike1707/pen/PoLjNPX) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/QWoMGQL) |
| peggy | [CodePen]() |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/yLwzgVV) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/GReOpda?editors=1010)|
|貢波波夫|[Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/yLwKgdL)|
|WA|[Codepen](https://codepen.io/ldddl/pen/ExMzbqx)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/NWmGbrd) |

<!--
| user | [CodePen]() |
-->