Vue框架應(yīng)用實戰(zhàn)項目式教程 課件 任務(wù)4 崗位信息異步渲染；任務(wù)5 崗位信息異步渲染

1框架技術(shù)應(yīng)用崗位信息異步渲染任務(wù)4學(xué)習(xí)目標【知識目標】掌握生命周期鉤子的注冊及使用；熟悉不同生命周期鉤子的運行順序；掌握json-server插件的使用方法；熟練掌握Axios的安裝及使用；掌握Axios攔截器的注冊及使用步驟?！炯寄苣繕恕磕軌蚴炀氉允褂蒙芷阢^子；能夠熟練使用json-server模擬服務(wù)端接口數(shù)據(jù)；能夠熟練掌握Axios異步請求數(shù)據(jù)方法?！舅刭|(zhì)目標】培養(yǎng)認真仔細的工作態(tài)度；樹立良好的邏輯思維能力。掌握Vue生命周期鉤子的注冊，使用及生命周期鉤子的運行順序。理解Axios作用，并熟練掌握通過Axios異步請求數(shù)據(jù)的方法。項目背景本任務(wù)負責(zé)重構(gòu)“就業(yè)職通車”網(wǎng)站中崗位數(shù)據(jù)渲染模塊。通過學(xué)習(xí)生命周期與Axios實現(xiàn)在瀏覽器端打開頁面時通過生命周期鉤子自動調(diào)用Axios獲取json-server服務(wù)器端數(shù)據(jù)并渲染至頁面。任務(wù)規(guī)劃本任務(wù)要求使用生命周期與Axios庫，獲取json-server服務(wù)器端數(shù)據(jù)。任務(wù)4.1Vue生命周期認識【任務(wù)陳述】每個Vue實例在創(chuàng)建時都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實例到DOM，以及在數(shù)據(jù)改變時更新DOM，我們稱之為Vue實例的生命周期。在整個生命周期中，每個節(jié)點都會有一個生命周期鉤子函數(shù)自動運行，我們可以在此特定階段搭建相應(yīng)功能。整個生命周期如圖4-1所示。圖4-1生命周期圖示任務(wù)4.1Vue生命周期認識【任務(wù)分析】本任務(wù)要求掌握Vue實例的生命周期鉤子運行原理及注冊使用步驟?！救蝿?wù)實施】在任務(wù)4.2的步驟二中具體實現(xiàn)。【知識鏈接】4.1.1生命周期鉤子生命周期鉤子用來描述Vue實例從創(chuàng)建到銷毀的整個生命周期，具體如表4-1所示。生命周期鉤子組合式API中調(diào)用說明beforeCreatesetup()組件實例初始化完成之后立即調(diào)用createdsetup()組件實例處理完所有與狀態(tài)相關(guān)的選項后調(diào)用beforeMountonBeforeMount()組件被掛載之前被調(diào)用mountedonMounted()組件掛載完成后執(zhí)行beforeUpdateonBeforeUpdate()組件因為響應(yīng)式狀態(tài)變更而更新DOM樹之前調(diào)用updatedonUpdated()組件因為響應(yīng)式狀態(tài)變更而更新DOM樹之后調(diào)用beforeUnmoutedonBeforeUnmount()組件實例被卸載之前調(diào)用unmountedonUnmounted()組件實例被卸載之后調(diào)用表4-1生命周期鉤子任務(wù)4.1Vue生命周期認識4.1.2注冊生命周期鉤子組合式API中的生命周期鉤子的注冊分為兩個步驟：第一步驟：頁面導(dǎo)入生命周期鉤子函數(shù)；第二步驟：設(shè)置生命周期鉤子函數(shù)的參數(shù)，參數(shù)是一個回調(diào)函數(shù)，回調(diào)函數(shù)中書寫在本鉤子執(zhí)行的代碼。頁面掛載【例4-1】頁面掛載生命周期鉤子案例。代碼如下：<template> <divref="el"></div> </template> <scriptsetup> import{ref,onMounted,onBeforeMount}from'vue’constel=ref()onBeforeMount(()=>{console.log(el.value);//undefined})onMounted(()=>{console.log(el.value);//<divdata-v-7a7a37b1></div>})</script>任務(wù)4.1Vue生命周期認識4.1.2注冊生命周期鉤子響應(yīng)式狀態(tài)更新【例4-2】響應(yīng)式狀態(tài)更新生命周期鉤子案例。代碼如下：<template><div>數(shù)據(jù)展示：{{

