《Java EE框架（SSM + Spring Boot + Vue.js 3）整合開發(fā)》 課件 第14章 Vue3 基礎

J

a

v

a

E

E框架整合開發(fā)創(chuàng)新·協(xié)作·分享T

I

P

C

C教案第十四章Vue3基礎T

I

P

C

C教案本章目標了解Vue3的生命周期掌握組件及自定義指令的原理掌握計算屬性及監(jiān)聽器的用法掌握Vue3的安裝方法T

I

P

C

C教案本章內(nèi)容安裝Vue

3使用Visual

Studio

Code開發(fā)第一個Vue程序插值與表達式計算屬性和監(jiān)聽器指令在Vue中動態(tài)使用樣式組件自定義指令T

I

P

C

C教案14.1安裝Vue

314.1.1本地獨立版本方法14.1.2

CDN方法14.1.3

NPM方法14.1.4命令行工具（CLI）方法T

I

P

C

C教案14.1.1本地獨立版本方法可通過地址“/vue@next”將最新版本的

Vue.js庫（vue.global.js）下載到本地，編寫本書時，最新版本是3.0.5。然后，在頁面上引入Vue.js庫，示例代碼如下：<script

src="js/vue.global.js"></script>T

I

P

C

C教案14.1安裝Vue

314.1.1本地獨立版本方法14.1.2

CDN方法14.1.3

NPM方法14.1.4命令行工具（CLI）方法T

I

P

C

C教案14.1.2

CDN方法讀者在學習或開發(fā)時，在頁面上可通過CDN（ContentDelivery

Network，內(nèi)容分發(fā)網(wǎng)絡）引入最新版本的Vue.js庫。示例代碼如下：<script

src="/vue@next"></script>對于生產(chǎn)環(huán)境，建議使用固定版本，以免因版本不同帶來兼容性問題，示例代碼如下：<script

src="/vue@3.0.5/dist/vue.global.js"></script>T

I

P

C

C教案14.1安裝Vue

314.1.1本地獨立版本方法14.1.2

CDN方法14.1.3

NPM方法14.1.4命令行工具（CLI）方法T

I

P

C

C教案14.1.3

NPM方法在用Vue.js構(gòu)建大型應用時推薦使用NPM安裝最新穩(wěn)定版的

Vue.js，因為NPM能很好地和webpack模塊打包器配合使用。示例如下：$

npm

install

vue@nextT

I

P

C

C教案14.1安裝Vue

314.1.1本地獨立版本方法14.1.2

CDN方法14.1.3

NPM方法14.1.4命令行工具（CLI）方法T

I

P

C

C教案14.1.4命令行工具（CLI）方法Vue.js提供一個官方命令行工具（Vue

CLI），為單頁面應用快速搭建繁雜的腳手架。對于初學者不建議使用NPM和Vue

CLI方法安裝Vue.js。NPM和Vue

CLI方法的安裝過程，將在本書后續(xù)內(nèi)容中介紹。T

I

P

C

C教案本章內(nèi)容安裝Vue

3使用Visual

Studio

Code開發(fā)第一個Vue程序插值與表達式計算屬性和監(jiān)聽器指令在Vue中動態(tài)使用樣式組件自定義指令T

I

P

C

C教案14.2使用Visual

Studio

Code開發(fā)第一個Vue程序14.2.1安裝Visual

Studio

Code及其插件14.2.2創(chuàng)建第一個Vue應用14.2.3聲明式渲染14.2.4

Vue生命周期T

I

P

C

C教案14.2.1安裝Visual

Studio

Code及其插件可通過“”地址下載VSCode，本書使用的安裝文件是VSCodeUserSetup-x64-1.52.1.exe。VSCode中許多插件需要我們安裝，例如，我們安裝Vue的插件

Vetur。打開VSCode，點擊左側(cè)最下面一個圖標，按照下圖所示的步驟安裝即可。T

I

P

C

C教案14.2使用Visual

Studio

Code開發(fā)第一個Vue程序14.2.1安裝Visual

Studio

Code及其插件14.2.2創(chuàng)建第一個Vue應用14.2.3聲明式渲染14.2.4

Vue生命周期T

I

P

C

C教案14.2.2創(chuàng)建第一個Vue應用每個Vue應用都是通過用createApp函數(shù)創(chuàng)建一個新實例開始，具體語法如下：const

app=Vue.createApp({/*選項*/})傳遞給createApp的選項用于配置根組件（渲染的起點）。Vue應用創(chuàng)建后，調(diào)用mount方法將Vue應用掛載到一個DOM元素（HTML元素或CSS選擇器）中，例如，如果把一個Vue應用掛載到<div

