Vue.js前端開(kāi)發(fā)實(shí)戰(zhàn)（第2版） 課件 第1、2章 初識(shí)Vue.js、Vue.js開(kāi)發(fā)基礎(chǔ)

第1章初識(shí)Vue.js《Vue.js前端開(kāi)發(fā)實(shí)戰(zhàn)（第2版）》學(xué)習(xí)目標(biāo)/Target了解前端技術(shù)的發(fā)展，能夠說(shuō)出使用框架開(kāi)發(fā)項(xiàng)目的優(yōu)勢(shì)了解什么是Vue，能夠說(shuō)出Vue的基本概念了解Vue的特性，能夠說(shuō)出Vue的4個(gè)特性了解Vue的版本，能夠說(shuō)出Vue2和Vue3的區(qū)別學(xué)習(xí)目標(biāo)/Target掌握VisualStudioCode編輯器的使用方法，能夠使用VisualStudioCode編

輯器進(jìn)行項(xiàng)目開(kāi)發(fā)掌握Node.js環(huán)境的搭建，能夠獨(dú)立完成Node.js的下載和安裝掌握常見(jiàn)的包管理工具的使用方法，能夠應(yīng)用npm和yarn相關(guān)命令下載、升級(jí)、

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

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

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

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

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

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

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

Plus組件庫(kù)：一款基于Vue3的桌面端組件庫(kù)。Vant組件庫(kù)：一款開(kāi)源移動(dòng)端組件庫(kù)，它從3.0版本開(kāi)始支持Vue3。Ant

Design

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

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

鍵會(huì)自動(dòng)生成一個(gè)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)境的搭建，能夠獨(dú)立完成Node.js的下載和安裝1.3.2 Node.js環(huán)境

先定一個(gè)小目標(biāo)！Node.js是一個(gè)基于V8引擎的JavaScript運(yùn)行環(huán)境，提供了一些功能性的API，例如文件操作API、網(wǎng)絡(luò)通信API等。1.3.2 Node.js環(huán)境打開(kāi)Node.js官網(wǎng)，找到Node.js下載地址，如下圖所示。1.3.2 Node.js環(huán)境從Node.js官方網(wǎng)站可以看出，Node.js有兩個(gè)版本，分別是16.17.0LTS和18.9.0Current。其中，LTS（LongTermSupport）表示提供長(zhǎng)期支持的版本，只進(jìn)行Bug修復(fù)且版本穩(wěn)定，因此有很多用戶(hù)在使用；Current表示當(dāng)前發(fā)布的新版本，增加了一些新特性，有利于進(jìn)行新技術(shù)的開(kāi)發(fā)使用。這里選擇下載16.17.0LTS版本。下載完成后會(huì)得到一個(gè)名稱(chēng)為node-v16.17.0-x64.msi的安裝包文件。1.3.2 Node.js環(huán)境雙擊node-v16.17.0-x64.msi安裝包圖標(biāo)，會(huì)彈出安裝向?qū)Т翱?，如下圖所示。安裝過(guò)程全部使用默認(rèn)值。1.3.2 Node.js環(huán)境安裝完成后，測(cè)試一下Node.js是否安裝成功。1.3.2 Node.js環(huán)境按“Windows+R”組合鍵，打開(kāi)“運(yùn)行”對(duì)話(huà)框，輸入“cmd”。在“運(yùn)行”對(duì)話(huà)框中輸入“cmd”后的效果如下圖所示。打開(kāi)“運(yùn)行”對(duì)話(huà)框1.3.2 Node.js環(huán)境步驟1步驟3步驟2單擊“確定”按鈕或者直接按“Enter”鍵，會(huì)打開(kāi)命令提示符，如下圖所示。打開(kāi)命令提示符1.3.2 Node.js環(huán)境步驟1步驟3步驟2在命令提示符中，輸入命令“node-v”，其中v是version的簡(jiǎn)寫(xiě)，表示版本。命令輸入完成后，按“Enter”鍵，查看當(dāng)前安裝的Node.js版本，如下圖所示。查看Node.js版本若想要退出命令提示符，可以輸入“exit”并按“Enter”鍵，或者單擊右上角的“×”關(guān)閉按鈕退出。1.3.2 Node.js環(huán)境步驟1步驟3步驟2掌握常見(jiàn)的包管理工具的使用方法，能夠應(yīng)用npm和yarn相關(guān)命令下載、升級(jí)、卸載包1.3.3常見(jiàn)的包管理工具

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

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

