在網際網路圈子裡，一直以來都存在一個現象：後端看不上前端。總覺得前端是較容易的，事實上也是如此，前端門檻較後端要低一些，但最近幾年Web前端技術的發展突飛猛進，出現了很多優秀的前端框架，而眾多前端框架中，Vue算得上是最熱門的了。基本上各大網際網路公司招聘前端都會要求掌握Vue，但不少前端開發者看Vue文件都覺得無從下手，那我們該如何學習Vue框架呢？

Vue框架較其它前端框架的區別

Vue框架全稱是Vue.js，它是一款MVVM模式的漸進式框架，Vue框架和其它前端框架還是有一些區別的：

Vue是響應式的資料繫結，資料雙向繫結Vue.js裡的資料是響應式的，無論是v-bind還是v-model繫結的資料，當資料變化時檢視也會同步更新。Vue使用了虛擬DOM技術（vdom）Vue在操作DOM前是建立了一個虛擬DOM樹，然後透過Diff演算法來跟蹤真實DOM的變化，然後只渲染髮生變化的DOM，這樣一來就提高了渲染效率。Vue是模組化開發模式Vue是模組化開發模式，一個複雜的頁面最終是會拆分成N個元件去開發的，最終拼成一個頁面。如何學習Vue前端框架？

1、Vue前端框架並不適合新手學習

Vue框架裡使用了很多技術：HTML、CSS、JS基礎、ES6、Webpack、npm工具等，現在市面上很多Vue教程都默許你已經掌握了這些知識，如果這些基礎知識掌握不牢，那學習Vue框架的難度就較大。

2、Vue框架學習路徑

Vue框架基礎知識：插值表示式、資料繫結（v-html、v-text、v-bind、v-model）、事件繫結（v-on）、樣式繫結、迴圈（v-for）、顯示與隱藏（v-if、v-show）、過濾器（filters）、監聽器（watch）、計算屬性（computed）等；元件：元件定義與使用、父子元件間的通訊；路由的使用：VueRouter；網路請求：axios的使用；狀態管理(全域性資料)：Vuex；Vue CLI腳手架的使用；以上知識掌握後就要多實踐，找一個網頁一步步去實踐開發。

看你是否有前端基礎，有的話先去vue官網過一遍裡面的案例，然後再找個理論類的vue影片對著敲一遍，最後再找個實戰的vue影片造個輪子，那麼vue你基本入門了。如果沒有基礎，那就夠嗆了！

前端程式設計師四年

如何學習Vue框架？我來說說我當時怎麼學的？

首先請允許我講一下大道理哈：

1、要明白庫和框架的區別

2、要明白設計思想

3、然後去掌握基礎，隨後做專案實操

庫和框架的區別

這玩意吧，說白了庫就是你寫程式碼的時候要使用的，就像JQuery，我要寫某種效果的時候，直接拿過來某個函式或方法，例如：slideToggle()、fadeIn()、hide()等等一系列的方法，庫裡已經幫你封裝好了，你拿過來直接使用就行。用不用是你的事，用了也不影響你的程式碼。

庫是將程式碼集合成一個產品，庫是我們呼叫庫中的方法實現自己的功能。

而這個框架呢，是一個領域，是一套完整的解決方案，你用就得全部用，而且得按照框架規定的寫程式碼，由不得自己亂來，你亂來你就得不到想要的效果。

框架幫我們呼叫，框架是庫的升級版。

設計思想

說設計思想有點不準確，準確來說應該是架構模式，但我用設計思想來表達什麼呢？就是要明白Vue如何執行的，實現原理是什麼？

1、MVC

這是我們學程式設計的時候經常聽到的一句話，用到框架時少不了它，那它究竟是何意呢？

Model 資料模型（專門用來操作資料，資料的CRUD）

View 檢視（對於前端來說，就是頁面）

Controller 控制器（是檢視和資料模型溝通的橋樑，用於處理業務邏輯）

2、MVVM組成

Vue就是基於MVVM模式實現的一套框架

M：model資料模型，如物件，陣列等等。

V：view檢視

