第1章初識Vue.js《Vue.js前端開發(fā)實戰(zhàn)（第2版）》第1章初識Vue.js第2章Vue.js開發(fā)基礎(chǔ)第3章組件基礎(chǔ)（上）第4章組件基礎(chǔ)（下）第5章路由第6章常用UI組件庫第7章網(wǎng)絡(luò)請求和狀態(tài)管理第8章項目實戰(zhàn)——“微商城”前后臺開發(fā)全套可編輯PPT課件學(xué)習(xí)目標(biāo)/Target

了解前端技術(shù)的發(fā)展，能夠說出使用框架開發(fā)項目的優(yōu)勢了解什么是Vue，能夠說出Vue的基本概念了解Vue的特性，能夠說出Vue的4個特性了解Vue的版本，能夠說出Vue2和Vue3的區(qū)別學(xué)習(xí)目標(biāo)/Target掌握VisualStudioCode編輯器的使用方法，能夠使用VisualStudioCode編

輯器進行項目開發(fā)

掌握Node.js環(huán)境的搭建，能夠獨立完成Node.js的下載和安裝

掌握常見的包管理工具的使用方法，能夠應(yīng)用npm和yarn相關(guān)命令下載、升級、

卸載包掌握Vite的使用方法，能夠使用Vite創(chuàng)建Vue3項目章節(jié)概述/Summary在前端開發(fā)中，一個優(yōu)秀的框架可以幫助用戶解決一些常見的問題，有助于高效地完成工作。Vue.js（簡稱Vue）作為前端開發(fā)常用的框架之一，不僅可以提高項目的開發(fā)效率，而且可以改善開發(fā)體驗。為了幫助讀者對Vue有一個初步的認(rèn)識，本章將對Vue的基礎(chǔ)知識進行詳細(xì)講解。目錄/Contents1.11.21.3前端技術(shù)的發(fā)展Vue簡介Vue開發(fā)環(huán)境1.4使用Vite創(chuàng)建Vue3項目前端技術(shù)的發(fā)展1.1了解前端技術(shù)的發(fā)展，能夠說出使用框架開發(fā)項目的優(yōu)勢1.1前端技術(shù)的發(fā)展

先定一個小目標(biāo)！前端開發(fā)的基礎(chǔ)語言為HTML、CSS和JavaScript，其中，HTML用于搭建頁面的內(nèi)容結(jié)構(gòu)；CSS用于美化頁面的顯示效果；JavaScript用于處理用戶和頁面之間的交互行為。1.1前端技術(shù)的發(fā)展當(dāng)開發(fā)大型交互式項目時，開發(fā)者需要編寫大量的JavaScript代碼來操作文檔對象模型（DocumentObjectModel，DOM）并處理瀏覽器的兼容性問題。為了簡化DOM操作和減少開發(fā)過程中的瀏覽器兼容性問題，jQuery提供了一個選擇器引擎，它比其他引擎查詢速度更快，并為不同瀏覽器之間的JavaScript不兼容提供了隱式處理方法，因此jQuery深受開發(fā)人員的歡迎。jQuery的核心思想是使開發(fā)人員僅編寫少量的代碼就能實現(xiàn)更多的功能。1.1前端技術(shù)的發(fā)展在移動互聯(lián)網(wǎng)時代，前端技術(shù)被應(yīng)用于移動端開發(fā)中。為了使移動端網(wǎng)頁的使用體驗更接近用戶習(xí)慣，移動端網(wǎng)頁通常會做成單頁Web應(yīng)用（SinglePageWebApplication）的形式。單頁Web應(yīng)用在使用過程中只需要加載一個HTML頁面，而傳統(tǒng)的網(wǎng)頁是用戶每單擊一個鏈接都需要加載相應(yīng)的HTML頁面。需要說明的是，單頁Web應(yīng)用并不是只能顯示一個頁面，所謂“單頁”是對瀏覽器而言的，而開發(fā)者可以利用Ajax技術(shù)實現(xiàn)邏輯上的頁面切換的效果。1.1前端技術(shù)的發(fā)展為了提高開發(fā)效率，市面上出現(xiàn)了基于MVVM模式的前端開發(fā)框架，例如Angular、React、Vue等。這些框架以數(shù)據(jù)為核心，使用戶關(guān)注業(yè)務(wù)邏輯的處理，減少了手動的DOM操作。這些框架還為開發(fā)者提供了一套開發(fā)規(guī)則，控制權(quán)在框架本身，用戶需要按照框架的規(guī)范進行開發(fā)。與jQuery相比，使用框架開發(fā)的項目具有更高的開發(fā)效率、更好的可維護性、更強的可擴展性和更高的性能。在Angular、React和Vue這3個框架中，Vue體積較小，在使用上更容易上手、更加靈活。1.1前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁Web應(yīng)用單頁Web應(yīng)用將所有的功能局限于一個Web頁面中，僅在該頁面的初始化時加載相應(yīng)的資源（必要的HTML、CSS和JavaScript代碼）。在頁面加載完成后，所有的操作都在這個頁面上完成，且不會因用戶的操作而進行頁面的重新加載或跳轉(zhuǎn)，而是利用JavaScript動態(tài)地變換頁面的內(nèi)容，從而實現(xiàn)頁面與用戶的交互。1.1前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁Web應(yīng)用單頁Web應(yīng)用有以下3個優(yōu)點。良好的交互體驗。在單頁Web應(yīng)用中，內(nèi)容的改變不需要重新加載整個頁面，響應(yīng)速度更快。良好的前后端分離開發(fā)模式。后端專注于提供API，更容易實現(xiàn)API的復(fù)用。減輕服務(wù)器的壓力。單頁Web應(yīng)用中的數(shù)據(jù)是通過Ajax獲取的，不需要重新加載，服務(wù)器的壓力較小。1.1前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁Web應(yīng)用任何一種技術(shù)都有局限性，對于單頁Web應(yīng)用來說，主要的問題有以下2個。①首屏加載慢，在首次加載時需要將頁面中所用到的資源全部加載。②不利于搜索引擎優(yōu)化（SearchEngineOptimization，SEO）。對于單頁Web應(yīng)用，搜索引擎請求到的HTML頁面可能不是包含所有數(shù)據(jù)的最終渲染頁面，這樣就很不利于內(nèi)容被搜索引擎搜索到。1.1前端技術(shù)的發(fā)展多學(xué)一招：什么是單頁Web應(yīng)用隨著技術(shù)的進步，上述問題已經(jīng)有了相應(yīng)的解決方案。對于第1個問題，可以通過路由懶加載、代碼壓縮、網(wǎng)絡(luò)傳輸壓縮等方式解決；對于第2個問題，可以通過服務(wù)器端渲染（Server-SideRendering，SSR）技術(shù)解決。1.1前端技術(shù)的發(fā)展Vue簡介1.2了解什么是Vue，能夠說出Vue的基本概念

