Vue 學習入門指南

點擊上方「代碼集中營」，設爲星標

優秀文章，第一時間送達！

若是你是一名 Vue 開發新手，可能已經聽過不少行話術語，好比單頁面應用程序、異步組件、服務器端渲染等等，或者還據說過與 Vue 有關的一些工具和庫，好比 Vuex、Webpack、Vue CLI 和 Nuxt。

那麼究竟什麼是Vue，有什麼做用？

Vue.js是一套用於構建用戶界面的漸進式框架，主要用於快速的構建前端界面，與其它大型的前端框架不一樣，Vue被設計爲能夠自底向上逐層應用。

相比Angular.js來講，Vue的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合，是初創項目的前端首選框架。

做爲一個新興的前端框架，Vue.js大量借鑑和參考了Angular.js和React.js等優秀的前端框架。而在版本支持上，Vue.js拋棄了對IE8的支持，對移動端的支持也有必定的要求，也就是說使用Vue.js進行移動跨平臺開發時須要Android 4.2+和iOS 7+支持。

Vue在MVVM模式中，充當的是VIewModel，就是用於處理數據交互與相應

言歸正傳，要入門Vue須要掌握哪些吶，這是代碼君繪製的結構圖

根據架構圖，咱們能夠知道Vue架構的搭建須要學會哪些知識！

首先，在學習vue.js的前提是掌握了 html/js/css，這塊應該沒什麼難度，你們很容易就能掌握。接下來須要掌握ES6, 這是大前提必定要懂，必定要懂，必定要懂， 

推薦閱讀阮一峯的 ES6入門^[1]，基礎這裏必須掌握，不然也不必往下閱讀，由於沒學會走路就想跑，很容易摔倒！

《ECMAScript 6 入門教程》PDF版^[2]

ES2015簡介和基本語法^[3]

1
 View 和 Components

View 就是UI界面，實現基本是html+css，固然了，目前也有主流的UI組件庫，咱們只須要站在巨人的肩膀進行開發，能夠更加高效。

移動端UI組件庫：有贊出品的 Vant^[4]

PC端UI組件庫：餓了麼出品的 Element^[5]

Components 就是組件，你能夠這麼理解，一個View 能夠由多個Components組件構成，好比一個列表頁，能夠由頭部組件+列表組件+尾部組件，構成一個界面，做爲新手，組件化能夠先放一下，先學會利用成熟的組件庫，進行UI開發便可，新手經過現成的UI庫，會比較容易快速實現UI界面

2
 Router

Vue Router^[6] 是 Vue.js^[7] 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

•嵌套的路由/視圖表•模塊化的、基於組件的路由配置•路由參數、查詢、通配符•基於 Vue.js 過渡系統的視圖過渡效果•細粒度的導航控制•帶有自動激活的 CSS class 的連接•HTML5 歷史模式或 hash 模式，在 IE9 中自動降級•自定義的滾動條行爲

對於新手來講，你只須要知道，路由Router 用來分發請求對應跳轉的界面，好比用戶訪問網址：http://localhost:8088/pageA , http://localhost:8088/pageB,咱們須要根據請求路徑，經過路由的方式，配置跳轉對應的界面

3
 Vuex + Store

什麼是vuex？Vuex^[8] 是一個專門爲 Vue.js 應用設計的 狀態管理模型 + 庫。它爲應用內的全部組件提供集中式存儲服務，其中的規則確保狀態只能按預期方式變動。狀態改變了，對應的視圖也會改變。

上面比較官方，我舉一個具體例子，好比咱們寫界面須要判斷是否登錄，通常是根據token，這個token的狀態管理就是用Vuex+Store,存儲token狀態，而後每次調用接口的時候，取出token數據，若是爲空，自動跳轉到登錄界面，因此你只須要理解Vuex + Store 用於存儲，相似輕量級數據庫

4
 接口API + Mock

接口API就是網絡請求，這裏代碼君推薦使用 axios axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

•從瀏覽器中建立 XMLHttpRequest•從 node.js 發出 http 請求•支持 Promise API•攔截請求和響應•轉換請求和響應數據•取消請求•自動轉換JSON數據•客戶端支持防止 CSRF/XSRF

這裏新手只須要知道網絡請求框架咱們用的是axios，後續代碼君會出專門文章對 axios 使用進行講解

Mock專業術語就是數據模擬，有了mockjs，前端工程師不再用等後端人員開發好以後再測數據了，由於mockjs能夠攔截ajax請求，有了mockjs咱們能夠模擬後臺返回數據，以方便的進行一系列的操做。這個新手能夠先了解一下概念，後續在網絡請求模擬數據的時候會用到，到時候也會專門講解的

5
 Directives

自定義指令，就是除了VUE定義的指令外，還支持用戶註冊自定義指令，那麼你可能會問，什麼是vue的指令，我舉幾個經常使用的指令，後續你必定會遇見的

•v-bind指令：是Vue中，提供的用來綁定屬性的指令,只能實現數據的單向綁定,從M自動綁定到V,沒法實現數據的雙向綁定。•v-model指令：Vue中惟一一個實現雙向數據綁定的指令, 注意 : 只能運用到表單元素中•v-for指令：用於寫循環界面，好比列表頁，複用同一個view•v-if 和 v-else 和 v-else-if 還有 v-show指令：用於控制界面是否顯示，或者瞞住什麼條件進行顯示 上面舉的例子是比較經常使用的，這個新手有一個概念就好，自定義指令還用不到對於新手，可是系統定義的那些經常使用指令，咱們必須熟悉哈~

6
 Mixins

混入 (mixins)：是一種分發 Vue 組件中可複用功能的很是靈活的方式。混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被混入該組件自己的選項。

這個概念官方說的比較繞，我舉一個簡單的例子，Vue 界面一些公用的東西，好比頭部、尾部，不是能夠經過Components實現組件化開發，當咱們在開發JS代碼的時候，若是遇到多個界面執行相同的邏輯代碼，是否也能夠抽離出來吶？基於這個思考，Mixins就出來了，Mixins至關於js中的組件化，把相同的抽離出來，而後再經過Mixins插入到js裏面

那麼可能有人會問，抽離出工具類不也能夠嘛！Mixins 和抽離出來的工具類有什麼差異吶？工具類只能針對方法進行抽離，Mixins 能夠說更增強大，是能夠根據生命週期進行抽離的，好比A、B、C界面都須要在建立的時候，驗證有沒有登錄，就能夠在建立的生命週期裏面抽離出驗證登錄的方法，而後在經過Mixins插入到各個界面裏

新手只須要了解 表現層與 API 層，業務層比較深刻，能夠後面再瞭解，工具層你們都比較好理解，就是一些經常使用的時間日期管理工具類、浮點計算等工具類的封裝，基礎設施層，代碼君在下一篇文章，Vue 入門環境搭建 進行講解！

好了，此次的入門指南就這些，此篇文章是對 Vue 總體的框架進行宏觀剖析，就是但願初學者能對 Vue 設計到的知識面有一個宏觀的概念，以後代碼君會分別對涉及到的知識點依次進行講解！

《ECMAScript 6 入門教程》PDF版下載地址：https://089u.com/file/17143538-463130700

好文推薦

微信小程序版2048

基於Python搭建Django後臺管理系統

Android 8.0 版本更新的適配