第三週｜筆記 by Sz

tags: Sz week3 Vue新手夏令營

• Vue 新手夏令營 課程頁面
• :sun_with_face:筆記入口
• 直播影片存檔

主線課程

本週複習上一週的基礎運行及介紹實戰高使用率的指令

指令攻略秘笈

活動二：全指令架構概念

雙向綁定：v:model

v-model 就是 #app <-> data 雙向綁定

方法操作

渲染方法

讀出與寫入

讀出：data -> #app
寫入：#app -> data

v-bind 讀出
data -> #app

v-bind:src="person.image"

或縮寫

:src="person.image"

活動三：特殊指令介紹（修飾符及特殊案例）

v-model 的修飾符

v-model.number

限縮寫入寫出內容為 number

<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/

作業提交

作業繳交區

59:08