id="app"></div>上，應傳遞#app。const

HelloVueApp

={}//配置根組件const

vueApp=Vue.createApp(HelloVueApp)//創(chuàng)建Vue實例

const

vm=vueApp.mount("#app")//將Vue實例掛載到#appT

I

P

C

C教案【例14-1】第一個Vue應用<div

id="hello-vue"

class="demo">{{

message

}}</div><script

src="js/vue.global.js"></script><script>const

HelloVueApp

=

{data(){//Vue實例的數(shù)據(jù)對象，ES6語法，等價于data:function(){}

return{message:

"Hello

Vue!!"}}}//每個Vue應用都是通過用createApp函數(shù)創(chuàng)建一個新的應用實例開始//mount函數(shù)把一個Vue應用實例掛載到<div

id="hello-vue"></div>Vue.createApp(HelloVueApp).mount("#hello-vue")</script><style>.demo

{font-family:

sans-serif;}</style>T

I

P

C

C教案14.2使用Visual

Studio

Code開發(fā)第一個Vue程序14.2.1安裝Visual

Studio

Code及其插件14.2.2創(chuàng)建第一個Vue應用14.2.3聲明式渲染14.2.4

Vue生命周期T

I

P

C

C教案14.2.3聲明式渲染Vue.js的核心是采用簡潔的模板將數(shù)據(jù)渲染到DOM中，例如在

14.2.2節(jié)的helllovue.html文件中，通過模板<div

id="hello-vue"class="demo">{{message}}</div>聲明將屬性變量

message的值“Hello

Vue!!”渲染到頁面顯示。Vue.js框架在聲明式渲染時，做的主要工作就是將數(shù)據(jù)和DOM建立關(guān)聯(lián)，一切皆響應。例如【例14-2】的counter屬性每秒遞增。【例14-2】使用VSCode新建一個名為ch14_2.html的頁面，在該頁面中使用時鐘函數(shù)setInterval來演示響應式程序。T

I

P

C

C教案14.2使用Visual

Studio

Code開發(fā)第一個Vue程序14.2.1安裝Visual

Studio

Code及其插件14.2.2創(chuàng)建第一個Vue應用14.2.3聲明式渲染14.2.4

Vue生命周期T

I

P

C

C教案14.2.4

Vue生命周期每個Vue實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程，例如，數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到DOM并在數(shù)據(jù)變化時更新

DOM等。同時在這個過程中也會調(diào)用一些叫生命周期鉤子的函

數(shù)，在適當?shù)臅r機執(zhí)行我們的業(yè)務邏輯。Vue.createApp({data()

{return

{message:"測試鉤子函數(shù)"}},created()

{//this指向調(diào)用它的Vue實例console.log("message是:"+this.message)//"message是:測試鉤子函數(shù)"}})created鉤子函數(shù)可用來在一個Vue實例被創(chuàng)建后執(zhí)行代碼T

I

P

C

C教案T

I

P

C

C教案beforeCreate（創(chuàng)建前）：在Vue實例初始化后，數(shù)據(jù)觀測和事件配置前調(diào)用，此時el和data并未初始化，因此無法訪問methods，data，computed等上的方法和數(shù)據(jù)。created（創(chuàng)建后）：Vue實例創(chuàng)建后被立即調(diào)用即HTML加載完成前。此時，Vue實例已完成數(shù)據(jù)觀測、屬性和方法的運算、watch/event事件回調(diào)、data數(shù)據(jù)的初始化。然而，掛在階段還沒有開始，el屬性目前不可見。這是一個常用的生命周期鉤子函數(shù)，可以調(diào)用methods中的方法、改變data中的數(shù)據(jù)、獲取computed中的計算屬性等等，通常我們在此鉤子函數(shù)中對實例進行預處理。beforeMount(載入前)：掛載開始前被調(diào)用，Vue實例已完成編譯模板、把data里面的數(shù)據(jù)和模板生成HTML、el和data初始化，注意此時還沒有掛載HTML到頁面上。T

I

P

C

C教案mounted（載入后）：頁面加載后調(diào)用該函數(shù)，這是一個常用的生命周期鉤子函數(shù)，一般是第一個業(yè)務邏輯在此鉤子開始，mounted只會執(zhí)行一次。beforeUpdate（更新前）：在數(shù)據(jù)更新前被調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前，可以在該鉤子中進一步地更改狀態(tài)，不會觸發(fā)附加地重渲染過程。updated（更新后）：在由數(shù)據(jù)更改導致虛擬DOM重新渲染和打補丁時調(diào)用，調(diào)用時，

DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作，應該避免在此期間更改狀態(tài)，這可能會

導致更新無限循環(huán)。beforeUnmount（銷毀前）：Vue實例銷毀前調(diào)用（離開頁面前調(diào)用），這是一個常用的生命周期鉤子函數(shù)，一般在此時做一些重置的操作，比如清除定時器和監(jiān)聽的DOM事件。unmounted（銷毀后）：在實例銷毀后調(diào)用，調(diào)用后，事件監(jiān)聽器被移出，所有子實例也被銷毀。T

I

P

C

C教案本章內(nèi)容安裝Vue

3使用Visual

Studio

Code開發(fā)第一個Vue程序插值與表達式計算屬性和監(jiān)聽器指令在Vue中動態(tài)使用樣式組件自定義指令T

I

P

C

C教案14.3插值與表達式14.3.1文本插值14.3.2原始HTML插值14.3.3

JavaScript表達式T

I

P

C

C教案14.3.1文本插值數(shù)據(jù)綁定最常見的形式就是使用“Mustache（小胡子）”語法（雙花括號）的文本插值，它將綁定的數(shù)據(jù)實時顯示出來。例如，【例14-2】中的{{counter}}，無論何時，綁定的Vue實例的

counter屬性值發(fā)生改變，插值處的內(nèi)容都將更新?？赏ㄟ^使用v-once指令，執(zhí)行一次性插值，即當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。示例代碼如下：<span

v-once>{{

counter

}}</span>T

I

P

C

C教案14.3插值與表達式14.3.1文本插值14.3.2原始HTML插值14.3.3

JavaScript表達式T

I

P

C

C教案14.3.2原始HTML插值“{{}}”將數(shù)據(jù)解釋為普通文本，而非HTML代碼。當我們需要輸出真正的HTML代碼時，可使用v-html指令。動態(tài)渲染任意的

HTML是非常危險的，因為很容易導致XSS攻擊。最好只對可信內(nèi)容使用HTM插值，絕不可將用戶提供的HTML作為插值。v-html指令示例如下：data()

{return

{

rawHtml:

"<hr>"}}則“<p>無法顯示HTML元素內(nèi)容:{{rawHtml}}</p>”顯示的結(jié)果是<hr>；“<p>可正常顯示HTML元素內(nèi)容:<span

v-

html="rawHtml"></span></p>”顯示的結(jié)果是一條水平線。T

I

P

C

C教案14.3插值與表達式14.3.1文本插值14.3.2原始HTML插值14.3.3

JavaScript表達式T

I

P

C

C教案14.3.3

JavaScript表達式對于所有的數(shù)據(jù)綁定，Vue.js都提供了完全的JavaScript表達式支持。{{

number

+

1

}}{{

isLogin?

"True"

:

"False"

}}{{

message.split("").reverse().join("")}}T

I

P

C

C教案本章內(nèi)容安裝Vue

3使用Visual

Studio

Code開發(fā)第一個Vue程序插值與表達式計算屬性和監(jiān)聽器指令在Vue中動態(tài)使用樣式組件自定義指令T

I

P

C

C教案14.4計算屬性和監(jiān)聽器14.4.1計算屬性14.4.2監(jiān)聽器T

I

P

C

C教案14.4.1計算屬性使用模板內(nèi)的表達式計算并顯示數(shù)據(jù)非常便利，但是在模板中放入太多的邏輯會讓模板難以維護。<div

id="computedProperty"><p>聽說陳恒寫書了？</p><span>{{

author.books.length

>

0

?

"Yes"

:

"No"

}}</span></div>在計算屬性中可以完成各種復雜的邏輯，包括運算、函數(shù)調(diào)用等，只要最終返回一個結(jié)果即可。computed:

{//計算屬性默認調(diào)用get方法

isPublished(){return

this.author.books.length

>

0

?

"Yes"

:

"No"}}<div

id="computedProperty"

class="demo"><p>聽說陳恒寫書了？</p><span>{{

isPublished

}}</span></div>？？？請思考：計算屬性和data達到的效果是一樣的，他們有什么區(qū)別呢？T

I

P

C

C教案14.4計算屬性和監(jiān)聽器14.4.1計算屬性14.4.2監(jiān)聽器T

I

P

C

C教案14.4.2監(jiān)聽器雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個監(jiān)聽器來響應數(shù)據(jù)的變化。Vue通過watch選項提供監(jiān)聽數(shù)據(jù)屬性的方

法（方法名與屬性名相同），來響應數(shù)據(jù)的變化。data()

{return

{question:

"",answer:"這是一個好問題。"}},watch:{//watch選項提供監(jiān)聽數(shù)據(jù)屬性的方法//question方法名與數(shù)據(jù)屬性名question一致question(newQuestion,oldQuestion){//newQuestion改變時的值，oldQuestion是沒改變的值if

(newQuestion.indexOf("?")>-1){//包含英文字符?時，執(zhí)行g(shù)etAnswer()方法this.getAnswer()}}T

I

P

C

C教案本章內(nèi)容安裝Vue

3使用Visual

Studio

Code開發(fā)第一個Vue程序插值與表達式計算屬性和監(jiān)聽器指令在Vue中動態(tài)使用樣式組件自定義指令T

I

P

C

C教案14.5指令14.5.1

v-bind與v-on指令14.5.2條件渲染指令v-if和v-show14.5.3列表渲染指令v-for14.5.4表單與v-modelT

I

P

C

C教案14.5.1

v-bind與v-on指令1．v-bind指令在HTML元素的屬性中不能使用表達式動態(tài)更新屬性值。幸運的是，Vue.js提供了v-bind指令綁定HTML元素的屬性，并可動態(tài)更新屬性值。div

id="app"><a

v-bind:href="myurl.baiduUrl">去百度</a><img

v-bind:src="myurl.imgUrl"/><!--v-bind:可縮寫為“:”--><a

:href="myurl.baiduUrl">去百度</a><img

:src="myurl.imgUrl"/></div><script

src="js/vue.global.js"></script><script>Vue.createApp({data()

{return

{myurl:

{baiduUrl:

"https:///",imgUrl:"/images/ok.png"}}}}).mount("#app")</script>使用v-bind指令動態(tài)綁定了鏈接的href屬性和圖片的src屬性，當數(shù)據(jù)變化時，href屬性值和src屬性值也發(fā)生變化，即重新渲染。T

I

P

C

C教案2．v-on指令可以用v-on指令給HTML元素添加一個事件監(jiān)聽器，通過該指令調(diào)用在Vue實例中定義的方法。<div

id="event-handling"><p>{{

message

}}</p><button

v-on:click="reverseMessage">反轉(zhuǎn)Message</button><!--v-on:可縮寫為“@”--><button

@click="reverseMessage">反轉(zhuǎn)Message</button></div><script

src="js/vue.global.js"></script>T

I

P

C

C教案特殊變量$event訪問原生的DOM事件Vue.js用特殊變量$event訪問原生的DOM事件，例如下面的實例阻止打開鏈接。<div

id="event-handling"><a

href="https:///"@click="warn("考試期間禁止百度！",$event)">去百度</a></div><script

src="js/vue.global.js"></script><script>Vue.createApp({methods:

{warn(message,

event)

{//event訪問原生的DOM事件event.preventDefault()

alert(message)}}}).mount("#event-handling")</script>在事件處理中調(diào)用event.preventDefault()或event.stopPropagation()是非常常見的需求。盡管可以在方法中輕松實現(xiàn)這類需求，但方法最好只有純粹的數(shù)據(jù)邏輯，而不是去處理DOM事件細節(jié)。T

I

P

C

C教案事件修飾符為解決該問題，Vue.js為v-on提供了事件修飾符。修飾符是由點開頭的指令后綴表示。Vue.js支持的修飾符有.stop、.prevent、.capture、.self、.once以及.passive。用法是在@綁定的事件后加小圓點“.”，再跟修飾符。<!--阻止單擊事件--><a

@click.stop="doThis"></a><!--提交事件不再重載頁面--><form

@submit.prevent="onSubmit"></form><!--修飾符可以串聯(lián)--><a

@click.stop.prevent="doThat"></a><!--只有修飾符--><form

@submit.prevent></form><!--添加事件監(jiān)聽器時使用事件捕獲模式，即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交

由內(nèi)部元素進行處理--><div

@click.capture="doThis">...</div><!--當事件在該元素自身觸發(fā)時觸發(fā)回調(diào)，即事件不是從內(nèi)部元素觸發(fā)的--><div

@click.self="doThat">...</div><!--只觸發(fā)一次--><a

@click.once="doThis"></a><!--滾動事件的默認行為(即滾動行為)將會立即觸發(fā)，而不會等待“onScroll”完成--><div

@scroll.passive="onScroll">...</div>T

I

P

C

C教案14.5指令14.5.1

v-bind與v-on指令14.5.2條件渲染指令v-if和v-show14.5.3列表渲染指令v-for14.5.4表單與v-modelT

I

P

C

C教案14.5.2條件渲染指令v-if和v-show1．v-if指令與JavaScript的條件語句if、else、else

if類似，Vue.js的條件指令也可以根據(jù)表達式的值渲染或銷毀元素/組件。<div

id="event-handling"><div

v-if="score>=90">優(yōu)秀</div><div

v-else-if="score>=80">良好</div><div

v-else-if="score>=70">中等</div><div

v-else-if="score>=60">及格</div><div

v-else>不及格</div></div>v-else元素必須緊跟在v-if或者v-else-if元素后面；v-else-if必須緊跟在v-if或者v-else-if元素后面。條件渲染指令必須將它添加到一個元素上。但是如果想包含多個元素呢？此時可以使用<template>元素（模板占位符）幫助我們包裹元素，并在上面使用v-if。最終的渲染結(jié)果將不包含<template>元素。<template

v-if="ok"><h1>Title</h1><p>Paragraph

1</p><p>Paragraph

2</p></template>T

I

P

C

C教案2．v-show指令v-show指令的用法基本與v-if一樣，也是根據(jù)條件展示元素，例如：<h1

v-show="yes">一級標題</h1>。不同的是，v-if每次都會重新刪除或創(chuàng)建元素，而帶有v-show的元素始終會被渲染并保留在DOM中，只是切換元素的display:none樣式。所以，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁切換，v-show較好；如果在運行時條件不大可能改變，v-if較好。另外，v-show不支持<template>元素，也不支持v-else。T

I

P

C

C教案【例14-8】演示v-if與v-show的區(qū)別<div

id="event-handling"><div

v-if="flag">一直顯示</div><div

v-show="flag">反復無常</div><button

@click="flag=!flag">隱藏/顯示</button></div><script

src="js/vue.global.js"></script><script>Vue.createApp({data()

{return

{flag:

true}}}).mount("#event-handling")</script>通過v-if控制的元素，如果隱藏，從DOM中移除。而通過v-show控制的元素并沒有真正移除，只是給其添加了CSS樣式：display:none。T

I

P

C

C教案14.5指令14.5.1

v-bind與v-on指令14.5.2條件渲染指令v-if和v-show14.5.3列表渲染指令v-for14.5.4表單與v-modelT

I

P

C

C教案14.5.3列表渲染指令v-for可以使用v-for指令遍歷一個數(shù)組或?qū)ο螅谋磉_式需結(jié)合in來使用，形式為item

in

items，其中items是源數(shù)據(jù)，而item是被迭代集合中元素的別名。v-for還支持一個可選的參數(shù)作為當前項的索引。1．遍歷普通數(shù)組<ul><li

v-for="(item,index)

in

items">{{index}}

-

{{

item

}}</li></ul>2．遍歷對象數(shù)組<ul><li

v-for="user

in

users">{{

user.uname

}}</li></ul>3．遍歷對象屬性<li

v-for="(value,

key,

index)

in

myObject">{{

++index

}}.

{{

key

}}:

{{

value

}}</li>4．迭代數(shù)字<li

v-for="i

in

100">{{

i

}}</li>T