CLI創(chuàng)建。Vue

CLI基于Webpack構(gòu)建并配置項(xiàng)目，在項(xiàng)目啟動(dòng)時(shí)，Webpack需要從入口文件索引整個(gè)項(xiàng)目的文件，編譯成一個(gè)或多個(gè)單獨(dú)的.js文件。雖然Webpack對(duì)代碼進(jìn)行了拆分，但是仍可能一次生成所有路由下的編譯后的文件，導(dǎo)致服務(wù)啟動(dòng)時(shí)間隨著項(xiàng)目的復(fù)雜度增加而呈指數(shù)式的增長(zhǎng)。而Vite改進(jìn)了這一點(diǎn)，在項(xiàng)目啟動(dòng)時(shí)，Vite會(huì)對(duì)模塊代碼進(jìn)行按需加載，啟動(dòng)速度更快。因此，當(dāng)使用Vue3開(kāi)發(fā)新項(xiàng)目時(shí)，推薦使用Vite進(jìn)行創(chuàng)建。1.4.1 什么是ViteVite不需要以命令的方式安裝和卸載，只要安裝了npm或yarn，就可使用Vite的相關(guān)命令創(chuàng)建項(xiàng)目。Vite會(huì)作為項(xiàng)目的開(kāi)發(fā)依賴(lài)保存在項(xiàng)目的node_modules目錄中。需要注意的是，Node.js必須為14.18及以上版本時(shí)才可以使用Vite，并且Vite中的部分模板可能需要更高的Node.js版本才能正常運(yùn)行。另外，Node.js的14、16等更新版本不再支持Windows7操作系統(tǒng)，推薦使用Windows10等新版操作系統(tǒng)。1.4.1 什么是Vite掌握Vue3項(xiàng)目的創(chuàng)建方法，能夠使用Vite創(chuàng)建Vue3項(xiàng)目1.4.2 創(chuàng)建Vue3項(xiàng)目

先定一個(gè)小目標(biāo)！Vite提供了兩種創(chuàng)建項(xiàng)目的命令。手動(dòng)創(chuàng)建項(xiàng)目的命令通過(guò)模板自動(dòng)創(chuàng)建項(xiàng)目的命令1.4.2 創(chuàng)建Vue3項(xiàng)目使用npm或yarn包管理工具都可以搭配Vite手動(dòng)創(chuàng)建項(xiàng)目，具體命令如下。#使用npmcreate命令創(chuàng)建項(xiàng)目npmcreatevite@latest#使用yarncreate命令創(chuàng)建項(xiàng)目yarncreatevite上述命令展示了兩種包管理工具用于創(chuàng)建Vite項(xiàng)目，在使用時(shí)任選其一即可。npmcreate和yarn

create命令后跟一個(gè)vite包名，表示初始化Vite。vite@latest表示在npm中安裝最新版本的Vite。1.4.2 創(chuàng)建Vue3項(xiàng)目1.手動(dòng)創(chuàng)建項(xiàng)目的命令打開(kāi)命令提示符，切換到D:\vue\chapter01目錄，執(zhí)行如下命令。yarncreatevite執(zhí)行上述命令后，Vite會(huì)提示填寫(xiě)項(xiàng)目名稱(chēng)，如下圖所示。1.4.2 創(chuàng)建Vue3項(xiàng)目STEP01步驟1步驟3步驟4步驟2手動(dòng)創(chuàng)建Vue項(xiàng)目使用vite-project作為項(xiàng)目名稱(chēng)后，Vite會(huì)提示選擇創(chuàng)建項(xiàng)目所使用的框架，如下圖所示。1.4.2 創(chuàng)建Vue3項(xiàng)目手動(dòng)創(chuàng)建Vue項(xiàng)目步驟1步驟3步驟4步驟2選擇好框架后，Vite會(huì)提示選擇一個(gè)變體，如下圖所示。1.4.2 創(chuàng)建Vue3項(xiàng)目STEP03手動(dòng)創(chuàng)建Vue項(xiàng)目步驟3步驟4步驟2步驟1選擇好變體后，Vite會(huì)提示項(xiàng)目創(chuàng)建完成，如下圖所示。1.4.2 創(chuàng)建Vue3項(xiàng)目手動(dòng)創(chuàng)建Vue項(xiàng)目步驟3步驟4步驟2步驟11.4.2 創(chuàng)建Vue3項(xiàng)目項(xiàng)目創(chuàng)建完成后的提示命令，具體命令解釋如下。cdvite-project #切換到項(xiàng)目目錄yarn #安裝項(xiàng)目的全部依賴(lài)yarndev #啟動(dòng)服務(wù)上述命令中，yarndev命令是Vue3項(xiàng)目中package.json文件里面scripts節(jié)點(diǎn)配置的命令。除了yarndev命令外，還有2個(gè)常用命令yarnbuild和yarn

