本教程基於 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
好的，讓我們准備一個文本編輯器和一個瀏覽器，然后開始吧！