count}}<button@click="count++">更新</button></div></template><scriptsetup>import{ref,onBeforeUpdate,onUpdated}from'vue’;任務(wù)4.1Vue生命周期認識constcount=ref(0)onBeforeUpdate(()=>{console.log('onBeforeUpdate',count.value); alert('更新中...')})onUpdated(()=>{ console.log('onUpdated',count.value);})</script>任務(wù)4.1Vue生命周期認識4.1.2注冊生命周期鉤子【例4-2】案例執(zhí)行效果如圖4-2所示。圖4-2【例4-2】案例執(zhí)行效果圖(onBeforeUpdate階段)任務(wù)4.1Vue生命周期認識4.1.2注冊生命周期鉤子響應(yīng)式狀態(tài)已經(jīng)變更，但還未重新渲染DOM，因此頁面顯示的count值仍為0，而控制臺輸出的響應(yīng)式狀態(tài)count值為1。單擊“確定”按鈕后，此時已重新渲染DOM，因此頁面顯示count值為1。OnUpdated鉤子執(zhí)行效果如圖4-3所示。圖4-3【例4-2】案例執(zhí)行效果圖(onUpdated階段)任務(wù)4.1Vue生命周期認識4.1.2注冊生命周期鉤子實例銷毀在實例銷毀前的onUnmounted()鉤子中可以執(zhí)行手動清理的功能，例如計時器、DOM事件監(jiān)聽器或者與服務(wù)器的連接?！纠?-3】實例銷毀生命周期鉤子案例。代碼如下：<!—父組件代碼--><template> <button@click="flag=!flag">切換子組合Child</button> <childv-if="flag"></child></template><scriptsetup> importChildfrom'./Child.vue' import{ref}from'vue' constflag=ref(true)</script><!—子組件代碼--><template><div>child</div></template><scriptsetup>import{onMounted,onBeforeUnmount,onUnmounted}from'vue'lettimer onMounted(()=>{ timer=setInterval(()=>{ console.log(1); },1000) }) onBeforeUnmount(()=>{ console.log('BeforeUnmount'); }) onUnmounted(()=>{ console.log('onUnmounted'); clearInterval(timer) })</script>任務(wù)4.1Vue生命周期認識4.1.2注冊生命周期鉤子效果如圖4-4、4-5、4-6所示。

圖4-4【例4-3】案例頁面初始效果圖圖4-5【例4-3】案例單擊按鈕效果圖圖4-6【例4-3】案例注釋“clearInterval(timer)”代碼行后的效果圖任務(wù)4.2 Axios庫的使用【任務(wù)陳述】本任務(wù)實現(xiàn)在“就業(yè)職通車”項目中最新崗位的本地數(shù)據(jù)改寫為mock數(shù)據(jù)，并通過Axios異步獲取數(shù)據(jù)并渲染至頁面中。同時將點贊數(shù)據(jù)通過Axios上傳至服務(wù)器端數(shù)據(jù)接口中并渲染。【任務(wù)分析】