I

P

C

C教案14.5指令14.5.1

v-bind與v-on指令14.5.2條件渲染指令v-if和v-show14.5.3列表渲染指令v-for14.5.4表單與v-modelT

I

P

C

C教案14.5.4表單與v-model表單用于向服務器傳輸數(shù)據(jù)，較為常見的表單控件有：單選、多選、下拉選擇、輸入框等，用表單控件可以完成數(shù)據(jù)的錄入、校驗、提交等。Vue.js用v-model指令在表單<input>、<textarea>及<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定（Model到View以及View到Model）。使用v-model指令的表單元素將忽

略該元素的value、checked、selected等屬性初始值，而是將當前活動的Vue實例的數(shù)據(jù)作為數(shù)據(jù)來源。所以，使用v-model指令時，應通過JavaScript在Vue實例的data選項中聲明初始值。從Model到View的數(shù)據(jù)綁定，即ViewModel驅(qū)動將數(shù)據(jù)渲染到視圖；從View到Model的數(shù)據(jù)綁定，即View中元素上的事件被觸發(fā)后導致數(shù)據(jù)變更將通過ViewModel驅(qū)動修改數(shù)據(jù)層。T

I

P

C

C教案【例14-10】v-model指令在表單元素上實現(xiàn)雙向數(shù)據(jù)綁定默認情況下，v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步。如果不想在每次input事件觸發(fā)后同步，可以添加lazy修飾符，從而轉(zhuǎn)為在change事件后進行同步。<!--在“change”時更新--><input