先定一個小目標(biāo)！1.2.1什么是Vue什么是Vue呢？1.2.1什么是VueVue（讀音：/Vju?/）是一款用于構(gòu)建用戶界面的漸進式框架。其中，“漸進式”是指在使用Vue核心庫時，可以在核心庫的基礎(chǔ)上根據(jù)實際需要逐步增加功能。1.2.1什么是Vue使用Vue進行項目開發(fā)具有以下優(yōu)勢。輕量級。Vue是一個輕量級的前端開發(fā)框架，文件體積小。Vue項目基于JavaScript語言開發(fā)，開發(fā)者不用單獨學(xué)一門陌生的語言，從而降低了學(xué)習(xí)的門檻。Vue在使用上比較靈活，開發(fā)人員可以選擇使用Vue開發(fā)一個全新項目，也可以將Vue引入現(xiàn)有項目。1.2.1什么是VueVue通過虛擬DOM技術(shù)減少對DOM的直接操作，并通過盡可能簡單的API來實現(xiàn)響應(yīng)的數(shù)據(jù)綁定，可支持單向和雙向數(shù)據(jù)綁定。Vue支持組件化開發(fā)，可提高項目的開發(fā)效率和可維護性，使代碼更易于復(fù)用，便于團隊的協(xié)同開發(fā)。Vue可以與前端開發(fā)中用到的一系列工具以及各種支持庫結(jié)合使用，以實現(xiàn)前端工程化開發(fā)，從而提高了項目的開發(fā)效率，降低了大型項目的開發(fā)難度。1.2.1什么是VueVue是基于MVVM模式的框架。MVVM主要包含Model（數(shù)據(jù)模型）、View（視圖）和ViewModel（視圖模型）。其中，Model是指數(shù)據(jù)部分，負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)的處理；View是指視圖部分，即用戶界面，負(fù)責(zé)視圖處理；ViewModel用于連接視圖與數(shù)據(jù)模型，負(fù)責(zé)監(jiān)聽Model或者View的改變。1.2.1什么是VueVue的基本工作原理如下圖所示。1.2.1什么是VueView和Model不能直接通信，它們需要借助ViewModel才能進行通信。ViewModel相當(dāng)于一個觀察者，監(jiān)控著View和Model的動作，實現(xiàn)了View與Model的解耦。ViewModel包含DOMListeners和

DataBindings。其中，DOMListeners用于監(jiān)聽View中DOM變化，并在DOM變化時通知Model做出相應(yīng)的修改；DataBindings用于監(jiān)聽Model中的數(shù)據(jù)變化，并在數(shù)據(jù)變化時通知View做出相應(yīng)的修改。1.2.1什么是Vue了解Vue的特性，能夠說出Vue的4個特性

先定一個小目標(biāo)！1.2.2Vue的特性Vue的4個特性。數(shù)據(jù)驅(qū)動視圖雙向數(shù)據(jù)綁定插件指令1.2.2Vue的特性在使用Vue的頁面中，Vue會監(jiān)聽數(shù)據(jù)變化，當(dāng)頁面數(shù)據(jù)發(fā)生變化時，Vue會自動重新渲染頁面結(jié)構(gòu)，如下圖所示。1.2.2Vue的特性1.數(shù)據(jù)驅(qū)動視圖Vue實現(xiàn)了雙向數(shù)據(jù)綁定，即當(dāng)數(shù)據(jù)發(fā)生變化時，視圖也會發(fā)生變化；當(dāng)視圖發(fā)生變化時，數(shù)據(jù)也會跟著同步變化。例如，用戶在填寫表單時，雙向數(shù)據(jù)綁定可以輔助開發(fā)者在無須手動操作DOM的前提下，自動同步用戶填寫的內(nèi)容數(shù)據(jù)，從而獲取表單元素最新的值。1.2.2Vue的特性2.雙向數(shù)據(jù)綁定指令主要包括內(nèi)置指令和自定義指令，內(nèi)置指令是Vue本身自帶的指令，而自定義指令是由用戶自己定義的指令。指令的名稱以“v-”開頭，作用于HTML中的元素。將指令綁定在元素上時，指令會給綁定的元素添加一些特殊的行為。例如，v-bind指令用于實現(xiàn)單向數(shù)據(jù)綁定，v-if指令用于實現(xiàn)頁面條件渲染，v-for指令用于實現(xiàn)頁面列表渲染等。1.2.2Vue的特性3.指令Vue支持插件，通過加載插件可以實現(xiàn)更多的功能。常用的插件有VueRouter（路由）、Vuex（狀態(tài)管理庫）、Pinia（輕量級狀態(tài)管理庫）等，這些插件經(jīng)過簡單配置就可以使用。1.2.2Vue的特性4.插件了解Vue的版本，能夠說出Vue2和Vue3的區(qū)別

先定一個小目標(biāo)！1.2.3Vue的版本目前，Vue共有3個大版本，分別是Vue

1、Vue2和Vue3。其中，Vue1幾乎被淘汰，不建議學(xué)習(xí)與使用；Vue2和Vue3目前被廣泛應(yīng)用，并且Vue3將會逐步替代Vue2。1.2.3Vue的版本Vue3支持Vue2中絕大多數(shù)的API與特性，同時Vue3還新增了一些特有的功能，并廢棄了Vue2中的一些舊功能。Vue3新增的功能包括組合式（Composition）API、多根節(jié)點組件等；廢棄的舊功能包括過濾器（Filter）以及$on()、$off()和$once()實例方法等。雖然從表面上看，Vue3和Vue2的使用方式?jīng)]有太大的差異，但Vue3的底層代碼發(fā)生了很大變化，包括渲染、數(shù)據(jù)監(jiān)聽、雙向綁定、生命周期等。1.2.3Vue的版本Vue3的新特性如下。體積更小，采用按需編譯的方式編譯出來的文件體積比Vue2的小。性能提升，運行速度比Vue2快1.5倍左右。具有更好的TypeScript支持。暴露了更底層的API，可以通過多種方式組織代碼，代碼使用上更加靈活。提供了更先進的組件。Vue創(chuàng)建了一個虛擬的Fragment節(jié)點，允許組件中有多個根節(jié)點。提供組合式API，能夠更好地組合邏輯、封裝邏輯、復(fù)用邏輯。1.2.3Vue的版本為了提高開發(fā)效率，開發(fā)者可以在項目中添加UI組件庫。UI組件庫可以理解成一個可重復(fù)使用的界面設(shè)計元素的集合體，使用它可以更快速地開發(fā)用戶界面。目前，主流UI組件庫都已經(jīng)發(fā)布了支持Vue3的版本，常用的UI組件庫如下。Element

Plus組件庫：一款基于Vue3的桌面端組件庫。Vant組件庫：一款開源移動端組件庫，它從3.0版本開始支持Vue3。Ant

Design

Vue組件庫：一款用于開發(fā)和服務(wù)企業(yè)級后臺產(chǎn)品的組件庫，它從2.0版本開始支持Vue3。1.2.3Vue的版本Vue開發(fā)環(huán)境1.3掌握VisualStudioCode編輯器的使用方法，能夠完成中文語言擴展、Volar擴展的安裝，以及使用VisualStudioCode編輯器打開項目并在項目中創(chuàng)建一個HTML5文檔1.3.1VisualStudioCode編輯器

