###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day3 模板語法v-model

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

延續上一篇的模板語法，還有一個很重要的沒有提到

那就是==v-model==

:::success
`v-model` 表單綁定 ( 雙向綁定 )
:::

綁定雙向資料，主要用在`<input>`、`<select>`、`<textarea>`、`自訂components`。

除了初始綁定與呈現資料外，還會監聽事件來做資料更新。

以下列出一些常見用法

**用法一`<input type='text'>`**

<div id="app">
    <input type="text" v-model="message">
    <br>
    <span>Message is {{message}}</span>    
</div>

var app = new Vue({
    el:'#app',
    data:{
        message:'Hello world'
    },
}) 

結果會是，可以看到當`input`改變時，`message`的內容也會即時更新
----改變內容----> 

> `<textarea>`也一樣，就不再水篇幅了

**用法二`<input type='radio'>`**

<div id="app">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>

>注意兩個選項的v-model是綁定同一個data

var app = new Vue({
    el:'#app',
    data:{
        picked:''
    },
}) 

結果會是，可以看到當選擇改變時，`picked`的內容也會即時更新
----選另一個---->

**用法三`<input type='checkbox'>`**

<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">john</label>
     <br>
    <span>checkedNames: {{ checkedNames }}</span>
</div>

var app = new Vue({
    el:'#app',
    data:{
        checkedNames:[]
    },
}) 

----都選起來後---->

>注意因`checkbox`是複選時，資料必須存成陣列
>另外若是`checkbox`是單選時，會將資料存成`true`或`false`

**用法四`<select>`**

<div id="app">
    <select name="" id="" v-model="selected">
        <option disabled value="">請選擇</option>
        <option value="abc">abc</option>
        <option value="ㄅㄆㄇ">ㄅㄆㄇ</option>
    </select>
    <div>selected: {{ selected }}。</div>
</div>

var app = new Vue({
    el:'#app',
    data:{
        selected:"還沒選"
    },
}) 

----選了後---->

:::info
**修飾符（Modifiers）**
:::

v-model還有些修飾符可以使用

* .lazy ( 輸入文字不會及時更新，改為監聽`change`事件進行同步 )

<input type="text" class="form-control" v-model.lazy="lazyMsg">

* .number ( 轉為純數字 )

<input type="number" class="form-control" v-model.number="age">

* .trim ( 刪除前後多餘空白 )

<input type="text" class="form-control" v-model.trim="trimMsg">

---

*參考資料: https://reurl.cc/ErW5NK*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*