在互聯(lián)網(wǎng)圈子里，一直以來(lái)都存在一個(gè)現(xiàn)象：后端看不上前端。總覺(jué)得前端是較容易的，事實(shí)上也是如此，前端門(mén)檻較后端要低一些，但最近幾年Web前端技術(shù)的發(fā)展突飛猛進(jìn)，出現(xiàn)了很多優(yōu)秀的前端框架，而眾多前端框架中，Vue算得上是最熱門(mén)的了。基本上各大互聯(lián)網(wǎng)公司招聘前端都會(huì)要求掌握Vue，但不少前端開(kāi)發(fā)者看Vue文檔都覺(jué)得無(wú)從下手，那我們?cè)撊绾螌W(xué)習(xí)Vue框架呢？

Vue框架較其它前端框架的區(qū)別

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

1. Vue是響應(yīng)式的數(shù)據(jù)綁定，數(shù)據(jù)雙向綁定
   Vue.js里的數(shù)據(jù)是響應(yīng)式的，無(wú)論是v-bind還是v-model綁定的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)視圖也會(huì)同步更新。
2. Vue使用了虛擬DOM技術(shù)（vdom）
   Vue在操作DOM前是建立了一個(gè)虛擬DOM樹(shù)，然后通過(guò)Diff算法來(lái)跟蹤真實(shí)DOM的變化，然后只渲染發(fā)生變化的DOM，這樣一來(lái)就提高了渲染效率。
3. Vue是模塊化開(kāi)發(fā)模式
   Vue是模塊化開(kāi)發(fā)模式，一個(gè)復(fù)雜的頁(yè)面最終是會(huì)拆分成N個(gè)組件去開(kāi)發(fā)的，最終拼成一個(gè)頁(yè)面。

如何學(xué)習(xí)Vue前端框架？

1、Vue前端框架并不適合新手學(xué)習(xí)

Vue框架里使用了很多技術(shù)：HTML、CSS、JS基礎(chǔ)、ES6、Webpack、npm工具等，現(xiàn)在市面上很多Vue教程都默許你已經(jīng)掌握了這些知識(shí)，如果這些基礎(chǔ)知識(shí)掌握不牢，那學(xué)習(xí)Vue框架的難度就較大。

2、Vue框架學(xué)習(xí)路徑

• Vue框架基礎(chǔ)知識(shí)：插值表達(dá)式、數(shù)據(jù)綁定（v-html、v-text、v-bind、v-model）、事件綁定（v-on）、樣式綁定、循環(huán)（v-for）、顯示與隱藏（v-if、v-show）、過(guò)濾器（filters）、監(jiān)聽(tīng)器（watch）、計(jì)算屬性（computed）等；
• 組件：組件定義與使用、父子組件間的通信；
• 路由的使用：VueRouter；
• 網(wǎng)絡(luò)請(qǐng)求：axios的使用；
• 狀態(tài)管理(全局?jǐn)?shù)據(jù))：Vuex；
• Vue CLI腳手架的使用；
• 以上知識(shí)掌握后就要多實(shí)踐，找一個(gè)網(wǎng)頁(yè)一步步去實(shí)踐開(kāi)發(fā)。

以上就是我的觀點(diǎn)，對(duì)于這個(gè)問(wèn)題大家是怎么看待的呢？歡迎在下方評(píng)論區(qū)交流 ~ 我是科技領(lǐng)域創(chuàng)作者，十年互聯(lián)網(wǎng)從業(yè)經(jīng)驗(yàn)，歡迎關(guān)注我了解更多科技知識(shí)！

1、Vue前端框架并不適合新手學(xué)習(xí)

Vue框架里使用了很多技術(shù)：HTML、CSS、JS基礎(chǔ)、ES6、Webpack、npm工具等，現(xiàn)在市面上很多Vue教程都默許你已經(jīng)掌握了這些知識(shí)，如果這些基礎(chǔ)知識(shí)掌握不牢，那學(xué)習(xí)Vue框架的難度就較大。

Vue框架基礎(chǔ)知識(shí)：插值表達(dá)式、數(shù)據(jù)綁定（v-html、v-text、v-bind、v-model）、事件綁定（v-on）、樣式綁定、循環(huán)（v-for）、顯示與隱藏（v-if、v-show）、過(guò)濾器（filters）、監(jiān)聽(tīng)器（watch）、計(jì)算屬性（computed）等；

