DAY 8 - v-model 雙向綁定與修飾符運用

接下來DAY 8 ~ DAY 11 會來到 Vue 的指令篇，這邊就是比較基礎的常用的指令，會一一來慢慢介紹及使用方法，常見必學指令 :

• v-model 雙向綁定 - 綁定表單、資料綁定
• v-bind 綁定屬性 - 綁定 attribute
• v-on 綁定事件 - 綁定事件(點擊、滑動、移出移入等..)
• v-if/v-else/v-else-if 條件判斷 - 判斷顯示畫面
• v-for 列表渲染 - 渲染出多個資料

v-model 雙向綁定

複習一下 ref，加入 v-model 綁定
首先來複習一下，還記得我們 DAY6 - Option API 進化 Compisiton API 篇提到 ref 的基礎寫法嗎，
先利用 ref 試著寫一段資料、文字，我們輸入一段const message = ref('請輸入你的文字') ，接著利用 大括號 {{ }}　代入ref {{ message }}，接著我們可以把這段綁定到表單上，這時候就要運用到 v-modal將他綁定上去。

來看看 View 接下來發生什麼事

可以看到我修改值後，本來的也會同步更新，兩邊是同步綁定再一起的，這就是雙向綁定機制，v-model是雙向綁定，讓資料、表單可以同步，當前台畫面使用者修改資料時，後面也會取得最新的資訊。

v-model 修飾符

在某些情況下會使用修飾符，修飾符可以修飾綁定的資料，例如 : 我希望資料自動轉換為數字而不是文字，這時候就會使用修飾符，常用的修飾符有三種 lazy、 number 、trim :

.trim

使用情境 : 當更改表單值時，會出發 change 事件，會在事件後才一次變更 ，像是 希望 User 一次輸入完後再一次顯示 。

範例 :
預設 v-model : 邊打邊同步，如下圖範例我輸入 1 > 2 > 3 > 4 ，會發現畫面會隨著我每打一個字跟著同步更新畫面

加上.lazy，當 Change 事件後才會修改畫面

.number

使用情境 : 從字串自動轉換成數字，或是可以加入 type="number"也是一樣的意思
範例 :
一般 v-model 上我們打一串電話號碼試看看，此時看 devtools (vue 開發者工具)會發現預設是字串

在 v-model 後方加入修飾符.number，接著我們輸入電話號碼，會發現自動轉化成數字了

.trim

使用情境 :為了避免 User 常在輸入表單會誤按空格造成錯誤

範例 :
在表單後方加入修飾符，會自動去除前後的空格避免錯誤，可以看到下方我們加入前及加入後的變化，要注意的是只會修飾前後的空格，中間的不會