Vue 簡(jiǎn)介及基本使用教程

更新時(shí)間：2025年10月22日 10:32:03 作者：墨鴉_Cormorant

? Vue.js就是一套輕量級(jí)的 MVVM 框架,本文通過(guò)實(shí)例代碼給大家介紹Vue 簡(jiǎn)介及基本使用教程,感興趣的朋友跟隨小編一起看看吧

概述

前端技術(shù)的發(fā)展

從靜態(tài)走向動(dòng)態(tài)

早期的 HTML 作為靜態(tài)文件，即使只有部分內(nèi)容是需要變動(dòng)的，那么有多少種變動(dòng)的可能性，就需要準(zhǔn)備多少份文檔，這對(duì)開(kāi)發(fā)者來(lái)說(shuō)是非常不友好的，并且無(wú)法與用戶進(jìn)行交互。
CGI（Common Gateway Interface）的出現(xiàn)改善了這一情況。CGI 作為服務(wù)器拓展功能，可以從數(shù)據(jù)庫(kù)或者文件系統(tǒng)獲取數(shù)據(jù)，再將數(shù)據(jù)渲染為 HTML 文檔后，返回至客戶端，從而實(shí)現(xiàn)了網(wǎng)頁(yè)的動(dòng)態(tài)生成。
CGI 出現(xiàn)的最大意義就是給當(dāng)時(shí)剛起步的 Web 提供了一個(gè)發(fā)展方向。在這之后，PHP、JSP、ASP 等各種服務(wù)端語(yǔ)言層出不窮，不僅彌補(bǔ)了 CGI 的缺陷，而且在性能上愈加高效，在開(kāi)發(fā)上愈加簡(jiǎn)捷。這些語(yǔ)言的出現(xiàn)和廣泛應(yīng)用，使得 Web 技術(shù)飛速發(fā)展，前端網(wǎng)頁(yè)從此從靜態(tài)走向動(dòng)態(tài)。這個(gè)時(shí)代被稱為 Web1.0 時(shí)代。

從后端走向前端

在 Web1.0 時(shí)代，前后端是如何協(xié)作的呢？由于網(wǎng)頁(yè)是在服務(wù)端使用動(dòng)態(tài)腳本語(yǔ)言和模板引擎渲染出來(lái)的，所以一般由前端先寫(xiě)模板，寫(xiě)好后交付給后端套用，之后再由前后端聯(lián)調(diào)，以確認(rèn)模板套用無(wú)誤。在這種開(kāi)發(fā)環(huán)境下，前后端耦合密切，項(xiàng)目開(kāi)發(fā)需要很高的溝通成本。
Ajax （Asynchronous JavaScript And XML，異步 JavaScript 和 XML）通過(guò) XMLHttpRequest 對(duì)象，可以在不重載頁(yè)面的情況下與 Web 服務(wù)器交換數(shù)據(jù)，再加上 JavaScript 的 document 對(duì)象，開(kāi)發(fā)者們可以很輕松地實(shí)現(xiàn)頁(yè)面局部?jī)?nèi)容刷新。
得益于 Ajax 的發(fā)展，前后端分離的趨勢(shì)日漸明顯，前端不再需要依賴后臺(tái)環(huán)境生存，所有服務(wù)器數(shù)據(jù)都可以通過(guò)異步交互來(lái)獲取。
隨著 Google V8 引擎問(wèn)世、PC 和移動(dòng)端設(shè)備性能提高、ES6 和 H5 日趨成熟，瀏覽器端的計(jì)算能力和功能性似乎愈加過(guò)剩，開(kāi)發(fā)者們開(kāi)始將越來(lái)越多的業(yè)務(wù)邏輯代碼遷移到前端，前端路由的概念也逐漸清晰。
路由這個(gè)概念首先出現(xiàn)在后臺(tái)。傳統(tǒng) Web 網(wǎng)頁(yè)間的跳轉(zhuǎn)，需要開(kāi)發(fā)者先在后臺(tái)設(shè)置頁(yè)面的路由規(guī)則，之后服務(wù)器根據(jù)用戶的請(qǐng)求檢索路由規(guī)則列表，并返回相應(yīng)的頁(yè)面。
而前端路由則是在瀏覽器端配置路由規(guī)則，通過(guò)偵聽(tīng)瀏覽器地址的變化，異步加載和更新頁(yè)面內(nèi)容。
可以這么說(shuō)，Ajax 實(shí)現(xiàn)了無(wú)刷新的數(shù)據(jù)交互，前端路由則實(shí)現(xiàn)了無(wú)刷新的頁(yè)面跳轉(zhuǎn)，Ajax 將 Web Page 發(fā)展成 Web App，而前端路由則給了 Web App 更多的可能，如 SPA（Single Page Application，單頁(yè)面應(yīng)用）。
現(xiàn)在，很多 Web 項(xiàng)目采用這樣的架構(gòu)，后臺(tái)只負(fù)責(zé)數(shù)據(jù)的存取和組裝，而前端則負(fù)責(zé)業(yè)務(wù)邏輯層和視圖層的全部工作。這一路走來(lái)，項(xiàng)目重心已從后端轉(zhuǎn)移到了前端。
Angular、 React、Vue等知名的前端框架都有前端路由的概念。

