教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

前端:Vue.js框架是什么,為什么選擇它?

更新時(shí)間:2017年11月20日14時(shí)51分 來源:傳智播客 瀏覽次數(shù):

“大白話,講編程”系列又回來了,這個(gè)系列我們一起學(xué)習(xí)的是Vue.js基礎(chǔ)知識(shí)。你沒看錯(cuò),是基礎(chǔ)知識(shí)。所以,哪怕你入行不久,相信你在的大白話風(fēng)格下,也能學(xué)會(huì)。


但還是希望你有開發(fā)過html,css,javascript的項(xiàng)目經(jīng)驗(yàn),如果你連一點(diǎn)項(xiàng)目經(jīng)驗(yàn)都沒有,亦或者你早已掌握Vue.js的知識(shí),那么這個(gè)系列不適合你當(dāng)前的學(xué)習(xí)階段。


1、學(xué)習(xí)目標(biāo)


通過這一節(jié),你會(huì)學(xué)會(huì):


(1)目前前端技術(shù)使用的趨勢

(2)什么是MVVM

(3)Vue.js的優(yōu)點(diǎn)

(4)Vue.js的兩大核心

(5)Vue.js的適用場景


2、誕生背景


近幾年來,得益于手機(jī)設(shè)備的普及和性能的提升,移動(dòng)端的web需求大量增加,產(chǎn)生了一種叫webapp的東西,也就是移動(dòng)端的網(wǎng)頁應(yīng)用。


它們功能越來越復(fù)雜,交互也越來越酷炫,功能與效果越來越接近于原生的APP。比如下面這些:


前端Vue.js框架
前端Vue.js框架前端Vue.js框架

這種webapp它們不僅僅像h5營銷網(wǎng)頁一樣有酷炫的效果,它們還有復(fù)雜的點(diǎn)擊、輸入、下拉選擇,視圖切換等復(fù)雜的交互。在這樣的業(yè)務(wù)需求下,我們還是沿用PC端的開發(fā)方案,難免會(huì)不太合適。比如:視圖切換。


在PC端,視圖切換我們會(huì)用標(biāo)簽進(jìn)行頁面的跳轉(zhuǎn),但如果在移動(dòng)端,那就歇菜了,你會(huì)遇到這樣的畫面:


前端Vue.js框架

(等到花兒都謝了)


這個(gè)時(shí)候用戶只能等.....3秒,5秒,8秒.......很難想象,在一個(gè)需要頻繁切換視圖的webapp里面,使用標(biāo)簽去實(shí)現(xiàn),對(duì)用戶來說是很不友好的,換你你也不愿意等那么久,反正我是不愿意了....


此外,接收用戶輸入的同時(shí),很可能要及時(shí)更新視圖,比如用戶輸入不同的內(nèi)容,頁面就會(huì)相對(duì)應(yīng)進(jìn)行更新,點(diǎn)擊不同的選項(xiàng),就會(huì)顯示不同的狀態(tài)等等交互效果。一旦這種交互多了,你要手動(dòng)地進(jìn)行操作,代碼就容易變得復(fù)雜和難以維護(hù)。


為了解決webapp這些的體驗(yàn)和開發(fā)上的不足,我們決定學(xué)習(xí)并使用一個(gè)MVVM框架——Vue.js


前端Vue.js框架

3、什么是MVVM


MVVM可以拆分成:View --- ViewModel --- Model三部分 ,看下面的視圖:


前端Vue.js框架

那么,我們?cè)趺蠢斫釳VVM呢?


上圖中,左側(cè)的View相當(dāng)于我們的DOM內(nèi)容,我們所看到的頁面視圖,右側(cè)的Model相當(dāng)于我們的數(shù)據(jù)對(duì)象,比如一個(gè)對(duì)象的信息:


前端Vue.js框架

而中間的監(jiān)控者就負(fù)責(zé)監(jiān)控兩側(cè)的數(shù)據(jù),并相對(duì)應(yīng)地通知另一側(cè)進(jìn)行修改。比如:你在Model層中修改了name的值為:“李四”,那么View視圖層顯示的“張三”也會(huì)自動(dòng)變成了“李四”,而這個(gè)過程就是有ViewModel來操作的,不需要你手動(dòng)地去寫代碼去實(shí)現(xiàn)(你不用再手動(dòng)操作DOM了)。


如果你寫過復(fù)雜的DOM操作,你就可以感受到它帶來的便利。


這就是MVVM框架,屬于MVVM的JS框架除了Vue.js,還有React.js,Angular.js。


這里我們不去分析具體這3個(gè)框架哪個(gè)更好,關(guān)于技術(shù)選型,每個(gè)開發(fā)團(tuán)隊(duì)的情況都不一樣,考慮的因素也不一樣,只要合適自己就好。這里我們只說一下Vue.js的優(yōu)點(diǎn):


(1)Vue.js更輕量更快

(2)更容易上手,易學(xué)


前端Vue.js框架

4、Vue的核心


鋪墊了這么多,終于講到了Vue的核心。


那么,我們就來認(rèn)識(shí)一下Vue.js,這里摘取一段官網(wǎng)對(duì)它的介紹:


通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件


這句話有兩個(gè)關(guān)鍵詞:數(shù)據(jù)綁定 和 視圖組件。


Vue的數(shù)據(jù)驅(qū)動(dòng):數(shù)據(jù)改變驅(qū)動(dòng)了視圖的自動(dòng)更新,傳統(tǒng)的做法你得手動(dòng)改變DOM來改變視圖,vuejs只需要改變數(shù)據(jù),就會(huì)自動(dòng)改變視圖,一個(gè)字:爽。再也不用你去操心DOM的更新了,這就是MVVM思想的實(shí)現(xiàn)。


視圖組件化:把整一個(gè)網(wǎng)頁的拆分成一個(gè)個(gè)區(qū)塊,每個(gè)區(qū)塊我們可以看作成一個(gè)組件。網(wǎng)頁由多個(gè)組件拼接或者嵌套組成??聪聢D:


前端Vue.js框架

具體在開發(fā)過程中怎樣實(shí)現(xiàn)一個(gè)組件,到底哪些區(qū)塊可以劃分成一個(gè)組件,后面的章節(jié)我們?cè)僖灰唤榻B,這里你只需要知道,在Vue.js中,網(wǎng)頁是可以看成多個(gè)組件組成的即可。


5、適用場景


如果你還在用jquery頻繁操作你的DOM來更新頁面的話,那么,你可以用Vue.js來解放你的DOM操作了。


如果你的項(xiàng)目中有多個(gè)部分是相同的,并可以封裝成一個(gè)組件,那么,你可以試試用Vue.js。


此外,Vue.js的核心實(shí)現(xiàn)中使用了ES5的Object.defineProperty特性,IE8及以下版本瀏覽器是不兼容的,所以,你的項(xiàng)目需要兼容這些較低版本的瀏覽器的話,那么,Vue.js就不適用了。


畢竟,開發(fā)一個(gè)項(xiàng)目的目的不是為了使用某個(gè)框架。


6、本節(jié)小結(jié)


為了更好滿足當(dāng)前移動(dòng)webapp項(xiàng)目的開發(fā)需求,MVVM框架誕生,而Vue.js便是這樣的一種js框架,其兩大核心:數(shù)據(jù)驅(qū)動(dòng)和組件化。


本文版權(quán)歸傳智播客前端與移動(dòng)開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!

作者:傳智播客前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院

首發(fā):http://metathetuscanyresort.com/web/

0 分享到:
和我們?cè)诰€交談!