分為六步驟完成本任務(wù)，如圖4-7所示。圖4-7任務(wù)實施流程圖任務(wù)4.2 Axios庫的使用步驟一.使用json-server搭建模擬服務(wù)器接口數(shù)據(jù)環(huán)境。Json-server是一個npm管理包，字面上解釋為一個在本地（前端）運行，可以存儲json數(shù)據(jù)的服務(wù)器。通俗來說，就是模擬服務(wù)端接口數(shù)據(jù)，一般用于前后端分離開發(fā)時，前端可以不依賴后端API接口獲取數(shù)據(jù)，而在本地搭建JSON服務(wù)器環(huán)境，自行產(chǎn)生測試數(shù)據(jù)來測試前端開發(fā)代碼。安裝json-server插件。在vscode編輯器中將項目的根目錄設(shè)為當(dāng)前目錄，并單擊鼠標右鍵選擇“在集成終端中打開”，在打開的終端界面中輸入以下命令后，將json-server插件安裝至本項目的運行依賴。任務(wù)4.2 Axios庫的使用npminstalljson-server--save創(chuàng)建data.json數(shù)據(jù)文件。在項目根目錄新建data.json文件，并在data.js中建立二級數(shù)據(jù)，一級數(shù)據(jù)為messageList、articleList、article，它們對應(yīng)著服務(wù)器端的文件路徑名。將App.vue中的本地數(shù)據(jù)全部剪切放至對應(yīng)的data.json文件中。注意需要將數(shù)據(jù)的注釋全部刪除，并調(diào)整成json格式。【任務(wù)實施】data.json文件格式如下：{ "messageList":[{…},… ], ”articleList”:[{…},…], "article":[ {…},… ]}任務(wù)4.2 Axios庫的使用【任務(wù)實施】設(shè)置mock數(shù)據(jù)。在終端中輸入命令：json-serverdata.json，將data.json數(shù)據(jù)放在模擬服務(wù)器端，地址默認為http://localhost:3000，打開http://localhost:3000/messageList可查看二級數(shù)據(jù)。當(dāng)出現(xiàn)如圖4-8所示的界面后，恭喜您，已經(jīng)成功搭建了服務(wù)器接口數(shù)據(jù)環(huán)境。圖4-8json-server運行界面任務(wù)4.2 Axios庫的使用【任務(wù)實施】設(shè)置快速啟動json-server。為提高效率，可以對json-server設(shè)置快速啟動命令，如圖4-9所示。打開項目根目錄的package.json文件，在“script”處輸入如下代碼：”buildData”:”json-serverdata.json”，今后啟動json-server命令只需要在終端輸入命令即可：npmrunbuildData。圖4-9快速啟動json-server命令執(zhí)行效果任務(wù)4.2 Axios庫的使用【任務(wù)實施】步驟二.通過Axios完成服務(wù)器數(shù)據(jù)的調(diào)用，并渲染到頁面。安裝Axios與vue-axios。在終端命令行處，輸入以下代碼，安裝Axios與vue-axios至項目的運行依賴。npminstallaxiosvue-axios-–save導(dǎo)入Axios與vue-axios。在main.js文件中中導(dǎo)入axios和vue-axios，并進行注冊。import{createApp}from'vue'importAppfrom'./App.vue'//導(dǎo)入Axios和vue-axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'constapp=createApp(App)任務(wù)4.2 Axios庫的使用【任務(wù)實施】//注冊Axios和vue-axiosapp.use(VueAxios,Axios)app.mount('#app')//設(shè)計vue全局屬性app.config.globalProperties.$axios=axios定義獲取最新崗位數(shù)據(jù)方法getComments()。//頁面中使用Axios，每個頁面都需要設(shè)置constcurrentInstance=getCurrentInstance()const{$Axios}=currentInstance.appContext.config.globalProperties//獲取最新崗位數(shù)據(jù)functiongetComments(){ return$Axios.get("http://localhost:3000/messageList")}任務(wù)4.2 Axios庫的使用【任務(wù)實施】調(diào)用getComments()方法獲取最新崗位數(shù)據(jù)。在Vue生命周期鉤子onBeforeMount()中調(diào)用getComments方法請求最新崗位數(shù)據(jù)。數(shù)據(jù)是越早獲取越方便后續(xù)的渲染，因此放在onBeforeMount()生命周期中進行請求。onBeforeMount(()=>{getComments().then(result=>{ if(result.status==200){ messageList.content=result.data }})})刷新瀏覽器頁面，可以看到頁面中已經(jīng)成功請求到接口地址上的mock數(shù)據(jù)。任務(wù)4.2 Axios庫的使用【任務(wù)實施】步驟三.完成崗位發(fā)布功能模塊。定義提交最新崗位數(shù)據(jù)方法postComments()。在App.vue中定義postComments方法，通過Axios的post方法將數(shù)據(jù)提交至服務(wù)器接口。//上傳崗位發(fā)布數(shù)據(jù)functionpostComments(data){ return$Axios.post("http://localhost:3000/messageList",data)}定義崗位發(fā)布方法submit()。在submit()中定義提交崗位發(fā)布的程序邏輯，messageInfo為需要上傳的新數(shù)據(jù)，使用postComments方法將messageInfo上傳至接口，再通過getComments方法請求更新后的全部數(shù)據(jù)，并在頁面中渲染。任務(wù)4.2 Axios庫的使用【任務(wù)實施】//提交方法functionsubmit(){if(.trim()==""||message.email.trim()==""||message.content.trim()==""){ alert("信息輸入不全，請輸入完整信息！")return}//定義數(shù)據(jù)letmessageInfo={id:Date.now(),email:message.email,name:,content:message.content,scale:message.scale,support:0,//點贊數(shù)量has_sup:false,//點贊狀態(tài)unnamed:message.unnamed//匿名狀態(tài)}//上傳數(shù)據(jù)postComments(messageInfo).then(postResult=>{if(postResult.status==201){message.id=""message.email=""=""message.content=""message.scale=0message.support=0message.has_sup=falsemessage.unnamed=false//獲取mock接口更新的數(shù)據(jù)getComments().then(getResult=>{if(getResult.status==200){messageList.content=getResult.data}})})任務(wù)4.2 Axios庫的使用【任務(wù)實施】步驟四.完成點贊功能模塊。定義上傳點贊數(shù)據(jù)方法postSupportState()。定義postSupportState方法，使用Axios中的put方法修改當(dāng)前id值的點贊數(shù)據(jù)。//上傳更新的點贊數(shù)據(jù)functionpostSupportState(newData){return$Axios.put("http://localhost:3000/messageList/"+newData.data.id,newData.data)}定義獲取點贊數(shù)據(jù)方法getSupportState()。使用Axios中的get方法獲取更新后的點贊數(shù)據(jù)。//獲取更新的點贊數(shù)據(jù)functiongetSupportState(id){return$Axios.get("http://localhost:3000/messageList/"+id)}任務(wù)4.2 Axios庫的使用【任務(wù)實施】定義點贊功能模塊邏輯方法support()。點贊功能模塊的處理，封裝成support函數(shù)，強化邏輯思維。//點贊方法functionsupport(newData){

//數(shù)據(jù)傳遞給接口 postSupportState(newData).then(postResult=>{ if(postResult.status==200){ getSupportState(newData.data.id).then(getResult=>{ if(getResult.status==200){ messageList.content[newData.index]=getResult.data } }) } })}任務(wù)4.2 Axios庫的使用【任務(wù)實施】步驟五.使用攔截器自動添加日期。設(shè)置請求攔截器。在main.js文件中使用Axios請求攔截器為新發(fā)表的崗位信息自動添加time屬性，用于記錄該崗位的發(fā)布日期。//設(shè)置請求攔截器erceptors.request.use(function(config){

//攔截成功 if(config.data){ config.data.time=Date.now() } returnconfig},function(err){

//攔截失敗 console.error(err)})app.mount('#app')任務(wù)4.2 Axios庫的使用<scriptsetup>//解析時間戳functionparserTime(time){if(!time){return}letdate=newDate(time);letY=date.getFullYear()+'年’;letM=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'月’;letD=date.getDate()+'日’;returnY+M+D}</script><template><divclass="message_sup">

