為什麼？因為這應是影片的精華，就是要花錢的意思，今天只會分享一些想法、流程，其他只能靠讀者嘗試、google跟爬官網了。
實作一個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喝完酒之後也沒什麼特別的提醒事項或約定，那也刪掉好了
我們把這些待辦塞入陣列之後，再用 v-for列出來，所以我們要宣告一個陣列。而其他的步驟會使用到很多陣列的運用
參考網站：MDN web doc 陣列的運用
其中把元素加入陣列的方式就有介紹不只一種：
陣列的處理在操作資料時很～常～使用到，所以多看多練習囉！
我們在新增輸入處的input botton中塞入v-on:click='createTodo'的方法，方法的寫法就會使用到上述的把元素加入陣列
我們可以給這些頁籤，加入不同的 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裡新宣告的資料
編輯的步驟有哪些，想想我們要修改任何現有的事物會怎麼做？假設我做了一道劉昴星名作：彗星炒飯，上發射台前 上桌前想到客人說要加辣沒給他加，那麽我們會：
以上修改的步驟如同：
那麼另一種情況：要丟入辣椒末前客人突然想到最近內痔發作，不宜旺火氣，於是便衝進廚房吶喊不加辣了。那麼我們就在把它放回盤子發射台 上。
所以要改成：
要編輯現有的資料，我們也要幫那些資料預先宣告，讓它們有容器暫時可以放，避免直接動到原始資料，這些資料可能是陣列、字串。
刪除的注意事項在於，如果我們是用this.array.index來指定要刪除的該項，那我們切換到未完成頁面進行刪除，切回全部頁面會不會有什麼問題呢？這邊一樣就不公佈囉～請花小錢投資自己吧
這篇好像很虛無，不要被吉、自保才能繼續寫鐵人賽，很想看程式碼的讀者我這裡推薦另一位鐵人選手跟他參考的網站
Magisheng Vue 學習筆記 - 讓你30天掌握 Vue 系列
Summer。桑莫。夏天 Todo List: Vue.js Example
http method/ RESTful:
[不是工程師] 休息(REST)式架構? 寧靜式(RESTful)的Web API是現在的潮流？ progressbar.tw
iThome鐵人賽
看影片追技術