昨天已經完成了網站的骨架（Header、TaskList、Footer 三個區塊），今天目標是讓任務清單能「動起來」，想達到這樣的效果，需要包含以下三步：第一步建立假資料（mock data），就可以 先看到畫面效果；第二步做一個新增任務的函式，才能把新任務加進清單；第三步讓子元件 TaskList 有輸入框與按鈕，讓使用者可以操作，父元件接收並更新畫面。

為什麼要有 mock data？網站如果一開始是空的，就會導致完全不知道功能有沒有做對。所以才需要先放一些假資料，確保畫面能渲染出來。

因為程式碼開始變多，我想著先把比較重點的程式碼截圖做講解，好過直接貼上一大串，所以我們開始吧 !

怎麼才能讓使用者自己輸入任務呢？新增任務：addTask()就顯得非常重要了，為了達成目的，可以在 App.vue 裡寫一個 addTask() 函式，專門處理新增的邏輯。

如何將輸入框和按鈕也相互溝通起來，將新增功能順利進行，並呈現出來呢？只需要在TaskList.vue裡，寫出將輸入結果交給App.vue，再由App.vue裡的程式碼決定如何處理就好了！

怎麼做能讓已經被新增的項目出現在畫面上呢？可以「渲染任務清單」，有了任務資料後，可以用 v-for 把它一筆一筆畫到畫面上，讓使用者喎速看到不一樣！

整體流程：使用者輸入新任務 → TaskList呼叫 → App.vue把它放進清單 → Vue自動把畫面更新。

今天學到的觀念有：
1.ref →可以讓資料變成「活的」，一改就會刷新畫面。
2.父子元件溝通：
父（App.vue） → 把資料傳給子（props）。
子（TaskList.vue） → 把事件回傳給父（emit）。
3.小細節很重要：
a.要避免輸入空字串。
b.要處理 id 遞增，避免重複。
c.要清空輸入框，才方便連續輸入。

最後的成品圖長這樣：

雖然現在多了新的新增功能，不過要是能幫每個任務加上「勾選」功能，比如：點一下任務就可以切換「完成 / 未完成」、畫面上多出顏色變化等等，讓任務狀態更方便更新，也能一目了然。