從前端走向全端

Node.js 誕生，Javascript 開(kāi)始占據(jù)服務(wù)端編程語(yǔ)言的一席之地。前端工程師可以以很低的成本用 Node.js 和 MongoDB 搭建一個(gè)后臺(tái)。

從 MVC 到 MVVM

MVC：模型-視圖-控制器（Model-View-Controller）
- Model 指業(yè)務(wù)模型，用于計(jì)算、校驗(yàn)、處理和提供數(shù)據(jù)，不直接與用戶交互
- View 視圖層是用戶能夠看到并進(jìn)行交互的客戶端界面
- Controller 負(fù)責(zé)收集用戶輸入的數(shù)據(jù)，向相關(guān)模型請(qǐng)求數(shù)據(jù)并返回響應(yīng)的視圖
MVC 需要前端開(kāi)發(fā)人員從后端獲取需要的數(shù)據(jù)模型，然后要通過(guò) DOM 操作 Model 渲染到 View 中。

而后當(dāng)用戶操作視圖，還需要通過(guò) DOM 獲取 View 中的數(shù)據(jù)，然后同步到 Model 中。
MVVM：Model-View-ViewModel

MVVM 中的 VM 要做的事情就是把 DOM 操作完全封裝起來(lái)，通過(guò)數(shù)據(jù)綁定，可以將 View 和 ViewModel 關(guān)聯(lián)在一起：
- 只要 ViewModel 發(fā)生了改變，View 上自然就會(huì)表現(xiàn)出來(lái)
- 當(dāng)用戶修改了 View，ViewModel 中的數(shù)據(jù)也會(huì)跟著改變
開(kāi)發(fā)人員不用再關(guān)心 ViewModel 和 View 之間是如何互相影響的，可以從繁瑣的 DOM 操作中解放出來(lái)，把關(guān)注點(diǎn)放在如何操作 ViewModel 上。

? Vue.js 就是一套輕量級(jí)的 MVVM 框架。

MVVM（Model、View、ViewModel）

簡(jiǎn)介

MVVM 是 vue 實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖和雙向數(shù)據(jù)綁定的核心原理。MVVM 指的是 Model、View 和 ViewModel
- Model ：表示當(dāng)前頁(yè)面渲染時(shí)所依賴的數(shù)據(jù)源。
- View ：表示當(dāng)前頁(yè)面所渲染的 DOM 結(jié)構(gòu)。
- ViewModel ：表示 vue 的實(shí)例，它是 MVVM 的核心。
MVVM 把每個(gè) HTML 頁(yè)面都拆分成了這三個(gè)部分，如圖所示：

MVVM 的工作原理

ViewModel 作為 MVVM 的核心，是把當(dāng)前頁(yè)面的數(shù)據(jù)源（Model）和頁(yè)面的結(jié)構(gòu)（View）連接在了一起。

當(dāng)數(shù)據(jù)源發(fā)生變化時(shí)，會(huì)被 ViewModel 監(jiān)聽(tīng)到，VM 會(huì)根據(jù)最新的數(shù)據(jù)源自動(dòng)更新頁(yè)面的結(jié)構(gòu)
當(dāng)表單元素的值發(fā)生變化時(shí)，也會(huì)被 VM 監(jiān)聽(tīng)到，VM 會(huì)把變化過(guò)后最新的值自動(dòng)同步到 Model 數(shù)據(jù)源中

