Vue新手向：14篇教程帶你從零擼一個Todo應用

時間 2019-11-17

標籤 vue 新手教程一個 todo 應用简体版

原文原文鏈接

歡迎來到 Vue2.x Todo 系列教程，這個教程將手把手教你從零開始使用 Vue 搭建一個 Todo（待辦事項）應用。html

書寫此教程的動機

Vue 做者尤雨溪在新手向：Vue 2.0 的建議學習順序中給出了中肯的 Vue 學習建議，本系列教程和項目能夠看作是這個建議的實踐可操做版本。前端

Vue 官方文檔給出了 2 個示例項目，一個是 TodoMVC，令一個是 HackerNews 克隆。這兩個項目一個用於入門，一個用於進階。讀懂這兩個項目，幾乎能夠對 Vue 所有的核心特性：計算屬性、偵聽器、指令、動態樣式綁定、條件渲染、列表渲染、事件處理、表單綁定、組件、組件間的通訊、Vue 路由、服務端渲染、Vuex 等有一個全面的瞭解和掌握。遺憾是的，Vue 官方只有這兩個項目的成品，而沒有對應的開發教程。所以，本系列教程誕生的動機，就是剖析這兩個項目，抽絲剝繭地帶領 Vue 初學者們從 0 開始開發這兩個項目，並在開發中不斷學習鞏固 Vue 的相關知識。vue

Vue2.x Todo 系列教程僅僅只是一個開端，依據尤雨溪的學習建議，咱們會結合兩個項目，完成下面的事情：webpack

直接在 html 頁面中編寫 Vue，開發一個功能齊全的 Todo 應用，從中學習 Vue 的基礎特性。
直接在 html 頁面中編寫 Vue，開發一個 HackerNews 應用，從中全面學習 Vue 的核心特性。
使用 Webpack 打包，開發一個 HackerNews 應用，瞭解前端工程化。

配套教程會相繼推出，幫助你們入門 Vue 開發，請關注個人我的博客追夢人物的博客或掘金主頁。git

教程特點

徹底面向新手，只需很是基礎的 HTML、CSS 和 JavaScript 知識。
拋卻複雜的前端工程化配置過程，僅僅須要準備一個能夠輸入代碼的文本編輯器和一個現代化的瀏覽器就能夠運行 Vue 應用，聚焦 Vue 核心特性，而不是 webpack。
完善的 GitHub 倉庫，每個開發步驟的代碼都有一個對應分支，方便學習遇到問題時和示例項目的代碼進行比較。
關鍵開發步驟配有對應的開發練習，讓你將所學的知識當即用於實踐，練習配有完善的參考實現。
持續的改進。

項目演示

咱們的項目最終完成效果就是下面這個樣子：github

你能夠看到應用的界面處於上個世紀 80 年代的水平，由於咱們使用了瀏覽器原生的 UI 而未加任何 CSS 樣式。採用這種風格有很大的好處，這樣咱們能夠將注意力徹底集中在 Vue 的使用上，而不用關注那些多餘的元素樣式。畢竟連 Google、Amazon 和 Facebook 等不少知名公司的應用也採用這種極簡化風格設計，並且小米創始人雷軍也說過"沒有設計的設計就是最好的設計"，說明這種設計仍是有可取之處的。web

固然採用一些如 Boostrap、Materialize 等框架後很容易爲咱們的 Vue Todo 應用加上樣式，若是你作了一個風格不同的 Todo，歡迎提一個 pull requests 給我。前端工程化

使用一個 Todo 應用來說解 Vue 的核心特性是很是合適的，由於它麻雀雖小，但五臟俱全。一個 todo，幾乎能夠囊括 Vue 中計算屬性、偵聽器、指令、動態樣式綁定、條件渲染、列表渲染、事件處理、表單綁定、組件、組件間的通訊、自定義指令等核心特性。經過一個 todo 的例子來理解這些特性能幫助咱們作什麼事情，而後回過頭去看相對枯燥的官方入門文檔，必定會對 Vue 的這些特性有一個更加深入的瞭解。瀏覽器