VM：ViewModel 檢視模型

VUE允許你將一個網頁分割成可複用的元件，每個元件都包含屬於自己的HTML、CSS、JAVASCRIPT以用來渲染網頁中相應的地方。雖然沒有完全遵循 MVVM 模型，Vue 的設計無疑受到了它的啟發。因此在文件中經常會使用 vm (ViewModel 的簡稱) 這個變數名錶示 Vue 例項。

學習Vue要轉化思想

不要在想著怎麼操作DOM，而是想著如何操作資料！！！在那剛開始學習的時候，你會感覺到很濃的資料繫結的語法，我相信你會喜歡上他的。

實操，寫就完事了

看完了上面的內容，就要帶著思想去學習，堅持就是勝利！

我剛開始學習的時候，看了一些設計原理，思想，覺得挺不錯，說白了就是了解一下市場，然後上Vue官網看教程，真的很詳細，我覺得啥也不懂程式碼的人也能跟著學起來，踏實的走一遍，切記中間不要停頓，我之前就是，學一半，中間隔了好幾個月，然後又重頭學的。

透過官網的教程可以非常容易的入門vue,然後試著自己寫介面！平時用H5寫頁面，學會它，就可以把h5頁面用Vue寫，熟練了就好了，這樣就算是半個Vue實操者了。

接下如果公司有專案，就要大膽嘗試，我當初公司有專案，還好實操了，不過剛開始賊費勁，不少麻煩人。

如果沒有，網上有教程，全套的，可以自己購買下載學習。

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

在進行Vue專案開發過程中，我們可以透過script標籤引入式寫法來引入vue或者是nodejs自帶的包管理工具npm安裝vue。並且透過new Vue（）進行新建一個Vue的例項物件，其下有很多屬性，包括el、data、methods、computed、watch等等，el為指向頁面的節點元素，data儲存資料，資料型別包括simple datatype（簡單資料型別）以及complex datatype（複雜資料型別），用插值表示式{{}}顯示，在插值顯示的時候，不需要寫上data，methods記憶體儲方法，透過fn（）的形式呼叫方法，computed記憶體儲也是方法，但是其為計算資料，複雜邏輯的應該儲存在computed中，計算屬性是基於它們的依賴進行快取的，由於computed帶有一層快取，所以只有在它的相關依賴發生改變時才會重新執行，而methods則是呼叫一次生成一次，computed中的方法呼叫時不需要加（）的，watch為監聽，監控，監聽data中的屬性值也可以監控物件，存在兩個引數（currentValue當前值和prevValue之前值）。

在Vue中，html的任何屬性都不能用{{}}（插值表示式）來進行設定，要用v-bind：來進行屬性繫結，v-bind：可以簡寫為 ：，當我們需要對事件進行監聽的時候需要用v-on：來進行事件繫結，v-on：可以簡寫為@，v-once單次渲染，v-html渲染html，在input、select、textarea中我們可以用v-model：進行雙向資料繫結，可以用v-for進行資料迴圈，v-if/v-else-if/v-else進行資料判斷，利用v-show顯示與隱藏DOM節點，在Vue中還存在很多修飾符如取消事件冒泡（.stop），回車鍵（.enter），空格鍵（.space），取消預設事件（.prevent）等等，可以對DOM設定ref屬性進行本地指向，類似於id，當我們對一個物件進行v-for迴圈時要對該物件設定key值，起到標識唯一性，便於檢測以及提高效能的作用。

在Vue的例項物件下面還存在很多鉤子函式，總體分為三大塊（建立、更新、銷燬）：

1、建立階段，存在beforeCreate(){}、created(){}、beforeMount(){}、mounted(){}等鉤子函式；

2、更新階段，存在beforeUpdate(){}、updated(){}等鉤子函式；

3、銷燬階段，存在beforeDestroy(){}、destroyed(){}等鉤子函式；上述鉤子函式不包括全部，一個生命週期記憶體在很多鉤子函式，不能一一列舉。

以上就是我對Vue基礎知識技術的總結，Vue專案開發部分留待Vue專案開發技術總結。