先定一個小目標(biāo)！VisualStudioCode（簡稱VSCode）是由微軟公司推出的一款免費、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對于前端開發(fā)人員來說，一個強大的編輯器可以使開發(fā)變得簡單、便捷、高效。1.3.1VisualStudioCode編輯器VSCode編輯器具有以下特點。輕巧、極速，占用系統(tǒng)資源較少。具備代碼智能補全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能。跨平臺，可用于macOS、Windows和Linux操作系統(tǒng)。主題界面的設(shè)計比較人性化。例如，可以快速查找文件并直接進行開發(fā)，可以通過分屏顯示代碼，可以自定義主題顏色，以及可以快速查看已打開的項目文件和項目文件結(jié)構(gòu)。提供豐富的擴展，用戶可根據(jù)需要自行下載和安裝擴展。1.3.1VisualStudioCode編輯器1.3.1VisualStudioCode編輯器下面講解如何下載和安裝VSCode編輯器、如何安裝中文語言擴展、如何安裝Volar擴展，以及如何使用VSCode編輯器。打開瀏覽器，登錄VSCode編輯器的官方網(wǎng)站，如右圖所示。1.3.1VisualStudioCode編輯器1.下載和安裝VSCode編輯器在VSCode編輯器的官方網(wǎng)站中，單擊“DownloadforWindows”按鈕，該頁面會自動識別當(dāng)前的操作系統(tǒng)并下載相應(yīng)的安裝包。如果需要下載其他系統(tǒng)的安裝包，可以單擊按鈕右側(cè)的小箭頭“”打開下拉菜單，就會看到其他系統(tǒng)的安裝包對應(yīng)的下載圖標(biāo)，如右圖所示。1.3.1VisualStudioCode編輯器下載VSCode編輯器的安裝包后，在下載目錄中找到該安裝包，如下圖所示。1.3.1VisualStudioCode編輯器雙擊上圖所示的圖標(biāo)，啟動安裝程序，然后按照程序的提示一步一步進行操作，直到安裝完成。將VSCode編輯器安裝成功后，啟動該編輯器，即可進入VSCode編輯器的初始界面，如下圖所示。1.3.1VisualStudioCode編輯器將VSCode編輯器安裝完成后，該編輯器的默認(rèn)語言是英文。如果想要切換為中文，首先單擊VSCode編輯器的初始界面左側(cè)邊欄中的“”圖標(biāo)按鈕進入擴展界面，然后在搜索框中輸入關(guān)鍵詞“chinese”找到中文語言擴展，單擊“Install”按鈕進行安裝，如下圖所示。1.3.1VisualStudioCode編輯器2.安裝中文語言擴展安裝成功后，需要重新啟動VSCode編輯器，中文語言擴展才可以生效。重新啟動VSCode編輯器后，VSCode編輯器的中文界面如下圖所示。1.3.1VisualStudioCode編輯器1.3.1VisualStudioCode編輯器Volar擴展專門用于為“.vue”單文件組件（Single-FileComponent，SFC）提供代碼高亮顯示和語法支持。該擴展僅適用于Vue3項目，不僅提供了語法高亮顯示、智能提示、錯誤提示、格式化等功能，而且支持多根節(jié)點組件，例如支持將一個Vue文件中的<template>、<script>、<style>拆分成3個窗口，每個窗口負(fù)責(zé)各自的功能。3.安裝Volar擴展Volar擴展的安裝方法與中文語言擴展的安裝方法類似。如果想要安裝Volar擴展，可以在擴展界面的搜索框中輸入關(guān)鍵詞“Volar”，搜索到“VueLanguageFeatures(Volar)”擴展后進行安裝。需要注意的是，Vue3的組件代碼與Vue2不同，使用的語法提示和高亮插件也不同。在Vue2中不能使用Volar擴展，而是使用Vetur擴展，可以在擴展界面的搜索框中輸入關(guān)鍵詞“Vetur”，搜索到“Vetur”擴展后進行安裝。1.3.1VisualStudioCode編輯器在實際開發(fā)中，開發(fā)一個項目需要先創(chuàng)建項目文件夾，以便于保存項目中的文件。接下來演示如何創(chuàng)建項目文件夾，如何使用VSCode編輯器打開項目文件夾，以及如何創(chuàng)建一個HTML5文檔，具體步驟如下。1.3.1VisualStudioCode編輯器4.使用VSCode編輯器在D:\vue目錄下創(chuàng)建一個項目文件夾chapter01。創(chuàng)建項目文件夾1.3.1VisualStudioCode編輯器步驟1步驟3步驟2在VSCode編輯器的菜單欄中選擇“文件”→“打開文件夾”命令，然后選擇chapter01文件夾。打開文件夾后的界面效果如下圖所示。打開文件夾1.3.1VisualStudioCode編輯器步驟1步驟3步驟2單擊按鈕①，輸入要創(chuàng)建的文件名稱index.html，即可創(chuàng)建該文件。此時創(chuàng)建的index.html文件是一個空白的文檔，在該文檔中，輸入“html:5”，VSCode會給出智能提示，然后按“Enter”

鍵會自動生成一個HTML5文檔結(jié)構(gòu)。創(chuàng)建HTML5文檔1.3.1VisualStudioCode編輯器步驟1步驟3步驟2創(chuàng)建HTML5文檔1.3.1VisualStudioCode編輯器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body>

</body></html>>>接上頁步驟1步驟3步驟2掌握Node.js環(huán)境的搭建，能夠獨立完成Node.js的下載和安裝1.3.2

Node.js環(huán)境

先定一個小目標(biāo)！Node.js是一個基于V8引擎的JavaScript運行環(huán)境，提供了一些功能性的API，例如文件操作API、網(wǎng)絡(luò)通信API等。1.3.2

Node.js環(huán)境打開Node.js官網(wǎng)，找到Node.js下載地址，如下圖所示。1.3.2

Node.js環(huán)境從Node.js官方網(wǎng)站可以看出，Node.js有兩個版本，分別是16.17.0LTS和18.9.0Current。其中，LTS（LongTermSupport）表示提供長期支持的版本，只進行Bug修復(fù)且版本穩(wěn)定，因此有很多用戶在使用；Current表示當(dāng)前發(fā)布的新版本，增加了一些新特性，有利于進行新技術(shù)的開發(fā)使用。這里選擇下載16.17.0LTS版本。下載完成后會得到一個名稱為node-v16.17.0-x64.msi的安裝包文件。1.3.2

Node.js環(huán)境雙擊node-v16.17.0-x64.msi安裝包圖標(biāo)，會彈出安裝向?qū)Т翱冢缦聢D所示。安裝過程全部使用默認(rèn)值。1.3.2

Node.js環(huán)境安裝完成后，測試一下Node.js是否安裝成功，具體步驟如下。1.3.2

Node.js環(huán)境按“Windows+R”組合鍵，打開“運行”對話框，輸入“cmd”。在“運行”對話框中輸入“cmd”后的效果如下圖所示。打開“運行”對話框1.3.2

Node.js環(huán)境步驟1步驟3步驟2單擊“確定”按鈕或者直接按“Enter”鍵，會打開命令提示符，如下圖所示。打開命令提示符1.3.2

