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

第2章Vue.js開發(fā)基礎(chǔ)《Vue.js前端開發(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)所依賴的數(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開發(fā)環(huán)境后，要想使用Vue開發(fā)實(shí)際項(xiàng)目，必須先學(xué)習(xí)Vue基礎(chǔ)知識(shí)。只有掌握Vue框架的基礎(chǔ)知識(shí)后，才能根據(jù)實(shí)際需求游刃有余地進(jìn)行項(xiàng)目開發(fā)。本章將詳細(xì)講解Vue開發(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)，其代碼寫在<template>標(biāo)簽中。模板樣式是指通過(guò)CSS代碼為當(dāng)前組件設(shè)置樣式，其代碼寫在<style>標(biāo)簽中。樣式邏輯是指通過(guò)JavaScript代碼處理組件的數(shù)據(jù)與業(yè)務(wù)，其代碼寫在<script>標(biāo)簽中。邏輯每個(gè)單文件組件由模板、樣式和邏輯3個(gè)部分構(gòu)成。2.1單文件組件<template><!--此處編寫組件的結(jié)構(gòu)--></template><script>/*此處編寫組件的邏輯*/</script><style>/*此處編寫組件的樣式*/</style>2.1單文件組件演示如何定義一個(gè)基本的單文件組件。步驟1打開命令提示符，切換到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)行訪問(wèn)。2.1單文件組件演示單文件組件的使用方法步驟1步驟3步驟4步驟2步驟5使用VSCode編輯器打開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單文件組件保存上述代碼后，在瀏覽器中訪問(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為開發(fā)者提供了Mustache語(yǔ)法（又稱為雙大括號(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ǔ)法，提高開發(fā)效率。使用setup語(yǔ)法糖來(lái)定義數(shù)據(jù)的語(yǔ)法格式如下。<scriptsetup>const數(shù)據(jù)名=數(shù)據(jù)值</script>2.2.1初識(shí)數(shù)據(jù)綁定Vue為開發(fā)者提供了Mustache語(yǔ)法（又稱為雙大括號(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ù)字等類型，示例代碼如下。{{'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'保存上述代碼后，在瀏覽器中訪問(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，而且整合了一系列輔助開發(fā)的工具。其實(shí)Vue的使用方式非常靈活，它還提供了另一種使用方式，就是將Vue引入HTML頁(yè)面中。但這種方式只能使用Vue的核心功能，所以只適合開發(fā)一些簡(jiǎn)單的頁(yè)面，在實(shí)際開發(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ū)域，使開發(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)簽前編寫代碼，創(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ò)瀏覽器訪問(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為開發(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ù)綁定保存上述代碼后，在瀏覽器中訪問(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ù)的使用方法保存上述代碼后，在瀏覽器中訪問(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é)早，白首方悔讀書遲'})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ù)的使用方法保存上述代碼后，在瀏覽器中訪問(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ù)的使用方法保存上述代碼后，在瀏覽器中訪問(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的使用方法保存上述代碼后，在瀏覽器中訪問(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的使用方法保存上述代碼后，在瀏覽器中訪問(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開發(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)輸入用戶名'constpassword='請(qǐng)輸入密碼'</script>2.3.2 屬性綁定指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VBind.vue'2.3.2 屬性綁定指令演示v-bind的使用方法保存上述代碼后，在瀏覽器中訪問(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開發(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)寫形式，可以將“v-on:事件名”簡(jiǎn)寫為“@事件名”。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的使用方法保存上述代碼后，在瀏覽器中訪問(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為開發(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)用戶的輸入事件并更新數(shù)據(jù)。v-model的語(yǔ)法格式如下。2.3.4 雙向數(shù)據(jù)綁定指令<inputv-model="info">v-model內(nèi)部會(huì)為不同的元素綁定不同的屬性和事件，具體如下。textarea元素和text類型的input元素會(huì)綁定value屬性和input事件。checkbox類型的input元素和radio類型的input元素會(huì)綁定checked屬性和change事件。select元素會(huì)綁定value屬性和change事件。例如，使用v-model實(shí)現(xiàn)輸入框的值與變量保持同步，示例代碼如下。2.3.4 雙向數(shù)據(jù)綁定指令2.3.4 雙向數(shù)據(jù)綁定指令修飾符作用.number自動(dòng)將用戶輸入的值轉(zhuǎn)換為數(shù)字類型.trim自動(dòng)過(guò)濾用戶輸入的首尾空白字符.lazy在change事件而非input事件觸發(fā)時(shí)更新數(shù)據(jù)為了方便對(duì)用戶輸入的內(nèi)容進(jìn)行處理，v-model提供了3個(gè)修飾符。v-model的修飾符如下表所示。步驟1演示v-model的使用方法步驟2創(chuàng)建src\components\VModel.vue文件。<template>

請(qǐng)輸入姓名：<inputtype="text"v-model="username"><div>姓名是：{{username}}</div></template><scriptsetup>import{ref}from'vue'constusername=ref('zhangsan')</script>2.3.4 雙向數(shù)據(jù)綁定指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VModel.vue'2.3.4 雙向數(shù)據(jù)綁定指令演示v-model的使用方法保存上述代碼后，在瀏覽器中訪問(wèn):5173/，v-model的初始頁(yè)面效果如下圖所示。2.3.4 雙向數(shù)據(jù)綁定指令在輸入框中輸入“xiaoming”，頁(yè)面效果如下圖所示。2.3.4 雙向數(shù)據(jù)綁定指令步驟1演示.number修飾符的使用方法在src\components\VModel.vue文件的<script>標(biāo)簽中添加代碼，定義響應(yīng)式數(shù)據(jù)n1和n2。constn1=ref(1)constn2=ref(2)步驟3步驟22.3.4 雙向數(shù)據(jù)綁定指令在src\components\VModel.vue文件的<template>標(biāo)簽中添加代碼，通過(guò)v-model實(shí)現(xiàn)雙向數(shù)據(jù)綁定。<inputtype="text"v-model="n1">+<inputtype="text"v-model="n2">={{n1+n2}}步驟1步驟3步驟22.3.4 雙向數(shù)據(jù)綁定指令演示.number修飾符的使用方法保存上述代碼后，在瀏覽器中訪問(wèn):5173/，未使用.number修飾符的初始頁(yè)面效果如下圖所示。2.3.4 雙向數(shù)據(jù)綁定指令改變n1的值為“198”，查看n1+n2的值。改變n1的值為“198”的頁(yè)面效果如下圖所示。2.3.4 雙向數(shù)據(jù)綁定指令修改輸入框的代碼，通過(guò)添加.number修飾符實(shí)現(xiàn)將用戶輸入的數(shù)字自動(dòng)轉(zhuǎn)換成數(shù)字類型。<inputtype="text"v-model.number="n1">+<inputtype="text"v-model.number="n2">步驟1步驟3步驟22.3.4 雙向數(shù)據(jù)綁定指令演示.number修飾符的使用方法改變n1的值為“198”，查看n1+n2的值。使用.number修飾符后改變n1的值為“198”的頁(yè)面效果如下圖所示。2.3.4 雙向數(shù)據(jù)綁定指令掌握條件渲染指令，能夠靈活運(yùn)用v-if、v-show指令根據(jù)不同的條件渲染不同的標(biāo)簽2.3.5 條件渲染指令

先定一個(gè)小目標(biāo)！在Vue中，當(dāng)需要根據(jù)不同的判斷結(jié)果顯示不同的DOM元素時(shí)，可以通過(guò)條件渲染指令來(lái)實(shí)現(xiàn)。條件渲染指令可以輔助開發(fā)者按需控制DOM元素的顯示與隱藏。條件渲染指令如下。v-ifv-show2.3.5 條件渲染指令1.v-ifv-if是根據(jù)布爾值切換元素的顯示或隱藏狀態(tài)，本質(zhì)是通過(guò)操作DOM元素來(lái)切換顯示狀態(tài)。當(dāng)給定的值為true時(shí)，元素存在于DOM樹中；當(dāng)給定的值為false時(shí)，元素從DOM樹中移除。2.3.5 條件渲染指令2.3.5 條件渲染指令直接給定一個(gè)條件，控制單個(gè)元素的顯示或隱藏v-if有兩種使用方式。<標(biāo)簽名v-if="條件"></標(biāo)簽名>通過(guò)v-if結(jié)合v-else-if、v-else來(lái)控制不同元素的顯示或隱藏<標(biāo)簽名v-if="條件A">展示A</標(biāo)簽名><標(biāo)簽名v-else-if="條件B">展示B</標(biāo)簽名><標(biāo)簽名v-else>展示C</標(biāo)簽名>步驟1演示v-if的使用方法步驟2創(chuàng)建src\components\VIf.vue文件。<template>

小明的學(xué)習(xí)評(píng)定等級(jí)為：

<pv-if="type==='A'">優(yōu)秀</p><pv-else-if="type==='B'">良好</p><pv-else>差</p><button@click="type='A'">切換成優(yōu)秀</button><button@click="type='B'">切換成良好</button><button@click="type='C'">切換成差</button></template><scriptsetup>import{ref}from'vue'consttype=ref('B')</script>2.3.5 條件渲染指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VIf.vue'2.3.5 條件渲染指令演示v-if的使用方法保存上述代碼后，在瀏覽器中訪問(wèn):5173/，v-if的初始頁(yè)面效果如下圖所示。2.3.5 條件渲染指令單擊“切換成優(yōu)秀”按鈕后的頁(yè)面效果如下圖所示。2.3.5 條件渲染指令2.v-showv-show與v-if都用來(lái)決定某一個(gè)元素是否在頁(yè)面上顯示出來(lái)。v-show的原理是通過(guò)為元素添加或移除display:none樣式來(lái)實(shí)現(xiàn)元素的顯示或隱藏。當(dāng)需要頻繁切換某個(gè)元素的顯示或隱藏時(shí)，使用v-show會(huì)更節(jié)省性能開銷；而當(dāng)只需要切換一次顯示或隱藏時(shí)，使用v-if更合理。2.3.5 條件渲染指令步驟1演示v-show的使用方法步驟2創(chuàng)建src\components\VShow.vue文件。<template><pv-if="flag">通過(guò)v-if控制的元素</p><pv-show="flag">通過(guò)v-show控制的元素</p><button@click="flag=!flag">顯示/隱藏</button></template><scriptsetup>import{ref}from'vue'constflag=ref(true)</script>2.3.5 條件渲染指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VShow.vue'2.3.5 條件渲染指令演示v-show的使用方法保存上述代碼后，在瀏覽器中訪問(wèn):5173/，v-show的初始頁(yè)面效果如下圖所示。2.3.5 條件渲染指令單擊“顯示/隱藏”按鈕后的頁(yè)面效果如下圖所示。2.3.5 條件渲染指令掌握列表渲染指令，能夠靈活運(yùn)用v-for指令將數(shù)組、對(duì)象等中的數(shù)據(jù)渲染到頁(yè)面中2.3.6 列表渲染指令

先定一個(gè)小目標(biāo)！在開發(fā)購(gòu)物應(yīng)用時(shí)，為了方便用戶查找商品信息，通常會(huì)以商品列表的形式展示商品信息。在商品列表中，每件商品的結(jié)構(gòu)都是相同的，如果每件商品的結(jié)構(gòu)都要手動(dòng)定義，會(huì)非常麻煩。為此，Vue提供了列表渲染指令v-for。開發(fā)者只需在模板中定義一件商品的結(jié)構(gòu)，v-for便會(huì)根據(jù)開發(fā)者提供的數(shù)據(jù)自動(dòng)渲染商品列表中所有的商品。2.3.6 列表渲染指令2.3.6 列表渲染指令根據(jù)數(shù)組渲染列表根據(jù)對(duì)象渲染列表根據(jù)數(shù)字渲染列表根據(jù)字符串渲染列表<標(biāo)簽名v-for="(item,index)inarr"></標(biāo)簽名><標(biāo)簽名v-for="(item,name,index)inobj"></標(biāo)簽名><標(biāo)簽名v-for="(item,index)innum"></標(biāo)簽名><標(biāo)簽名v-for="(item,index)instr"></標(biāo)簽名>使用v-for循環(huán)渲染列表<divv-for="iteminitems":key="item.id"></div>使用v-for（根據(jù)list數(shù)組中的元素）渲染列表后，當(dāng)在list數(shù)組中刪除一個(gè)元素后，index會(huì)發(fā)生變化，v-for會(huì)重新渲染列表，導(dǎo)致性能下降。為了給v-for一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而對(duì)現(xiàn)有元素進(jìn)行重用和重新排序，建議通過(guò)key屬性為列表中的每一項(xiàng)提供具有唯一性的值，示例代碼如下。2.3.6 列表渲染指令步驟1演示使用v-for根據(jù)一維數(shù)組渲染列表步驟2創(chuàng)建src\components\VFor1.vue文件。<template><divv-for="(item,index)inlist":key="index">

索引是：{{index}}---元素的內(nèi)容是：{{item}}</div></template><scriptsetup>import{reactive}from'vue'constlist=reactive(['HTML','CSS','JavaScript'])</script>2.3.6 列表渲染指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VFor1.vue'2.3.6 列表渲染指令演示使用v-for根據(jù)一維數(shù)組渲染列表保存上述代碼后，在瀏覽器中訪問(wèn):5173/，根據(jù)一維數(shù)組渲染列表的頁(yè)面效果如下圖所示。2.3.6 列表渲染指令步驟1演示使用v-for根據(jù)對(duì)象數(shù)組渲染列表步驟2創(chuàng)建src\components\VFor2.vue文件。<template><divv-for="iteminlist":key="item.id">id是：{{item.id}}---元素的內(nèi)容是：{{item.message}}</div></template><scriptsetup>import{reactive}from'vue'constlist=reactive([{id:1,message:'梅',},{id:2,message:'蘭',},{id:3,message:'竹',},{id:4,message:'菊',}])</script>2.3.6 列表渲染指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VFor2.vue'2.3.6 列表渲染指令演示使用v-for根據(jù)對(duì)象數(shù)組渲染列表保存上述代碼后，在瀏覽器中訪問(wèn):5173/，根據(jù)對(duì)象數(shù)組渲染列表的頁(yè)面效果如下圖所示。2.3.6 列表渲染指令步驟1演示使用v-for根據(jù)對(duì)象渲染列表步驟2創(chuàng)建src\components\VFor3.vue文件。<template><divv-for="(value,name)inuser":key="name">

屬性名是：{{name}}---屬性值是：{{value}}</div></template><scriptsetup>import{reactive}from'vue'constuser=reactive({id:11,name:'小明',gender:'男'})</script>2.3.6 列表渲染指令步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/VFor3.vue'2.3.6 列表渲染指令演示使用v-for根據(jù)對(duì)象渲染列表保存上述代碼后，在瀏覽器中訪問(wèn):5173/，根據(jù)對(duì)象渲染列表的頁(yè)面效果如下圖所示。2.3.6 列表渲染指令事件對(duì)象2.4掌握事件對(duì)象，能夠靈活運(yùn)用事件對(duì)象獲取和修改DOM元素的屬性2.4事件對(duì)象

先定一個(gè)小目標(biāo)！什么是事件對(duì)象？2.4事件對(duì)象事件對(duì)象是在事件觸發(fā)時(shí)產(chǎn)生的對(duì)象，該對(duì)象保存了事件觸發(fā)時(shí)的相關(guān)信息。事件對(duì)象有以下兩種獲取方式。通過(guò)事件方法的參數(shù)獲取事件對(duì)象通過(guò)$event獲取事件對(duì)象2.4事件對(duì)象<template><button@click="greet">Greet</button></template><scriptsetup>constgreet=event=>console.log(event)</script>1.通過(guò)事件方法的參數(shù)獲取事件對(duì)象在v-on綁定的用于處理事件的方法中，可以接收到一個(gè)參數(shù)，這個(gè)參數(shù)就是事件對(duì)象，示例代碼如下。2.4事件對(duì)象<template><button@click="change($event)">change</button></template><scriptsetup>constchange=event=>console.log(event)</script>2.通過(guò)$event獲取事件對(duì)象$event是Vue提供的內(nèi)置變量，使用它可以獲取事件對(duì)象，示例代碼如下。2.4事件對(duì)象步驟1演示事件對(duì)象的使用方法步驟2創(chuàng)建src\components\EventObject.vue文件。<template><div>count的值為：{{count}}</div><button@click="addCount">count+1</button></template><scriptsetup>import{ref}from'vue'constcount=ref(1)constaddCount=event=>{count.value++if(count.value%2===0){event.target.style.border='3pxdotted'}else{event.target.style.border='3pxsolid'}}</script>2.4事件對(duì)象步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/EventObject.vue'演示事件對(duì)象的使用方法2.4事件對(duì)象保存上述代碼后，在瀏覽器中訪問(wèn):5173/，通過(guò)事件方法的參數(shù)獲取事件對(duì)象的頁(yè)面效果如下圖所示。2.4事件對(duì)象單擊“count+1”按鈕后的頁(yè)面效果如下圖所示。2.4事件對(duì)象再次單擊“count+1”按鈕后的頁(yè)面效果如下圖所示。2.4事件對(duì)象步驟1演示通過(guò)$event獲取事件對(duì)象的方式步驟2修改src\components\EventObject.vue文件，編寫addCountN()方法。constaddCountN=(n,event)=>{count.value+=nif(count.value%2===0){event.target.style.border='3pxdotted'}else{event.target.style.border='3pxsolid'}}2.4事件對(duì)象步驟1步驟2修改頁(yè)面結(jié)構(gòu)代碼，增加一個(gè)按鈕。<button@click="addCountN(3,$event)">count+n</button>演示通過(guò)$event獲取事件對(duì)象的方式2.4事件對(duì)象保存上述代碼后，在瀏覽器中訪問(wèn):5173/，通過(guò)$event獲取事件對(duì)象的頁(yè)面效果如下圖所示。2.4事件對(duì)象單擊“count+n”按鈕后的頁(yè)面效果如下圖所示。2.4事件對(duì)象再次單擊“count+n”按鈕后的頁(yè)面效果如下圖所示。2.4事件對(duì)象事件修飾符2.5熟悉事件修飾符，能夠闡述常見(jiàn)的事件修飾符2.5事件修飾符

先定一個(gè)小目標(biāo)！什么是事件修飾符？2.5事件修飾符為了簡(jiǎn)化開發(fā)，Vue為開發(fā)者提供了事件修飾符，它可以與v-on配合使用，以便于對(duì)事件進(jìn)行控制，讓開發(fā)者更專注于邏輯。事件修飾符用于修飾事件的行為，寫在事件名稱之后，多個(gè)事件修飾符可以串聯(lián)使用。2.5事件修飾符通過(guò)事件修飾符可以實(shí)現(xiàn)的一些功能。阻止默認(rèn)事件行為阻止事件冒泡事件捕獲使事件只觸發(fā)一次使DOM元素只有自身觸發(fā)事件時(shí)才執(zhí)行事件方法監(jiān)聽(tīng)滾動(dòng)事件捕獲特定按鍵捕獲鼠標(biāo)按鍵2.5事件修飾符<ahref="test.html"v-on:click.prevent>阻止默認(rèn)行為</a>1.阻止默認(rèn)事件行為通過(guò).prevent事件修飾符可以實(shí)現(xiàn)阻止默認(rèn)事件行為的功能。例如，在單擊<a>標(biāo)簽時(shí)頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)，這就是<a>標(biāo)簽的默認(rèn)事件行為。在實(shí)際開發(fā)中，如果默認(rèn)事件行為與事件發(fā)生沖突，可以使用.prevent事件修飾符阻止默認(rèn)事件行為，示例代碼如下。2.5事件修飾符<template><divv-on:click="show('我是父元素的事件')"><buttonv-on:click="show('我是子元素的事件')">事件冒泡</button><buttonv-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button></div></template><scriptsetup>letshow=message=>console.log(message)</script>2.阻止事件冒泡通過(guò).stop事件修飾符可以實(shí)現(xiàn)阻止事件冒泡的功能，示例代碼如下。2.5事件修飾符<template><divv-on:click.capture="show('我是父元素的事件')"><buttonv-on:click="show('我是子元素的事件')">事件捕獲</button></div></template><scriptsetup>letshow=message=>console.log(message)</script>3.事件捕獲通過(guò).capture事件修飾符可以實(shí)現(xiàn)事件捕獲的功能，示例代碼如下。2.5事件修飾符<template><buttonv-on:click.once="show('我是當(dāng)前元素的單擊事件且只執(zhí)行一次')">只執(zhí)行一次</button></template><scriptsetup>letshow=message=>console.log(message)</script>4.使事件只觸發(fā)一次通過(guò).once事件修飾符可以實(shí)現(xiàn)使事件只觸發(fā)一次的功能。.once事件修飾符用于阻止事件的多次觸發(fā)，讓事件只觸發(fā)一次，示例代碼如下。2.5事件修飾符<template><divv-on:click="show('我是祖先元素的事件')">祖先元素

<divv-on:click.self="show('我是父元素的事件')">父元素

<divv-on:click="show('我是子元素的事件')">子元素</div></div></div></template><scriptsetup>letshow=message=>console.log(message)</script>5.使DOM元素只有自身觸發(fā)事件時(shí)才執(zhí)行事件方法通過(guò).self事件修飾符可以實(shí)現(xiàn)只有DOM元素自身觸發(fā)事件時(shí)才執(zhí)行事件方法的功能，示例代碼如下。2.5事件修飾符<divv-on:scroll.passive="onScroll"></div>通過(guò).passive事件修飾符可以實(shí)現(xiàn)監(jiān)聽(tīng)滾動(dòng)事件的功能。.passive事件修飾符主要用于優(yōu)化移動(dòng)端設(shè)備的滾屏性能。添加.passive事件修飾符后會(huì)優(yōu)先響應(yīng)滾動(dòng)事件而不是滾動(dòng)事件的回調(diào)函數(shù)，從而可提升性能。使用.passive事件修飾符的示例代碼如下。6.監(jiān)聽(tīng)滾動(dòng)事件2.5事件修飾符Vue提供了一些用于修飾鍵盤事件的修飾符，使用它們可以捕獲特定按鍵，其中常用的修飾符如下。.enter：捕獲Enter鍵。.esc：捕獲Esc鍵。.tab：捕獲Tab鍵。.delete：捕獲Delete和Backspace鍵。.ctrl：捕獲Ctrl鍵。.alt：捕獲Alt鍵。.shift：捕獲Shift鍵。.meta：在MacOS系統(tǒng)的鍵盤上捕獲command鍵；在Windows系統(tǒng)的鍵盤上捕獲Windows徽標(biāo)鍵。7.捕獲特定按鍵2.5事件修飾符<template><inputtype="text"v-on:keyup.enter="submit"></template><scriptsetup>letsubmit=()=>console.log('捕獲到Enter鍵')</script>接下來(lái)以捕獲Enter鍵為例，演示.enter事件修飾符的使用，示例代碼如下。2.5事件修飾符如果想實(shí)現(xiàn)只有按下Enter鍵時(shí)才能觸發(fā)事件，可以通過(guò).exact修飾符來(lái)實(shí)現(xiàn)，該修飾符允許控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。修改input元素實(shí)現(xiàn)僅有Enter鍵被按下的時(shí)候才觸發(fā)，示例代碼如下。<inputtype="text"v-on:keyup.enter.exact="submit">2.5事件修飾符Vue中提供了一些用于捕獲鼠標(biāo)按鍵的事件修飾符，其中常用的修飾符如下。.left：捕獲鼠標(biāo)左鍵。.middle：捕獲鼠標(biāo)中鍵。.right：捕獲鼠標(biāo)右鍵。8.捕獲鼠標(biāo)按鍵2.5事件修飾符<template><buttonv-on:click.left="show('捕獲到鼠標(biāo)左鍵')">按鈕</button></template><scriptsetup>letshow=message=>console.log(message)</script>接下來(lái)以捕獲鼠標(biāo)左鍵為例，演示鼠標(biāo)按鍵修飾符的使用，示例代碼如下。2.5事件修飾符計(jì)算屬性2.6掌握計(jì)算屬性，能夠靈活運(yùn)用計(jì)算屬性實(shí)時(shí)監(jiān)聽(tīng)數(shù)據(jù)的變化，當(dāng)所依賴的數(shù)據(jù)發(fā)生變化時(shí)重新計(jì)算值2.6計(jì)算屬性

先定一個(gè)小目標(biāo)！什么是計(jì)算屬性？2.6計(jì)算屬性Vue提供了計(jì)算屬性來(lái)描述依賴響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯。計(jì)算屬性可以實(shí)時(shí)監(jiān)聽(tīng)數(shù)據(jù)的變化，返回一個(gè)計(jì)算后的新值，并將計(jì)算結(jié)果緩存起來(lái)。只有計(jì)算屬性中依賴的數(shù)據(jù)源變化了，計(jì)算屬性才會(huì)自動(dòng)重新求值，并重新加入緩存。2.6計(jì)算屬性在組件中使用計(jì)算屬性，分為以下2個(gè)步驟。定義計(jì)算屬性輸出計(jì)算屬性122.6計(jì)算屬性<scriptsetup>import{computed}from'vue'const計(jì)算屬性名=computed(()=>{return計(jì)算后的數(shù)據(jù)})</script>計(jì)算屬性通過(guò)computed()函數(shù)定義，該函數(shù)的參數(shù)為一個(gè)回調(diào)函數(shù)，開發(fā)者需要在回調(diào)函數(shù)中實(shí)現(xiàn)計(jì)算功能，并在計(jì)算完成后返回計(jì)算后的數(shù)據(jù)，語(yǔ)法格式如下。1.定義計(jì)算屬性2.6計(jì)算屬性{{計(jì)算屬性名}}將計(jì)算屬性定義好后，可以使用Mustache語(yǔ)法輸出計(jì)算屬性，語(yǔ)法格式如下。2.輸出計(jì)算屬性2.6計(jì)算屬性步驟1演示計(jì)算屬性的使用方法步驟2創(chuàng)建src\components\Computed.vue文件。<template><p>初始message：{{message}}</p><p>反轉(zhuǎn)之后的message：{{reversedMessage}}</p><button@click="updateMessage">更改</button></template>2.6計(jì)算屬性步驟1演示計(jì)算屬性的使用方法步驟2>>接上頁(yè)代碼<scriptsetup>import{ref,computed}from'vue'constmessage=ref('HelloWorld')constreversedMessage=computed(()=>message.value.split('').reverse().join(''))constupdateMessage=()=>{message.value='hello'}</script>2.6計(jì)算屬性步驟1步驟2演示計(jì)算屬性的使用方法修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/Computed.vue'2.6計(jì)算屬性保存上述代碼后，在瀏覽器中訪問(wèn):5173/，通過(guò)計(jì)算屬性實(shí)現(xiàn)的頁(yè)面效果如下圖所示。2.6計(jì)算屬性單擊“更改”按鈕后的頁(yè)面效果如下圖所示。2.6計(jì)算屬性偵聽(tīng)器2.7掌握偵聽(tīng)器，能夠靈活運(yùn)用偵聽(tīng)器監(jiān)聽(tīng)數(shù)據(jù)的變化并進(jìn)行相應(yīng)的操作2.7偵聽(tīng)器

先定一個(gè)小目標(biāo)！什么是偵聽(tīng)器？2.7偵聽(tīng)器在Vue中，開發(fā)者可以自定義方法來(lái)進(jìn)行數(shù)據(jù)的更新操作，但是不能自動(dòng)監(jiān)聽(tīng)數(shù)據(jù)的狀態(tài)。如果想在數(shù)據(jù)更新后進(jìn)行相應(yīng)的操作，可以通過(guò)偵聽(tīng)器來(lái)實(shí)現(xiàn)。2.7偵聽(tīng)器watch(偵聽(tīng)器的來(lái)源,回調(diào)函數(shù),可選參數(shù))偵聽(tīng)器通過(guò)watch()函數(shù)定義，watch()函數(shù)的語(yǔ)法格式如下。watch()函數(shù)有3個(gè)參數(shù)，下面對(duì)這3個(gè)參數(shù)分別進(jìn)行講解。第1個(gè)參數(shù)是偵聽(tīng)器的來(lái)源，偵聽(tīng)器的來(lái)源可以有以下4種。一個(gè)函數(shù)，返回一個(gè)值。一個(gè)響應(yīng)式數(shù)據(jù)。一個(gè)響應(yīng)式對(duì)象。一個(gè)由以上類型的值組成的數(shù)組。2.7偵聽(tīng)器第2個(gè)參數(shù)是數(shù)據(jù)發(fā)生變化時(shí)要調(diào)用的回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)的第1個(gè)參數(shù)表示新值，即數(shù)據(jù)發(fā)生變化后的值，第2個(gè)參數(shù)表示舊值，即數(shù)據(jù)發(fā)生變化前的值。第3個(gè)參數(shù)是可選參數(shù)，它是一個(gè)對(duì)象，該對(duì)象有以下2個(gè)常用選項(xiàng)。deep：默認(rèn)情況下，當(dāng)偵聽(tīng)一個(gè)對(duì)象時(shí)，如果對(duì)象中的屬性值發(fā)生了變化，則無(wú)法被監(jiān)聽(tīng)到。如果想監(jiān)聽(tīng)到，可以將該選項(xiàng)設(shè)為true，表示進(jìn)行深度監(jiān)聽(tīng)。該選項(xiàng)的默認(rèn)值為false，表示不使用該選項(xiàng)。immediate：默認(rèn)情況下，組件在初次加載完畢后不會(huì)調(diào)用偵聽(tīng)器的回調(diào)函數(shù)，如果想讓偵聽(tīng)器的回調(diào)函數(shù)立即被調(diào)用，則需要將選項(xiàng)設(shè)為true。該選項(xiàng)的默認(rèn)值為false，表示不使用該選項(xiàng)。2.7偵聽(tīng)器步驟1演示偵聽(tīng)器的使用方法步驟2創(chuàng)建src\components\Watch.vue文件。<template><inputtype="text"v-model="cityName"></template><scriptsetup>import{watch,ref}from'vue'constcityName=ref('beijing')watch(cityName,(newVal,oldVal)=>{console.log(newVal,oldVal)})</script>2.7偵聽(tīng)器步驟1步驟2演示偵聽(tīng)器的使用方法修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/Watch.vue'2.7偵聽(tīng)器保存上述代碼后，在瀏覽器中訪問(wèn):5173/，在輸入框中輸入“beijing123”后的頁(yè)面效果如下圖所示。2.7偵聽(tīng)器樣式綁定2.8掌握樣式綁定，能夠靈活運(yùn)用v-bind綁定class屬性實(shí)現(xiàn)元素樣式的設(shè)置2.8.1 綁定class屬性

先定一個(gè)小目標(biāo)！在Vue中，通過(guò)更改元素的class屬性可以更改元素的樣式，而對(duì)class屬性的操作可以通過(guò)v-bind來(lái)實(shí)現(xiàn)。使用v-bind綁定class屬性時(shí)，可以將class屬性值綁定為字符串、對(duì)象或數(shù)組，下面分別進(jìn)行講解。2.8.1 綁定class屬性<template><divv-bind:class="className"></div></template><scriptsetup>constclassName='box'</script>1.將class屬性值綁定為字符串在Vue中，可以將class屬性值綁定為字符串，示例代碼如下。2.8.1 綁定class屬性<divclass="box"></div>當(dāng)上述代碼運(yùn)行后，div元素的渲染結(jié)果如下。步驟1演示如何為class屬性綁定字符串步驟2創(chuàng)建src\components\ClassStr.vue文件。<template><divv-bind:class="className">夢(mèng)想</div></template><scriptsetup>constclassName='box'</script><style>.box{border:1pxsolidblack;}</style>2.8.1 綁定class屬性步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/ClassStr.vue'2.8.1 綁定class屬性演示如何為class屬性綁定字符串保存上述代碼后，在瀏覽器中訪問(wèn):5173/，為class屬性綁定字符串的頁(yè)面效果如下圖所示。2.8.1 綁定class屬性2.將class屬性值綁定為對(duì)象2.8.1 綁定class屬性<template><divv-bind:class="{className:isActive}"></div></template><scriptsetup>import{ref}from'vue'constisActive=ref(true)</script>在Vue中，可以將class屬性值綁定為對(duì)象，從而動(dòng)態(tài)地改變class屬性值。對(duì)象中包含的屬性名表示類名，屬性值為布爾類型，如果屬性值為true，表示類名生效，否則類名不生效。將class屬性值綁定為對(duì)象的示例代碼如下。2.8.1 綁定class屬性<divclass="className1"v-bind:class="{className2:isActive}"></div>使用v-bind綁定的class屬性可以與普通的class屬性共存，示例代碼如下。<divclass="className"></div>運(yùn)行上述代碼后，div元素的渲染結(jié)果如下。<divclass="className1className2"></div>在上述代碼中，當(dāng)isActive為true時(shí)，div元素的渲染結(jié)果如下。在使用v-bind綁定class屬性時(shí)，如果不想將對(duì)象類型的class屬性值直接寫在模板中，可以將屬性值定義成一個(gè)響應(yīng)式對(duì)象或一個(gè)返回對(duì)象的計(jì)算屬性，示例代碼如下。2.8.1 綁定class屬性<template><divv-bind:class="classObject1"></div><divv-bind:class="classObject2"></div></template><scriptsetup>import{reactive,ref,computed}from'vue'constclassObject1=reactive({className:true})constisActive=ref(true)constclassObject2=computed(()=>({className:isActive.value}))</script>步驟1演示如何為class屬性綁定對(duì)象創(chuàng)建src\components\ClassObject.vue文件。<template><divclass="text"v-bind:class="{box:isBox,border:isBorder}"><divv-bind:class="{inner:isInner}">春夏</div><divv-bind:class="classObject">秋冬</div><divv-bind:class="classMeal">三餐四季~</div></div></template>步驟3步驟22.8.1 綁定class屬性步驟1演示如何為class屬性綁定對(duì)象>>接上頁(yè)代碼<scriptsetup>import{ref,reactive,computed}from'vue'constisBox=ref(true)constisBorder=ref(true)constisInner=ref(true)constisMeal=ref(true)constclassObject=reactive({inner:true})constclassMeal=computed(()=>({meal:isMeal.value}))</script>步驟3步驟22.8.1 綁定class屬性在src\components\ClassObject.vue文件中定義頁(yè)面所需的樣式。<style>.text{text-align:center;line-height:30px;}.box{width:100%;background:linear-gradient(white,rgb(239,250,86));}.border{border:2pxdottedblack;}步驟1步驟3步驟22.8.1 綁定class屬性演示如何為class屬性綁定對(duì)象>>接上頁(yè)代碼.inner{margin-top:2px;width:100px;height:30px;border:2pxdoubleblack;}.meal{width:100px;height:30px;border:2pxdashedrgb(120,81,227);}</style>步驟1步驟3步驟22.8.1 綁定class屬性演示如何為class屬性綁定