VueJs2.0建議學(xué)習(xí)路線
最近VueJs確實(shí)火了一把骗灶,自從Vue2.0發(fā)布后艘策,Vue就成了前端領(lǐng)域的熱門話題,github也突破了三萬的star撕贞,那么對(duì)于新手來說更耻,如何高效快速的學(xué)習(xí)Vue2.0呢。
既然大家會(huì)看這篇文章捏膨,那么肯定是vue的學(xué)習(xí)者了秧均,或是遇到的瓶頸,或者剛剛開始學(xué)号涯,不知道如何快速起步目胡,本篇文章將帶領(lǐng)大家在最短的時(shí)間內(nèi)構(gòu)件一個(gè)學(xué)習(xí)Vue的學(xué)習(xí)路線
Vuejs的作者尤雨溪尤大也寫過一篇關(guān)于新手學(xué)習(xí)vue路徑的文章新手向:Vue 2.0 的建議學(xué)習(xí)順序
百度vuejs搜索的是vue1的文檔,推薦大家直接上2.0,畢竟1和2還是有區(qū)別的链快。vue2.0文檔地址Vue2.0
Vue基礎(chǔ)
1. 對(duì)于沒有接觸過es6和webpack的童鞋來說誉己,不建議直接用官方的腳手架vue-cli構(gòu)件項(xiàng)目。
2. 先按文檔順序最少學(xué)習(xí)完組件那一章久又。直接在html文件中引入vue.js開始學(xué)習(xí),了解vue的基礎(chǔ)指令和語法。
3. vue的生命周期很重要效五,了解這點(diǎn)以后可以免去很多問題地消。
4. 學(xué)完這些可以做一些練手的小項(xiàng)目,比如萬年不變的todolist畏妖。脉执。。
5. 現(xiàn)在可以開始學(xué)習(xí)使用vue-cli構(gòu)件項(xiàng)目了戒劫,學(xué)習(xí)組件化之前半夷,推薦先看一下es6關(guān)于模塊的介紹婆廊。阮一峰《ECMAScript6》 Module
6. 光會(huì)這些還是不夠的,還得會(huì)一些npm基礎(chǔ)巫橄,知道如何用git-bash來安裝依賴淘邻,會(huì)一些常用的命令。這方面的知識(shí)可以參閱npm入門文檔
7. 看完這些就可以試著將之前的寫的demo用搭建的vue-cli來實(shí)現(xiàn)湘换。附上我寫的一個(gè)入門小demovue-demo-search
8. 多看看組件那里宾舅,看看如何在vue-cli中怎么實(shí)現(xiàn)組件化,說白了彩倚,vue玩的就是組件筹我。
9. 到這里vue基礎(chǔ)篇就結(jié)束了。你還可以有條件的參閱剩下的官方文檔里面的進(jìn)階篇帆离,如果時(shí)間有限蔬蕊,就直接進(jìn)入vue-router
Vue-router
1. 和之前一樣,推薦直接用html+js過一遍文檔
2. 對(duì)路由導(dǎo)航鉤子得好好看一看哥谷。
3. 看完文檔就可以上手vue-cli岸夯,一般新手在這幾天都會(huì)死活跑不出來。
4. 最直接的方法就是去github上搜一些關(guān)于vue-router2.0的demo呼巷,看如何構(gòu)件路由囱修,如何構(gòu)件項(xiàng)目目錄。
5. 我這里有一個(gè)傳送門
6. 如果能跑出來王悍,就可以做一些小項(xiàng)目了破镰,比如寫一個(gè)知乎日?qǐng)?bào)啊
,這些demo在github上很多压储。
7. 可以結(jié)合一些組件庫寫demo鲜漩,這樣可以更加了解組件化。比如餓了么團(tuán)隊(duì)的Element集惋、mint-ui
Vuex
什么是vuex孕似?
Vuex 是一個(gè)專門為 Vue.js 應(yīng)用設(shè)計(jì)的?狀態(tài)管理模型 + 庫。它為應(yīng)用內(nèi)的所有組件提供集中式存儲(chǔ)服務(wù)刮刑,其中的規(guī)則確保狀態(tài)只能按預(yù)期方式變更喉祭。說白了就是控制應(yīng)用的一些全局狀態(tài)。狀態(tài)改變了雷绢,對(duì)應(yīng)的視圖也會(huì)改變泛烙。
1. 在學(xué)習(xí)Vuex時(shí),會(huì)有一些ES6特性翘紊,當(dāng)遇到這些時(shí)蔽氨,最好不要一帶而過,去好好看一看這些es6特性。
2. 比如在學(xué)習(xí)Action時(shí)可以看看ES6新增的Promise和參數(shù)解構(gòu)鹉究。
3. 實(shí)踐的方法一樣是先看別人別人寫的代碼宇立,比如官方的購物車實(shí)例的應(yīng)用結(jié)構(gòu)。
4. 把之前寫的demo優(yōu)化一下自赔,有些地方可以用用vuex妈嘹。
5. vuex主要是用來對(duì)不同組件間進(jìn)行通信,它構(gòu)建了一個(gè)Vue實(shí)例的全局?jǐn)?shù)據(jù)與方法匿级,這些數(shù)據(jù)與方法可以在該Vue實(shí)例的所有組件中g(shù)etter與setter蟋滴。