Node.js環(huán)境步驟1步驟3步驟2在命令提示符中，輸入命令“node-v”，其中v是version的簡寫，表示版本。命令輸入完成后，按“Enter”鍵，查看當(dāng)前安裝的Node.js版本，如下圖所示。查看Node.js版本若想要退出命令提示符，可以輸入“exit”并按“Enter”鍵，或者單擊右上角的“×”關(guān)閉按鈕退出。1.3.2

Node.js環(huán)境步驟1步驟3步驟2掌握常見的包管理工具的使用方法，能夠應(yīng)用npm和yarn相關(guān)命令下載、升級、卸載包1.3.3常見的包管理工具

先定一個小目標(biāo)！什么是包呢？1.3.3常見的包管理工具在Vue項目開發(fā)中，經(jīng)常需要通過各種第三方的包（package）來擴展項目的功能。“包”可以理解為將一系列模塊化的代碼打包起來，形成一個包，以便于使用。項目中所用到的包稱為項目的依賴（dependency）。1.3.3常見的包管理工具什么是包管理工具呢？1.3.3常見的包管理工具為了方便管理第三方的包，需要用到包管理工具。包管理工具可以讓開發(fā)人員輕松地下載、升級、卸載包。假設(shè)在項目開發(fā)時，沒有包管理工具，若想使用第三方包，則每次都需要下載、解壓后才可以使用，非常煩瑣。而使用包管理工具，只需通過一條命令即可下載并安裝第三方包，非常方便，而且還可以指定下載的版本等。1.3.3常見的包管理工具1.3.3常見的包管理工具npm是Node.js默認(rèn)的包管理工具，它可以安裝、共享、分發(fā)代碼，還可以管理項目的依賴關(guān)系。npmyarn是Node.js的包管理工具，它是一個高效、安全和可靠的包管理工具，yarn能夠提高包的安裝效率，節(jié)約安裝時間。yarn常見的包管理工具在安裝Node.js時會自動安裝相應(yīng)版本的npm，不需要單獨安裝，使用“npm-v”命令可以查看npm的版本，如下圖所示。1.3.3常見的包管理工具1.npm使用npm包管理工具可以解決以下場景的需求。從npm服務(wù)器下載別人編寫的第三方包到本地使用。從npm服務(wù)器下載并安裝別人編寫的命令行程序到本地來使用。將自己編寫的包或命令行程序上傳到npm服務(wù)器供別人使用。1.3.3常見的包管理工具npm提供了快速操作包的命令，只需要執(zhí)行簡單的命令就可以很方便地對第三方包進行管理。npm中常用的命令如下。npminstall包名：可簡寫為“npmi包名”，用于為項目安裝指定名稱的包。如果加上-g選項，則會把包安裝為全局包，否則只安裝到本項目中。如果省略包名，則npm會根據(jù)當(dāng)前目錄下的package.json文件中保存的依賴信息為項目安裝所有的包。npmuninstall包名：用于卸載指定名稱的包。npmupdate包名：用于更新指定名稱的包。1.3.3常見的包管理工具在下載npm安裝包時，下載速度可能會比較慢，這是因為提供包的服務(wù)器在國外。為了加快包的下載速度，建議將下載源切換成國內(nèi)鏡像服務(wù)器。為npm設(shè)置鏡像地址的具體命令如下。1.3.3常見的包管理工具npmconfigsetregistry為了驗證鏡像地址是否設(shè)置成功，可以通過如下命令進行驗證。npmconfiggetregistry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。1.3.3常見的包管理工具在使用yarn之前，需要先確保計算機中已經(jīng)安裝了Node.js環(huán)境，再使用npm命令安裝yarn，安裝命令如下。npminstallyarn-g為了驗證yarn是否安裝成功，可以通過“yarn-v”命令查看yarn的版本信息，如下圖所示。2.yarn為了提高下載yarn安裝包的速度，也可以將yarn的下載源切換成國內(nèi)鏡像服務(wù)器。為yarn設(shè)置鏡像地址的具體命令如下。1.3.3常見的包管理工具yarnconfigsetregistry為了驗證鏡像地址是否設(shè)置成功，可以通過如下命令進行驗證。yarnconfiggetregistry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。下面列舉yarn中一些常用的命令。yarninstall：可簡寫為yarn，用于為項目安裝所有包。如果提供了-g選項，則會把包安裝為全局包，否則只安裝到本項目中。yarnremove包名：用于卸載指定名稱的包。yarnup包名：用于更新指定名稱的包。yarnadd包名：用于添加指定名稱的包。1.3.3常見的包管理工具1.3.3常見的包管理工具yarn與npm包管理工具的區(qū)別使用npm安裝同一個包時，每次安裝都需要重新下載，而yarn會緩存每個下載過的包，再次使用時無須重復(fù)下載。npm按照隊列安裝每個包，也就是說，必須要等到當(dāng)前包安裝完成后，才能繼續(xù)安裝后面的包，而yarn可以利用并行下載的方式提高資源利用率，安裝速度更快。npm的輸出信息比較冗長，在執(zhí)行npminstall命令時，命令提示符里會輸出所有被安裝的包的信息。相比之下，yarn的輸出信息比較簡潔，只輸出必要的信息，同時也提供了一些命令供開發(fā)者查詢額外的安裝信息。使用Vite創(chuàng)建Vue3項目1.4了解什么是Vite，能夠說出Vite的基本概念1.4.1

什么是Vite

先定一個小目標(biāo)！1.4.1

什么是Vite什么是Vite？1.4.1

什么是ViteVite（讀音：/vit/）是一個輕量級、運行速度快的前端構(gòu)建工具，它支持模塊熱替換（HotModuleReplacement，HMR），可以即時、準(zhǔn)確地更新模塊，當(dāng)代碼修改時無須重新加載頁面或清除應(yīng)用程序狀態(tài)。Vite默認(rèn)安裝的插件比較少，隨著開發(fā)過程中依賴的增多，需要額外進行配置。在Vue3出現(xiàn)前，Vue2一般使用Vue

CLI創(chuàng)建。Vue

CLI基于Webpack構(gòu)建并配置項目，在項目啟動時，Webpack需要從入口文件索引整個項目的文件，編譯成一個或多個單獨的.js文件。雖然Webpack對代碼進行了拆分，但是仍可能一次生成所有路由下的編譯后的文件，導(dǎo)致服務(wù)啟動時間隨著項目的復(fù)雜度增加而呈指數(shù)式的增長。而Vite改進了這一點，在項目啟動時，Vite會對模塊代碼進行按需加載，啟動速度更快。因此，當(dāng)使用Vue3開發(fā)新項目時，推薦使用Vite進行創(chuàng)建。1.4.1

什么是ViteVite不需要以命令的方式安裝和卸載，只要安裝了npm或yarn，就可使用Vite的相關(guān)命令創(chuàng)建項目。Vite會作為項目的開發(fā)依賴保存在項目的node_modules目錄中。需要注意的是，Node.js必須為14.18及以上版本時才可以使用Vite，并且Vite中的部分模板可能需要更高的Node.js版本才能正常運行。另外，Node.js的14、16等更新版本不再支持Windows7操作系統(tǒng)，推薦使用Windows10等新版操作系統(tǒng)。1.4.1

