是誰把日子拆成七天來過的？五天不是也不錯？

以往原生的 JavaScript 來寫 Todo List 的時候，需要處理許多事件監聽、取值以及排序的問題，但是以 Vue.js 卻可以輕鬆不少，原因是 Vue 綁我們做了不少「雙向綁定」與「事件監聽」的事，而許多公司也都以這題「Todo List」來當成面試的考題，當我們被要求做出這一題的時候，是怎麼規劃與進行的呢？

我們先不要看範例，可以先想像一下畫在紙上，做出來的是什麼樣子。

需要的功能有哪些？

實作之前可以先把需要的功能一一寫下，所以大概會有以下這幾項，順便也可以想想有哪些 v-的指令語法可以用：

新增

• 把已經輸入的列表結構列出來(v-for)
• 獲取使用者的輸入值(v-model)
• enter 時新增資料(v-on,.enter)
• 清空輸入框(v-on)

刪除

• 點擊刪除指定的 item 時會 Item 刪掉(v-on splice index)

統計

• 會顯示輸入的 Item 有幾個({{綁定陣列的長度}})

清空

• 點清空按鈕時會全部清空(v-on)

隱藏

• 在沒有內容的時候把 Item 數量和環不清除的區塊隱藏(v-show)

在實例裡要初始化哪些資料？

一但把需要的功能記錄下來之後，就可以開始思考邏輯的部分，例如：

• 如何自動把輸入的內容選染出來?
• 有很多筆資料時應該儲存成什麼格式?
• 如何把輸入的資料放到儲存的地方？
• 如何知道資料有幾筆？
• 如何把資料清空？
• 如何在資料數量是 0 的時候隱藏數量和清空的按鈕？

可以把上面列出來的功能和會使用的指令想一下，就會變得很容易的。

明天我們就實際來做一遍囉～

每日一句法文有益身心：Pas du tout ! --> 八.ㄉㄩˇ.度！ --> 一點也不（好）！ --> 你喜歡她嗎？Pas du tout !