# 🏅 Day2 - Vue.js 的基礎魔法：v-model

## v-model
v-model 是用於表單的資料與元件產生雙向綁定，當資料變更時，畫面上的內容也會產生變化

> 注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。需透過 JavaScript 在元件的 data 選項中宣告初始值。

範例重點：

- 將 v-model 與 data 中的 `message` 綁定
- 此為雙向綁定，當 v-model 中的 message 值改變時，畫面上的 `{{ message }}` 也會一起更動

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-model 範例" src="https://codepen.io/yen-kg/embed/mdYxbLN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/mdYxbLN">
Composition API：v-model 範例</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## v-model 修飾符：

此修飾符是搭配 v-model 使用，與 v-on 的觸發器略有不同，用來延遲觸發、改變型別、修飾字串等等

### lazy

`lazy`：避免持續性觸發，可以在編輯完後才觸發資料更新（使用 change 的形式進行同步）

範例重點：
- v-model 後方加上 `.lazy` 修飾符
- 當 input 編輯時，無法直接修改畫面上的值，需要離開 input 時才會觸發

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-model 範例" src="https://codepen.io/yen-kg/embed/gOJeOpr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/gOJeOpr">
Composition API：v-model 範例</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### number

`number`：限制只有數值型別的資料才能寫入，以下範例中的 number 資料會是以 `number` 型別傳入，無法透過該 input 套用其它資料型別。

範例重點：

- 無論 input type 為何，input 預設所傳入的型別為字串
- 可以使用 .number 的修飾符，確保用戶所輸入的為純數值

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-model.lazy 範例" src="https://codepen.io/yen-kg/embed/wvbmvMg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/wvbmvMg">
Composition API：v-model.lazy 範例</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### trim

3. `trim`：修飾掉首尾的空白

範例重點：
- 用戶在輸入文字時，可能會在結尾補上空白，使用 `.trim` 修飾符則會移除結尾的空白字元

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：v-model.lazy 範例" src="https://codepen.io/yen-kg/embed/vYwRYmL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/vYwRYmL">
Composition API：v-model.lazy 範例</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

1. 請將 class 名稱為 Q1 的 `input` 標籤，利用 `v-model` 進行綁定。

2. 請將 class 名稱為 Q2 的 `input` 標籤，利用 `v-model` 的修飾符進行轉換為 number 型別。

## 回報流程

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


