VueJs2 0建議學習路線

2022-03-30 15:31:53 字數 1371 閱讀 9837

最近vuejs確實火了一把,自從vue2.0發布後,vue就成了前端領域的熱門話題,github也突破了三萬的star,那麼對於新手來說,如何高效快速的學習vue2.0呢。

vuejs的作者尤雨溪尤大也寫過一篇關於新手學習vue路徑的文章新手向:vue 2.0 的建議學習順序

對於沒有接觸過es6和webpack的童鞋來說,不建議直接用官方的腳手架vue-cli構件專案。

先按文件順序最少學習完元件那一章。直接在html檔案中引入vue.js開始學習,了解vue的基礎指令,和整個vue例項的基礎架構。

vue的生命週期很重要,了解這點以後可以免去很多問題。

學完這些可以做一些練手的小專案,比如萬年不變的todolist。。。

現在可以開始學習使用vue-cli構件專案了,學習元件化之前,推薦先看一下es6關於模組的介紹。阮一峰《ecmascript6》 module

光會這些還是不夠的,還得會一些npm基礎,知道如何用git-bush來安裝模組依賴,會一些常用的命令。這方面的知識可以參閱npm入門文件

看完這些就可以試著將之前的寫的demo用搭建的vue-cli來實現。附上我寫的乙個入門小demovue-demo-search

多看看元件那裡,看看如何在vue-cli中怎麼實現元件化。

到這裡vue基礎篇就結束了。你還可以有條件的參閱剩下的官方文件裡面的高階篇,如果時間有限,就直接進入vue-router

和之前一樣,推薦直接用html+js過一遍文件

對路由導航鉤子得好好看一看。

看完文件就可以上手vue-cli,一般新手在這幾天都會死活跑不出來。

最直接的方法就是去github上搜一些關於vue-router2.0的demo,看如何構件路由,如何構件專案目錄。

我這裡有乙個傳送門

如果能跑出來,就可以做一些小專案了,比如寫乙個知乎**啊

,這些demo在github上很多。

可以結合一些元件庫寫demo,這樣可以更加了解元件化。比如餓了麼團隊的element、mint-ui

什麼是vuex?

vuex 是乙個專門為 vue.js 應用設計的 狀態管理模型 + 庫。它為應用內的所有元件提供集中式儲存服務,其中的規則確保狀態只能按預期方式變更。說白了就是控制應用的一些全域性狀態。狀態改變了,對應的檢視也會改變。

在學習vuex時,會有一些es6特性,當遇到這些時,最好不要一帶而過,去好好看一看這些es6特性。

比如在學習action時可以看看es6新增的promise和引數解構。

實踐的方法一樣是先看別人別人寫的**,比如官方的購物車例項的應用結構

把之前寫的demo優化一下,有些地方可以用用vuex

vuex主要是用來對不同元件間進行通訊,它構建了乙個vue例項的全域性資料與方法,這些資料與方法可以在該vue例項的所有元件中get與set

VueJs2 0建議學習路線

最近vuejs確實火了一把,自從vue2.0發布後,vue就成了前端領域的熱門話題,github也突破了三萬的star,那麼對於新手來說,如何高效快速的學習vue2.0呢。vuejs的作者尤雨溪尤大也寫過一篇關於新手學習vue路徑的文章新手向 vue 2.0 的建議學習順序 對於沒有接觸過es6和w...

VueJs2 0建議學習路線

最近vuejs確實火了一把,自從vue2.0發布後,vue就成了前端領域的熱門話題,github也突破了三萬的star,那麼對於新手來說,如何高效快速的學習vue2.0呢。vuejs的作者尤雨溪尤大也寫過一篇關於新手學習vue路徑的文章新手向 vue 2.0 的建議學習順序 對於沒有接觸過es6和w...

vuejs 2 0 基礎筆記

基本結構 el wrap data v for name in json v for v,k in json 事件 v on click 函式 or v bind click 函式 v on click mouseout mouseover dblclick mousedown.顯示隱藏 v if ...