項(xiàng)目3智慧公寓管理系統(tǒng)的登錄注冊(cè)頁(yè)HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)項(xiàng)目效果基于Vue.js框架的前端登錄與注冊(cè)頁(yè)面，來(lái)探討前端技術(shù)在實(shí)際項(xiàng)目中的應(yīng)用。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)學(xué)習(xí)內(nèi)容任務(wù)3-1

構(gòu)建Vue開(kāi)發(fā)環(huán)境任務(wù)3-2基于Vue基礎(chǔ)語(yǔ)法實(shí)現(xiàn)表單提交頁(yè)面任務(wù)3-3基于組件實(shí)現(xiàn)列表渲染頁(yè)面任務(wù)3-1構(gòu)建Vue開(kāi)發(fā)環(huán)境1HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)任務(wù)效果

在HTML文件中使用CDN方式引入Vue庫(kù)，并親手創(chuàng)建一個(gè)Vue應(yīng)用程序，讓它在頁(yè)面上自豪地輸出“智慧公寓管理系統(tǒng)！”。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)知識(shí)儲(chǔ)備初識(shí)Vue：Web前端技術(shù)的發(fā)展、MVC與MVVM模式、Vue的發(fā)展歷程Vue環(huán)境搭建：安裝Vue、安裝vue-devtoolsHTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.1.1初識(shí)Vue1.Web前端技術(shù)的發(fā)展：Web前端的核心技術(shù)包括HTML、CSS和JavaScript，它們分別負(fù)責(zé)構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)、樣式和行為。jQuery通過(guò)封裝JavaScript代碼，簡(jiǎn)化了DOM操作、事件處理、動(dòng)畫(huà)效果和Ajax交互等功能的實(shí)現(xiàn)。單頁(yè)面應(yīng)用通過(guò)Ajax異步加載新數(shù)據(jù)來(lái)更新頁(yè)面內(nèi)容，無(wú)需刷新整個(gè)頁(yè)面，從而提供了更加流暢的用戶(hù)體驗(yàn)。Vue框架以其獨(dú)特的優(yōu)勢(shì)脫穎而出。它采用虛擬DOM技術(shù)來(lái)減少直接操作DOM的頻率，通過(guò)簡(jiǎn)潔的API實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)綁定，支持單向和雙向數(shù)據(jù)綁定。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.1.1初識(shí)Vue2.MVC與MVVM模式：

MVC是軟件工程中的一種軟件架構(gòu)模式，它把軟件系統(tǒng)分為模型（Model，M）、視圖（View，V）和控制器（Controller，C）三個(gè)基本部分。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.1.1初識(shí)Vue

MVVM模式由模型（Model，M）、視圖（View，V）和視圖模型（ViewModel，VM）三部分組成，它本質(zhì)上仍是MVC的改進(jìn)版。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.1.1初識(shí)Vue3.Vue的發(fā)展歷程：Vue.js是一套用于構(gòu)建用戶(hù)界面和SPA的漸進(jìn)式JavaScript框架，它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，開(kāi)發(fā)過(guò)程中可以創(chuàng)建可重用的UI組件。Vue于2013年12月在Github上正式發(fā)布2015年10月26日，正式發(fā)布了1.0.0版本2016年10月1日，正式發(fā)布了2.0.0版本2020年9月18日，Vue.js3.0正式發(fā)布，代號(hào)OnePieceHTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.1.2Vue環(huán)境搭建 1.安裝Vue（1）CDN方式使用CDN方式安裝Vue，需要選擇一個(gè)可提供Vue.js鏈接的穩(wěn)定CDN服務(wù)商。我們可借助script標(biāo)簽實(shí)現(xiàn)CDN方式安裝Vue。<scriptsrc="/vue@3/dist/vue.global.js"></script>（2）NPM方式在使用Vue框架構(gòu)建大型應(yīng)用時(shí)，推薦使用NPM安裝Vue.js。$npmcreatevue@latest

HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.1.2Vue環(huán)境搭建 2.vue-devtoolsvue-devtools是一款基于GoogleChrome瀏覽器、用于調(diào)試Vue應(yīng)用的瀏覽器擴(kuò)展。接下來(lái)介紹vue-devtools的安裝步驟。（1）下載devtools-main.zip壓縮包到本地。（2）將壓縮包進(jìn)行解壓，然后在命令行中切換到解壓好的devtools-main目錄，執(zhí)行以下命令進(jìn)行依賴(lài)安裝

npminstall

HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.1.2Vue環(huán)境搭建 （3）依賴(lài)安裝完成后，執(zhí)行npmrunbuild命令編譯vue-devtools源程序。npmrunbuild（4）將插件添加至Chrome瀏覽器。單擊Chrome瀏覽器右上角的“”圖標(biāo)，并在彈出的快捷菜單中選中“更多工具”→“擴(kuò)展程序”選項(xiàng)，如圖所示。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)任務(wù)實(shí)施在ch03文件夾創(chuàng)建一個(gè)Example3-1.html文件，并在該文件中引入Vue，具體代碼如例3-1所示。具體代碼見(jiàn)例3-1HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)總結(jié)

通過(guò)本任務(wù)的實(shí)施，成功搭建了Vue的開(kāi)發(fā)環(huán)境，掌握了Vue的多種安裝方式，這不僅提升了我們對(duì)前端框架的理解和應(yīng)用能力，也為其后續(xù)的Web開(kāi)發(fā)實(shí)踐奠定了堅(jiān)實(shí)的基礎(chǔ)。在搭建環(huán)境的過(guò)程中，我們學(xué)習(xí)了如何下載并安裝Vue的調(diào)試工具vue-devtools，這將極大地提高在開(kāi)發(fā)過(guò)程中的調(diào)試效率，促進(jìn)問(wèn)題的快速解決。任務(wù)3-2基于Vue基礎(chǔ)語(yǔ)法實(shí)現(xiàn)表單提交頁(yè)面1HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)任務(wù)效果

實(shí)現(xiàn)一個(gè)高效的表單頁(yè)面，該頁(yè)面不僅集成了用戶(hù)預(yù)訂所需的所有關(guān)鍵信息點(diǎn)，還通過(guò)合理的布局和導(dǎo)航設(shè)計(jì)，極大地方便了用戶(hù)的操作。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)知識(shí)儲(chǔ)備模板語(yǔ)法：文本差值、原始HTML、插值表達(dá)式指令：內(nèi)置指令、自定義指令Vue實(shí)例核心選項(xiàng)：data、methods、computed、watch以及生命周期鉤子模板引用：添加模板引用、訪問(wèn)模板引用Class與Style綁定：綁定HTML樣式（Class）、綁定內(nèi)聯(lián)樣式（Style）事件處理與表單綁定：事件參數(shù)、常用修飾符、表單元素的數(shù)據(jù)綁定HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.1模板語(yǔ)法在Vue應(yīng)用程序中，數(shù)據(jù)綁定是核心步驟。Vue通過(guò)文本插值、原始HTML插值和插值表達(dá)式等多種方式，實(shí)現(xiàn)了靈活的數(shù)據(jù)嵌入和動(dòng)態(tài)渲染。

