第三週|筆記 by Sz
主線課程
本週複習上一週的基礎運行及介紹實戰高使用率的指令
指令攻略秘笈
活動二:全指令架構概念
雙向綁定:v:model
v-model 就是 #app <-> data 雙向綁定
方法操作
渲染方法
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
讀出與寫入
讀出:data -> #app
寫入:#app -> data
v-bind 讀出
data -> #app
或縮寫
活動三:特殊指令介紹(修飾符及特殊案例)
v-model 的修飾符
v-model.number
限縮寫入寫出內容為 number
v-model select, checkbox
v-model 的表單處理
本週重點:v-on(簡寫:
), v-on.prevent
v-on
事件觸發器
觸發 methods
v-on.prevent
清除預設事件
v-for
有沒有 :key 的差異
反轉陣列會不能正常運作
作業說明
製作簡易雙數的計算機
- 包含兩個數值的運算
- 包含加減乘除四種運算符號
- 可以運算結果並計算結果
挑戰等級
- LV1:透過課程版型完成範例
- LV2:將歷史資料儲存於 LocalStorage,並維持最多 10 筆歷史資料
- LV3:包含 LocalStorage 並自創版型
版型及範例:
作業提交
作業繳交區
59:08