什么是Vite掌握Vue3項目的創(chuàng)建方法，能夠使用Vite創(chuàng)建Vue3項目1.4.2

創(chuàng)建Vue3項目

先定一個小目標(biāo)！Vite提供了兩種創(chuàng)建項目的命令。手動創(chuàng)建項目的命令通過模板自動創(chuàng)建項目的命令1.4.2

創(chuàng)建Vue3項目使用npm或yarn包管理工具都可以搭配Vite手動創(chuàng)建項目，具體命令如下。#使用npmcreate命令創(chuàng)建項目npmcreatevite@latest#使用yarncreate命令創(chuàng)建項目yarncreatevite上述命令展示了兩種包管理工具用于創(chuàng)建Vite項目，在使用時任選其一即可。npmcreate和yarn

create命令后跟一個vite包名，表示初始化Vite。vite@latest表示在npm中安裝最新版本的Vite。1.4.2

創(chuàng)建Vue3項目1.手動創(chuàng)建項目的命令打開命令提示符，切換到D:\vue\chapter01目錄，執(zhí)行如下命令。yarncreatevite執(zhí)行上述命令后，Vite會提示填寫項目名稱，如下圖所示。1.4.2

創(chuàng)建Vue3項目STEP01步驟1步驟3步驟4步驟2手動創(chuàng)建Vue項目使用vite-project作為項目名稱后，Vite會提示選擇創(chuàng)建項目所使用的框架，如下圖所示。1.4.2

創(chuàng)建Vue3項目手動創(chuàng)建Vue項目步驟1步驟3步驟4步驟2選擇好框架后，Vite會提示選擇一個變體，如下圖所示。1.4.2

創(chuàng)建Vue3項目STEP03手動創(chuàng)建Vue項目步驟3步驟4步驟2步驟1選擇好變體后，Vite會提示項目創(chuàng)建完成，如下圖所示。1.4.2

創(chuàng)建Vue3項目手動創(chuàng)建Vue項目步驟3步驟4步驟2步驟11.4.2

創(chuàng)建Vue3項目項目創(chuàng)建完成后的提示命令，具體命令解釋如下。cdvite-project #切換到項目目錄yarn #安裝項目的全部依賴yarndev #啟動服務(wù)上述命令中，yarndev命令是Vue3項目中package.json文件里面scripts節(jié)點配置的命令。除了yarndev命令外，還有2個常用命令yarnbuild和yarn

preview，它們分別表示構(gòu)建生產(chǎn)環(huán)境項目和構(gòu)建本地預(yù)覽環(huán)境項目。這3個命令實際上都是別名，是為了便于開發(fā)人員記憶。當(dāng)執(zhí)行這3個命令時，yarn會讀取當(dāng)前項目的package.json文件中的命令配置，找到真正的命令并執(zhí)行。1.4.2

創(chuàng)建Vue3項目Vue3項目的package.json文件中的命令配置如下。"scripts":{"dev":"vite","build":"vitebuild","preview":"vitepreview"},上述配置中，dev是vite的別名，build是vite

build的別名，preview是vitepreview的別名。也就是說，當(dāng)執(zhí)行yarndev時，實際執(zhí)行的命令是yarnvite。別名可以自定義，如果修改了別名，在執(zhí)行命令時需要使用修改后的別名。1.4.2

創(chuàng)建Vue3項目項目啟動后，會默認(rèn)開啟一個本地服務(wù)，具體如下。VITEv4.1.4readyin441ms?Local::5173/1.4.2

創(chuàng)建Vue3項目在瀏覽器中打開:5173/，如下圖所示。通過模板自動創(chuàng)建項目的方式相對簡單，它通過附加的命令行選項直接指定項目名稱和模板，省去了填寫項目名稱、選擇框架和變體等環(huán)節(jié)。Vite提供了許多模板預(yù)設(shè)，可以創(chuàng)建Vite+React+TS、Vite+Vue、Vite+Svelte等類型的項目。通過附加的命令行選項直接指定項目名稱和模板的基本語法格式如下。#使用npm6或更低版本創(chuàng)建項目npmcreatevite@latest<項目名稱>--template<模板名稱>#使用npm7或更高版本創(chuàng)建項目npmcreatevite@latest<項目名稱>----template<模板名稱>#使用yarncreate命令創(chuàng)建項目yarncreatevite<項目名稱>--template<模板名稱>1.4.2

創(chuàng)建Vue3項目2.通過模板自動創(chuàng)建項目的命令打開命令提示符，切換到D:\vue\chapter01目錄，使用yarn創(chuàng)建一個基于Vite+Vue模板且項目名稱為hello-vite的項目。yarncreatevitehello-vite--templatevue1.4.2

創(chuàng)建Vue3項目STEP01執(zhí)行上述命令后，hello-vite項目創(chuàng)建完成的效果如下圖所示。1.4.2

創(chuàng)建Vue3項目在項目創(chuàng)建完成后，給出了一些提示命令，需要執(zhí)行這些命令才能完成項目啟動，具體命令如下。cdhello-vite #切換到項目目錄yarn #安裝項目的全部依賴yarndev #啟動服務(wù)1.4.2

創(chuàng)建Vue3項目項目啟動后，會默認(rèn)開啟一個本地服務(wù)，具體如下。VITEv4.1.4readyin441ms?Local::5173/在瀏覽器中打開:5173/，頁面效果與手動創(chuàng)建Vue3項目的頁面效果相同。熟悉Vue3項目的目錄結(jié)構(gòu)，能夠歸納常用的目錄和文件的作用1.4.3 Vue3項目的目錄結(jié)構(gòu)

先定一個小目標(biāo)！Vue3項目創(chuàng)建成功后，使用VSCode編輯器打開項目目錄，可以看到一個默認(rèn)生成的項目目錄結(jié)構(gòu)，如右圖所示。1.4.3 Vue3項目的目錄結(jié)構(gòu)下面簡要介紹Vue3項目的目錄結(jié)構(gòu)中各個目錄和文件的作用，具體如下。.vscode：存放VSCode編輯器的相關(guān)配置。node_modules：存放項目的各種依賴和安裝的插件。public：存放不可編譯的靜態(tài)資源文件，當(dāng)進行項目構(gòu)建時，該目錄下的文件會被復(fù)制到dist目錄，該目錄下的文件需要使用絕對路徑訪問。src：源代碼目錄，保存開發(fā)人員編寫的項目源代碼。src\assets：存放可編譯的靜態(tài)資源文件，例如圖片、樣式文件等。該目錄下的文件需要使用相對路徑訪問。1.4.3 Vue3項目的目錄結(jié)構(gòu)src\components：存放單文件組件，即.vue文件。src\components\HelloWorld.vue：一個名稱為HelloWorld的單文件組件。src\App.vue：項目的根組件。src\main.js：項目的入口文件，用于創(chuàng)建Vue應(yīng)用實例。src\style.css：項目的全局樣式表文件。.gitignore：向Git倉庫上傳代碼時需要忽略的文件列表。index.html：默認(rèn)的主渲染頁面文件，同時也是頁面的入口文件。1.4.3 Vue3項目的目錄結(jié)構(gòu)package.json：包配置文件。README.md：項目使用說明文件。vite.config.js：存放Vite的相關(guān)配置。yarn.lock：存儲每一個依賴項的安裝版本，在使用yarn安裝、升級、卸載依賴時，會自動更新yarn.lock文件。此外，當(dāng)執(zhí)行了yarnbuild命令后，在項目目錄中會出現(xiàn)dist目錄，該目錄中保存的是項目構(gòu)建后的文件。1.4.3 Vue3項目的目錄結(jié)構(gòu)了解Vue3項目的運行過程，能夠說出Vue3項目的運行過程1.4.4 Vue3項目的運行過程

