像現在比較火的就是vue和react，你要是不會這個很難找到工作的~你可以自己上網課看看書，如果要是準備找工作建議去報個培訓機構啥的，這樣學的快~

你好，我自己主要是做後臺開發，對前端稍有了解，所以我覺得初學者更快入門web前端，以下是關於web前端方面的教程知識點。web前端是app開發、h5網頁等主流的程式語言，而且待遇報酬高，較其他計算機語言更加容易入門。

1）先學html5+css基本語法

2）學些css的框架，比如less，bootstrap等

3）js是必然會涉及的，學jquery吧，簡單易學，例項多

4）別光看，多動手，把1）到3）串起來，做個專案，或虛擬一個，比如購物車，或部落格

幾個要點，供參考

專注一條線，前端涉及知識點太多，別都學，雜而不精。

前端+HTML5德 學習內容：

第一階段：前端頁面重構：PC端網站佈局、HTML5+CSS3基礎專案、WebAPP頁面佈局；

第二階段：JavaScript高階程式設計：原生JavaScript互動功能開發、面向物件開發與ES5/ES6、JavaScript工具庫自主研發；

第三階段：PC端全棧專案開發：jQuery經典特效互動開發、HTTP協議，Ajxa進階與後端開發、前端工程化與模組化應用、PC端網站開發、PC端管理資訊系統前端開發；第四階段：移動端專案開發：Touch端專案、微信場景專案、應用Vue.js開發WebApp專案、應用Ionic開發WebApp專案、應用React.js開發WebApp；

第五階段：混合（Hybrid）開發：各類混合應用開發；

第六階段：NodeJS全棧開發：WebApp後端系統開發。

主流框架

下面介紹了5種比較流行的前端框架

1. AngularJS

Angular JS 是一個有Google維護的開源前端web應用程式框架。它最初由Brat Tech LLC的Misko Hevery於2009年開發出來。Angular JS是一個模型-檢視-控制器（MVC）模式的框架，目的在於使HTML動態化。與其他框架相比，它可以快速生成程式碼，並且能非常輕鬆的測試程式獨立的模組。最大的優勢是在你修改程式碼後，它會立即重新整理前端UI，能馬上體現出來。它是用於SPAs（單頁面應用）開發中最常用的javascript框架。Angular JS是一個全功能的框架，可能也是最流行的框架。缺點就是學習起來有點困難。

優點：

模板功能強大豐富，並且是宣告式的，自帶了豐富的Angular指令；

是一個比較完善的前端MVVM框架，包含模板，資料雙向繫結，路由，模組化，服務，過濾器，依賴注入等所有功能；

ng模組化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可複用的程式碼，對於敏捷開發的團隊來說非常有幫助，我們的專案從上線到目前，UI變化很大，在摸索中迭代產品，但是js的程式碼基本上很少改動。

良好的文件。

雙向資料繫結簡化了流程的某些部分。

缺點：

驗證功能錯誤資訊顯示比較薄弱，需要寫很多模板標籤；

ngView只能有一個，不能巢狀多個檢視，雖然有angular-ui/ui-router 解決，但ui-router 對於URL的控制不是很靈活，必須是巢狀式的；

對於特別複雜的應用場景，貌似效能有點問題，特別是在Windows下使用chrome瀏覽器，不知道是記憶體洩漏了還是什麼其他問題，沒有找到好的解決方案，奇怪的是在IE10下反而很快，對此還在觀察中；

ng提倡在控制器裡面不要有操作DOM的程式碼，對於一些jQuery 外掛的使用，如果想不破壞程式碼的整潔性，需要寫一些directive去封裝外掛，但是現在有很多外掛的版本已經支援Angular了，最好能夠和cordova外掛結合進行混合式開發；

Angular 太笨重了。

雙向資料繫結檢查資料模型的變化，這可能導致可能的效能問題並且更快地耗盡裝置的電池。

理解程式碼和除錯困難。

2. ReactJS

React JS 不像一個框架反而更像一個庫，但絕對是值得一提。AngularJS是一個MVC模式的框架，但ReactJS是一個由Facebook開發的非MVC模式的框架。它允許你建立一個可複用的UI元件，Facebook和Instagram的使用者介面就是用ReactJS開發的。你可以用React進行很複雜的更新並且應用執行仍然很快，因為框架本身能很快的處理他們。你也能寫許多可複用的小檔案，而不是編寫一個大檔案。對於要處理大量資料的大型程式來說這是最好的選擇。這個框架的缺點之一就是它只處理應用程式的檢視層，所以你可能需要結合其他工具來一起處理。