v-model.lazy="msg"/>如果需要將用戶的輸入值自動轉(zhuǎn)為數(shù)值類型，可以給v-model添加number修飾符。<input

v-model.number="age"

type="number"

/>如果需要將用戶輸入的首尾空格自動去除，可以給v-model添加trim修飾符。<input

v-model.trim="msg"

/>T

I

P

C

C教案本章內(nèi)容安裝Vue

3使用Visual

Studio

Code開發(fā)第一個Vue程序插值與表達式計算屬性和監(jiān)聽器指令在Vue中動態(tài)使用樣式組件自定義指令T

I

P

C

C教案14.6在Vue中動態(tài)使用樣式14.6.1綁定class14.6.2綁定styleT

I

P

C

C教案14.6.1綁定class1．對象語法傳給:class（v-bind:class的簡寫）一個對象，可以動態(tài)地切換class屬性值。<div

:class="{

active:

isActive

}"></div>可以在對象中傳入更多字段來動態(tài)切換多個class。此外，:class指令也可以與普通的class屬性同時存在。<div

class="static"

:class="{

active:

isActive,

"text-danger":

hasError

}"></div>T

I

P

C

C教案2．數(shù)組語法當需要多個class時，可以把一個數(shù)組與:class綁定，以應用一個class列表。示例代碼如下<div

