Vue 簡(jiǎn)介

大家好，今天我們開(kāi)始一個(gè)新專(zhuān)題 — Vue。這個(gè)專(zhuān)題我們重點(diǎn)針對(duì)如何使用 Vue 開(kāi)發(fā)項(xiàng)目。本文我們主要先介紹一下 Vue 是什么？

1. 什么是 Vue

什么是 Vue 呢？

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

2. 為什么要使用 Vue

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

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

2.2 Vue 與 React 對(duì)比

2.1 相似之處

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

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

2.2 不同之處

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

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

3. Vue 的版本說(shuō)明

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

• 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é)可能對(duì) Vue3.x 比較感興趣，這里同學(xué)們可以到 GitHub 上了解最新代碼。

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

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

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

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

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