vue 簡(jiǎn)介

官方給出的概念：**Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的前端框架。**它基于標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助開(kāi)發(fā)者高效地開(kāi)發(fā)用戶界面。

與其它大型框架不同的是，Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。同時(shí)，Vue 也完全有能力支持采用 SPA 設(shè)計(jì)和組合其他 Vue 生態(tài)的系統(tǒng)。

vue 的特性

主要體現(xiàn)在兩個(gè)方面：數(shù)據(jù)驅(qū)動(dòng)視圖、雙向數(shù)據(jù)綁定

數(shù)據(jù)驅(qū)動(dòng)視圖
在使用了 vue 的頁(yè)面中，vue 會(huì)監(jiān)聽(tīng)數(shù)據(jù)的變化，從而自動(dòng)重新渲染頁(yè)面的結(jié)構(gòu)
- 好處：當(dāng)頁(yè)面數(shù)據(jù)發(fā)生變化時(shí)，頁(yè)面會(huì)自動(dòng)重新渲染！
- 注意：數(shù)據(jù)驅(qū)動(dòng)視圖是單向的數(shù)據(jù)綁定。

雙向數(shù)據(jù)綁定
- 在填寫(xiě)表單時(shí)，雙向數(shù)據(jù)綁定可以輔助開(kāi)發(fā)者在不操作 DOM 的前提下，自動(dòng)把用戶填寫(xiě)的內(nèi)容同步到數(shù)據(jù)源中。
- 好處：開(kāi)發(fā)者不再需要手動(dòng)操作 DOM 元素，來(lái)獲取表單元素最新的值！

vue 的版本

當(dāng)前，vue 共有 3 個(gè)大版本，其中：

3.x 版本的 vue 于 2020-09-19 發(fā)布，正在企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)中普及和推廣，是未來(lái)企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)的趨勢(shì)
2.x 版本的 vue 是目前企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)中的主流版本，但會(huì)在未來(lái)幾年內(nèi)被逐漸淘汰；
1.x 版本的 vue 幾乎被淘汰，不再建議學(xué)習(xí)與使用

Vue 項(xiàng)目結(jié)構(gòu)

├─node_modules	// 項(xiàng)目依賴的第三方包
├─public		// 靜態(tài)文件目錄
├───favicon.ico	// 瀏覽器小圖標(biāo)
├───index.html	// 單頁(yè)面的html文件
├─src			// 業(yè)務(wù)文件夾
├───assets		// 靜態(tài)資源目錄
├─────logo.png	// logo圖片
├───components	// 可重用組件目錄
├─────HelloWorld.vue	// 歡迎頁(yè)面vue代碼文件
├───router		// 路由目錄
├───store		// 數(shù)據(jù)共享目錄
├───views		// 視圖組件目錄
├───store		// 文件存儲(chǔ)目錄
├───api 		// 跟后臺(tái)交互，發(fā)送fetch、xhr請(qǐng)求，接收響應(yīng)目錄
├───plugins		// 插件目錄
├───App.js		// 整個(gè)應(yīng)用的根組件
├───main.js		// 入口js文件
├─.gitignore	// git提交忽略配置
├─babel.config.js	// babel配置
├─jsconfig.json
├─package.json	// 依賴包列表
├─vue.config.js

基本使用

基本使用步驟

<body>
	<!-- 2. 在頁(yè)面中聲明一個(gè)將要被 vue 所控制的 DOM 區(qū)域 -->
    <div id="app">{{ username }}</div>
    <!-- 1. 導(dǎo)入 vue.js 的 script 腳本 -->
    <script src="./lib/vue.js"></script>
    <script>
        // 3. 創(chuàng)建 vue 實(shí)例對(duì)象
    	const vm = new Vue({
            // 3.1 指定掛載的 DOM 區(qū)域
            el: '#app',
            // 3.2 指定 model 數(shù)據(jù)源
            data: {
                username: '張三'
            }
        })
    </script>
</body>

導(dǎo)入 vue.js 的 script 腳本文件

在頁(yè)面中聲明一個(gè)將要被 vue 所控制的 DOM 區(qū)域

創(chuàng)建 vm 實(shí)例對(duì)象（vue 實(shí)例對(duì)象）

基本代碼與 MVVM的對(duì)應(yīng)關(guān)系