:class="[activeClass,

errorClass]"></div>如果需要根據(jù)條件切換列表中的class，可以使用三元表達式實現(xiàn)。示例代碼如下：<div

:class="[isActive?activeClass:"",errorClass]"></div>3．數(shù)組中嵌套對象當有多個條件class時，在數(shù)組中使用三元表達式有些繁瑣。所以在數(shù)組語法中也可以使用對象語法。示例代碼如下：<div

:class="[{

active:

isActive

},

errorClass]"></div>T

I

P

C

C教案【例14-11】綁定class的幾種方式<div

id="vbind-class"><div

:class="mycolor">對象語法</div>hasError}">在對象中傳入更多字段</div><div

:class="[activeClass,errorClass]">數(shù)組語法</div><div

:class="[isActive?activeClass:"",errorClass]">數(shù)組中使用三元表達式</div><div

:class="[{"active":isActive},errorClass]">數(shù)組中嵌套對象</div></div><script

src="js/vue.global.js"></script><script><div

class="static"

:class="{"active":

isActive,

"text-dangeVru"e:.createApp({data()

{return

{mycolor:

"my",isActive:

true,hasError:

false,activeClass:"your",errorClass:"his"}}}).mount("#vbind-class")</script>T

I

P

C

C教案14.6在Vue中動態(tài)使用樣式14.6.1綁定class14.6.2綁定styleT

