優(yōu)缺點(diǎn)是：簡單、快速、強(qiáng)大、對模塊友好；但不支持IE8，且對于搜索引擎不友好，會(huì)影響seo。使用原因：Vue是一款能降低開發(fā)成本、提升開發(fā)效率的工具，它能幫助開發(fā)者從繁瑣的DOM操作中解脫出來；開發(fā)中設(shè)定好正確視圖和數(shù)據(jù)的規(guī)則后，只需要關(guān)注數(shù)據(jù)的變化，視圖內(nèi)容是會(huì)隨之變化的，不需手動(dòng)再操作DOM元素進(jìn)行修改。且Vue的組件化對于提升代碼復(fù)用、拆解大型項(xiàng)目，都有著很好的幫助。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

什么是 Vue？

Vue (發(fā)音為 /vju?/，類似 view) 是一款用于構(gòu)建用戶界面的 JavaScript 框架。它基于標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無論是簡單還是復(fù)雜的界面，Vue 都可以勝任。

下面是一個(gè)最基本的示例：

import { createApp } from 'vue'  createApp({   data() {     return {       count: 0     }   } }).mount('#app')

<div id="app">   <button @click="count++">     Count is: {{ count }}   </button> </div>

結(jié)果展示

上面的示例展示了 Vue 的兩個(gè)核心功能：

• 聲明式渲染：Vue 基于標(biāo)準(zhǔn) HTML 拓展了一套模板語法，使得我們可以聲明式地描述最終輸出的 HTML 和 JavaScript 狀態(tài)之間的關(guān)系。

• 響應(yīng)性：Vue 會(huì)自動(dòng)跟蹤 JavaScript 狀態(tài)并在其發(fā)生變化時(shí)響應(yīng)式地更新 DOM。

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

優(yōu)點(diǎn)：

1. 簡單：官方文檔很清晰，比 Angular 簡單易學(xué)。

2. 快速：異步批處理方式更新 DOM。

3. 組合：用解耦的、可復(fù)用的組件組合你的應(yīng)用程序。

4. 緊湊：~18kb min+gzip，且無依賴。

5. 強(qiáng)大：表達(dá)式 & 無需聲明依賴的可推導(dǎo)屬性 (computed properties)。

6. 對模塊友好：可以通過 NPM、Bower 或 Duo 安裝，不強(qiáng)迫你所有的代碼都遵循 Angular 的各種規(guī)定，使用場景更加靈活。

缺點(diǎn)：

• 不支持IE8。

  Vue.js 不支持 IE8 及其以下版本，因?yàn)?Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。

• vue是單頁面頁面，對于搜索引擎不友好，影響seo.因此不適合做公司官網(wǎng)。比如兩個(gè)vue路由（頁面），它的路徑是這樣的：index.html#aaa 和 index.html#bbb，但對于搜索引擎來說，都是同一個(gè)頁面，就是index.html。這樣搜索引擎就無法收錄你的頁面。

為什么要用 Vue.js

使用任何新框架和庫其實(shí)都是為了解決我們當(dāng)前開發(fā)所遇到的問題，或者能提升其開發(fā)效率。每個(gè)人的成本就是時(shí)間，好的工具則能夠幫助我們節(jié)約時(shí)間，從項(xiàng)目角度而言，也就幫我們節(jié)約了成本。而 Vue.js 就是一款能降低開發(fā)成本、提升開發(fā)效率的工具，它能幫助我們從繁瑣的 DOM 操作中解脫出來。開發(fā)中，我們設(shè)定好正確視圖和數(shù)據(jù)的規(guī)則后，只需要關(guān)注數(shù)據(jù)的變化，視圖上的內(nèi)容是會(huì)隨之變化的，而不需要我們手動(dòng)再操作 DOM 元素進(jìn)行修改。

此外，前端開發(fā)的模式也逐漸開始往組件化方向轉(zhuǎn)變，Web Components 的概念也開始逐漸成為標(biāo)準(zhǔn)，擁有自己獨(dú)立的 HTML 片段、JS 文件以及 CSS 樣式，這樣在使用時(shí)可以不用擔(dān)心對自己本身業(yè)務(wù)上的代碼造成影響。Vue.js 對這一概念也進(jìn)行了自己的實(shí)現(xiàn)，這樣對于提升代碼復(fù)用、拆解大型項(xiàng)目，都有著很好的幫助。

