Vue 簡介

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

1. 什么是 Vue

什么是 Vue 呢？

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

2. 為什么要使用 Vue

2.1 Vue.js 讓基于網頁的前端應用程序開發起來更加方便

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

2.2 Vue 與 React 對比

2.1 相似之處

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

1. 兩者都是用于創建 UI 的 JavaScript 庫；
2. 兩者的使用都快速輕便；
3. 兩者都是基礎組件式的開發；
4. 兩者都使用了虛擬 DOM。

2.2 不同之處

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

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

3. Vue 的版本說明

Vue 從發布到現在經歷了 3 個大的版本，目前最新的正式版本是 2.x。下面我們介紹一下三個版本：

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

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

4. Vue 的優點

那么 Vue 有哪些優點呢？

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

5. 學習基礎

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