<!--渲染時間--> <small>{{parserTime(item.time)}}</small> ……</div></template>調(diào)用parserTime()方法。保存后在頁面中重新增加崗位信息后日期字段才會顯示出來，舊有信息通過點贊方式顯示日期?！救蝿?wù)實施】定義調(diào)整日期格式方法parserTime()。time屬性獲取到的值是時間戳，需要進行處理后才能正確渲染在模板中。在App.vue組件中編制parserTime方法，用來獲取正確的時間格式。任務(wù)4.2 Axios庫的使用【知識鏈接】4.2.1mock數(shù)據(jù)mock數(shù)據(jù)指的是虛假數(shù)據(jù)，前端開發(fā)人員可以mock假數(shù)據(jù)來模擬開發(fā)，這樣的好處在前后端并行開發(fā)時，前端人員不用等后端人員開發(fā)完API，只要定義好接口文檔就可以開始工作，互不影響，只有最后的聯(lián)調(diào)階段前后端才進行真實數(shù)據(jù)交互。借助mock數(shù)據(jù)，不會出現(xiàn)一個團隊等待另一個團隊的情況，提高開發(fā)效率，利于整個產(chǎn)品質(zhì)量及進度的保證。4.2.2vue-axios插件Vue-axios是將Axios基于Vue.js進行輕度封裝，便于在Vue.js中開發(fā)使用。4.2.3AxiosAxios是一個基于promise的網(wǎng)絡(luò)請求庫，作用于node.js和瀏覽器中。在服務(wù)器端使用原生node.js的http模塊，而在瀏覽器端則使用XMLHttpRequest。因此Axios本質(zhì)上是對原生XHR的封閉，只不過它是promise的實現(xiàn)版本，符合最新的ES規(guī)范。任務(wù)4.2 Axios庫的使用【知識鏈接】Axios特性從瀏覽器創(chuàng)建

XMLHttpRequests。從node.js創(chuàng)建

http

請求。支持

Promise

API。攔截請求和響應(yīng)。轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)。取消請求。自動轉(zhuǎn)換JSON數(shù)據(jù)?？蛻舳酥С址烙鵛SRF。Axios基本用法Axios主要的作用是向服務(wù)器發(fā)起HTTP請求，根據(jù)HTTP標準，HTTP請求可以使用多種請求方法。為了方便起見，已經(jīng)為所有支持的請求方法提供了別名。Axios.request(config)Axios.get(url[,config])Axios.delete(url[,config])Axios.head(url[,config])Axios.options(url[,config])Axios.post(url[,data[,config]])Axios.put(url[,data[,config]])Axios.patch(url[,data[,config]])注意，在使用別名方法時，

url、method、data

這些屬性都不必在配置中指定。任務(wù)4.2 Axios庫的使用【知識鏈接】發(fā)起GET請求發(fā)起一個GET請求，從指定的資源請求數(shù)據(jù)。語法規(guī)則如下：//向給定ID的用戶發(fā)起請求axios.get(url) .then(function(response){

//處理成功情況 console.log(response); }) .catch(function(error){

//處理錯誤情況 console.log(error); }) .then(function(){