preview，它們分別表示構(gòu)建生產(chǎn)環(huán)境項(xiàng)目和構(gòu)建本地預(yù)覽環(huán)境項(xiàng)目。這3個(gè)命令實(shí)際上都是別名，是為了便于開(kāi)發(fā)人員記憶。當(dāng)執(zhí)行這3個(gè)命令時(shí)，yarn會(huì)讀取當(dāng)前項(xiàng)目的package.json文件中的命令配置，找到真正的命令并執(zhí)行。1.4.2 創(chuàng)建Vue3項(xiàng)目Vue3項(xiàng)目的package.json文件中的命令配置如下。"scripts":{"dev":"vite","build":"vitebuild","preview":"vitepreview"},上述配置中，dev是vite的別名，build是vite

build的別名，preview是vitepreview的別名。也就是說(shuō)，當(dāng)執(zhí)行yarndev時(shí)，實(shí)際執(zhí)行的命令是yarnvite。別名可以自定義，如果修改了別名，在執(zhí)行命令時(shí)需要使用修改后的別名。1.4.2 創(chuàng)建Vue3項(xiàng)目項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開(kāi)啟一個(gè)本地服務(wù)，具體如下。VITEv4.1.4readyin441ms?Local::5173/1.4.2 創(chuàng)建Vue3項(xiàng)目在瀏覽器中打開(kāi):5173/，如下圖所示。通過(guò)模板自動(dòng)創(chuàng)建項(xiàng)目的方式相對(duì)簡(jiǎn)單，它通過(guò)附加的命令行選項(xiàng)直接指定項(xiàng)目名稱(chēng)和模板，省去了填寫(xiě)項(xiàng)目名稱(chēng)、選擇框架和變體等環(huán)節(jié)。Vite提供了許多模板預(yù)設(shè)，可以創(chuàng)建Vite+React+TS、Vite+Vue、Vite+Svelte等類(lèi)型的項(xiàng)目。通過(guò)附加的命令行選項(xiàng)直接指定項(xiàng)目名稱(chēng)和模板的基本語(yǔ)法格式如下。#使用npm6或更低版本創(chuàng)建項(xiàng)目npmcreatevite@latest<項(xiàng)目名稱(chēng)>--template<模板名稱(chēng)>#使用npm7或更高版本創(chuàng)建項(xiàng)目npmcreatevite@latest<項(xiàng)目名稱(chēng)>----template<模板名稱(chēng)>#使用yarncreate命令創(chuàng)建項(xiàng)目yarncreatevite<項(xiàng)目名稱(chēng)>--template<模板名稱(chēng)>1.4.2 創(chuàng)建Vue3項(xiàng)目2.通過(guò)模板自動(dòng)創(chuàng)建項(xiàng)目的命令打開(kāi)命令提示符，切換到D:\vue\chapter01目錄，使用yarn創(chuàng)建一個(gè)基于Vite+Vue模板且項(xiàng)目名稱(chēng)為hello-vite的項(xiàng)目。yarncreatevitehello-vite--templatevue1.4.2 創(chuàng)建Vue3項(xiàng)目STEP01執(zhí)行上述命令后，hello-vite項(xiàng)目創(chuàng)建完成的效果如下圖所示。1.4.2 創(chuàng)建Vue3項(xiàng)目在項(xiàng)目創(chuàng)建完成后，給出了一些提示命令，需要執(zhí)行這些命令才能完成項(xiàng)目啟動(dòng)，具體命令如下。cdhello-vite #切換到項(xiàng)目目錄yarn #安裝項(xiàng)目的全部依賴(lài)yarndev #啟動(dòng)服務(wù)1.4.2 創(chuàng)建Vue3項(xiàng)目項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開(kāi)啟一個(gè)本地服務(wù)，具體如下。VITEv4.1.4readyin441ms?Local::5173/在瀏覽器中打開(kāi):5173/，頁(yè)面效果與手動(dòng)創(chuàng)建Vue3項(xiàng)目的頁(yè)面效果相同。熟悉Vue3項(xiàng)目的目錄結(jié)構(gòu)，能夠歸納常用的目錄和文件的作用1.4.3 Vue3項(xiàng)目的目錄結(jié)構(gòu)

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

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

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

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

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

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

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

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

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

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

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

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

