什么是Vue.js框架為什么選擇它？(第一課)

更新時間：2017年10月17日 14:29:35 作者：前端君

Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術(shù)使用的趨勢，以及Vue.js的優(yōu)點和適用場景等，具有一定的參考價值，感興趣的小伙伴們可以參考一下

“大白話，講編程”系列又回來了，這個系列我們一起學習的是Vue.js基礎(chǔ)知識。你沒看錯，是基礎(chǔ)知識。所以，哪怕你入行不久，相信你在的大白話風格下，也能學會。

但還是希望你有開發(fā)過html，css，javascript的項目經(jīng)驗，如果你連一點項目經(jīng)驗都沒有，亦或者你早已掌握Vue.js的知識，那么這個系列不適合你當前的學習階段。

1 學習目標

通過這一節(jié)，你會學會：

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

2.什么是MVVM

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

4.Vue.js的兩大核心

5.Vue.js的適用場景

2 誕生背景

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

它們功能越來越復雜，交互也越來越酷炫，功能與效果越來越接近于原生的APP。比如下面這些：

（效果直逼原生APP）

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

在PC端，視圖切換我們會用<a>標簽進行頁面的跳轉(zhuǎn)，但如果在移動端，那就歇菜了，你會遇到這樣的畫面：

（等到花兒都謝了）

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

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

為了解決webapp這些的體驗和開發(fā)上的不足，我們決定學習并使用一個MVVM框架——Vue.js

3 什么是MVVM

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

那么，我們怎么理解MVVM呢？

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

{ 

name:"張三", 
age:21,

}

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

如果你寫過復雜的DOM操作，你就可以感受到它帶來的便利。

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

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

1.Vue.js更輕量更快

2.更容易上手，易學

4 Vue的核心

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

那么，我們就來認識一下Vue.js，這里摘取一段官網(wǎng)對它的介紹：

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

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

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

視圖組件化：把整一個網(wǎng)頁的拆分成一個個區(qū)塊，每個區(qū)塊我們可以看作成一個組件。網(wǎng)頁由多個組件拼接或者嵌套組成。看下圖：