# 🏅 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 / 答案 |
|:---:|:----------------:|:-------------------------------------------------------------------:|
| 01 | Dean | [Codepen](https://codepen.io/ch933114/pen/empvaxa) |
| 02 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/ogjZrBW) |
| 03 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/OPypedq) |
| 04 | Gui | [CodePen](https://codepen.io/guitimliu/pen/empWOmj) |
| 05 | DaRon | [CodePen](https://codepen.io/daron0811/pen/XJmRrzG) |
| 06 | Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/EaVmYwz) |
| 07 | kat | [Codepen](https://codepen.io/Nek0u0/pen/gbaWYKR) |
| 08 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/yLdgXwN)|
| 09 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/pvjPoNX)|
| 10 | dPi | [Codepen](https://codepen.io/snijqlte-the-bold/pen/XJmRWxN)|
| 11 | DY | [Codepen](https://codepen.io/dorihung/pen/VYvbwgx)|
| 12 | poyi | [Codepen](https://codepen.io/poyi-the-flexboxer/pen/empWYbz)|
| 13 | 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/WbQjbbb)|
| 14 | 小羊 | [Codepen](https://codepen.io/allen9630308/pen/myemypZ)|
| 15 | emmayo | [Codepen](https://codepen.io/emmayo/pen/jEbmEZV)|
| 16 | yu005620 | [Codepen](https://codepen.io/yu-chin-chiang/pen/bNVWNOw)|
17 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/PwPmqKp)|
18 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/zxvwqXO)|
| 19 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/JoYNKZN)|
| 20 | 阿鵝 | [Codepen](https://codepen.io/noracami/pen/pvjPNYQ)|
| 21 | Loder | [Codepen](https://codepen.io/rgbkomhs-the-flexboxer/pen/ZYbKyzN)|
| 22 | Sam | [Codepen](https://codepen.io/Sammy-the-styleful/pen/LEpyjmg)|
| 23 | thchen2002 | [Codepen](https://codepen.io/thchen2002/pen/MYamEJX)|
| 24 | 鼠鼠 | [Codepen](https://codepen.io/elim85223/pen/WbQjdZr)|
| 25 | Candace | [Codepen](https://codepen.io/Candace802/pen/NPGjYZZ)
| 26 | 地呱 | [Codepen](https://codepen.io/LHung/pen/vENmzBr) |
| 27 | Clove_墨 | [Codepen](https://codepen.io/CloveTseng1026/pen/EaVXYxp) |
| 28 | yi | [Codepen](https://codepen.io/5-1/pen/KwdmjMb) |
| 29 | Momoze | [Codepen](https://codepen.io/mleczmam-the-typescripter/pen/jEbwEpr) |
| 30 | bonnieli1414 | [Codepen](https://codepen.io/bonnieli1414/pen/dPYRGXm) |
| 31 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/raOwLWX) |
| 32 | wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/PwPjzER) |
| 33 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/OPygXBw) |
| 34 | rio_wei|[CodePen](https://codepen.io/wei_wu/pen/LEpLZrx)|
| 35 | 阿kai|[CodePen](https://codepen.io/kaihuang3013/pen/KwdqgEN)|
| 36 | Lin|[CodePen](https://codepen.io/Lin4611/pen/XJmgRKq)|
| 37 | Hugh|[CodePen](https://codepen.io/Hugh-Chen/pen/ogjwopY)|
| 38 | haohaoliao|[CodePen](https://codepen.io/yuyuyuhaohao/pen/XJmgEOm)|
| 39 | jimmy|[CodePen](https://codepen.io/JimmyMao/pen/ogjwPNe)|
| 40 | david0799|[CodePen](https://codepen.io/David0799/pen/ZYbeBMN)|
| 41 | 牙山 |[CodePen](https://codepen.io/Tzuru-Chen/pen/EaVvoLW)|
| 42 | Rexlin |[CodePen](https://codepen.io/Rexlin595/pen/vENJbOv)|
| 43 | 阿昌 |[CodePen](https://codepen.io/ychleo102615/pen/yyYowKQ)|
| 44 | Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/QwjMoXJ) |
| 45 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/ogjeRxM) |
| 46 | 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/YPyxbab) |
| 47 | 肉桂卷 | [CodePen](https://codepen.io/ginnlee/pen/pvjWqWm) |
| 48 | 禹成林 | [CodePen](https://codepen.io/useirin/pen/pvjdaoz) |
| 49 | 邵 | [CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/pvjaJgB) |
| 50 | ScarT | [CodePen](https://codepen.io/Acadia/pen/ByoYbRX) |
| 51 | 白雪 | [CodePen](https://codepen.io/weiwei032835-the-styleful/pen/GgpdJzy) |
| 52 | Chen | [CodePen](https://codepen.io/JGM-C/pen/qEOKjPr) |
| 53 | Toung | [Codepen](https://codepen.io/Toung/pen/gbadzBq) |
| 54 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/PwZYzmp) |