Vue 簡介

大家好，今天我們開始一個新專題 — Vue。這個專題我們重點針對如何使用 Vue 開發(fā)項目。本文我們主要先介紹一下 Vue 是什么？

1. 什么是 Vue

什么是 Vue 呢？

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。 —官網(wǎng)

2. 為什么要使用 Vue

2.1 Vue.js 讓基于網(wǎng)頁的前端應(yīng)用程序開發(fā)起來更加方便

相信同學(xué)們一定或多或少做過網(wǎng)頁開發(fā)，如果你使用原生 JavaScript 或者 Jquery 來開發(fā)，那么不可避免的要大量操作 DOM，而 Vue.js 不同，因為 Vue.js 有聲明式，響應(yīng)式的數(shù)據(jù)綁定，與組件化的開發(fā)，并且還使用了 Virtual DOM 這個看名字就覺得高大上的技術(shù)，Vue.js 讓我們盡量避免了繁瑣的 DOM 操作，它可以根據(jù)數(shù)據(jù)的改變來驅(qū)動視圖的更新，這極大的提高了我們的開發(fā)效率。

2.2 Vue 與 React 對比

2.1 相似之處

React 和 Vue 都是 MVVM 框架，它們之間有很多相似之處：

1. 兩者都是用于創(chuàng)建 UI 的 JavaScript 庫；
2. 兩者的使用都快速輕便；
3. 兩者都是基礎(chǔ)組件式的開發(fā)；
4. 兩者都使用了虛擬 DOM。

2.2 不同之處

React 和 Vue 在某些方面也存在一定的差異：

• Vue 的數(shù)據(jù)可變的，通過對每一個屬性建立 Watcher 來監(jiān)聽，當(dāng)屬性變化的時候，響應(yīng)式的更新對應(yīng)的虛擬 DOM，而 React 則是基于數(shù)據(jù)不可變，React 需要通過 setState 來觸發(fā)渲染流程，同時可以通過 shouldComponentUpdate 來控制視圖是否更新;
• Vue 推薦使用模板語法，把 html、css、js 組合到一起，用各自的處理方式，通過模板引擎來處理。，而 React 則推薦使用 JSX 語法進(jìn)行書寫，React 的思路是 all in js，通過js生成html;
• React 中的 state 對象是不可變的，我們不能被直接改變 state 的值，而是需要通過使用 setState() 的方法去更新狀態(tài)，在 Vue 中，state 并不是必須的，數(shù)據(jù)由 data 屬性進(jìn)行管理，我們可以直接修改 data 屬性中的值。

3. Vue 的版本說明

Vue 從發(fā)布到現(xiàn)在經(jīng)歷了 3 個大的版本，目前最新的正式版本是 2.x。下面我們介紹一下三個版本：

• V1.x：基本已經(jīng)很少使用了;
• V2.x：目前的主流版本;
• V3.x：Vue3.0已正式發(fā)布。

本文我們主要是介紹 Vue2.x 版本的學(xué)習(xí)和使用，想要學(xué)習(xí) Vue1.x 版本的同學(xué)可以到 Vue 官網(wǎng)查看文檔進(jìn)行學(xué)習(xí)，部分同學(xué)可能對 Vue3.x 比較感興趣，這里同學(xué)們可以到 GitHub 上了解最新代碼。

4. Vue 的優(yōu)點

那么 Vue 有哪些優(yōu)點呢？

1. Vue 是一個輕量級框架。Vue 的體積只有幾十 kb，非常輕量；
2. Vue 簡單易學(xué)，對新手友好度高；
3. 雙向數(shù)據(jù)綁定。Vue 提供了雙向數(shù)據(jù)綁定 v-model 的語法糖，讓我們可以避免 DOM 操作；
4. 組件化開發(fā)。我們可以把頁面拆分成大大小小的組件，這樣大大提高了代碼的可復(fù)用率和可讀性。

5. 學(xué)習(xí)基礎(chǔ)

1. 掌握基本的Html、Css知識；
2. 對JavaScript基礎(chǔ)有所了解，并且有過實際使用經(jīng)驗。