//總是會執(zhí)行 });任務(wù)4.2 Axios庫的使用【知識鏈接】發(fā)起POST請求發(fā)起一個POST請求，向指定的資源提交數(shù)據(jù)并處理請求，數(shù)據(jù)包含在請求體中，語法規(guī)則如下：axios.post(url,data) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });發(fā)起PUT請求發(fā)起一個PUT請求，從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔內(nèi)容，語法規(guī)則如下：axios.put(url,data) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });任務(wù)4.2 Axios庫的使用【知識鏈接】Axios請求攔截器Axios攔截器的作用是在每次的請求或響應(yīng)被then或catch處理前攔截它們并自動被觸發(fā)，分為請求攔截器和響應(yīng)攔截器。示意圖如圖4-10所示。圖4-10攔截器示意圖請求攔截器通過Aerceptors.request.use()配置請求攔截器，語法格式如下：//添加請求攔截器erceptors.request.use(function(config){//在發(fā)送請求之前做些什么returnconfig;},function(error){//對請求錯誤做些什么returnPromise.reject(error);});任務(wù)4.2 Axios庫的使用【知識鏈接】請求攔截器通過Aerceptors.request.use()配置請求攔截器，語法格式如下： //添加請求攔截器 erceptors.request.use(function(config){ //在發(fā)送請求之前做些什么 returnconfig; },function(error){ //對請求錯誤做些什么 returnPromise.reject(error); });任務(wù)4.2 Axios庫的使用【知識鏈接】【例4-4】請求攔截器案例。給表單提交的數(shù)據(jù)自動添加birthday字段，代碼如下：//請求攔截器$erceptors.request.use(config=>{config.data.birthday='today'returnconfig},err=>console.log(err))$axios.post('http://localhost:3000/messageList',{id:Date.now(),email:"ala@d",效果如圖4-11所示。圖4-11【例4-4】請求攔截器案例執(zhí)行效果圖任務(wù)4.2 Axios庫的使用【知識鏈接】name:"111111",content:"111111111111111111",scale:0,support:0,has_sup:false,unnamed:false,time:1679373850441}).then(res=>console.log(res)).catch(err=>console.log(err))效果如圖4-11所示。圖4-11【例4-4】請求攔截器案例執(zhí)行效果圖任務(wù)4.2 Axios庫的使用【知識鏈接】Axios響應(yīng)攔截器Axios的響應(yīng)攔截器通過Aerceptors.response.use()配置，語法格式如下：//添加響應(yīng)攔截器erceptors.response.use(function(response){//2xx范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。對響應(yīng)數(shù)據(jù)做點什么returnresponse;},function(error){//超出2xx范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。對響應(yīng)錯誤做點什么returnPromise.reject(error);});任務(wù)4.2 Axios庫的使用【知識鏈接】【例4-5】響應(yīng)攔截器案例，將提交查詢的數(shù)據(jù)進行簡化，只留下data數(shù)據(jù)項，刪除其它屬性，代碼如下：//響應(yīng)攔截器$erceptors.response.use(res=>{return{data:res.data}},err=>console.log(err))$axios.get("http://localhost:3000/MessageList").then(res=>{console.log(res);}).catch(err=>{console.log(err);})效果如圖4-12所示。圖4-12【例4-5】響應(yīng)攔截器案例執(zhí)行效果圖任務(wù)4.2 Axios庫的使用【知識鏈接】移除Axios攔截器需要移除攔截器的語法格式如下： constmyInterceptor=Aerceptors.request.use(function() {/*...*/}); erceptors.request.eject(myInterceptor);任務(wù)總結(jié)與拓展通過對本任務(wù)的學(xué)習(xí)，要求掌握生命周期鉤子的原理、注冊、使用順序等內(nèi)容，熟練掌握每個生命周期常用的對應(yīng)模塊功能；以及Axios和vue-axios庫的使用，結(jié)合Vue的生命周期進行異步數(shù)據(jù)的請求和響應(yīng)，理解Vue中異步數(shù)據(jù)通信的方法，掌握get、post、put方法和攔截器的使用步驟。同時要求理解生命周期鉤子、json-server、Axios異步數(shù)據(jù)請求的注冊方法及使用場景和步驟，并且對封裝函數(shù)有了進一步的掌握。同時在完成功能實現(xiàn)的基礎(chǔ)上，可以進一步思考如何對代碼進行優(yōu)化，從而精簡主程序代碼，邏輯更為清晰?！舅伎肌咳绾螌⒈救蝿?wù)中的各功能模塊設(shè)置成獨立的js文件，以模塊形式導(dǎo)入？【思考】用戶單擊確認發(fā)布按鈕后，如何才能讓頁面跳轉(zhuǎn)至剛才增加的數(shù)據(jù)處？39項目組件化設(shè)計任務(wù)5框架技術(shù)應(yīng)用組件是Vue中構(gòu)成頁面各部分的獨立結(jié)構(gòu)單元，能實現(xiàn)復(fù)雜的頁面結(jié)構(gòu)，提高代碼的復(fù)用性。在實際項目開發(fā)中，組件起著非常重要的作用。本任務(wù)帶領(lǐng)大家認識在Vite環(huán)境中組件的注冊、引入，以及父子組件之間的傳值等技術(shù)，建立初步的工程項目化思維?！局R目標】掌握組件的注冊和導(dǎo)入；熟練掌握父子組件間的傳值技術(shù)；掌握插槽的使用步驟。【技能目標】能夠掌握利用組件技術(shù)拆分復(fù)雜頁面的能力；能夠熟練使用組件間的各項技術(shù)?！舅刭|(zhì)目標】培養(yǎng)精益求精勇于創(chuàng)新的工匠精神；培養(yǎng)高效的團隊合作精神。學(xué)習(xí)目標任務(wù)5項目組件化設(shè)計項目背景到目前為止，本項目的大部分功能集中在一個App.vue文件中實現(xiàn)，顯然是有悖于“高耦合低內(nèi)聚”的軟件設(shè)計思想。組件的引入解決了這個問題。組件是構(gòu)成Vue項目的基本結(jié)構(gòu)單元，能夠減少重復(fù)代碼的編寫，提高開發(fā)效率，降低代碼間的耦合程度，使項目更易維護和管理。不同組件之間具有基本交互功能，能根據(jù)業(yè)務(wù)邏輯實現(xiàn)復(fù)雜的項目功能。本項目開發(fā)“就業(yè)職通車”網(wǎng)站的首頁功能，分成幾個組件構(gòu)成，每個組件執(zhí)行一個功能模塊，組件之間可以進行通信，統(tǒng)一由App.vue進行組織管理，提高制作復(fù)雜頁面的能力。任務(wù)規(guī)劃本任務(wù)要求將崗位列表和頁面標題進行分別的組件設(shè)計，通過使用父子組件間傳值技術(shù)進行列表內(nèi)容和點贊數(shù)據(jù)的傳輸，使用插槽技術(shù)完成標題的統(tǒng)一管理。任務(wù)5.1組件設(shè)計【任務(wù)陳述】本任務(wù)學(xué)習(xí)組件的創(chuàng)建、注冊及導(dǎo)入，并對最新崗位列表數(shù)據(jù)以組件形式重構(gòu)。【任務(wù)分析】該任務(wù)的具體實施流程如圖5-1所示。圖5-1任務(wù)實施流程圖任務(wù)5.1組件設(shè)計【任務(wù)實施】步驟一.創(chuàng)建子組件Comments.vue。將渲染最新崗位的代碼從App.vue中剝離，在src/components目錄內(nèi)新建子組件Comments.vue，提高代碼復(fù)用性。同時渲染最新崗位所用到的style、function和資源引用路徑(img標簽)，也需要一并剝離。代碼如下：<!—Comments.vue子組件--><template> <divclass="d-flextext-mutedmb-3" v-for="(item,index)inmessageList"… …> …<imgsrc="../assets/img/support.png"alt="">//資源路徑修改</div></template><scriptsetup>functionparseTime(time){…}</script><stylescoped>.message_sum{}.suppoert{}.supportspan{}.supportActivedimg{}.img{}</style>但此時頁面還無法渲染Comments.vue組件，需要在父組件中導(dǎo)入和注冊。任務(wù)5.1組件設(shè)計【任務(wù)實施】步驟二.在App.vue中導(dǎo)入注冊子組件Comments.vue。<!—App.vue父組件--><scriptsetup>importCommentsfrom"../components/Comments.vue"</script><template><!--最新崗位列表--><divclass="py-5"> <Title>最新崗位</Title><Comments></Comments></div></template>保存后瀏覽器會報錯，原因是子組件的Comments.vue中的messageList數(shù)據(jù)并未獲取。任務(wù)5.1組件設(shè)計【任務(wù)實施】步驟三.通過props父組件向子組件傳遞數(shù)據(jù)。在App.vue中利用v-bind綁定來傳遞動態(tài)props值。<!—App.vue父組件--><Commentsv-bind:messageList="messageList.content"v-bind:avatar_male="avatar_male"v-bind:avatar_female="avatar_female"></Comments>在Comment.vue組件中使用defineProps方法在props列表上聲明傳遞的值和類型后，模板中就可以直接使用messageList、avatar_female和avatar_male三個數(shù)據(jù)。import{toRefs}from'vue'//接收父組件數(shù)據(jù)和方法constprops=defineProps({ messageList:Array, avatar_female:String, avatar_male:String})//toRefs方法可以將響應(yīng)式對象的每個屬性都轉(zhuǎn)化為ref對象const{messageList,avatar_female,avatar_male}=toRefs(props) 通過以上步驟，父組件數(shù)據(jù)傳遞到子組件中，順利完成數(shù)據(jù)的渲染。任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)組件（component）是一個具有獨立邏輯和功能的界面，不同組件之間又能根據(jù)規(guī)定的接口規(guī)則進行相互通信。每個Web頁面的各個功能塊，比如頭部、導(dǎo)航、彈窗、列表、側(cè)邊欄、頁腳等都可以看成是一個個的組件，頁面只不過是這些組件的容器。組件示意圖如圖5-2所示。圖5-2組件示意圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)定義組件當(dāng)使用構(gòu)建工具時，我們一般會將Vue組件定義在一個單獨的

