歡迎來到 Vue2.x Todo 系列教程，這個教程將手把手教你從零開始使用 Vue 搭建一個 Todo（待辦事項）應用。
書寫此教程的動機
Vue 作者尤雨溪在 新手向：Vue 2.0 的建議學習順序 中給出了中肯的 Vue 學習建議，本系列教程和專案可以看做是這個建議的實踐可操作版本。
Vue 官方文件給出了 2 個示例專案，一個是 TodoMVC，令一個是 HackerNews 克隆。這兩個專案一個用於入門，一個用於進階。讀懂這兩個專案，幾乎可以對 Vue 全部的核心特性：計算屬性、偵聽器、指令、動態樣式繫結、條件渲染、列表渲染、事件處理、表單繫結、元件、元件間的通訊、Vue 路由、服務端渲染、Vuex 等有一個全面的瞭解和掌握。遺憾是的，Vue 官方只有這兩個專案的成品，而沒有對應的開發教程。因此，本系列教程誕生的動機，就是剖析這兩個專案，抽絲剝繭地帶領 Vue 初學者們從 0 開始開發這兩個專案，並在開發中不斷學習鞏固 Vue 的相關知識。
Vue2.x Todo 系列教程 僅僅只是一個開端，依據尤雨溪的學習建議，我們會結合兩個專案，完成下面的事情：
- 直接在 html 頁面中編寫 Vue，開發一個功能齊全的 Todo 應用，從中學習 Vue 的基礎特性。
- 直接在 html 頁面中編寫 Vue，開發一個 HackerNews 應用，從中全面學習 Vue 的核心特性。
- 使用 Webpack 打包，開發一個 HackerNews 應用，瞭解前端工程化。
配套教程會相繼推出，幫助大家入門 Vue 開發，請關注我的個人部落格 追夢人物的部落格 或 掘金主頁。
教程特色
- 完全面向新手，只需非常基礎的 HTML、CSS 和 JavaScript 知識。
- 拋卻複雜的前端工程化配置過程，僅僅需要準備一個可以輸入程式碼的文字編輯器和一個現代化的瀏覽器就可以執行 Vue 應用，聚焦 Vue 核心特性，而不是 webpack。
- 完善的 GitHub 倉庫，每一個開發步驟的程式碼都有一個對應分支，方便學習遇到問題時和示例專案的程式碼進行比較。
- 關鍵開發步驟配有對應的開發練習，讓你將所學的知識立即用於實踐，練習配有完善的參考實現。
- 持續的改進。
專案演示
我們的專案最終完成效果就是下面這個樣子：
你可以看到應用的介面處於上個世紀 80 年代的水平，因為我們使用了瀏覽器原生的 UI 而未加任何 CSS 樣式。採用這種風格有很大的好處，這樣我們可以將注意力完全集中在 Vue 的使用上，而不用關注那些多餘的元素樣式。畢竟連 Google、Amazon 和 Facebook 等很多知名公司的應用也採用這種極簡化風格設計，而且小米創始人雷軍也說過"沒有設計的設計就是最好的設計"，說明這種設計還是有可取之處的。
當然採用一些如 Boostrap、Materialize 等框架後很容易為我們的 Vue Todo 應用加上樣式，如果你做了一個風格不一樣的 Todo，歡迎提一個 pull requests 給我。
使用一個 Todo 應用來講解 Vue 的核心特性是非常合適的，因為它麻雀雖小，但五臟俱全。一個 todo，幾乎可以囊括 Vue 中計算屬性、偵聽器、指令、動態樣式繫結、條件渲染、列表渲染、事件處理、表單繫結、元件、元件間的通訊、自定義指令等核心特性。通過一個 todo 的例子來理解這些特效能幫助我們做什麼事情，然後回過頭去看相對枯燥的官方入門文件，一定會對 Vue 的這些特性有一個更加深刻的瞭解。
相關資源
- Todo 應用原始碼 GitHub 地址：vue2.x-todo-tutorial
- 應用線上演示：Vue2.x Todo
- 開發教程：Vue 2.x Todo 教程
- 教程中的練習參考答案：Vue 2.x Todo 教程練習參考答案
教程目錄索引
教程
- 入門儀式：Hello Vue
- UI
- 顯示todo列表
- 新增todo
- 標為完成
- 刪除todo
- 編輯todo
- 自定義指令實現自動聚焦
- 全部標為完成
- 還剩多少todo未完成
- 篩選
- 批量清除todo
- 本地儲存
- 元件化todo應用
教程中的練習參考答案
開始學習吧！