組件：組件定義與使用、父子組件間的通信；
路由的使用：VueRouter；

網(wǎng)絡(luò)請(qǐng)求：axios的使用；
狀態(tài)管理(全局?jǐn)?shù)據(jù))：Vuex；

Vue CLI腳手架的使用；以上知識(shí)掌握后就要多實(shí)踐，找一個(gè)網(wǎng)頁(yè)一步步去實(shí)踐開(kāi)發(fā)。

前端vue框架可以去Bilibili上免費(fèi)學(xué)習(xí)呀。

由于IT行業(yè)的迅猛發(fā)展，IT相關(guān)的培訓(xùn)機(jī)構(gòu)也是比較多的。每家機(jī)構(gòu)課程體系、授課模式等等皆大有不同，與其糾結(jié)選擇機(jī)構(gòu)不如靜下心好好自學(xué)一下。B站基本上每一家培訓(xùn)機(jī)構(gòu)的課程都有的，資源還是比較豐富的。如果你不知道哪家課程比較優(yōu)質(zhì)且適合自己的話可以嫌棄選擇2-3家機(jī)構(gòu)的課程聽(tīng)聽(tīng)看，選擇適合自己的。

眾多培訓(xùn)機(jī)構(gòu)中小編也給你小主推薦一套不錯(cuò)前端Vue框架視頻，可以了解一下。

反正這個(gè)男人我是“愛(ài)了”呀……??????

明明可以靠臉吃飯……請(qǐng)收下小編的膝蓋??

如若不喜也可以自己去B站選擇適合的。

Bilibili直達(dá)鏈接：https://www.bilibili.com/video/BV1Zy4y1K7SH

關(guān)注我一起交流學(xué)習(xí)

前端程序員四年

關(guān)注Web前端進(jìn)階指南，跟程序員小強(qiáng)一起學(xué)習(xí)前端

如何學(xué)習(xí)Vue框架？我來(lái)說(shuō)說(shuō)我當(dāng)時(shí)怎么學(xué)的？

首先請(qǐng)?jiān)试S我講一下大道理哈：

1、要明白庫(kù)和框架的區(qū)別

2、要明白設(shè)計(jì)思想

3、然后去掌握基礎(chǔ)，隨后做項(xiàng)目實(shí)操

庫(kù)和框架的區(qū)別

這玩意吧，說(shuō)白了庫(kù)就是你寫(xiě)代碼的時(shí)候要使用的，就像JQuery，我要寫(xiě)某種效果的時(shí)候，直接拿過(guò)來(lái)某個(gè)函數(shù)或方法，例如：slideToggle()、fadeIn()、hide()等等一系列的方法，庫(kù)里已經(jīng)幫你封裝好了，你拿過(guò)來(lái)直接使用就行。用不用是你的事，用了也不影響你的代碼。

庫(kù)是將代碼集合成一個(gè)產(chǎn)品，庫(kù)是我們調(diào)用庫(kù)中的方法實(shí)現(xiàn)自己的功能。

而這個(gè)框架呢，是一個(gè)領(lǐng)域，是一套完整的解決方案，你用就得全部用，而且得按照框架規(guī)定的寫(xiě)代碼，由不得自己亂來(lái)，你亂來(lái)你就得不到想要的效果。

框架幫我們調(diào)用，框架是庫(kù)的升級(jí)版。

設(shè)計(jì)思想

說(shuō)設(shè)計(jì)思想有點(diǎn)不準(zhǔn)確，準(zhǔn)確來(lái)說(shuō)應(yīng)該是架構(gòu)模式，但我用設(shè)計(jì)思想來(lái)表達(dá)什么呢？就是要明白Vue如何運(yùn)行的，實(shí)現(xiàn)原理是什么？

1、MVC

這是我們學(xué)編程的時(shí)候經(jīng)常聽(tīng)到的一句話，用到框架時(shí)少不了它，那它究竟是何意呢？

• Model 數(shù)據(jù)模型（專門(mén)用來(lái)操作數(shù)據(jù)，數(shù)據(jù)的CRUD）

• View 視圖（對(duì)于前端來(lái)說(shuō)，就是頁(yè)面）

• Controller 控制器（是視圖和數(shù)據(jù)模型溝通的橋梁，用于處理業(yè)務(wù)邏輯）

