# 第三週｜筆記 by Sz ###### tags: `Sz` `week3` `Vue新手夏令營` - [Vue 新手夏令營 課程頁面](https://hackmd.io/@dbFY0UD9SUeKmNXhWf01ew/BkJoW-hn_/%2FC05go-8iTSS-nrMwKU22kA) - [:sun_with_face:筆記入口](/2JiZbCPdR0G4p5fNycPmTg) - [直播影片存檔](https://youtu.be/DUfmdaTj78k) ## 主線課程 本週複習上一週的基礎運行及介紹實戰高使用率的指令 [指令攻略秘笈](https://hackmd.io/@hexschool/S1DJeKTdL/%2Fd-oyhhRoRPSvL1uoM1BGJw) ## 活動二：全指令架構概念 ### 雙向綁定：v:model v-model 就是 #app <-> data 雙向綁定 ### 方法操作 渲染方法 ![](https://i.imgur.com/IICGlPP.png) ## 讀出與寫入 讀出：data -> #app 寫入：#app -> data v-bind 讀出 data -> #app ```htmlembedded= v-bind:src="person.image" ``` 或縮寫 ```htmlembedded= :src="person.image" ``` ## 活動三：特殊指令介紹（修飾符及特殊案例） ### v-model 的修飾符 #### v-model.number 限縮寫入寫出內容為 number ```javascript= <input type="text" // type也記得要加 v-model.number="number" > {{ number }} {{ typeOf number }} ``` ### v-model select, checkbox v-model 的表單處理 ### 本週重點：v-on（簡寫`:`）, v-on.prevent #### v-on 事件觸發器 觸發 methods #### v-on.prevent 清除預設事件 - : class #### v-for 有沒有 :key 的差異 反轉陣列會不能正常運作 ## 作業說明 製作簡易雙數的計算機 - 包含兩個數值的運算 - 包含加減乘除四種運算符號 - 可以運算結果並計算結果 #### 挑戰等級 - LV1：透過課程版型完成範例 - LV2：將歷史資料儲存於 LocalStorage，並維持最多 10 筆歷史資料 - LV3：包含 LocalStorage 並自創版型 #### 版型及範例： - 版型連結：https://github.com/hexschool/summer-camp-vue3/blob/master/week2/template.html - 作品範例：https://github.com/hexschool/summer-camp-vue3/blob/master/week2/index.html - 可運作的範例：https://hexschool.github.io/summer-camp-vue3/week2/ #### 作業提交 [作業繳交區](https://hackmd.io/@dbFY0UD9SUeKmNXhWf01ew/BkJoW-hn_/https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1HtFHfQ_Nrygp9QCk00aH99PN-rwBPvWJhNYbflawViY%2Fedit%23gid%3D0) 59:08