（1）文本插值在Vue中，文本插值需要使用Mustache語(yǔ)法，即雙大括號(hào)形式。<h1>{{message}}</h1>（2）原始HTMLMustache雙大括號(hào)會(huì)將數(shù)據(jù)解釋為普通的純文本，而非HTML代碼。用戶(hù)可使用v-html指令在Mustache標(biāo)簽中輸出HTML代碼。<h1v-html="message"></h1>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.1模板語(yǔ)法（3）插值表達(dá)式在插值語(yǔ)法中使用JavaScript表達(dá)式。{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}<div:id="`list-${id}`"></div>在Vue模板內(nèi)，每個(gè)綁定僅支持單一表達(dá)式，即一段能夠被求值的JavaScript代碼，不滿(mǎn)足上述條件，則綁定不生效。<!--這是一個(gè)語(yǔ)句，而非表達(dá)式-->{{vara=1}}<!--選擇結(jié)構(gòu)也不支持，請(qǐng)使用三元表達(dá)式-->{{if(ok){returnmessage}}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令Vue提供兩種指令，一種是內(nèi)置指令，另一種是自定義指令。1.內(nèi)置指令Vue為我們提供了內(nèi)置指令，通過(guò)內(nèi)置指令就可以用簡(jiǎn)潔的代碼實(shí)現(xiàn)復(fù)雜的功能。v-model:雙向數(shù)據(jù)綁定v-on:監(jiān)聽(tīng)事件簡(jiǎn)寫(xiě)

@clickv-bind:單向數(shù)據(jù)綁定簡(jiǎn)寫(xiě):classv-text:插入文本內(nèi)容v-html:插入包含HTML的內(nèi)容v-for:列表渲染v-show:顯示隱藏v-if:條件渲染v-else-if/v-else :條件渲染指令的補(bǔ)充，它們與v-if一起使用v-cloak:隱藏尚未編譯的Vue實(shí)例標(biāo)記HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（1）v-model<inputtype="text"v-model="msg">data(){return{msg:"hello"}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（2）v-on指令v-on指令是事件綁定指令，可為目標(biāo)元素綁定指定事件，事件的類(lèi)型由參數(shù)決定。v-on指令可用于監(jiān)聽(tīng)DOM事件，并在觸發(fā)事件時(shí)運(yùn)行一些JavaScript邏輯代碼。v-on指令后的表達(dá)式可以是一段JavaScript代碼，也可以是一個(gè)methods選項(xiàng)內(nèi)的方法名或方法調(diào)用語(yǔ)句。在使用v-on指令綁定事件時(shí)，需要在v-on指令后指定事件類(lèi)型，如click、mousedown、mouseup等。//表達(dá)式為一段JavaScript代碼<buttonv-on:click=“num+=1”>按鈕</button>//簡(jiǎn)寫(xiě)語(yǔ)法<button@click=“num+=1”>按鈕</button>//表達(dá)式為方法名<button@click=“hello”>按鈕</button>//表達(dá)式為方法調(diào)用語(yǔ)句<button@click=“hello('hi')”>按鈕</button>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（3）v-bindv-bind指令主要用于響應(yīng)式地更新HTML屬性，將一個(gè)或多個(gè)屬性動(dòng)態(tài)綁定到表達(dá)式中，也可將一個(gè)組件的prop動(dòng)態(tài)綁定到表達(dá)式中。//綁定一個(gè)屬性<av-bind:href="/">鏈接</a>//簡(jiǎn)寫(xiě)語(yǔ)法<a:href="/">鏈接</a>//動(dòng)態(tài)屬性<a:[attrname]="url">鏈接</a>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（4）v-textv-text指令用于更新元素的文本內(nèi)容，且v-text指令會(huì)覆蓋標(biāo)簽內(nèi)部的原有內(nèi)容，若僅需更新元素內(nèi)的部分文本內(nèi)容，仍建議使用Mustache插值語(yǔ)法。<pv-text="msg">hello</p>data(){return{msg:"hi"}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（5）v-htmlv-html指令用于更新元素的innerHTML，該部分內(nèi)容會(huì)以普通HTML代碼的形式插入頁(yè)面，不會(huì)作為Vue的模板進(jìn)行編譯。<pv-html="msg">hello</p>data(){return{msg:""}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（6）v-forVue中內(nèi)置了一個(gè)列表渲染指令，即v-for指令。v-for指令可以實(shí)現(xiàn)頁(yè)面的列表渲染，常用來(lái)循環(huán)數(shù)組。<liv-for="(item,index)inlist":key="item">{{item}}</li>data(){return{list:[1,2,3]}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（7）v-show、v-if與v-else-if/v-else指令v-show、v-if、v-else-if和v-else是Vue.js中用于條件渲染的指令。這些指令允許根據(jù)表達(dá)式的值來(lái)決定是否渲染一個(gè)元素或一組元素。v-show：<pv-show="flag">v-show控制的元素</p>

v-if：<pv-if="flag">v-if控制的元素</p>

v-else-if：<divv-if="type==='A'">優(yōu)秀</div><divv-else-if="type==='B'">良好</div><divv-else-if="type==='C'">一般</div><divv-else>差</div>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令1.內(nèi)置指令（8）v-cloakv-cloak是Vue中的一個(gè)特殊指令，該指令主要用于解決頁(yè)面閃爍問(wèn)題。<style>[v-cloak]{display:none}</style><pv-cloak>{{message}}</p>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令

2.自定義指令當(dāng)希望為元素附加一些特別的功能時(shí)，可借助自定義指令來(lái)實(shí)現(xiàn)。（1）自定義指令注冊(cè)方式：全局注冊(cè)、局部注冊(cè)

constvm=Vue.createApp({})vm.directive('指令名稱(chēng)'，{})constvm=Vue.createApp({directives:{指令名稱(chēng):{mounted(el){}}}})HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令

（2）指令鉤子函數(shù)一個(gè)指令的定義對(duì)象內(nèi)可包含多個(gè)指令鉤子函數(shù)，這些鉤子函數(shù)都是可選的，自定義指令的鉤子函數(shù)如下所示。

constmyDirective={//在綁定元素的屬性前或事件監(jiān)聽(tīng)器應(yīng)用前調(diào)用created(el,binding,vnode,prevVnode){},//在元素被插入到DOM前調(diào)用beforeMount(el,binding,vnode,prevVnode){},//在綁定元素的父組件及其所有子節(jié)點(diǎn)都掛載完成后調(diào)用mounted(el,binding,vnode,prevVnode){},//在綁定元素的父組件更新前調(diào)用beforeUpdate(el,binding,vnode,prevVnode){},//在綁定元素的父組件及其所有子節(jié)點(diǎn)都更新后調(diào)用updated(el,binding,vnode,prevVnode){},//在綁定元素的父組件卸載前調(diào)用beforeUnmount(el,binding,vnode,prevVnode){},//在綁定元素的父組件卸載后調(diào)用unmounted(el,binding,vnode,prevVnode){}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.2指令

（3）指令鉤子函數(shù)的參數(shù)1）el：el指的是指令所綁定的元素，可借助el參數(shù)直接操作DOM。2）binding：一個(gè)參數(shù)對(duì)象，對(duì)象內(nèi)包含以下屬性：value、oldValue、arg、modifires、instance、dir3）vnode：代表綁定元素的底層VNode，即Vue生成的虛擬節(jié)點(diǎn)。4）preVnode：指的是在之前的渲染中代表指令所綁定元素的上一個(gè)VNode，僅在beforeUpdate和updated鉤子中可用。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.3Vue實(shí)例核心選項(xiàng)在Vue中使用createApp()創(chuàng)建應(yīng)用程序?qū)嵗龝r(shí)，需要為createApp()傳入一個(gè)參數(shù)對(duì)象，使其返回應(yīng)用程序?qū)嵗旧?。這個(gè)對(duì)象包括data、methods、computed、watch以及生命周期鉤子等選項(xiàng)。1.data選項(xiàng)data選項(xiàng)中的數(shù)據(jù)是Vue實(shí)例的數(shù)據(jù)對(duì)象，data返回一個(gè)對(duì)象，該對(duì)象包含組件的初始數(shù)據(jù)狀態(tài)。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.3Vue實(shí)例核心選項(xiàng)2.methods選項(xiàng)methods選項(xiàng)用于定義在Vue實(shí)例中綁定的方法。constapp=Vue.createApp({methods:{方法名（空/參數(shù)）{//方法體}}});app.mount('#app')//在模板中調(diào)用方法<p>{{methodName1()}}</p>//作為事件處理方法被調(diào)用<button@click="methodName1">點(diǎn)擊我</button>methods:{methodName1(){//方法體},//在其他方法中調(diào)用方法methodName2(){this.methodName1();},//在生命周期鉤子中調(diào)用方法mounted(){this.methodName1();},},HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.3Vue實(shí)例核心選項(xiàng)3.computed選項(xiàng)Vue提供了一種更通用的方式來(lái)觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng)，即計(jì)算屬性。computed:{attribute：{get(){}set(newValue){}}}//簡(jiǎn)寫(xiě)形式computed:{attribute(){return{}//必須有返回值}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.3Vue實(shí)例核心選項(xiàng)4.watch選項(xiàng)通過(guò)定義watch選項(xiàng)，可以指定要監(jiān)聽(tīng)的屬性值，一旦這些屬性發(fā)生變化，相應(yīng)的偵聽(tīng)器函數(shù)便會(huì)自動(dòng)觸發(fā)，從而賦予我們根據(jù)數(shù)據(jù)變化執(zhí)行相應(yīng)邏輯的能力。偵聽(tīng)器的語(yǔ)法格式：watch:{msg(val,oldval){}}偵聽(tīng)器函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是被監(jiān)聽(tīng)數(shù)據(jù)的新值，第二個(gè)參數(shù)是舊值，即改變之前的值。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.3Vue實(shí)例核心選項(xiàng)4.watch選項(xiàng)定義深度偵聽(tīng)器的語(yǔ)法格式：data(){return{product:{name:'banana',price:20},}},watch:{product:{handler(val,oldVal){},deep:true}}偵聽(tīng)器的立即執(zhí)行語(yǔ)法格式：data(){return{msg:'hello',}},watch:{msg:{handler(val,oldVal){},immediate：true}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.3Vue實(shí)例核心選項(xiàng)5.生命周期鉤子每個(gè)Vue組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，如設(shè)置數(shù)據(jù)偵聽(tīng)，編譯模板，掛載組件實(shí)例到DOM以及在數(shù)據(jù)變化時(shí)更新DOM等。在此過(guò)程中，Vue會(huì)運(yùn)行一些生命周期鉤子，使我們能夠在特定的階段運(yùn)行特定的代碼。（1）beforeCreate（2）created（3）beforeMount（4）mounted（5）beforeUpdate（6）updated（7）activated（8）deactivated（9）beforeUnmount（10）unmountedHTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.4模板引用Vue的模板引用主要是為了處理直接訪問(wèn)底層DOM元素而做的補(bǔ)充處理。模板引用提供了一種訪問(wèn)模板中DOM元素或子組件的方式，使得我們可以直接操作DOM元素或調(diào)用子組件的方法。Vue的ref屬性允許在一個(gè)特定的DOM元素或子組件實(shí)例被掛載后，使用ref屬性給DOM元素或子組件添加一個(gè)引用信息，進(jìn)而通過(guò)this.$refs獲得對(duì)它的直接引用。在DOM元素或組件尚未掛載時(shí)，無(wú)法通過(guò)this.$refs訪問(wèn)引用。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.4模板引用（1）為DOM元素或組件添加引用使用ref屬性對(duì)DOM元素或組件添加引用，語(yǔ)法格式如下所示。//為DOM元素添加引用<inputref="input"><liv-for="iteminlist"ref="items">{{item}}</li>//列表元素//為組件添加引用<my-componentref="myComponent"/>（2）訪問(wèn)引用的DOM元素或組件在Vue中，可以通過(guò)this.$refs來(lái)訪問(wèn)已經(jīng)添加的引用，語(yǔ)法格式如下所示。//訪問(wèn)引用的元素或組件mounted(){

this.$refs.input

this.$refs.items

//訪問(wèn)引用的組件

this.$refs.myComponent}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.5Class與Style綁定在Vue中，Class綁定允許我們根據(jù)條件動(dòng)態(tài)地添加、移除或切換CSS類(lèi)名，而Style綁定則允許直接操作元素的行內(nèi)樣式。1.綁定HTML樣式（Class）在Vue中，可以通過(guò)v-bind:class指令在HTML元素上綁定Class樣式。（1）對(duì)象語(yǔ)法綁定HTML樣式//一個(gè)簡(jiǎn)單對(duì)象<div:class="{danger:isActive}">Happy</div>//普通的class樣式設(shè)置、多屬性的對(duì)象<divclass="borders":class="{danger:isActive,'success':hasOk}">Happy</div>data(){return{isActive:true,hasOk:false}}樣式屬性過(guò)多<div:class="{classObj}">Happy</div>data(){return{classObj:{danger:true,'success':false}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.5Class與Style綁定（2）數(shù)組語(yǔ)法綁定HTML樣式除對(duì)象語(yǔ)法外，還可為v-bind:class傳遞一個(gè)數(shù)組，數(shù)組內(nèi)填寫(xiě)的類(lèi)名需要用方括號(hào)進(jìn)行包裹。<style>.class1{color:red}.class2{color:green}</style><div:class="['class1','class2']">Happy</div>若未對(duì)數(shù)組內(nèi)填寫(xiě)的類(lèi)名用方括號(hào)進(jìn)行包裹，數(shù)組內(nèi)的數(shù)據(jù)將被視為變量進(jìn)行解析，在解析變量前要確保該變量已經(jīng)被定義。<style>.class1{color:red}.class2{color:green}</style><div:class="[Class1,Class2]">Happy</div>data(){return{Class1:'class1',Class2:'class2'}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.5Class與Style綁定2.綁定內(nèi)聯(lián)樣式（Style）內(nèi)聯(lián)樣式綁定指的是在HTML元素中通過(guò)Vue的v-bind指令將CSS樣式直接寫(xiě)入元素的style屬性中。（1）對(duì)象語(yǔ)法綁定內(nèi)聯(lián)樣式<div:style="{color:Color1,fontSize:fontSize}">Happy</div>或<div:style="{color:Color1,'font-size':fontSize}">Happy</div>data(){return{Color1:yellow,fontSize:40px}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.5Class與Style綁定（2）數(shù)組語(yǔ)法綁定內(nèi)聯(lián)樣式v-bind:style的數(shù)組語(yǔ)法可將多個(gè)樣式對(duì)象作用到同一個(gè)HTML元素上。<div:style="[styleObj,styleObj2]">Happy</div>data(){return{styleObj:{color:yellow,fontSize:'20px'}}computed:{styleObj2(){return{color:'green',fontSize:'40px'}}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.6事件處理與表單綁定1.事件處理：參數(shù)傳遞、$event訪問(wèn)、事件修飾符和按鍵修飾符（1）參數(shù)傳遞<buttonv-on:click="方法名(參數(shù))">文本</button><button@click="方法名(參數(shù))">文本</button>（2）$event訪問(wèn)<button@click="方法名(參數(shù),$event)">文本</button><button@click="(event)=>方法名(參數(shù),event)">文本</button>（3）事件修飾符v-on:事件類(lèi)型.修飾符="表達(dá)式"

.stop、.prevent、.capture、.self、.once、passive。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.6事件處理與表單綁定（4）按鍵修飾符1）鍵盤(pán)事件Vue中常用的鍵盤(pán)事件有3種，包括keydown、keyup、keypress。2）按鍵修飾符在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，經(jīng)常需要檢查特定的按鍵,Vue則提供了一種更為便利的方式來(lái)監(jiān)聽(tīng)鍵盤(pán)事件，即為常用的按鍵提供了別名。例如，使用.enter修飾符來(lái)監(jiān)聽(tīng)鍵盤(pán)上的Enter鍵的按下事件。<input@keyup.enter="handleEnter">HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.6事件處理與表單綁定2.表單綁定：v-model指令使用在不同的表單元素上時(shí)，保存值的類(lèi)型也是不同的。（1）文本輸入框單行文本輸入框與多行文本輸入框<inputv-model="message"/><textareav-model="message"></textarea>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.6事件處理與表單綁定（2）復(fù)選框單一復(fù)選框的綁定值為布爾類(lèi)型，復(fù)選框被選中綁定值為true，復(fù)選框未被選中綁定值為false。單一復(fù)選框的雙向數(shù)據(jù)綁定<inputv-model="checked"type="checkbox"/>data(){return{checked:true}}多個(gè)復(fù)選框的雙向數(shù)據(jù)綁定<inputtype="checkbox"id="one"value="文本"v-model="checkedNames"><inputtype="checkbox"id="two"value="文本"v-model="checkedNames"><inputtype="checkbox"id="three"value="文本"v-model="checkedNames">data(){return{checkedNames:[]}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.2.6事件處理與表單綁定（3）單選按鈕單選按鈕的雙向數(shù)據(jù)綁定<inputv-model="singleChoice"type="radio"value="文本"/>data(){return{singleChoice:''}}（4）選擇框單選選擇框的雙向數(shù)據(jù)綁定<selectv-model="selected"><optiondisabledvalue="">請(qǐng)選擇</option><option>first</option><option>second</option><option>third</option></select>data(){return{selected:''}}多選選擇框的雙向數(shù)據(jù)綁<selectv-model="selectedList"multiple><optiondisabledvalue="">first</option><option>second</option></select>data(){return{selectedList:[]}}HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)任務(wù)實(shí)施在ch03文件夾創(chuàng)建一個(gè)Example3-15.html文件，并在該文件中引入Vue，具體代碼如例3-15所示。具體代碼見(jiàn)例3-15HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)總結(jié)通過(guò)本次基于Vue基礎(chǔ)語(yǔ)法實(shí)現(xiàn)表單提交頁(yè)面的任務(wù)，成功構(gòu)建了一個(gè)功能完備的預(yù)訂信息提交表單頁(yè)面。該頁(yè)面采用了Vue的響應(yīng)式數(shù)據(jù)驅(qū)動(dòng)機(jī)制，利用Vue的模板語(yǔ)法、指令、實(shí)例核心選項(xiàng)以及事件處理與表單綁定等關(guān)鍵技術(shù)，實(shí)現(xiàn)了表單的動(dòng)態(tài)展示和數(shù)據(jù)的雙向綁定。在開(kāi)發(fā)表單提交頁(yè)面時(shí)，強(qiáng)調(diào)對(duì)用戶(hù)數(shù)據(jù)的尊重和保護(hù)，討論如何在技術(shù)實(shí)現(xiàn)中體現(xiàn)對(duì)用戶(hù)隱私的保護(hù)。這不僅是技術(shù)能力的體現(xiàn)，更是對(duì)社會(huì)責(zé)任感的一種培養(yǎng)，這在另一方面也體現(xiàn)二十大精神中對(duì)網(wǎng)絡(luò)安全和數(shù)據(jù)安全的重視。任務(wù)3-3基于組件實(shí)現(xiàn)列表渲染頁(yè)面1HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)任務(wù)效果

通過(guò)Vue的組件化開(kāi)發(fā)模式，實(shí)現(xiàn)一個(gè)功能完備、結(jié)構(gòu)清晰、交互流暢的列表渲染頁(yè)面。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)知識(shí)儲(chǔ)備組件基礎(chǔ)：組件化開(kāi)發(fā)、組件注冊(cè)、組件傳值過(guò)渡與動(dòng)畫(huà)：什么是過(guò)渡與動(dòng)畫(huà)、CSS過(guò)渡類(lèi)、CSS動(dòng)畫(huà)、自定義類(lèi)名、鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫(huà)、元素間過(guò)渡、列表過(guò)渡HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.1組件基礎(chǔ)1.組件化開(kāi)發(fā)組件化開(kāi)發(fā)是Vue框架的精髓之一，其核心思想是將龐大的應(yīng)用程序細(xì)分為多個(gè)獨(dú)立的、專(zhuān)注于特定功能的小組件。這些組件不僅可以在不同的應(yīng)用程序中重復(fù)使用，還能靈活組合以構(gòu)建出復(fù)雜且多樣化的頁(yè)面和應(yīng)用程序。

2.組件注冊(cè)：全局注冊(cè)和局部注冊(cè)（1）全局注冊(cè)constapp=Vue.createApp({});ponent('組件名稱(chēng)',{Function|Object}definition(optional));<divid='app'><組件名稱(chēng)></組件名稱(chēng)></div>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.1組件基礎(chǔ)（2）局部注冊(cè)局部組件需要先在其父組件的components屬性中添加一個(gè)鍵值對(duì)來(lái)實(shí)現(xiàn)，其中鍵是組件的標(biāo)簽名，值是組件的函數(shù)對(duì)象或選項(xiàng)對(duì)象。components:{ComponentB:ComponentA}components:{ComponentC:ComponentC}//屬性名與屬性值相同時(shí)，可簡(jiǎn)寫(xiě)為components:{ComponentC}演示如何注冊(cè)全局組件與局部組件，【例3-16】注冊(cè)全局組件與局部組件HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.1組件基礎(chǔ)3.組件傳值在Vue中，組件實(shí)例享有其獨(dú)立的局部作用域，這意味著組件之間的數(shù)據(jù)傳遞需要借助特定的機(jī)制，如props選項(xiàng)，來(lái)實(shí)現(xiàn)父組件向子組件的數(shù)據(jù)傳輸。這種父子組件之間的依賴(lài)關(guān)系是數(shù)據(jù)傳遞的基石，其過(guò)程如圖所示。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.1組件基礎(chǔ)（1）props傳值向子組件傳遞數(shù)據(jù)需要使用子組件的props選項(xiàng)，props選項(xiàng)內(nèi)包含多個(gè)prop名稱(chēng)。我們可將這些prop名稱(chēng)看作子組件的標(biāo)簽屬性，簡(jiǎn)稱(chēng)prop屬性。父組件可通過(guò)這些prop屬性將父組件的數(shù)據(jù)傳遞給子組件。①<childtitle="world"></child>②//局部組件接收方法constchild={props:['title']}//全局組件接收方法ponent('child',{props:['title']})【例3-17】使用props選項(xiàng)實(shí)現(xiàn)父組件向子組件傳值HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.1組件基礎(chǔ)（2）$emit傳值實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)，可以在子組件中調(diào)用$emit()方法向外觸發(fā)自定義事件并傳遞附加參數(shù)，而父組件需要監(jiān)聽(tīng)該自定義事件，并通過(guò)事件回調(diào)函數(shù)接收附加參數(shù)。$emit(eventName,[...args])①ponent('user',{data(){return{name:'lili'}},methods:{handleClick(){this.$emit('get',)}}template:`<button@click="handleClick">用戶(hù)姓名</button>`})②ponent('class',{data(){return{name:'小王'}},methods:{getName(params){=params}}template:`<user@get="getName"></user>`})【例3-18】使用$emit()方法實(shí)現(xiàn)子組件向父組件傳值HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.2過(guò)渡與動(dòng)畫(huà)1.什么是過(guò)渡與動(dòng)畫(huà)Vue框架內(nèi)置了一個(gè)名為transition的組件，這個(gè)組件封裝了過(guò)渡效果的實(shí)現(xiàn)邏輯，使得我們可以輕松地添加過(guò)渡效果到任何元素或組件上。通過(guò)transition組件，可以指定過(guò)渡的持續(xù)時(shí)間、過(guò)渡的類(lèi)名以及過(guò)渡的類(lèi)型（如淡入淡出、滑動(dòng)等）。<transitionname="fade"><!--這里是需要添加過(guò)渡效果的元素或組件--><divv-if="show">Hello,Vue!</div></transition>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.2過(guò)渡與動(dòng)畫(huà)2.CSS過(guò)渡類(lèi)Vue為<transition>標(biāo)簽內(nèi)部的元素提供了3個(gè)進(jìn)入過(guò)渡的類(lèi)和3個(gè)離開(kāi)過(guò)渡的類(lèi)。（1）v-enter-from（2）v-enter-active（3）v-enter-to（4）v-leave-from（5）v-leave-active（6）v-leave-toHTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.2過(guò)渡與動(dòng)畫(huà)3.CSS動(dòng)畫(huà)CSS動(dòng)畫(huà)與CSS過(guò)渡類(lèi)似，同樣使用需要CSS過(guò)渡類(lèi)實(shí)現(xiàn)動(dòng)畫(huà)效果，通過(guò)結(jié)合CSS的@keyframes規(guī)則，可以在動(dòng)畫(huà)的不同時(shí)間點(diǎn)設(shè)置關(guān)鍵幀，以實(shí)現(xiàn)更復(fù)雜的動(dòng)畫(huà)效果。CSS動(dòng)畫(huà)與CSS過(guò)渡的區(qū)別在于CSS動(dòng)畫(huà)的*-enter-from類(lèi)不會(huì)在元素被插入后的下一幀立即移除，而是在一個(gè)animationend事件觸發(fā)時(shí)被移除。對(duì)于大多數(shù)的CSS動(dòng)畫(huà)，僅使用*-enter-active和*-leave-active類(lèi)即可實(shí)現(xiàn)動(dòng)畫(huà)效果。 HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.2過(guò)渡與動(dòng)畫(huà)4.自定義類(lèi)名除使用CSS過(guò)渡類(lèi)實(shí)現(xiàn)過(guò)渡與動(dòng)畫(huà)效果外，還可以使用Vue為transition組件提供的6個(gè)屬性接收自定義過(guò)渡類(lèi)名。transition組件的6個(gè)屬性如下所示。（1）enter-from-class （2）enter-active-class（3）enter-to-class （4）leave-from-class（5）leave-active-class （6）leave-to-class

HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.2過(guò)渡與動(dòng)畫(huà)5.鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫(huà)<transition>組件提供了一系列的鉤子函數(shù)，這些鉤子函數(shù)可以在元素進(jìn)入、離開(kāi)或切換時(shí)觸發(fā)，從而實(shí)現(xiàn)編寫(xiě)自定義的JavaScript邏輯來(lái)控制動(dòng)畫(huà)。<transition:css="false"v-on:before-enter="onBeforeEnter"v-on:enter="onEnter"v-on:after-enter="onAfterEnter"v-on:enter-cancelled="onEnterCancelled"v-on:before-leave="onBeforeLeave"v-on:leave="onLeave"v-on:after-leave="onAfterLeave"v-on:leave-cancelled="onLeaveCancelled"></transition>進(jìn)入動(dòng)畫(huà)鉤子函數(shù)由before-enter、enter、after-enter和enter-cancelled組成；離開(kāi)動(dòng)畫(huà)鉤子函數(shù)由before-leave、leave、after-leave和leave-cancelled組成。HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.2過(guò)渡與動(dòng)畫(huà)5.鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫(huà)JavaScript鉤子函數(shù)注冊(cè)的回調(diào)方法需要在組件的methods選項(xiàng)中實(shí)現(xiàn)。<script>constvm=Vue.createApp({methods:{//動(dòng)畫(huà)入場(chǎng)之前，此時(shí)動(dòng)畫(huà)尚未開(kāi)始，設(shè)置元素開(kāi)始動(dòng)畫(huà)之前的起始樣式onBeforeEnter(el){},//在元素被插入到DOM之后的下一幀被調(diào)用,用這個(gè)來(lái)開(kāi)始進(jìn)入動(dòng)畫(huà)onEnter(el,done){done()},//調(diào)用回調(diào)函數(shù)done表示過(guò)渡結(jié)束,如果與CSS結(jié)合使用，則這個(gè)回調(diào)是可選參數(shù)onAfterEnter(el){},//當(dāng)進(jìn)入過(guò)渡完成時(shí)調(diào)用onEnterCancelled(el){},//當(dāng)進(jìn)入過(guò)渡在完成之前被取消時(shí)調(diào)用onBeforeLeave(el){},//在leave鉤子之前調(diào)用onLeave(el,done){done()},//當(dāng)只使用JavaScript鉤子函數(shù)時(shí)，v-on:leave中必須使用done進(jìn)行回調(diào);當(dāng)JavaScript鉤子函數(shù)與CSS結(jié)合時(shí)done是可選的onAfterLeave(el){},//在離開(kāi)過(guò)渡完成，且元素已從DOM中移除時(shí)調(diào)用//leave-cancelled只可用于v-show中onLeaveCancelled(el){}}}).mount('#app')</script>HTML5的優(yōu)勢(shì)

解決了跨瀏覽器的問(wèn)題

新增多個(gè)新特性

（語(yǔ)義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶(hù)優(yōu)先原則

化繁為簡(jiǎn)的優(yōu)勢(shì)3.3.2過(guò)渡與動(dòng)畫(huà)6.元素間過(guò)渡在Vue中，<transition>組件確實(shí)支持包裹多個(gè)互斥的子元素，并通過(guò)v-if、v-else-if、v-else等指令來(lái)實(shí)現(xiàn)它們之間的切換過(guò)渡。<transitionname="transition-name"><buttonv-if="docState==='saved'"key="edit">Edit</button>