這就是MVC的來(lái)源，將程序劃分為三大塊，每塊都有自己的功能，但有缺點(diǎn)，前端寫(xiě)頁(yè)面，加效果的時(shí)候，需要把所有的DOM操作寫(xiě)在頁(yè)面中，頻繁的操作代碼，不僅讓頁(yè)面變得沉重起來(lái)，也讓工作了加大了不少。

2、MVVM組成

Vue就是基于MVVM模式實(shí)現(xiàn)的一套框架

• M：model數(shù)據(jù)模型，如對(duì)象，數(shù)組等等。

• V：view視圖

• VM：ViewModel 視圖模型

VUE允許你將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JAVASCRIPT以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方。雖然沒(méi)有完全遵循 MVVM 模型，Vue 的設(shè)計(jì)無(wú)疑受到了它的啟發(fā)。因此在文檔中經(jīng)常會(huì)使用 vm (ViewModel 的簡(jiǎn)稱) 這個(gè)變量名表示 Vue 實(shí)例。

學(xué)習(xí)Vue要轉(zhuǎn)化思想

不要在想著怎么操作DOM，而是想著如何操作數(shù)據(jù)！！！在那剛開(kāi)始學(xué)習(xí)的時(shí)候，你會(huì)感覺(jué)到很濃的數(shù)據(jù)綁定的語(yǔ)法，我相信你會(huì)喜歡上他的。

實(shí)操，寫(xiě)就完事了

看完了上面的內(nèi)容，就要帶著思想去學(xué)習(xí)，堅(jiān)持就是勝利！

我剛開(kāi)始學(xué)習(xí)的時(shí)候，看了一些設(shè)計(jì)原理，思想，覺(jué)得挺不錯(cuò)，說(shuō)白了就是了解一下市場(chǎng)，然后上Vue官網(wǎng)看教程，真的很詳細(xì)，我覺(jué)得啥也不懂代碼的人也能跟著學(xué)起來(lái)，踏實(shí)的走一遍，切記中間不要停頓，我之前就是，學(xué)一半，中間隔了好幾個(gè)月，然后又重頭學(xué)的。

通過(guò)官網(wǎng)的教程可以非常容易的入門(mén)vue,然后試著自己寫(xiě)界面！平時(shí)用H5寫(xiě)頁(yè)面，學(xué)會(huì)它，就可以把h5頁(yè)面用Vue寫(xiě)，熟練了就好了，這樣就算是半個(gè)Vue實(shí)操者了。

接下如果公司有項(xiàng)目，就要大膽嘗試，我當(dāng)初公司有項(xiàng)目，還好實(shí)操了，不過(guò)剛開(kāi)始賊費(fèi)勁，不少麻煩人。

如果沒(méi)有，網(wǎng)上有教程，全套的，可以自己購(gòu)買(mǎi)下載學(xué)習(xí)。

關(guān)注Web前端進(jìn)階指南，跟程序員小強(qiáng)一起學(xué)習(xí)前端，我會(huì)一步步的讓小白進(jìn)階前端。

關(guān)于“請(qǐng)問(wèn)如何學(xué)習(xí)前端Vue框架？”的問(wèn)題回答完了。如果你覺(jué)得我的回答對(duì)你有用，請(qǐng)關(guān)注一下點(diǎn)個(gè)贊，后續(xù)我會(huì)繼續(xù)輸出科技方面的文章問(wèn)答噠，謝謝哦！

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

在進(jìn)行Vue項(xiàng)目開(kāi)發(fā)過(guò)程中，我們可以通過(guò)script標(biāo)簽引入式寫(xiě)法來(lái)引入vue或者是nodejs自帶的包管理工具npm安裝vue。并且通過(guò)new Vue（）進(jìn)行新建一個(gè)Vue的實(shí)例對(duì)象，其下有很多屬性，包括el、data、methods、computed、watch等等，el為指向頁(yè)面的節(jié)點(diǎn)元素，data存儲(chǔ)數(shù)據(jù)，數(shù)據(jù)類型包括simple datatype（簡(jiǎn)單數(shù)據(jù)類型）以及complex datatype（復(fù)雜數(shù)據(jù)類型），用插值表達(dá)式{{}}顯示，在插值顯示的時(shí)候，不需要寫(xiě)上data，methods內(nèi)存儲(chǔ)方法，通過(guò)fn（）的形式調(diào)用方法，computed內(nèi)存儲(chǔ)也是方法，但是其為計(jì)算數(shù)據(jù)，復(fù)雜邏輯的應(yīng)該存儲(chǔ)在computed中，計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，由于computed帶有一層緩存，所以只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新運(yùn)行，而methods則是調(diào)用一次生成一次，computed中的方法調(diào)用時(shí)不需要加（）的，watch為監(jiān)聽(tīng)，監(jiān)控，監(jiān)聽(tīng)data中的屬性值也可以監(jiān)控對(duì)象，存在兩個(gè)參數(shù)（currentValue當(dāng)前值和prevValue之前值）。

