Vue.js(讀音 /vjuː/, 相似於 view) 是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,而且很是容易學習,很是容易與其它庫或已有項目整合。另外一方面,Vue 徹底有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的複雜單頁應用。php
Vue.js就是一個用於搭建相似於網頁版知乎這種表單項繁多,且內容須要根據用戶的操做進行修改的網頁版應用。css
顧名思義,單頁應用通常指的就是一個頁面就是應用,固然也能夠是一個子應用,好比說知乎的一個頁面就能夠視爲一個子應用。單頁應用程序中通常交互處理很是多,並且頁面中的內容須要根據用戶的操做動態變化。html
產品是絕對須要反覆修改的,修改可能會致使DOM的關聯與嵌套層次要發生改變從而使jquery結構相關代碼變的異常複雜,vue.js能夠解決這個問題前端
你是否還記得你當初寫JQuery的時候,有寫過('#xxx').parent().parent().parent()這種代碼呢?當你第一次寫的時候,你以爲頁面元素很少,不就是找這個元素的爸爸的爸爸的爸爸嗎,我大不了在註釋裏面寫清楚這個元素的爸爸的爸爸的爸爸不就行了。可是萬一過幾天以後你的項目組長或者你的產品經理忽然對你作的網頁提出修改要求,這個修改要求將會影響頁面的結構,也就是DOM的關聯與嵌套層次要發生改變,那麼(‘#xxx’).parent().parent().parent()可能就會變成$(‘#xxx’).parent().parent().parent().parent().parent()了。
這還不算什麼,等之後產品迭代愈來愈快,修改愈來愈多,並且頁面中相似的關聯和嵌套DOM元素不止一個,那麼修改起來將很是費勁。並且JQuery選擇器查找頁面元素以及DOM操做自己也是有性能損失的,可能到時候打開這個頁面,會變得愈來愈卡,而你卻無從下手。
這個時候若是你學過Vue.js,那麼這些抱怨將不復存在。
vue
講到JQuery,就不得不說到JavaScript的DOM操做了。若是你用JQuery來開發一個知乎,那麼你就須要用JQuery中的各類DOM操做方法去操做HTML的DOM結構了。java
如今咱們把一個網頁應用抽象一下,那麼HTML中的DOM其實就是視圖,一個網頁就是經過DOM的組合與嵌套,造成了最基本的視圖結構,再經過CSS的修飾,在基本的視圖結構上「化妝」讓他們看起來更加美觀。最後涉及到交互部分,就須要用到JavaScript來接受用戶的交互請求,而且經過事件機制來響應用戶的交互操做,而且在事件的處理函數中進行各類數據的修改,好比說修改某個DOM中的innerHTML或者innerText部分。node
由於Vue.js有聲明式,響應式的數據綁定,與組件化的開發,而且還使用了Virtual DOM這個看名字就以爲高大上的技術。jquery
而這種綁定關係,在圖上是以input 標籤的v-model屬性來聲明的,所以你在別的地方可能也會看到有人粗略的稱vue.js爲聲明式渲染的模版引擎。git
可是如今咱們作單頁應用,頁面交互和結構十分複雜,一個頁面上就有許許多多的模塊須要編寫,並且每每一個模塊的代碼量和工做量就很是龐大,若是還按照原先的方法來開發,那麼會累死人。並且遇到之後的產品需求變動,修改起來也很是麻煩,生怕動了其中一個div以後,其餘div跟着雪崩,整個頁面所有亂套,或者因爲JavaScript的事件冒泡機制,致使修改一些內層的DOM事件處理函數以後,出現各類莫名其妙的詭異BUG。github
在面向對象編程中,咱們可使用面向對象的思想將各類模塊打包成類或者把一個大的業務模塊拆分紅更多更小的幾個類。在面向過程編程中,咱們也能夠把一些大功能拆分紅許多函數,而後分配給不一樣的人來開發。
在前端應用,咱們是否也能夠像編程同樣把模塊封裝呢?這就引入了組件化開發的思想。
Vue.js經過組件,把一個單頁應用中的各類模塊拆分到一個一個單獨的組件(component)中,咱們只要先在父級應用中寫好各類組件標籤(佔坑),而且在組件標籤中寫好要傳入組件的參數(就像給函數傳入參數同樣,這個參數叫作組件的屬性),而後再分別寫好各類組件的實現(填坑),而後整個應用就算作完了。
a、問題
如今的網速愈來愈快了,不少人家裏都是幾十甚至上百M的光纖,手機也是4G起步了,按道理一個網頁才幾百K,並且瀏覽器自己還會緩存不少資源文件,那麼幾十M的光纖爲何打開一個以前已經打開過,已經有緩存的頁面仍是感受很慢呢?
b、緣由
(1)、瀏覽器自己處理DOM也是有性能瓶頸的
(2)、用JQuery或者原生的JavaScript DOM操做函數對DOM進行頻繁操做的時候,瀏覽器要不停的渲染新的DOM樹
這就是由於瀏覽器自己處理DOM也是有性能瓶頸的,尤爲是在傳統開發中,用JQuery或者原生的JavaScript DOM操做函數對DOM進行頻繁操做的時候,瀏覽器要不停的渲染新的DOM樹,致使頁面看起來很是卡頓。
而Virtual DOM則是虛擬DOM的英文,簡單來講,他就是一種能夠預先經過JavaScript進行各類計算,把最終的DOM操做計算出來並優化,因爲這個DOM操做屬於預處理操做,並無真實的操做DOM,因此叫作虛擬DOM。最後在計算完畢才真正將DOM操做提交,將DOM操做變化反映到DOM樹上。
a、介紹 - vue.js官方文檔的基礎部分硬着頭皮看一遍
個人建議是,先把介紹 - vue.js官方文檔的基礎部分硬着頭皮看一遍。除了組件這個小節涉及到了不少晦澀難懂的名詞之外,前面幾章徹底就是把Vue.js看成一個模版引擎來用。
b、ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對Node.js也要有所瞭解
而後開始學習ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對Node.js也要有所瞭解。
c、看網上各類實戰視頻以及文章還有別人開源的源代碼
最後組件部分先大體看一遍,瞭解組件裏面都有哪些概念以後,開始看網上各類實戰視頻以及文章還有別人開源的源代碼。
而ECMAScript6就是新一代的JavaScript語言。
Webpack是一個前端打包和構建工具。若是你以前一直是手寫HTML,CSS,JavaScript,而且經過link標籤將CSS引入你的HTML文件,以及經過Script標籤的src屬性引入外部的JS腳本,那麼你確定會對這個工具感到陌生。沒關係,咱們先來了解一下爲何要用Webpack,而後帶着緣由去學習就行了。
前面說了,作一個單頁應用程序自己就至關複雜,並且在作的時候確定會使用到不少素材和別的第三方庫,咱們該如何去管理這些東西呢?
還有前面講到了Webpack是一個前端打包工具,前端代碼爲何要打包呢?由於單頁應用程序中用到不少素材,若是每個素材都經過在HTML中以src屬性或者link來引入,那麼請求一個頁面的時候,可能瀏覽器就要發起十屢次請求,每每請求的這些資源都是一些腳本代碼或者很小的圖片,這些資源自己才幾k,下載連1秒都不須要,可是因爲HTTP是應用層協議,它的下層是TCP這個運輸層協議,TCP的握手和揮手過程消耗的時間可能比下載資源自己還要長,因此須要把這些小文件所有打包成一個文件,這樣只要一次TCP握手和揮手的過程,就把多個資源給下載下來了,而且多個資源因爲都是共享一個HTTP請求,因此head等部分也是共享的,至關於造成了規模效應,讓網頁展示更快,用戶體驗更好。
a、Node.js是一個服務端的JavaScript運行環境
Node.js是一個服務端的JavaScript運行環境,經過Node.js能夠實現用JavaScript寫獨立程序。
b、Node.js能夠寫獨立程序(Webpack就是Node.js寫的)
像咱們以前提到的Webpack就是Node.js寫的,因此做爲一個前端開發,即便你不用Node.js寫獨立程序,也得配一個Node.js運行環境,畢竟不少前端工具都是使用它寫的。
c、NPM是一個node.js的包管理器(相似java的maven(包的依賴管理),php也有一個相似的)。
NPM是一個node.js的包管理器。咱們在傳統開發的時候,JQuery.js大多都是百度搜索,而後去官網下載,或者直接引入CDN資源,這種方法太過於麻煩。若是之後遇到其餘的包,這個包的代碼自己可能還調用了其餘的包(也稱這個包和其餘的那幾個包存在依賴關係),那麼咱們要在本身的項目中引入一個包將變得十分困難。如今咱們有了NPM這個包管理器,直接能夠經過
npm install xxx包名稱
的方式引入它,好比說
npm install vue
它能夠經過
npm install vue-cli -g
的方式安裝,後面的-g表示全局安裝的意思,意味着你能夠打開命令行以後直接經過vue命令調用它。
要講清楚這兩個東西,又得花費大量篇幅,因此這裏只是簡單提一下,先學好vue.js自己纔是最重要的。
用數據綁定的思想,vue能夠簡單寫單個頁面,也能夠寫一個大的前端系統,也能夠作手機app的界面。