.vue

文件中，也稱之為單文件組件

(SingleFileCcomponent，簡稱SFC)，存放在src/components目錄內(nèi)?！纠?-1】組件案例。在src/components目錄內(nèi)創(chuàng)建一個計數(shù)器組件ButtonCounter.vue，代碼如下所示。<template> <button@click="count++">點擊了{{count}}次</button></template><scriptsetup> import{ref}from'vue' constcount=ref(0)</script><stylescoped>.red{ color:red;}</style>從以上代碼得知，Vue的單文件組件是網(wǎng)頁開發(fā)中HTML、CSS和JavaScript三種語言經(jīng)典組合的自然延伸。<template>、<script>

和

<style>

三個塊在同一個文件中封裝，組合了組件的視圖、邏輯和樣式。任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)每個組件最多可以包含：一個頂層<template>塊；一個<script>塊；一個<scriptsetup>（不包括一般的<script>）；多個<style>標簽。一個

<style>

標簽可以使用

scoped

屬性來幫助封裝當(dāng)前組件的樣式，以免跟其它組件的樣式產(chǎn)生沖突。使用組件要使用一個組件，需要在父組件中導(dǎo)入、注冊它。注冊分為全局注冊與局部組件兩種方式。任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)全局注冊。組件在main.js通過ponent()方法全局注冊。通過全局注冊的組件在整個當(dāng)前的Vue應(yīng)用中都可以使用。格式如下：<!—main.js文件--> import{createApp}from‘vue’importMyComponentfrom‘./App.vue’//1.導(dǎo)入MyComponent組件constapp=createApp({})ponent(//注冊的名字’MyComponent’,//2.使用ponent()進行全局注冊