在Vue中，html的任何屬性都不能用{{}}（插值表達(dá)式）來(lái)進(jìn)行設(shè)置，要用v-bind：來(lái)進(jìn)行屬性綁定，v-bind：可以簡(jiǎn)寫(xiě)為 ：，當(dāng)我們需要對(duì)事件進(jìn)行監(jiān)聽(tīng)的時(shí)候需要用v-on：來(lái)進(jìn)行事件綁定，v-on：可以簡(jiǎn)寫(xiě)為@，v-once單次渲染，v-html渲染html，在input、select、textarea中我們可以用v-model：進(jìn)行雙向數(shù)據(jù)綁定，可以用v-for進(jìn)行數(shù)據(jù)循環(huán)，v-if/v-else-if/v-else進(jìn)行數(shù)據(jù)判斷，利用v-show顯示與隱藏DOM節(jié)點(diǎn)，在Vue中還存在很多修飾符如取消事件冒泡（.stop），回車鍵（.enter），空格鍵（.space），取消默認(rèn)事件（.prevent）等等，可以對(duì)DOM設(shè)置ref屬性進(jìn)行本地指向，類似于id，當(dāng)我們對(duì)一個(gè)對(duì)象進(jìn)行v-for循環(huán)時(shí)要對(duì)該對(duì)象設(shè)置key值，起到標(biāo)識(shí)唯一性，便于檢測(cè)以及提高性能的作用。

在Vue的實(shí)例對(duì)象下面還存在很多鉤子函數(shù)，總體分為三大塊（創(chuàng)建、更新、銷毀）：

1、創(chuàng)建階段，存在beforeCreate(){}、created(){}、beforeMount(){}、mounted(){}等鉤子函數(shù)；

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

3、銷毀階段，存在beforeDestroy(){}、destroyed(){}等鉤子函數(shù)；上述鉤子函數(shù)不包括全部，一個(gè)生命周期內(nèi)存在很多鉤子函數(shù)，不能一一列舉。

以上就是我對(duì)Vue基礎(chǔ)知識(shí)技術(shù)的總結(jié)，Vue項(xiàng)目開(kāi)發(fā)部分留待Vue項(xiàng)目開(kāi)發(fā)技術(shù)總結(jié)。

對(duì)于初學(xué)者的話，建議先去官網(wǎng)閱讀教程，通過(guò)官網(wǎng)的教程可以非常容易的入門(mén)vue,然后試著自己寫(xiě)界面！

首先要學(xué)習(xí)前端頁(yè)面重構(gòu)。包括PC端網(wǎng)站布局、HTML5+CSS3基礎(chǔ)、WebApp頁(yè)面布局等等，打好前端開(kāi)發(fā)的基礎(chǔ)。然后要學(xué)JavaScript高級(jí)程序設(shè)計(jì)、PC端全棧開(kāi)發(fā)的知識(shí)。包括原生JavaScript交互功能開(kāi)發(fā)、面向?qū)ο筮M(jìn)階與ES5/ES6/ES7應(yīng)用、JavaScript工具庫(kù)自主研發(fā)、jQuery經(jīng)典交互特效開(kāi)發(fā)、PHP+MySQL后端基礎(chǔ)、前端工程化與模塊化應(yīng)用等。前面的知識(shí)都掌握了，就可以學(xué)框架、混合開(kāi)發(fā)了。包括Node.js后端開(kāi)發(fā)、Vue.js前端框架、React前端框架、混合開(kāi)發(fā)(Hybrid,RN)、Angular前端框架等等。

如果是前端開(kāi)發(fā)者的話，那很簡(jiǎn)單，你已經(jīng)知道了8，框架最多是2

先學(xué)習(xí)html和jqery在去官網(wǎng)看文檔