本教程基於 Vue.js 2.x
作者：HelloGitHub-追夢人物
歡迎來到 HelloVue-todo-tutorial，這個教程將手把手教你從零開始使用 Vue 搭建一個 Todo（待辦事項）應用。
這個教程可以看做是 HelloDjango 系列的番外篇，通過這個教程熟悉 Vue 的基本概念後，我們將使用前後端分離的方式，開發 Django 部落格應用。
這個教程還是 HelloVue 系列教程的開篇，這個系列教程將帶你循序漸進地深入 Vue，通過實戰的形式學習 Vue 開發的方方面面。
同樣，本教程完全免費、開源，首發於 HelloGitHub 公眾號。
Vue.js 是什麼
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
在 GitHub 上有 17.4 萬 star 排在總榜第三名。（截止本文釋出時的統計資料）
如果沒看懂上面說的，看著這句就行：Vue.js 是當前最流行的開源前端框架之一，它上手容易、是前端程式設計師必備技能，學它準沒錯。
本教程特色
這個教程是完全面向新手的，你可能只瞭解過一點點的 HTML 知識，花了 10 多分鐘看了一點 JavaScript 的基礎教程，甚至於你完全不懂什麼是 CSS。都沒有關係！
這篇教程也不會一上來就先教你配置複雜的前端工程化專案（我在網上搜集的很多教 Vue 開發 Todo 應用的部落格都是這麼做的），這很容易把一個初學者嚇跑。事實上 Vue 不過是一個 JavaScript 庫，我們僅僅需要準備一個可以輸入程式碼的文字編輯器和一個現代化的瀏覽器就可以執行 Vue 應用。因此本教程將拋開繁瑣的前端工程化配置過程，所有的程式碼都將在一個單一的 HTML 檔案裡編寫，用瀏覽器開啟即可執行檢視效果，按 F12 就可以進行程式碼除錯。
我們的專案最終完成效果就是下面這個樣子：
你可以看到應用的介面處於上個世紀 80 年代的水平，因為我們使用了瀏覽器原生的 UI 而未加任何 CSS 樣式。採用這種風格有很大的好處，這樣我們可以將注意力完全集中在 Vue 的使用上，而不用關注那些多餘的元素樣式。畢竟連 Google、Amazon 和 Facebook 等很多知名公司的應用也採用這種極簡化風格設計，而且小米創始人雷軍也說過"沒有設計的設計就是最好的設計"，說明這種設計還是有可取之處的。
當然採用一些如 Boostrap、Materialize 等框架後很容易為我們的 Vue Todo 應用加上樣式，如果你做了一個風格不一樣的 Todo，歡迎提一個 pull requests 給我。
使用一個 Todo 應用來講解 Vue 的核心特性是非常合適的，因為它麻雀雖小，但五臟俱全。一個 todo，幾乎可以囊括 Vue 中計算屬性、偵聽器、指令、動態樣式繫結、條件渲染、列表渲染、事件處理、表單繫結、元件、元件間的通訊、自定義指令等核心特性。通過一個 todo 的例子來理解這些特效能幫助我們做什麼事情，然後回過頭去看相對枯燥的官方入門文件，一定會對 Vue 的這些特性有一個更加深刻的瞭解。
開源專案地址：https://github.com/HelloGitHub-Team/HelloVue-todo-tutorial
好的，讓我們準備一個文字編輯器和一個瀏覽器，然後開始吧！