優點：

1.掌握起來很容易。

2.在React中很容易維護隔離的元件。

3.元件的不斷重新渲染提供了有效的安排

複雜。

4.方便的架構 - Flux - 與MVC競爭激烈。單向資料流

提供資料和DOM元素的可維護性和有效安排。

它是當今廣泛使用的最輕量級框架。

缺點：

1.DOM操作庫的一些問題是可能的（例如，jQuery）。

2.頻繁的重新渲染可能會減慢處理大量資料的APP的工作。

3. MeteorJS

MeteorJS 釋出於2012年，涵蓋了開發週期的所有階段，包括後端開發、前端開發、資料庫管理。它是一個由NodeJS編寫的開源框架。MeteorJS是一個簡單和容易理解的框架，所有的包和框架都可以輕鬆使用。程式碼層的所有改變能夠立即更新到UI介面，服務的和客戶端都只需要用javascript開發。他主要用於IKEA和馬自達等公司的實時應用開發。不建議用於大型或複雜的程式。

優點：

1.易學

2.偏向客戶端

3.響應式

4.程式碼高度重用

缺點：

1.運算密集型應用能力差

2.成熟度不高

3.約束少

4.初次載入時間長

4. Vue.JS

在瞭解React和Angular後，你可以嘗試瞭解下VueJS，一個用於使用者介面開發的漸進式javascript框架。它是一個能快速開發和跨平臺的方案。與Angular和React相比較，它被證明速度更快，並且吸收了這兩者的優點。Vue的創始人是尤雨溪，他曾在Google工作並使用Angular。他的想法是直接抽取出他喜歡的Angular的特性，不再引入其他複雜的理念而打造一款新的框架。所有的Vue模板都是基於HTML，你可以在GitHub上找到很多資源。它也提供雙向繫結和服務端渲染。在Vue中，你可以使用模板語法或使用JSX直接編寫渲染函式。

Vue.js 是一套構建使用者介面的漸進式框架。

Vue 只關注檢視層， 採用自底向上增量開發的設計。

Vue 的目標是透過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

優點：

1.雙向資料繫結 也就是所謂的響應式資料繫結。這裡的響應式不是@media 媒體查詢中的響應式佈局，而是指vue.js會自動對頁面中某些資料的變化做出同步的響應。

也就是說，vue.js會自動響應資料的變化情況，並且根據使用者在程式碼中預先寫好的繫結關係，對所有繫結在一起的資料和檢視內容都進行修改。而這種繫結關係，就是以input 標籤的v-model屬性來宣告的，因此你在別的地方可能也會看到有人粗略的稱vue.js為宣告式渲染的模版引擎。

這也就是vue.js最大的優點，透過MVVM思想實現資料的雙向繫結，讓開發者不用再操作dom物件，有更多的時間去思考業務邏輯。

2.元件化開發

在前端應用，我們是否也可以像程式設計一樣把模組封裝呢？這就引入了元件化開發的思想。

Vue.js透過元件，把一個單頁應用中的各種模組拆分到一個一個單獨的元件（component）中，我們只要先在父級應用中寫好各種元件標籤（佔坑），並且在元件標籤中寫好要傳入元件的引數（就像給函式傳入引數一樣，這個引數叫做元件的屬性），然後再分別寫好各種元件的實現（填坑），然後整個應用就算做完了。

3.Virtual DOM

現在的網速越來越快了，很多人家裡都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網頁才幾百K，而且瀏覽器本身還會快取很多資原始檔，那麼幾十M的光纖為什麼開啟一個之前已經開啟過，已經有快取的頁面還是感覺很慢呢？這就是因為瀏覽器本身處理DOM也是有效能瓶頸的，尤其是在傳統開發中，用JQuery或者原生的JavaScript DOM操作函式對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。

而Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先透過JavaScript進行各種計算，把最終的DOM操作計算出來並最佳化，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。

4.輕量高效

5. BackboneJS

Backbone是一個MVP模型，它依賴於Underscore.js庫。它旨在開發單頁面web應用，並保證不同部分的web應用同步。它採用命令式的程式設計風格，與使用宣告式程式設計風格的Angular不同。Backbone也與後端程式碼同步更新，當模型改變後HTML頁面也隨之改變。Backbone被用來構建Groupon, Airbnb, Digg, Foursquare, Hulu, Soundcloud, Trello等許多知名應用。

優點：

將資料和介面很好的分離開來。

將事件的繫結很好的剝離出來，便於管理和迭代。

使得Javascript程式的模組化更加清晰、明瞭。