I

P

C

C教案14.6.2綁定style使用:style可以給HTML元素綁定內(nèi)聯(lián)樣式，方法與:class類似，也有對象語法和數(shù)組語法。:style的對象語法十分直觀——看起來像直接在元素上寫CSS，但其實是一個JavaScript對象。CSS屬性名可以用駝峰式或短橫線分隔來命名?！纠?4-12】綁定style的方式。T

I

P

C

C教案本章內(nèi)容安裝Vue

3使用Visual

Studio

Code開發(fā)第一個Vue程序插值與表達式計算屬性和監(jiān)聽器指令在Vue中動態(tài)使用樣式組件自定義指令T

I

P

C

C教案14.7組件14.7.1組件注冊14.7.2父組件向子組件傳值14.7.3子組件向父組件傳值14.7.4提供/注入（組件鏈傳值）14.7.5插槽14.7.6動態(tài)組件&異步組件14.7.7使用ref獲取DOM元素和組件引用T

I

P

C

C教案14.7.1組件注冊組件（Component）是Vue.js最核心的功能，是可擴展的

HTML元素（可看作自定義的HTML元素），是封裝可重用的代

碼，同時也是Vue實例，可以接受與Vue相同的選項對象并提供相同的生命周期鉤子。組件系統(tǒng)是Vue.js中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構(gòu)建大型應用，任意類型的應用界面都可以抽象為一個組件樹。這種前端組件化，方便UI組件的重用。T

I

P

C

C教案14.7.1組件注冊為了能在UI模板中使用組件，必須先注冊以便Vue識別。有兩種組件的注冊類型：全局注冊和局部注冊。1．全局注冊組件可通過component方法實現(xiàn)全局注冊，全局注冊示例代碼如下：const

app

=

