這篇反而沒有程式碼

為什麼？因為這應是影片的精華，就是要花錢的意思，今天只會分享一些想法、流程，其他只能靠讀者嘗試、google跟爬官網了。

CRUD

實作一個Todo List，這直覺讓我想到之前學RoR時的CRUD，有興趣的人可以去google，分別是：
Create, Read, Update, Delete

Todo List要達成的目的不離以上：
Create：新增一個任務項目
Read：在頁面上可見眾任務們的狀態
Update：修改任務的內容
Delete：刪除已完成任務

舉個例子：
C 新增：把 11/11 跟Natalie喝酒這個待辦加進去
R 顯示任務：(未完成)11/11 跟Natalie喝酒、(已完成)10/10 跟Toby喝酒
U 更新、修改：Natalie還想順便去買酒，改成 11/11 跟Natalie喝酒買酒
D 刪除：5/15 的事情已經完成好久囉！把它刪掉吧～ 10/10 跟Toby喝完酒之後也沒什麼特別的提醒事項或約定，那也刪掉好了

create

我們把這些待辦塞入陣列之後，再用 v-for列出來，所以我們要宣告一個陣列。而其他的步驟會使用到很多陣列的運用
參考網站：MDN web doc 陣列的運用
其中把元素加入陣列的方式就有介紹不只一種：

1. 把元素指定指向末端 index(arrayName.length)
2. 用 push()

陣列的處理在操作資料時很～常～使用到，所以多看多練習囉！

我們在新增輸入處的input botton中塞入v-on:click='createTodo'的方法，方法的寫法就會使用到上述的把元素加入陣列

read

切換頁籤功能：全部/未完成/已完成

我們可以給這些頁籤，加入不同的 css style用以區分，像是背景色變不同表示當前頁、黯淡半透明表示其他頁。這邊直接控制 active class，active這個 class name是 bs做好現成的css+js，可以呈現這種切換使用中項目的效果，例如這個w3schools的Home Bootstrap Navigation Bar，如要自己做可以參考w3schools How TO - Add Active Class to Current Element
在三個頁籤的標籤裡(可能會是三個<a></a>也可能會是三個<button></button>)要顯示全部的加入 :class=“{‘active’: visibility == ‘all’}” @click=“ visibility == ‘all’ ”。記得先宣告visibility
:跟@是v-bind:跟v-on的縮寫，在第三日的文章最下方API指令裡面有

實作過濾功能

頁籤可以切換了，不過還沒有篩選，我們把它寫在computed，method是沒有必須return的，過濾後要把資料呈現出來，所以我們用computed，動到的不是原本data，而是後來computed裡新宣告的資料

update

編輯的步驟有哪些，想想我們要修改任何現有的事物會怎麼做？假設我做了一道劉昴星名作：彗星炒飯，上發射台前 上桌前想到客人說要加辣沒給他加，那麽我們會：

1. 將盤子收回來
2. 丟回鍋子裡加入辣椒末狠狠地炒它
3. 放回盤子

以上修改的步驟如同：

1. 取得修改對象
2. 進行修改
3. 確認修改完畢

那麼另一種情況：要丟入辣椒末前客人突然想到最近內痔發作，不宜旺火氣，於是便衝進廚房吶喊不加辣了。那麼我們就在把它放回盤子發射台 上。
所以要改成：

1. 取得修改對象
2. 進行修改
3. 取消修改/確認修改完畢

要編輯現有的資料，我們也要幫那些資料預先宣告，讓它們有容器暫時可以放，避免直接動到原始資料，這些資料可能是陣列、字串。

delete

刪除的注意事項在於，如果我們是用this.array.index來指定要刪除的該項，那我們切換到未完成頁面進行刪除，切回全部頁面會不會有什麼問題呢？這邊一樣就不公佈囉～請花小錢投資自己吧

小結

這篇好像很虛無，不要被吉、自保才能繼續寫鐵人賽，很想看程式碼的讀者我這裡推薦另一位鐵人選手跟他參考的網站
Magisheng Vue 學習筆記 - 讓你30天掌握 Vue 系列
Summer。桑莫。夏天 Todo List: Vue.js Example

http method/ RESTful:
[不是工程師] 休息(REST)式架構? 寧靜式(RESTful)的Web API是現在的潮流？ progressbar.tw