//導(dǎo)入的組件MyComponent)//3.在當(dāng)前整個應(yīng)用的任意組件模板中通過自定義標簽形式使用<template><MyComponet/> //或者使用<my-component></my-component></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)局部注冊。局部注冊的組件需要在使用它的父組件中顯示導(dǎo)入，并且只能在該父組件中使用。格式如下：<scriptsetup>//1.導(dǎo)入ComponentA組件并注冊后，模板中可以直接使用importComponentAfrom‘./ComponentA.vue’</script><template>//2.模板中使用自定義標簽進行使用，也可以使用<component-a></component-a><ComponentA/></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)組件名的注冊格式。在導(dǎo)入和注冊時建議使用PascalCase（帕斯卡命名法，即所有單詞的首字母大寫），在模板使用時可以通過PascalCase或者kebab-case（短橫線命名法）。比如，導(dǎo)入和注冊使用MyComponent，而在模板使用時<MyComponet/>或<my-component></my-component>。之前已經(jīng)創(chuàng)建完成的【例5-1】案例計數(shù)器組件ButtonCounter.vue，目前在瀏覽器端無法預(yù)覽，只有在父組件中注冊使用才能查看。代碼如下：//在App.vue文件中進行導(dǎo)入、注冊和使用<scriptsetup>importButtonCounterfrom‘./src/component/ButtonCounter.vue’</script><template><button-counter></button-counter></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)保存后刷新頁面即可看到效果，如圖5-3所示。圖5-3【例5-1】案例組件渲染效果圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信組件的作用域是相互獨立的，目的使代碼更加簡潔，容易維護。但這就意味著不同組件之間的數(shù)據(jù)無法相互引用。因此需要借助一些工具來實現(xiàn)數(shù)據(jù)在不同組件間的通信。在Vue中，組件的通信主要通過props和$emit來完成。組件通信示意圖如圖5-4所示。圖5-4組件通信示意圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信props傳值父組件把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定（v-bind）的形式，通過子組件自定義標簽傳遞到子組件內(nèi)部，供子組件使用。子組件需要在內(nèi)部定義props屬性，接收傳遞來的數(shù)據(jù)，才能在子組件中使用。例如，在一個博客項目中，希望所有的博客文章分享相同的視覺布局，但要有不同數(shù)據(jù)內(nèi)容。因此需要新建一個顯示博客文章的組件，在組件中定義樣式和行為，但數(shù)據(jù)內(nèi)容來自于父組件，比如每篇文章的標題和內(nèi)容，這就會使用到props傳值技術(shù)?！纠?-2】props傳值案例。代碼如下：<!—App.vue父組件--><scriptsetup>importBlogPostfrom‘./components/BlogPost.vue’constposts=ref([{id:1,title:’堅持不懈’},{id:2,title:’努力拼搏’},{id:3,title:’勇于創(chuàng)新’}])</script><template><BlogPostv-for=“postinposts”:key=“post.id”//1.利用v-bind綁定biaoTi來傳遞props值:biaoTi=“post.title”/></template><!—BlogPost.vue子組件--><scriptsetup>//2.使用defineProps方法在組件上聲明props為biaoTidefineProps([‘biaoTi])</script><template><h4>{{biaoTi}}</h4>//3.使用傳遞過來的props值biaoTi</template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信props傳值效果圖如圖5-5所示。圖5-5【例5-2】props傳值案例效果圖defineProps是用來設(shè)置props的方法，僅能用在<scriptsetup>中，不需要顯式導(dǎo)入。聲明的props會自動暴露給模板。defineProps返回一個對象，其中包含了可以傳遞給組件的所有props，傳遞給defineProps()的參數(shù)，除了使用字符串?dāng)?shù)據(jù)來聲明props外，還可以使用對象的形式來規(guī)定props的值類型，比如，要求一個prop的值是String類型的代碼如下：defineProps({biaoTi:String})任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信$emit傳值$emit能夠?qū)⒆咏M件中的數(shù)據(jù)傳遞到父組件中去。子組件通過$emit觸發(fā)父組件中定義的事件，子組件數(shù)據(jù)通過傳遞參數(shù)方式完成。例如，在之前的博客案例【例5-2】中，增加一個功能，將博客文章的文字能夠放大，而頁面其余部分仍使用默認字號?！纠?-2】$emit傳值案例，實現(xiàn)代碼如下：<!—App.vue父組件--><scriptsetup>constpostFontSize=ref(1)</script><template><div:style=”{fontSize:postFontSize+‘em’}”<BlogPostv-for=“postinposts”:key=“post.id”:biaoTi=“post.title”//1.父組件選擇性監(jiān)聽子組件上拋的事件@enlarge-text=“postFontSize+=0.1”/><template><divclass=“blog-post”><h4>{{biaoTi}}</h4><button//3.子組件通過調(diào)用內(nèi)置$emit方法，通過傳入事件名來拋出enlarge-text事件，父組件監(jiān)聽到enlarge-text事件，從而更新postFontSize的值。@click=“$emit(‘enlarge-text’)>放大字號</button></div></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信</div></template><!—BlogPost.vue子組件--><scriptsetup>//2.通過defineEmits方法定義子組件上拋出的事件defineEmits([‘enlarge-text’])</script><template><divclass=“blog-post”><h4>{{biaoTi}}</h4><button//3.子組件通過調(diào)用內(nèi)置$emit方法，通過傳入事件名來拋出enlarge-text事件，父組件監(jiān)聽到enlarge-text事件，從而更新postFontSize的值。@click=“$emit(‘enlarge-text’)>放大字號</button></div></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信效果如圖5-6所示。圖5-6【例5-2】$emit傳值案例效果圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信如果需要設(shè)置文本放大的具體值，涉及到子組件向父組件傳遞數(shù)據(jù)，可以給$emit提供額外的參數(shù)，【例5-2】$emit參數(shù)傳值案例：<!—MyButton子組件--><scriptsetup> defineEmits(['increaseBy'])//1.定義拋出的事件</script><template>//2.觸發(fā)父組件的increaseBy事件，第2個參數(shù)為傳遞的數(shù)據(jù) <button@click="$emit('increaseBy',3)">增大到3</button></template><!—App.vue子組件--><my-button@increaseBy="increaseFontSize"></my-button>//3.父組件接收到的參數(shù)n=3，將字號調(diào)整到3emfunctionincreaseFontSize(n){ postFontSize.value=n}任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信效果如圖5-7所示。圖5-7【例5-2】$emit參數(shù)傳值案例效果圖任務(wù)5.2點贊組件設(shè)計【任務(wù)陳述】本任務(wù)完成子組件Comments.vue中點贊功能。【任務(wù)分析】在之前的項目中，我們完成了最新崗位數(shù)據(jù)的渲染，但點贊功能并未起作用，因為點贊動作發(fā)生在子組件Comments.vue中，但渲染的數(shù)據(jù)卻保存在父組件App.vue中。本子任務(wù)主要實現(xiàn)通過$emit進行子組件向父組件的通信來實現(xiàn)點贊功能以及點贊圖標的切換。同時利用插槽技術(shù)完成對崗位標題的動態(tài)渲染。圖5-8任務(wù)實施流程圖任務(wù)5.2點贊組件設(shè)計【任務(wù)實施】步驟一.通過$emit傳值技術(shù)完成點贊功能子組件拋出事件。在組件Comments.vue中聲明向父組件拋出的事件parentSupport，并定義點贊事件support<template>