Vue.createApp({})ponent("component-a",

{//選項})ponent("component-b",

{//選項})ponent("component-c",

{//選項})app.mount("#app")ponent的第一個參數(shù)component-a組件的名稱（自定義標簽），組件名稱推薦全部小寫包含連字符（即有多個單詞），避免與HTML元素相沖突。<div

id="app"><component-a></component-a><component-b></component-b><component-c></component-c></div>T

I

P

C

C教案14.7.1組件注冊【例14-13】定義一個名為button-counter的全局組件，組件顯示的內(nèi)容為一個按鈕。<template

id="button-counter"><button

@click="count++">You

clicked

me

{{

count

}}times.</button></template><div

id="components-demo"><!--在模板中任意使用組件--><!--每個組件都各自獨立維護它的count。因為每用一次組件，就會有一個它的新實例被創(chuàng)建。--><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script

src="js/vue.global.js"></script><script>//創(chuàng)建一個Vue應用const

app

=

Vue.createApp({})ponent("button-counter",

{data()

{return

{count:

0}},//組件顯示的內(nèi)容template:

"#button-counter"})app.mount("#components-demo")</script>T

I

P

C

C教案14.7.1組件注冊全局注冊往往是不夠理想的。比如，使用webpack（后續(xù)講解）構(gòu)建系統(tǒng)，全局注冊的組件，即使不再使用，仍然被包含在最終的構(gòu)建結(jié)果中。造成用戶無意義的下載JavaScript。const

ComponentA

=

{/*

...

*/}const

ComponentB

=

{/*

...

*/}const

ComponentC

=

{/*

...

*/}可以通過一個普通的JavaScript對象來定義組件，然后使用Vue實例的components選項局部注冊組件。const

app

=

Vue.createApp({components:

{"component-a":ComponentA,//component-a為局部組件名稱"component-b":

ComponentB}})局部注冊的組件只在該組件作用域下有效。例如，希望ComponentA在ComponentB中可用，需要在ComponentB中，使用components選項局部注冊ComponentA：const

ComponentB

=

{components:

{"component-a":

ComponentA}}T

I

P

C

C教案14.7組件14.7.1組件注冊14.7.2父組件向子組件傳值14.7.3子組件向父組件傳值14.7.4提供/注入（組件鏈傳值）14.7.5插槽14.7.6動態(tài)組件&異步組件14.7.7使用ref獲取DOM元素和組件引用T

I

P

C

C教案14.7.2父組件向子組件傳值組件除了把模板內(nèi)容復用外，更重要的是向組件傳遞數(shù)據(jù)。傳遞數(shù)據(jù)的過程就是由props實現(xiàn)的。在組件中，使用選項props來聲明從父級組件接收的數(shù)據(jù)，props的值可以是兩種，一種是字符串數(shù)組，一種是對象。【例14-15】構(gòu)造兩個數(shù)組props，一個數(shù)組接收來自父級組件的數(shù)據(jù)message（實現(xiàn)靜態(tài)傳遞），一個數(shù)組接收來自父級組件的數(shù)據(jù)id和title（實現(xiàn)動態(tài)傳遞），并將它們在組件模板中渲染。?。?！注意：如果不使用v-bind直接傳遞數(shù)字、布爾值、數(shù)組及對象，都是以字符串值傳遞。另外，使用props實現(xiàn)數(shù)據(jù)傳遞都是單向的，即父組件數(shù)據(jù)變化時，子組件中所有的prop將刷新為最新的值，但是反過來不行。T

I

P

C

C教案14.7.2父組件向子組件傳值使用props實現(xiàn)數(shù)據(jù)傳遞的同時，還可以為props指定驗證要求。為了定制props的驗證方式，可以為props的值提供帶有驗證需求的對象，而不是字符串數(shù)組。【例14-16】在此例中，給組件的props提供帶有驗證需求的對象。T

I

P

C

C教案14.7組件14.7.1組件注冊14.7.2父組件向子組件傳值14.7.3子組件向父組件傳值14.7.4提供/注入（組件鏈傳值）14.7.5插槽14.7.6動態(tài)組件&異步組件14.7.7使用ref獲取DOM元素和組件引用T

I

P

C

C教案14.7.3子組件向父組件傳值

可通過props從父組件向子組件傳遞數(shù)據(jù)，并且這種傳遞是單向的。當需要從子組件向父組件傳遞數(shù)據(jù)時，需要首先給子組件自定義事件并使用$emit(事件名,要傳遞的數(shù)據(jù))方法觸發(fā)事件，然后父組件使用

v-on或@監(jiān)聽子組件的事件。下面通過一個實例講解自定義事件的使用方法。

【例14-17】在此例中，子組件觸發(fā)兩個事件，分別實現(xiàn)字體變大變小。

事件名推薦使用短橫線命名（例如enlarge-text），這是因為HTML是大小寫不區(qū)分的。如果事件名為enlargeText，@enlargeText將變成@enlargetext，事件enlargeText不可能被父組件監(jiān)聽到。

除了自定義事件實現(xiàn)子組件向父組件傳值外，還可以在子組件上使用

v-model向父組件傳值，實現(xiàn)雙向綁定。

【例14-18】在此例中，使用v-model實現(xiàn)子組件向父組件傳值，并實現(xiàn)雙向綁定。T

I

P

C

C教案14.7組件14.7.1組件注冊14.7.2父組件向子組件傳值14.7.3子組件向父組件傳值14.7.4提供/注入（組件鏈傳值）14.7.5插槽14.7.6動態(tài)組件&異步組件14.7.7使用ref獲取DOM元素和組件引用T

I

P

C

C教案14.7.4提供/注入（組件鏈傳值）有時有些子組件是深嵌套的，如果將props傳遞到整個組件鏈中，將很麻煩，更不可取。對于這種情況，可以使用provide和inject實現(xiàn)組件鏈傳值。父組件可以作為其所有子組件的依賴項提供程序，而不管組件層次結(jié)構(gòu)有多深，父組件有一個provide選項來提供數(shù)據(jù)，子組件有一個inject項來使用這個數(shù)據(jù)?！纠?4-19】在此例中，創(chuàng)建Vue實例為祖先組件，并使用

provide提供一個數(shù)據(jù)供其子孫組件inject。T

I

P

C

C教案14.7組件14.7.1組件注冊14.7.2父組件向子組件傳值14.7.3子組件向父組件傳值14.7.4提供/注入（組件鏈傳值）14.7.5插槽14.7.6動態(tài)組件&異步組件14.7.7使用ref獲取DOM元素和組件引用T

I

P

C

C教案14.7.5插槽一個網(wǎng)頁有時有多個模塊組成，例如：<div

class="container"><header><!--我們希望把頁頭放這里--></header><main><!--我們希望把主要內(nèi)容放這里--></main><footer><!--我們希望把頁腳放這里--></footer></div>這時需要使用插槽混合父組件的內(nèi)容與子組件的模板。T

I

P

C

C教案1．單插槽slot在子組件模板中，可以使用插槽slot設置默認渲染內(nèi)容。【例14-20】使用插槽slot設置子組件的默認渲染內(nèi)容。<template

id="child"><slot><p>插槽內(nèi)容，默認內(nèi)容！</p></slot></template><div

id="app"><child-com><!--如果這里沒有渲染內(nèi)容，將渲染插槽中的默認內(nèi)容--><p>有我在slot就不顯示！</p></child-com></div><script

src="js/vue.global.js"></scrip<script>const

app

=

Vue.createApp({})ponent("child-com",

{template:

"#child"})app.mount("#app")</script>T

I

P

C

C教案2．多個具名插槽使用多個具名插槽可以實現(xiàn)混合渲染父組件的內(nèi)容與子組件的模板?！纠?4-21】使用具名插槽實現(xiàn)一個頁面由多個模塊組成。<template

id="child"><div><div><slot

name="header">標題</slot></div><div><slot>默認正文內(nèi)容</slot></div><div><slot

name="footer">底部信息</slot></div></div></template><div

id="app"><child-com><h1

slot="header"></h1><P>正文內(nèi)容由我顯示</P><h1

slot="footer"></h1></child-com></div><script>const

app

=

Vue.createApp({})ponent("child-com",

{template:

"#child"})app.mount("#app‘)</script>T

I

P

C

C教案3．作用域插槽有時讓插槽能夠訪問組件中的數(shù)據(jù)是很有用的。作用域插槽更具代表性的用例是列表組件?！纠?4-22】使用作用域插槽實現(xiàn)列表組件渲染。T

I

P

C

C教案14.7組件14.7.1組件注冊14.7.2父組件向子組件傳值14.7.3子組件向父組件傳值14.7.4提供/注入（組件鏈傳值）14.7.5插槽14.7.6動態(tài)組件&異步組件14.7.7使用ref獲取DOM元素和組件引用T

I

P

C

C教案14.7.6動態(tài)組件&異步組件1．動態(tài)組件在不同組件之間進行動態(tài)切換是常見的場景，比如在一個多標簽的頁面里進行內(nèi)容的收納和展現(xiàn)。Vue可通過<component>元素動態(tài)掛載不同的組件，進行組件切換。<!--is屬性選擇掛載的組件，currentView是已注冊組件的名稱或一個組件的選項對象--><component

:is="currentView"></component>【例14-23】通過<component>元素動態(tài)切換組件，在該實例中，有三個按鈕代表標簽，單擊不同按鈕展示不同組件的信息。<div

id="app"><button

@click="changeCom("add")">添加信息</button><button

@click="changeCom("update")">修改信息</button><button

@c