什麼是Vue.js框架？

前文我們跟大家分享的是Vue.js簡易安裝和快速入門，本文我們主要和大家分享Vue.js框架是什麼，為什麼要選擇它？這篇文章為大家介紹目前前端技術使用的趨勢，以及Vue.js的優點和適用場景等，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

Vue.js是建立資料驅動的 web 介面的漸進式框架。 Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和組合的視圖元件。它不僅易於上手，還便於與第三方函式庫或既有專案整合。

那麼「大白話，講程式設計」系列又回來了，這個系列我們一起學習的是Vue.js基礎。你沒看錯，是基礎。所以，就算你入行不久，相信你在的大白話風格下，也能學會。

但還是希望你有開發過html，css，javascript的專案經驗，如果你連一點專案經驗都沒有，也或你早已掌握Vue.js的知識，那麼這個系列不適合你目前的學習階段。

1 學習目標

透過這一節，你會學會：

1.目前前端技術使用的趨勢

# 2.什麼是MVVM

3.Vue.js的優點

4.Vue.js的兩大核心

5.Vue.js的適用場景

2 誕生背景

近年來，得益於手機設備的普及和性能的提升，移動端的web需求大量增加，產生了一種叫webapp的東西，也就是行動端的網頁應用程式。

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

（效果直逼原生APP）

這種webapp它們不只像h5行銷網頁一樣有酷炫的效果，它們還有複雜的點擊、輸入、下拉選擇，視圖切換等複雜的互動。在這樣的業務需求下，我們還是沿用PC端的開發方案，難免會不太適合。比如：視圖切換。

在PC端，視圖切換我們會用3499910bf9dac5ae3c52d5ede7383485標籤進行頁面的跳轉，但如果在行動端，那就歇菜了，你會遇到這樣的畫面：

（等到花兒都謝了）

這時候用戶只能等.....3秒，5秒，8秒... .很難想像，在一個需要頻繁切換視圖的webapp裡面，使用3499910bf9dac5ae3c52d5ede7383485標籤去實現，對用戶來說是很不友好的，換你你也不願意等那麼久，反正我是不願意了....

此外，接收使用者輸入的同時，很可能要及時更新視圖，例如使用者輸入不同的內容，頁面就會相對應更新，點擊不同的選項，就會顯示不同的狀態等等互動效果。一旦這種互動多了，你要手動地進行操作，程式碼就容易變得複雜和難以維護。

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

3 什麼是MVVM

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

那麼，我們該怎麼理解MVVM呢？

上圖中，左側的View相當於我們的DOM內容，我們所看到的頁面視圖，右側的Model相當於我們的資料對象，例如一個對象的資訊：

{ 

name:"张三", 
age:21,

}

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

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

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

這裡我們不去分析具體這3個框架哪個比較好，關於技術選型，每個開發團隊的情況都不一樣，考慮的因素也不一樣，只要合適自己就好。這裡我們只說一下Vue.js的優點：

1.Vue.js更輕量更快

2.比較容易上手，易學

4 Vue的核心

鋪墊了這麼多，終於講到Vue的核心了。

那麼，我們就來認識Vue.js，這裡摘取一段官網對它的介紹：

透過盡可能簡單的API實現回應的資料綁定和組合的視圖元件

這句話有兩個關鍵字：資料綁定和視圖元件。

Vue的資料驅動：資料改變驅動了視圖的自動更新，傳統的做法你得手動改變DOM來改變視圖，vuejs只需要改變數據，就會自動改變視圖，一個字：爽。再也不用你去操心DOM的更新了，這就是MVVM思想的實現。

視圖組件化：把整一個網頁的分割成一個個區塊，每個區塊我們可以看成一個元件。網頁由多個元件拼接或嵌套組成。看下圖：

具體在開發過程中怎樣實作一個元件，到底哪些區塊可以分割成一個元件，後面的章節我們再一一介紹，這裡你只需要知道，在Vue.js中，網頁是可以看成多個元件組成的即可。

5 適用場景

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

如果你的專案中有多個部分是相同的，並且可以封裝成一個元件，那麼，你可以試試用Vue.js。

此外，Vue.js的核心實作中使用了ES5的Object.defineProperty特性，IE8及以下版本瀏覽器是不相容的，所以，你的專案需要與這些較低版本的瀏覽器相容的話，那麼，Vue.js就不適用了。

畢竟，開發一個專案的目的不是為了使用某個框架。

6 本節小結

為了更能滿足目前行動webapp專案的開發需求，MVVM框架誕生，而Vue.js就是這樣的一種js框架，其兩大核心：數據驅動和組件化。

相關推薦：

Vue.js框架實作火車票查詢系統

vue.js實例物件與元件樹實例詳解

Vue.js元件通訊實例分享

#

以上是什麼是Vue.js框架？的詳細內容。更多資訊請關注PHP中文網其他相關文章！