先定一個小目標(biāo)！使用Vite構(gòu)建Vue3項目后，當(dāng)執(zhí)行yarndev命令啟動服務(wù)時，項目就會運行起來，該項目會通過src\main.js文件將src\App.vue組件渲染到index.html文件的指定區(qū)域。1.4.4 Vue3項目的運行過程1.4.4 Vue3項目的運行過程010203123Vue3項目是由各種組件組成的，src\App.vue文件是項目的根組件。在根組件中可以引用其他組件，從而顯示其他組件的內(nèi)容。src\App.vue文件index.html文件是頁面的入口文件，該文件中預(yù)留了用于被src\main.js文件中的Vue應(yīng)用實例所控制的區(qū)域。index.html文件src\main.js文件是項目的入口文件，該文件創(chuàng)建了Vue應(yīng)用實例。Vue應(yīng)用實例是Vue項目工作的基礎(chǔ)，每個Vue項目都是從創(chuàng)建Vue應(yīng)用實例開始的。src\main.js文件本章小結(jié)本章首先介紹了前端技術(shù)的發(fā)展，接著對Vue的相關(guān)概念進行了簡要介紹；然后講解了Vue開發(fā)環(huán)境，包括VisualStudioCode編輯器、Node.js環(huán)境以及常見的包管理工具；最后分別講解了如何使用Vite創(chuàng)建Vue

3項目。通過本章的學(xué)習(xí)，讀者應(yīng)對Vue有一個整體的認(rèn)識，能夠創(chuàng)建Vue3項目。本章小結(jié)第2章Vue.js開發(fā)基礎(chǔ)《Vue.js前端開發(fā)實戰(zhàn)（第2版）》學(xué)習(xí)目標(biāo)/Target掌握單文件組件，能夠創(chuàng)建并使用單文件組件掌握數(shù)據(jù)綁定，能夠定義數(shù)據(jù)并將數(shù)據(jù)渲染到頁面中掌握屬性綁定指令，能夠靈活運用v-bind指令給目標(biāo)元素的屬性動態(tài)綁定值掌握內(nèi)容渲染指令，能夠靈活運用v-text和v-html指令將字符串渲染到頁面中掌握事件綁定指令，能夠靈活運用v-on指令給目標(biāo)元素綁定事件學(xué)習(xí)目標(biāo)/Target掌握雙向數(shù)據(jù)綁定指令，能夠靈活運用v-model指令在表單元素上實現(xiàn)數(shù)據(jù)的

雙向綁定掌握條件渲染指令，能夠靈活運用v-if、v-show指令根據(jù)不同的條件渲染不同

的標(biāo)簽掌握列表渲染指令，能夠靈活運用v-for指令將數(shù)組、對象等中的數(shù)據(jù)渲染到頁面中掌握事件對象，能夠靈活運用事件對象獲取和修改DOM元素的屬性學(xué)習(xí)目標(biāo)/Target掌握計算屬性，能夠靈活運用計算屬性實時監(jiān)聽數(shù)據(jù)的變化，當(dāng)所依賴的數(shù)據(jù)

發(fā)生變化時重新計算值掌握樣式綁定，能夠靈活運用v-bind綁定class和style屬性實現(xiàn)元素樣式的設(shè)置熟悉事件修飾符，能夠闡述常見的事件修飾符掌握偵聽器，能夠靈活運用偵聽器監(jiān)聽數(shù)據(jù)的變化并進行相應(yīng)的操作章節(jié)概述/Summary在搭建好Vue開發(fā)環(huán)境后，要想使用Vue開發(fā)實際項目，必須先學(xué)習(xí)Vue基礎(chǔ)知識。只有掌握Vue框架的基礎(chǔ)知識后，才能根據(jù)實際需求游刃有余地進行項目開發(fā)。本章將詳細(xì)講解Vue開發(fā)基礎(chǔ)。目錄/Contents2.12.22.3單文件組件數(shù)據(jù)綁定指令2.4事件對象2.5事件修飾符目錄/Contents2.62.72.8計算屬性偵聽器樣式綁定2.9階段案例——學(xué)習(xí)計劃表單文件組件2.1掌握單文件組件，能夠創(chuàng)建并使用單文件組件2.1單文件組件

先定一個小目標(biāo)！什么是單文件組件？2.1單文件組件在第1章中使用Vite創(chuàng)建Vue項目后，目錄結(jié)構(gòu)中包含一些擴展名為.vue的文件，每個.vue文件都可用來定義一個單文件組件。Vue中的單文件組件是Vue組件的文件格式。2.1單文件組件010203123模板用于搭建當(dāng)前組件的DOM結(jié)構(gòu)，其代碼寫在<template>標(biāo)簽中。模板樣式是指通過CSS代碼為當(dāng)前組件設(shè)置樣式，其代碼寫在<style>標(biāo)簽中。樣式邏輯是指通過JavaScript代碼處理組件的數(shù)據(jù)與業(yè)務(wù)，其代碼寫在<script>標(biāo)簽中。邏輯每個單文件組件由模板、樣式和邏輯3個部分構(gòu)成。2.1單文件組件<template><!--此處編寫組件的結(jié)構(gòu)--></template><script>/*此處編寫組件的邏輯*/</script><style>/*此處編寫組件的樣式*/</style>2.1單文件組件演示如何定義一個基本的單文件組件。步驟1打開命令提示符，切換到D:\vue\chapter02目錄，在該目錄下執(zhí)行如下命令，創(chuàng)建項目。步驟3步驟4步驟2步驟5演示單文件組件的使用方法yarncreatevitevue-demo--templatevue項目創(chuàng)建完成后，執(zhí)行如下命令進入項目目錄，啟動項目。cdvue-demoyarnyarndev項目啟動后，可以使用URL地址:5173/進行訪問。2.1單文件組件演示單文件組件的使用方法步驟1步驟3步驟4步驟2步驟5使用VSCode編輯器打開D:\vue\chapter02\vue-demo目錄。2.1單文件組件演示單文件組件的使用方法步驟3步驟4步驟2步驟5步驟1將src\style.css文件中的樣式代碼全部刪除，從而避免項目創(chuàng)建時自帶的樣式代碼影響本案例的實現(xiàn)效果。2.1單文件組件演示單文件組件的使用方法步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\Demo.vue文件，該文件是Demo組件。<template><divclass="demo">Demo組件</div></template><style>.demo{font-size:22px;font-weight:bold;}</style>2.1單文件組件演示單文件組件的使用方法步驟3步驟4步驟2步驟5步驟1修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Demo.vue'2.1單文件組件保存上述代碼后，在瀏覽器中訪問:5173/，Demo組件的頁面效果如下圖所示。2.1單文件組件數(shù)據(jù)綁定2.2掌握數(shù)據(jù)綁定，能夠定義數(shù)據(jù)并將數(shù)據(jù)渲染到頁面中2.2.1初識數(shù)據(jù)綁定

