昨天重新回顧了我們在練習作品中常用的Vue語法及語法組成架構，今天再來接續介紹：還有哪些在我們這次改版練習ToDoList中遇到的常用屬性？

本系列任務：改寫過程回顧常用語法

基本上就是要來驗收前幾天學習的內容，但是旨在整理相關常用指令，看看我們從Vue5%到現在Vue30%寫出來的東西差異大不大！
◎小提示：本系列並不算手把手教學，現有素材請參考：Vue的分組報告—實作To Do List

表單輸入綁定

昨天我們提到了很多屬性綁定的用法，可以用v-bind或v-on去綁定class或監聽click事件。不過針對介面輸入的內容呢？

• v-model ft. true-value、false-value
  該屬性就是簡化當我們在<input>上輸入的資料要和js做事件監聽連動的動作：

  const content = ref('')
  <input v-model="content" type="text" placeholder="請輸入文字" />

我們的ToDoList輸入框就是加入了v-model，讓vue幫我們綁定它的value值並監聽input事件！下面還有不同類型的表單元素綁定動作：

1. <textarea>：綁定value，監聽input事件
2. <input type="checkbox/radio">：綁定checked，監聽change事件
   ◎checkbox為多選狀態時可以用ref([])陣列取得多值
3. <select>：綁定value，監聽change事件

<input type="checkbox" v-model="change" true-value="yes" false-value="no">

▲Vue提供true-value、false-value與v-model搭配使用，當change屬性被選中值為yes、取消為no，也可以動態綁定：

<input type="checkbox" v-model="change" :true-value="tureCustomize" :false-value="falseCustomize">

• 修飾符
  剛剛有提到不同類型的表單選項搭配v-model會監聽不一樣的事件，此時，如果加入修飾符可以讓監聽事件改變：

  <input v-model.lazy="content" type="text" placeholder="請輸入文字" />

▲input使用.lazy修飾符，從原本的input事件改為change（很好理解就是懶惰一點）

  <input v-model.trim="content" type="text" placeholder="請輸入文字" />

▲.trim則是去除內容前後空格，協助開發者處理資料

更進階的用法可參考：組件 v-model

鍵盤監聽

• @keyup
  當我輸入完代辦事項，每次都要點選加入其實很不直覺，這時候就可以透過監聽enter鍵來幫我執行：

<input @keyup.enter="addTodo" v-model="content" type="text" placeholder="請輸入文字" />
<button @click="addTodo">加入</button>
//input和button都可以達成送出的功能

@keyup搭配其他常用的按鍵別名：

1. .up：上
2. .down：下
3. .left：左
4. .right：右
5. .space：空格
6. .enter：輸入
7. .esc：取消
8. .tab：縮排
9. .delete：刪除

• 鼠標修飾符（這裡有出現和鍵盤重複的名稱，用於事件綁定的修飾才會生效）：

1. .left：鼠標左鍵
2. .right：鼠標右鍵
3. .middle：鼠標滾輪

• 系統按鍵修飾符

1. .ctrl
2. .alt
3. .shift
4. .meta：各系統對應不一樣的按鍵，如：Windows鍵(⊞)、Command鍵(⌘)…等

使用時機：

<input @keyup.ctrl.space="change">
//按住ctrl+space鍵時觸發，單獨按space不會觸發

還有一種情況是鼠標搭配系統按鍵：

//點選按鍵只要有包含ctrl就會觸發
<button @click.ctrl="change"></button>
//加入修飾詞.exact，只點選ctrl才會觸發
<button @click.ctrl.exact="change"></button>

▲需要精確指名觸發按鍵的時候可以使用.exact

小結

學到這裡已經可以靠綁定事件觸發、鍵盤監聽，處理大部分單純的屬性。但程式永遠都不會只有這麼單純，明天再來繼續消化計算屬性！（P.S此時it邦整個大斷線，本文能順利發出嗎）

參考資料
Vue-事件處理