//2.在div上單擊時，觸發(fā)support事件，同時傳入當(dāng)前數(shù)據(jù)的id值<div:class="['support',{supportActived:item.has_sup}]"v-on:click="support(index)">…</div></template><scriptsetup>//1.定義子組件的拋出事件parentSupportconstemits=defineEmits(['parentSupport'])functionsupport(index){letnewData={data:{id:messageList.value[index].id,email:messageList.value[index].email,name:messageList.value[index].name,

content:messageList.value[index].content,scale:messageList.value[index].scale,

support:messageList.value[index].support+1,has_sup:true,unnamed:messageList.value[index].unnamed,},index:index}//3.觸發(fā)父組件的parentSupport事件，傳入需要修改的數(shù)據(jù)emits('parentSupport',newData)}</script>任務(wù)5.2點贊組件設(shè)計【任務(wù)實施】步驟一.通過$emit傳值技術(shù)完成點贊功能父組件接收數(shù)據(jù)。父組件App.vue接收子組件的數(shù)據(jù)，修改support方法，完成點贊數(shù)據(jù)更改。<template><Commentsv-bind:messageList="messageList.content"v-bind:avatar_male="avatar_male"v-bind:avatar_female="avatar_female"http://1.父組件監(jiān)聽parentSupport事件，一旦子組件觸發(fā)則執(zhí)行父組件的support事件v-on:parentSupport="support"></Comments></template><scriptsetup>//點贊方法functionsupport(newData){

//數(shù)據(jù)傳遞給接口postSupportState(newData).then(postResult=>{if(postResult.status==200){getSupportState(newData.data.id).then(getResult=>{if(getResult.status==200){//2.此處數(shù)據(jù)參數(shù)有修改，改為傳入數(shù)據(jù)的index屬性messageList.content[newData.index]=getResult.data}})} })}</script>任務(wù)5.2點贊組件設(shè)計【任務(wù)實施】步驟二.利用插槽技術(shù)完成標題渲染。將在項目中的“最新崗位”和“崗位發(fā)布”的標題設(shè)置成組件，并以插槽形式傳入數(shù)據(jù)，方便標題組件的復(fù)用。新建子組件Title.vue，設(shè)置slot插槽，存放于src/components目錄內(nèi)。<template><h2class="pt-2pb-3title">//標題內(nèi)容由父組件傳入，內(nèi)容不定，由slot進行占位<span><slot></slot></span></h2></template>父組件App.vue中引入子組件Title，并注冊使用。<!--最新崗位列表--><divclass="py-5">//父組件通過組件名標簽將“最新崗位”傳入子組件Title.vue的插槽處<Title>最新崗位</Title><Comments……></Comments></div>…<tr><tdcolspan="4">//父組件通過組件名標簽將“崗位發(fā)布”傳入子組件Title.vue的插槽處<Title>崗位發(fā)布</Title></td></tr>項目保存后，查看效果，順利渲染。任務(wù)5.2點贊組件設(shè)計【知識鏈接】5.2.1插槽組件可以通過接受任意類型的值作為props和$emit進行通信，但組件要如何接收模板內(nèi)容呢？答案是，需要通過插槽體來實現(xiàn)。Vue為了實現(xiàn)組件的內(nèi)容分發(fā)，提供了一套用于組件內(nèi)容分發(fā)的API，也就是插槽。工作示意圖如圖5-9所示。圖5-9插槽工作示意圖【例5-3】插槽案例。以下代碼實現(xiàn)子組件的按鈕文字由父組件傳入。<!—父組件--><template><child-button>發(fā)送</child-button> <child-button>重置</child-button> <ch