先定一個(gè)小目標(biāo)！<標(biāo)簽名v-bind:屬性名="數(shù)據(jù)名"></標(biāo)簽名>在Vue開(kāi)發(fā)中，有時(shí)需要綁定DOM元素的屬性，從而更好地控制屬性的值，此時(shí)可以使用屬性綁定指令v-bind來(lái)實(shí)現(xiàn)。v-bind的語(yǔ)法格式如下。2.3.2 屬性綁定指令<div:id="'list'+index"></div>v-bind還支持將屬性與字符串拼接表達(dá)式綁定，示例代碼如下。步驟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='請(qǐng)輸入用戶(hù)名'constpassword='請(qǐng)輸入密碼'</script>2.3.2 屬性綁定指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VBind.vue'2.3.2 屬性綁定指令演示v-bind的使用方法保存上述代碼后，在瀏覽器中訪(fǎng)問(wèn):5173/，v-bind的運(yùn)行結(jié)果如下圖所示。2.3.2 屬性綁定指令掌握事件綁定指令，能夠靈活運(yùn)用v-on指令給目標(biāo)元素綁定事件2.3.3事件綁定指令

先定一個(gè)小目標(biāo)！<標(biāo)簽名v-on:事件名="事件處理器"></標(biāo)簽名>在Vue開(kāi)發(fā)中，有時(shí)需要給DOM元素綁定事件，從而利用事件實(shí)現(xiàn)交互效果，這時(shí)可以利用事件綁定指令v-on來(lái)實(shí)現(xiàn)。v-on的語(yǔ)法格式如下。在上述語(yǔ)法格式中，事件名即DOM中的事件名，例如click、input、keyup等；事件處理器可以是方法名或內(nèi)聯(lián)JavaScript語(yǔ)句。如果邏輯復(fù)雜，事件處理器建議使用方法名，方法需要在<script>標(biāo)簽中定義；如果邏輯簡(jiǎn)單，只有一行代碼，則可以使用內(nèi)聯(lián)JavaScript語(yǔ)句。另外，v-on還有簡(jiǎn)寫(xiě)形式，可以將“v-on:事件名”簡(jiǎn)寫(xiě)為“@事件名”。2.3.3事件綁定指令步驟1演示v-on的使用方法步驟2創(chuàng)建src\components\VOn.vue文件。<template><button@click="showInfo">輸出信息</button></template><scriptsetup>constshowInfo=()=>{console.log('歡迎來(lái)到Vue.js的世界！')}</script>2.3.3事件綁定指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VOn.vue'2.3.3事件綁定指令演示v-on的使用方法保存上述代碼后，在瀏覽器中訪(fǎng)問(wèn):5173/，單擊“輸出信息”按鈕后的頁(yè)面效果和控制臺(tái)如下圖所示。2.3.3事件綁定指令掌握雙向數(shù)據(jù)綁定指令，能夠靈活運(yùn)用v-model指令在表單元素上實(shí)現(xiàn)數(shù)據(jù)的雙向綁定2.3.4 雙向數(shù)據(jù)綁定指令

先定一個(gè)小目標(biāo)！<標(biāo)簽名v-model="數(shù)據(jù)名"></標(biāo)簽名>Vue為開(kāi)發(fā)者提供了v-model指令來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定，使用它可以在input、textarea和select元素上創(chuàng)建雙向數(shù)據(jù)綁定，它會(huì)根據(jù)使用的元素自動(dòng)選取對(duì)應(yīng)的屬性和事件組合，負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的輸入事件并更新數(shù)據(jù)。v-model的語(yǔ)法格式如下。2.3.4 雙向數(shù)據(jù)綁定指令<inputv-model="info">v-model內(nèi)部會(huì)為不同的元素綁定不同的屬性和事件，具體如下。textarea元素和text類(lèi)型的input元素會(huì)綁定value屬性和input事件。checkbox類(lèi)型的input元素和