先定一個小目標(biāo)！2.2.1初識數(shù)據(jù)綁定什么是數(shù)據(jù)綁定？2.2.1初識數(shù)據(jù)綁定Vue通過數(shù)據(jù)綁定實現(xiàn)了數(shù)據(jù)與頁面相分離，從而實現(xiàn)了數(shù)據(jù)驅(qū)動視圖的效果。即將頁面中的數(shù)據(jù)分離出來，放到組件的<script>標(biāo)簽中，通過程序操作數(shù)據(jù)，并且當(dāng)數(shù)據(jù)改變時，頁面會自動發(fā)生改變。2.2.1初識數(shù)據(jù)綁定數(shù)據(jù)綁定分為定義數(shù)據(jù)和輸出數(shù)據(jù)。

由于數(shù)據(jù)和頁面是分離的，在實現(xiàn)數(shù)據(jù)顯示之前，需要先在<script>標(biāo)簽中定義組件所需的數(shù)據(jù)。定義數(shù)據(jù)輸出數(shù)據(jù)Vue為開發(fā)者提供了Mustache語法（又稱為雙大括號語法），將數(shù)據(jù)輸出到頁面中。2.2.1初識數(shù)據(jù)綁定定義數(shù)據(jù)的語法格式如下。1.定義數(shù)據(jù)<script>exportdefault{setup(){return{

數(shù)據(jù)名:數(shù)據(jù)值,……}}}</script>2.2.1初識數(shù)據(jù)綁定為了讓代碼更簡潔，Vue3提供了setup語法糖（SyntacticSugar），使用它可以簡化上述語法，提高開發(fā)效率。使用setup語法糖來定義數(shù)據(jù)的語法格式如下。<scriptsetup>const數(shù)據(jù)名=數(shù)據(jù)值</script>2.2.1初識數(shù)據(jù)綁定Vue為開發(fā)者提供了Mustache語法（又稱為雙大括號語法），使用該語法時相當(dāng)于在模板中放入占位符，其語法格式如下。2.輸出數(shù)據(jù){{數(shù)據(jù)名

}}當(dāng)頁面渲染時，模板中的{{數(shù)據(jù)名}}會被替換為實際的數(shù)據(jù)2.2.1初識數(shù)據(jù)綁定在Mustache語法中還可以將表達式的值作為輸出內(nèi)容。表達式的值可以是字符串、數(shù)字等類型，示例代碼如下。{{'HelloVue.js'}}{{number+1}}{{}}{{ok?'YES':'NO'}}{{'<div>HTML標(biāo)簽</div>'}}2.2.1初識數(shù)據(jù)綁定步驟1演示數(shù)據(jù)綁定的實現(xiàn)步驟2創(chuàng)建src\components\Message.vue文件。<template>{{message}}</template><scriptsetup>constmessage='不積跬步，無以至千里'</script>用于在模板中輸出message2.2.1初識數(shù)據(jù)綁定演示數(shù)據(jù)綁定的實現(xiàn)步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Message.vue'保存上述代碼后，在瀏覽器中訪問:5173/，數(shù)據(jù)綁定的頁面效果如下圖所示。2.2.1初識數(shù)據(jù)綁定2.2.1初識數(shù)據(jù)綁定多學(xué)一招：將Vue引入HTML頁面中前面學(xué)習(xí)的方式是通過Vite創(chuàng)建一個新的項目，這個項目中不僅有Vue，而且整合了一系列輔助開發(fā)的工具。其實Vue的使用方式非常靈活，它還提供了另一種使用方式，就是將Vue引入HTML頁面中。但這種方式只能使用Vue的核心功能，所以只適合開發(fā)一些簡單的頁面，在實際開發(fā)中一般不用這種方式。2.2.1初識數(shù)據(jù)綁定步驟1演示如何將Vue引入HTML頁面中創(chuàng)建D:\vue\chapter02\helloworld.html文件，在該文件中通過<script>標(biāo)簽引入Vue。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>HelloWorld案例</title><scriptsrc="/vue@3/dist/vue.global.js"></script></head><body></body></html>步驟3步驟22.2.1初識數(shù)據(jù)綁定在頁面中定義一個用于被Vue應(yīng)用實例控制的DOM區(qū)域，使開發(fā)者可以將數(shù)據(jù)填充到該DOM區(qū)域中。<divid="app"><p>{{message}}</p></div>步驟1步驟3步驟2演示如何將Vue引入HTML頁面中2.2.1初識數(shù)據(jù)綁定演示如何將Vue引入HTML頁面中在</body>結(jié)束標(biāo)簽前編寫代碼，創(chuàng)建Vue應(yīng)用實例。<script>constvm=Vue.createApp({setup(){return{message:'HelloWorld!'}}})vm.mount('#app')</script>步驟1步驟3步驟22.2.1初識數(shù)據(jù)綁定通過瀏覽器訪問helloworld.html，將Vue引入HTML頁面的效果如下圖所示。掌握響應(yīng)式數(shù)據(jù)綁定，能夠定義數(shù)據(jù)并將數(shù)據(jù)渲染到頁面中2.2.2響應(yīng)式數(shù)據(jù)綁定