<!-- 解答：
<template>
<div id="app">
<div class="Q1">
<input type="text" v-model="message" />
</div>
<div class="Q2">
<input type="number" v-model.number="phoneNumber" />
</div>
</div>
</template>
-->
回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/MWMGoEd) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/yLdgbJK) |
| CoCo | [CodePen](https://codepen.io/hwizfgdr-the-sasster/pen/ExBZmZr) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/dyBNWdo) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/PorWVXm) |
| n913239 | [Codepen](https://codepen.io/n913239/pen/GRbrmeE) |
| Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/jOjywPQ) |
|阿鵝|[Codepen](https://codepen.io/noracami/pen/YzoNQGQ)|
| Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/BagpZNr) |
| Zhu | [Codepen](https://codepen.io/codepenplayer/pen/BagpZRP) |
| Ariel | [Codepen](https://codepen.io/ariel0510/pen/yLdgoXV) |
| ABOOS | [Codepen](https://codepen.io/guhungyin/pen/vYqgJdP) |
| CWT | [Codepen](https://codepen.io/ttfunqgb-the-vuer/pen/YzoNrqz) |
| 貢波波夫 | [Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/poXRWeL)|
|HsienLu|[CodePen](https://codepen.io/Hsienlu/pen/zYVNEWX)|
| Charis_Lai | [Codepen](https://codepen.io/charislai/pen/dyBNVgG) |
| Jay |[CodePen](https://codepen.io/yeeyaha-jay/pen/RwzKLZa) |
| 艾芮絲 |[CodePen](https://codepen.io/wangyingju/pen/qBzRVqa) |
| Tatsu | [Codepen](https://codepen.io/chindesu0207/pen/oNrBoqw)|
| Shin | [CodePen](https://codepen.io/shin9626/pen/poXRWgp)
|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/abgpqdP)
| Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/mdZRXJJ) |
| anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/eYwgRJq) |
| 咖咖 | [Codepen](https://codepen.io/gon790219/pen/OJeWQYO) |
|yuling| [Codepen](https://codepen.io/igzdflpu/pen/abgpqxo)|
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/MWMJVPw) |
| cbs |[Codepen](https://codepen.io/wasdjk/pen/xxogWor)|
| bad-527boy |[Codepen](https://codepen.io/bad-527boy/pen/QWXdrNw)|
| YO |[Codepen](https://codepen.io/Y-1717/pen/QWXdxwv)|
| Rumi |[Codepen](https://codepen.io/Tzuru-Chen/pen/YzoNvpz)|
| 蛋黃 |[Cpdepen](https://codepen.io/yiyun12o9/pen/rNEjKrP)
| Zhen |[Cpdepen](https://codepen.io/yunnnz/pen/VwJPdoK)
| 好了啦 |[Cpdepen](https://codepen.io/j-z-the-flexboxer/pen/ExBZpKa)
| rjjq | [Codepen](https://codepen.io/rjjq/pen/yLdgZbK)|
| Barry1104 | [Codepen](https://codepen.io/barry1104/pen/abgpMVN)|
| m.m |[Codepen](https://codepen.io/meggie-liu/pen/eYwgqwy)
| Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/bGPgXzE) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/mdZWdLX) |
| 末次 | [Codepen](https://codepen.io/yunjulee/pen/WNqprXv) |
| mu mu | [Codepen](https://codepen.io/ishuki916/pen/gONmgOW) |
| cherylxie | [Codepen](https://codepen.io/fi7933201/pen/bGPqgdL) |
| imsmallnew | [Codepen](https://codepen.io/imsmallnew/pen/vYqxgXx) |
| Aden | [Codepen](https://codepen.io/Osases/pen/poXeRdY) |
| chichi | [Codepen](https://codepen.io/chichihuang/pen/eYwvvYJ) |
| Tough life | [Codepen](https://codepen.io/hakuei0115/pen/QWXpvpv) |
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/RwzpgKV)|
| KK | [CodePen](https://reurl.cc/Mjkl7L) |
| 小葉 | [CodePen](https://codepen.io/rsosijvr-the-flexboxer/pen/bGPqOON)|
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/rNEmVjJ)|
| Eric0823 | [Codepen](https://codepen.io/a7901477/pen/bGPWeMM) |
| Mina | [Codepen](https://codepen.io/yanling-99/pen/xxodgyw) |
| anthy7154 | [Codepen](https://codepen.io/hnhmgzbw-the-sans/pen/ExBmWGv) |
| Leor | [Codepen](https://codepen.io/Leor-the-builder/pen/yLdbMda) |
| SKey | [Codepen](https://codepen.io/Dale-Chien/pen/vYqmWxK) |
| willy0719 | [Codepen](https://codepen.io/DOBEST/pen/MWMmQxV) |
| duchi | [Codepen](https://codepen.io/sqaz0502/pen/QWXvmBV)|
| Abby | [Codepen](https://codepen.io/abby1125/pen/KKjmojE)|
| dodo | [Codepen](https://codepen.io/MissDouble/pen/eYwWrMz) |
| ling | [Codepen](https://codepen.io/yen-kg/pen/zYQjWQe) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/yLdgXwN)|
| Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/mdZwOKN) |
| sandra191919 | [Codepen](https://codepen.io/a0960529965/pen/wvLedzw) |
| Chieh | [Codepen](https://codepen.io/Chieh_/pen/bGPRRpq) |
| Aya | [Codepen](https://codepen.io/NoNameNote/pen/QWXggoB) |
| JC | [Codepen](https://codepen.io/jy_123/pen/LYKLQBg) |
| Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/XWLgOQE)
| Renee | [Codepen](https://codepen.io/renee_wu/pen/ZEdydeo) |
| Anna | [Codepen](https://codepen.io/anna971053/pen/PorKOxW) |
| jacky | [Codepen](https://codepen.io/yen-kg/pen/zYQjWQe)
| floya9733 | [Codepen](https://codepen.io/TZU68/pen/ZEdXpVg) |
| cami | [Codepen](https://codepen.io/irisLife/pen/QWXqgQp) |
| 阿榮 | [Codepen](https://codepen.io/codeitaday/pen/WNqZOmO) |
| World | [Codepen](https://codepen.io/HexschoolVuePujols/pen/qBzPXVd) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/YzorOgZ)|
| Danny | [Codepen](https://codepen.io/danny666/pen/KKjXJpY)|
| mia | [Codepen](https://codepen.io/mnscake/pen/dyBZMQd)|
| Rowan | [Codepen](https://codepen.io/dxnqcnen/pen/YzoErgL)|
| Triple | [Codepen](https://codepen.io/riku30/pen/abgEmNR)|
| Peter | [Codepen](https://codepen.io/peterhsj/pen/ExBowLV)|
| Zoe | [Codepen](https://codepen.io/roanne-rou/pen/WNqdgRR)|
| Erin | [Codepen](https://codepen.io/erin-feng/pen/XWLEOWY)|
| Ching | [Codepen](https://codepen.io/huangching/pen/MWMLbQx) |
| Eden |[Codepen](https://codepen.io/iseden/pen/KKOVPBR)|
| 叮咚 |[Codepen](https://codepen.io/yen-kg/pen/zYQjWQe)|
<!--
| Discord | [Codepen]() |
-->