vue的一些好處：

1、控件自動(dòng)跟數(shù)據(jù)綁定，提交表單到后臺(tái)的時(shí)候，可以直接使用data里面的數(shù)據(jù)值，而不需要再使用$("#id")那一套方法來獲取控件的值，對控件賦值也方便很多，只需要改變data的值，控件就會(huì)自動(dòng)改變值。將復(fù)雜的界面操作，轉(zhuǎn)化為對數(shù)據(jù)進(jìn)行操作。

比如下面的一段代碼就可以實(shí)現(xiàn)了select控件的里面的列表的動(dòng)態(tài)管理：

html代碼：

<el-select v-model="mType" style="flex: 1;"> 　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option> </el-select>

js代碼：

data(){     return{ 　　　　mType:'', 　　　　enums:[{value:0,label:'未婚'},{value:1,label:'已婚'}] 　　} }

當(dāng)你需要修改select列表的內(nèi)容的時(shí)候，不再需要對dom進(jìn)行操作，只需要簡單的改變enums的值。當(dāng)控件選擇的值發(fā)生改變，會(huì)自動(dòng)綁定到data的 mType 字段。

2、頁面?zhèn)髦岛蜖顟B(tài)管理

vue的頁面?zhèn)髦悼晒┻x擇的方法非常多，比如使用子組件屬性傳值，比如使用頁面url參數(shù)的方法傳值，或使用vuex全局狀態(tài)管理的方法頁面?zhèn)髦档鹊取６_發(fā)的時(shí)候，在頁面有多個(gè)參數(shù)的時(shí)候，頁面?zhèn)髦岛统跏蓟獜?fù)雜很多。而vue，直接將參數(shù)保存在對象里面，直接給子組件的屬性或vuex存儲(chǔ)一個(gè)對象就行了。

3、模塊化開發(fā)、模塊化更新

就像第二點(diǎn)所說的，其實(shí)可以引申到模塊化開發(fā)。比如一個(gè)列表頁面里面有添加功能，有修改功能，這時(shí)候我們可以通過引用子組件的形式，當(dāng)子組件內(nèi)容更新的時(shí)候，修改主組件的數(shù)據(jù)，比如修改了一條數(shù)據(jù)后，我們需要列表頁同時(shí)刷新，但我們不希望改變原來列表頁的頁碼和搜索條件。假如你用原生開發(fā)來實(shí)現(xiàn)這個(gè)，需要寫很多業(yè)務(wù)邏輯保存上一個(gè)頁面的搜索條件和頁碼這些參數(shù)，但假如你用vue開發(fā)，將變得非常簡單。

4、代碼可讀性

vue天生具有組件化開發(fā)的能力，因此不同的功能基本都是寫在不同的模塊里面，因此代碼的可讀性非常高。當(dāng)一個(gè)新手接手一個(gè)舊項(xiàng)目的時(shí)候，基本上可以做到一到兩天就能定位到要修改的代碼，進(jìn)行修改。

5、基于強(qiáng)大的nodejs，添加新的組件庫，基本一句npm命令就能安裝，比如當(dāng)我需要使用axios組件的時(shí)候，直接npm install axios安裝一下，就可以使用axios這個(gè)組件。熟悉maven的同學(xué)估計(jì)很容易就能理解npm工具。

6、主路由、子路由、主頁面、子組件的方式，可以讓我們徹底拋棄iframe。寫過前端的同學(xué)都知道，因?yàn)閕frame的滾動(dòng)條、和子頁面跟其他頁面的交互性這些原因、用戶體驗(yàn)還是遠(yuǎn)遠(yuǎn)沒有單頁面架構(gòu)友好。而且使用vue非常簡單方便的實(shí)現(xiàn)系統(tǒng)菜單、導(dǎo)航等固定布局。

7、css模塊化：各個(gè)組件之間，可以使用相同的樣式名，但有不同的樣式屬性。比如組件A和組件B的button都綁定了class="btn", 但在兩個(gè)組件里，我們可以實(shí)現(xiàn)兩個(gè)不同的btn樣式屬性，互不影響。