先定一個小目標(biāo)！2.2.2響應(yīng)式數(shù)據(jù)綁定如果想要實現(xiàn)頁面中數(shù)據(jù)的更新，則需要進行響應(yīng)式數(shù)據(jù)綁定，也就是將數(shù)據(jù)定義成響應(yīng)式數(shù)據(jù)。Vue為開發(fā)者提供了如下函數(shù)用于定義響應(yīng)式數(shù)據(jù)。ref()函數(shù)reactive()函數(shù)toRef()函數(shù)toRefs()函數(shù)2.2.2響應(yīng)式數(shù)據(jù)綁定響應(yīng)式數(shù)據(jù)=ref(數(shù)據(jù))1.ref()函數(shù)ref()函數(shù)用于將數(shù)據(jù)轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)，其參數(shù)為數(shù)據(jù)，返回值為轉(zhuǎn)換后的響應(yīng)式數(shù)據(jù)。使用ref()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。響應(yīng)式數(shù)據(jù).value=新值如果需要更改響應(yīng)式數(shù)據(jù)的值，可以使用如下語法格式進行修改。步驟1演示ref()函數(shù)的使用方法步驟2創(chuàng)建src\components\Ref.vue文件。<template>{{message}}</template><scriptsetup>import{ref}from'vue'constmessage=ref('會當(dāng)凌絕頂，一覽眾山小')setTimeout(()=>{message.value='鍥而不舍，金石可鏤'},2000)</script>2.2.2響應(yīng)式數(shù)據(jù)綁定演示ref()函數(shù)的使用方法步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Ref.vue'2.2.2響應(yīng)式數(shù)據(jù)綁定保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定等待2秒后的頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定2.2.2響應(yīng)式數(shù)據(jù)綁定2.reactive()函數(shù)reactive()函數(shù)用于創(chuàng)建一個響應(yīng)式對象或數(shù)組，將普通的對象或數(shù)組作為參數(shù)傳給該函數(shù)即可。使用reactive()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。響應(yīng)式對象或數(shù)組=reactive(普通的對象或數(shù)組)步驟1演示reactive()函數(shù)的使用方法步驟2創(chuàng)建src\components\Reactive.vue文件。<template>{{obj.message}}</template><scriptsetup>import{reactive}from'vue'constobj=reactive({message:'不畏浮云遮望眼，自緣身在最高層'})setTimeout(()=>{obj.message='欲窮千里目，更上一層樓'},2000)</script>2.2.2響應(yīng)式數(shù)據(jù)綁定步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Reactive.vue'2.2.2響應(yīng)式數(shù)據(jù)綁定演示reactive()函數(shù)的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定等待2秒后的頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定2.2.2響應(yīng)式數(shù)據(jù)綁定3.toRef()函數(shù)toRef()函數(shù)用于將響應(yīng)式對象中的單個屬性轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。使用toRef()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。響應(yīng)式數(shù)據(jù)=toRef(響應(yīng)式對象,'屬性名')toRef()函數(shù)的第1個參數(shù)是響應(yīng)式對象，第2個參數(shù)是待轉(zhuǎn)換的屬性名，返回值為轉(zhuǎn)換后的響應(yīng)式數(shù)據(jù)。步驟1演示toRef()函數(shù)的使用方法步驟2創(chuàng)建src\components\ToRef.vue文件。<template><div>message的值：{{message}}</div><div>obj.message的值：{{obj.message}}</div></template><scriptsetup>import{reactive,toRef}from'vue'constobj=reactive({message:'黑發(fā)不知勤學(xué)早，白首方悔讀書遲'})constmessage=toRef(obj,'message')setTimeout(()=>{message.value='少壯不努力，老大徒傷悲'},2000)</script>2.2.2響應(yīng)式數(shù)據(jù)綁定步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/ToRef.vue'2.2.2響應(yīng)式數(shù)據(jù)綁定演示toRef()函數(shù)的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定等待2秒后的頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定2.2.2響應(yīng)式數(shù)據(jù)綁定4.toRefs()函數(shù)toRefs()函數(shù)用于將響應(yīng)式對象中的所有屬性轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。使用toRefs()函數(shù)定義響應(yīng)式數(shù)據(jù)的語法格式如下。所有屬性組成的對象=toRefs(響應(yīng)式對象)步驟1演示toRefs()函數(shù)的使用方法步驟2創(chuàng)建src\components\ToRefs.vue文件。<template><div>message的值：{{message}}</div><div>obj.message的值：{{obj.message}}</div></template><scriptsetup>import{reactive,toRefs}from'vue'constobj=reactive({message:'盛年不重來，一日難再晨'})let{message}=toRefs(obj)setTimeout(()=>{message.value='及時當(dāng)勉勵，歲月不待人'},2000)</script>2.2.2響應(yīng)式數(shù)據(jù)綁定步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/ToRefs.vue'2.2.2響應(yīng)式數(shù)據(jù)綁定演示toRefs()函數(shù)的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定等待2秒后的頁面效果如下圖所示。2.2.2響應(yīng)式數(shù)據(jù)綁定指令2.3掌握內(nèi)容渲染指令，能夠靈活運用v-text和v-html指令將字符串渲染到頁面中2.3.1內(nèi)容渲染指令

先定一個小目標(biāo)！內(nèi)容渲染指令用于渲染DOM元素的內(nèi)容。常見的內(nèi)容渲染指令如下。v-textv-html2.3.1內(nèi)容渲染指令<標(biāo)簽名v-text="數(shù)據(jù)名"></標(biāo)簽名>1.v-textv-text用于渲染DOM元素的文本內(nèi)容，如果文本內(nèi)容中包含HTML標(biāo)簽，那么瀏覽器不會對其進行解析。v-text的語法格式如下。2.3.1內(nèi)容渲染指令步驟1演示v-text的使用方法步驟2創(chuàng)建src\components\VText.vue文件。<template><divv-text="message"></div></template><scriptsetup>constmessage='<span>咬定青山不放松，立根原在破巖中</span>'</script>2.3.1內(nèi)容渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VText.vue'2.3.1內(nèi)容渲染指令演示v-text的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-text的運行結(jié)果如下圖所示。2.3.1內(nèi)容渲染指令<標(biāo)簽名v-html="數(shù)據(jù)名"></標(biāo)簽名>2.v-html在使用Vue進行內(nèi)容渲染時，如果內(nèi)容中包含HTML標(biāo)簽并且希望這些標(biāo)簽被瀏覽器解析，則可以使用v-html。v-html用于渲染DOM元素的HTML內(nèi)容，其用法與v-text相似。v-html的語法格式如下。2.3.1內(nèi)容渲染指令步驟1演示v-html的使用方法步驟2創(chuàng)建src\components\VHtml.vue文件。<template><divv-html="html"></div></template><scriptsetup>consthtml='<strong>千磨萬擊還堅勁，任爾東西南北風(fēng)</strong>'</script>2.3.1內(nèi)容渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VHtml.vue'2.3.1內(nèi)容渲染指令演示v-html的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-html的運行結(jié)果如下圖所示。2.3.1內(nèi)容渲染指令掌握屬性綁定指令，能夠靈活運用v-bind指令給目標(biāo)元素的屬性動態(tài)綁定值2.3.2

屬性綁定指令

先定一個小目標(biāo)！<標(biāo)簽名v-bind:屬性名="數(shù)據(jù)名"></標(biāo)簽名>在Vue開發(fā)中，有時需要綁定DOM元素的屬性，從而更好地控制屬性的值，此時可以使用屬性綁定指令v-bind來實現(xiàn)。v-bind的語法格式如下。2.3.2

屬性綁定指令<div:id="'list'+index"></div>v-bind還支持將屬性與字符串拼接表達式綁定，示例代碼如下。步驟1演示v-bind的使用方法步驟2創(chuàng)建src\components\VBind.vue文件。<template><p><inputtype="text"v-bind:placeholder="username"></p><p><inputtype="password":placeholder="password"></p></template><scriptsetup>constusername='請輸入用戶名'constpassword='請輸入密碼'</script>2.3.2

屬性綁定指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VBind.vue'2.3.2

屬性綁定指令演示v-bind的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-bind的運行結(jié)果如下圖所示。2.3.2

屬性綁定指令掌握事件綁定指令，能夠靈活運用v-on指令給目標(biāo)元素綁定事件2.3.3事件綁定指令

先定一個小目標(biāo)！<標(biāo)簽名v-on:事件名="事件處理器"></標(biāo)簽名>在Vue開發(fā)中，有時需要給DOM元素綁定事件