Vue入門指南(快速上手vue)

番茄炒蛋少放糖發表於2019-03-30

Vue入門指南(快速上手vue)

Vue.js 2.0 快速上手vue

自從Vue2.0釋出後,Vue就成了前端領域的熱門話題,github排名已經是前幾名了,那麼對於新手來說,如何高效快速的學習Vue2.0呢。

Vue-router

和之前一樣,推薦直接用html+js過一遍文件對路由導航鉤子得好好看一看。看完文件就可以上手vue-cli,一般新手在這幾天都會死活跑不出來。偷笑最直接的方法就是去github上搜一些關於vue-router2.0的demo,看如何構件路由,如何構件專案目錄。我這裡有一個傳送門如果能跑出來,就可以做一些小專案了,比如寫一個知乎日報啊偷笑,這些demo在github上很多。可以結合一些元件庫寫demo,這樣可以更加了解元件化。比如餓了麼團隊的Element、mint-ui.

Vuex

什麼是vuex?Vuex 是一個專門為 Vue.js 應用設計的 狀態管理模型 + 庫。它為應用內的所有元件提供集中式儲存服務,其中的規則確保狀態只能按預期方式變更。說白了就是控制應用的一些全域性狀態。狀態改變了,對應的檢視也會改變。 在學習Vuex時,會有一些ES6特性,當遇到這些時,最好不要一帶而過,去好好看一看這些es6特性。比如在學習Action時可以看看ES6新增的Promise和引數解構。實踐的方法一樣是先看別人別人寫的程式碼,比如官方的購物車例項的應用結構把之前寫的demo優化一下,有些地方可以用用vuexvuex主要是用來對不同元件間進行通訊,它構建了一個Vue例項的全域性資料與方法,這些資料與方法可以在該Vue例項的所有元件中get與set.

Vue基礎

對於沒有接觸過es6和webpack的童鞋來說,不建議直接用官方的腳手架vue-cli構件專案。先按文件順序最少學習完元件那一章。直接在html檔案中引入vue.js開始學習,瞭解vue的基礎指令,和整個vue例項的基礎架構。vue的生命週期很重要,瞭解這點以後可以免去很多問題。學完這些可以做一些練手的小專案,比如萬年不變的todolist。。。現在可以開始學習使用vue-cli構件專案了,學習元件化之前,推薦先看一下es6關於模組的介紹。阮一峰《ECMAScript6》 Module光會這些還是不夠的,還得會一些npm基礎,知道如何用git-bush來安裝模組依賴,會一些常用的命令。這方面的知識可以參閱npm入門文件看完這些就可以試著將之前的寫的demo用搭建的vue-cli來實現。

入門到學無止境

Vue入門指南-01 建立vue例項 (快速上手vue)

Vue入門指南-02 自定義全域性和區域性指令(快速上手vue)

Vue入門指南-03 vue官方提供的指令(快速上手vue)

Vue入門指南-04 事件機制和事件/按鍵修飾符和過濾器及監聽屬性(快速上手vue)

Vue入門指南-05 Vue例項的生命週期(快速上手vue)

Vue入門指南-06 Vue中的動畫(快速上手vue)

Vue入門指南-07 Vue中的元件(快速上手vue)

Vue入門指南-08 Vue中的標籤/如何獲取DOM元素(快速上手vue)

相關文章