《Vue框架應(yīng)用實(shí)戰(zhàn)項(xiàng)目式教程》高職全套教學(xué)課件

1《Vue框架應(yīng)用實(shí)戰(zhàn)項(xiàng)目式教程》框架技術(shù)應(yīng)用任務(wù)1“就業(yè)職通車”項(xiàng)目初始化任務(wù)2招聘崗位數(shù)據(jù)渲染任務(wù)3崗位發(fā)布功能設(shè)計(jì)任務(wù)4崗位信息異步渲染任務(wù)5崗位信息異步渲染任務(wù)6“就業(yè)服務(wù)”模塊設(shè)計(jì)7.26任務(wù)7崗位信息異步渲染-副本任務(wù)8文章數(shù)據(jù)全局管理任務(wù)9項(xiàng)目托管與發(fā)布全套可編輯PPT課件2“就業(yè)職通車”項(xiàng)目初始化任務(wù)1框架技術(shù)應(yīng)用CONTENTS目錄04/05/任務(wù)分析任務(wù)陳述01/02/項(xiàng)目背景學(xué)習(xí)目標(biāo)07/08/任務(wù)總結(jié)知識(shí)鏈接06/任務(wù)實(shí)施03/任務(wù)規(guī)劃09/課后練習(xí)學(xué)習(xí)目標(biāo)開發(fā)環(huán)境搭建是項(xiàng)目開始的第一步，在企業(yè)項(xiàng)目工作中，需要大家擁有快速搭建項(xiàng)目環(huán)境的能力。本章節(jié)將帶領(lǐng)大家搭建與配置開發(fā)環(huán)境、使用Vite工具創(chuàng)建Vue3項(xiàng)目，并完成Vue項(xiàng)目的初始化部署。學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】了解Vue框架；掌握Vue開發(fā)環(huán)境的安裝?！炯寄苣繕?biāo)】能夠搭建Vue開發(fā)環(huán)境?！舅刭|(zhì)目標(biāo)】培養(yǎng)細(xì)致嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度。項(xiàng)目背景Vue是一款友好的、多用途且高性能的JavaScript框架，Vue繁榮的生態(tài)圈提供了大量成熟的項(xiàng)目解決方案。使用Vue可以更快、更高效的開發(fā)項(xiàng)目，因此它被廣泛應(yīng)用于Web前端、移動(dòng)端、跨平臺(tái)應(yīng)用的開發(fā)，使用場(chǎng)景十分廣泛。本項(xiàng)目主要開發(fā)“就業(yè)職通車”網(wǎng)站，該網(wǎng)站是一個(gè)面向高校應(yīng)屆畢業(yè)生的就業(yè)網(wǎng)，實(shí)現(xiàn)了招聘信息瀏覽和發(fā)布、就業(yè)指導(dǎo)文章閱覽、名企介紹等功能，以推動(dòng)應(yīng)屆畢業(yè)生更充分更高質(zhì)量的就業(yè)。任務(wù)規(guī)劃本任務(wù)要求搭建與配置開發(fā)環(huán)境、使用Vite工具創(chuàng)建Vue3項(xiàng)目，并使用Vue3框架實(shí)現(xiàn)“就業(yè)職通網(wǎng)”項(xiàng)目布局與樣式。首頁效果如圖1-1所示。圖1-1“就業(yè)職通網(wǎng)”效果圖任務(wù)1.1Vue環(huán)境配置【任務(wù)陳述】本任務(wù)要求配置Vue項(xiàng)目所必需的開發(fā)環(huán)境，并初始化Vue項(xiàng)目。具體任務(wù)目標(biāo)如下：配置Vue項(xiàng)目所必須的開發(fā)環(huán)境，包括Node.js環(huán)境、VisualStudioCode開發(fā)工具、Vite工具等；在“:5173”地址中渲染Vue初始化項(xiàng)目，項(xiàng)目效果如圖1-2所示。圖1-2Vue項(xiàng)目渲染效果圖任務(wù)1.1Vue環(huán)境配置【任務(wù)分析】該任務(wù)要求搭建Vue項(xiàng)目所必須的環(huán)境，并初始化和渲染項(xiàng)目。具體任務(wù)實(shí)施流程如圖1-3所示。圖1-3任務(wù)實(shí)施流程圖任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】步驟一.安裝Node.JS環(huán)境。Node.js是一個(gè)開源的、跨平臺(tái)的JavaScript運(yùn)行時(shí)環(huán)境，Node.js具有獨(dú)特的優(yōu)勢(shì)。打開Node.JS官網(wǎng)下載頁面,如圖1-4所示根據(jù)個(gè)人系統(tǒng)情況下載不同版本的Node.JS，本案例中以Windows系統(tǒng)上下載和安裝Node.JS為例。圖1-4Node.JS官網(wǎng)下載頁任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】雙擊下載后的安裝包，單擊“Run”按鈕進(jìn)行環(huán)境安裝，如圖1-5所示。圖1-5Node.JS安裝任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】勾選“接受用戶協(xié)議(IacceptthetermsintheLicenseAgreement)”復(fù)選框，單擊“Next”按鈕,如圖1-6所示。圖1-6勾選用戶協(xié)議選項(xiàng)任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】如圖1-7所示，Node.JS默認(rèn)安裝目錄為“C:\ProgramFiles\nodejs”，你可以修改目錄，并單擊“Next”按鈕。圖1-7選擇安裝路徑如圖1-8所示，單擊樹形圖標(biāo)來選擇你需要的安裝模式，然后單擊“Next”按鈕。圖1-8選擇需要安裝的功能選項(xiàng)任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】如圖1-9所示，單擊“Install”按鈕開始安裝Node.js。你也可以單擊“Back”按鈕來修改之前的配置。然后單擊“Next”按鈕，安裝完成后單擊“Finish”按鈕退出安裝向?qū)А?/p>

圖1-9Node.JS安裝與結(jié)束任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】安裝完成之后，檢測(cè)PATH環(huán)境變量是否配置了Node.js。在桌面單擊“開始”—>“運(yùn)行”選項(xiàng)，在“運(yùn)行”窗口中輸入“cmd”命令，單擊“確定”按鈕，在彈出的命令窗口中輸入“path”命令，按回車鍵輸出如下結(jié)果：上面輸出結(jié)果為本機(jī)環(huán)境變量的配置，我們可以看到環(huán)境變量中已經(jīng)包含了C:\ProgramFiles\nodejs\，說明環(huán)境變量在Node.js安裝的過程中已經(jīng)配置成功。任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】最后檢測(cè)Node與npm版本號(hào)。在桌面單擊“開始”—>“運(yùn)行”選項(xiàng)，在“運(yùn)行”窗口中輸入“cmd”命令，單擊“確定”按鈕，在彈出的命令窗口中分別輸入“node-v”和“npm-v”命令后，輸出如圖1-10結(jié)果，說明Node.js和npm環(huán)境安裝成功。圖1-10Node.JS和npm版本檢測(cè)任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】圖1-11VSCode官網(wǎng)首頁步驟二.安裝VisualStudioCode開發(fā)工具。VisualStudioCode（簡(jiǎn)稱“VSCode”）是Microsoft在2015年4月30日Build開發(fā)者大會(huì)上正式宣布一個(gè)運(yùn)行于MacOSX、Windows和Linux之上的，針對(duì)于編寫現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器。打開VSCode官網(wǎng)首頁，在如圖1-11所示的下載列表中，選擇自己系統(tǒng)對(duì)應(yīng)的下載鏈接。其中“Stable”表示穩(wěn)定版，“Insiders”表示預(yù)覽版。任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】如圖1-12所示，雙擊打開安裝包，勾選【我接受協(xié)議】，根據(jù)提示單擊“下一步”進(jìn)行逐步安裝即可。圖1-12VSCode安裝過程任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】完成VSCode軟件安裝后還需要下載Vue語法支持插件。在VSCode中打開“拓展”選項(xiàng)（快捷鍵:ctrl+shift+x），搜索“VueLanguageFeatures”插件，單擊“安裝”按鈕進(jìn)行下載與安裝，如圖1-13所示。圖1-13拓展插件任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】步驟三.初始化Vue項(xiàng)目。NPM的全稱是NodePackageManager，是一個(gè)Node.js包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)。接下來我們將通過NPM下載Vite工具，并進(jìn)行Vue項(xiàng)目初始化。在VSCode中新建項(xiàng)目文件夾，并通過【終端】—>【新建終端】選項(xiàng)打開軟件中的命令行窗口，如圖1-14所示。圖1-14打開VSCode終端窗口任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】在軟件命令行窗口中使用“npm

init

vite@latest”命令搭建一個(gè)Vite項(xiàng)目，如圖1-15所示。Vite是Vue的作者尤雨溪在開發(fā)Vue3.0的時(shí)候開發(fā)的一個(gè)基于原生ES-Module的前端構(gòu)建工具。能夠幫助我們快速搭建和發(fā)布Vue項(xiàng)目。圖1-15搭建Vite項(xiàng)目輸入項(xiàng)目名稱，如圖1-16所示。圖1-16輸入項(xiàng)目名稱選擇項(xiàng)目所使用的框架。通過鍵盤的方向鍵進(jìn)行框架選擇，按下回車鍵表示確定，如圖1-17所示。圖1-17選擇項(xiàng)目框架任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】選擇項(xiàng)目所使用的編程語言，在此我們選擇“JavaScript”語言，如圖1-18所示。圖1-18選擇編程語言完成配置選擇之后，通過如下命令進(jìn)入項(xiàng)目目錄，安裝項(xiàng)目所依賴的包，如圖1-19所示。圖1-19安裝依賴任務(wù)1.1Vue環(huán)境配置【任務(wù)實(shí)施】步驟四.渲染Vue項(xiàng)目。完成項(xiàng)目依賴包安裝之后，我們?cè)诿钚写翱诶^續(xù)輸入“npmrundev”命令，如圖1-20所示,項(xiàng)目便渲染至“:5173”地址中了。圖1-20項(xiàng)目渲染【知識(shí)鏈接】1.1.1Vue3介紹1.更優(yōu)的性能2.更小的體積3.支持組合API4.更好的支持TS5.提供了更先進(jìn)的組件1.1.2Vite工具介紹Vite號(hào)稱是下一代的前端開發(fā)和構(gòu)建工具，目前已經(jīng)在前端社區(qū)里逐步開始流行起來了。比起傳統(tǒng)的webpack構(gòu)建，Vite在性能速度上都有了質(zhì)的提高。使用Vite工具構(gòu)建的項(xiàng)目在項(xiàng)目根目錄中存在一個(gè)“vite.config.js”配置文件，通過該文件能夠?qū)?xiàng)目進(jìn)行相關(guān)配置?！局R(shí)鏈接】1.端口設(shè)置Vite默認(rèn)將Vue項(xiàng)目渲染至5173端口，我們也可以通過“vite.config.js”配置文件，對(duì)其渲染端口進(jìn)行修改。在“vite.config.js”中添加如下代碼，即可修改項(xiàng)目渲染端口。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

//修改項(xiàng)目渲染端口為9999

port:9999

}})【知識(shí)鏈接】2.監(jiān)聽地址設(shè)置通過“host”屬性能夠指定服務(wù)器應(yīng)該監(jiān)聽哪個(gè)IP地址。例如將監(jiān)聽地址修改為“”。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

port:9999,//修改項(xiàng)目渲染端口為9999

host:""http://修改IP

}})【知識(shí)鏈接】3.應(yīng)用自啟動(dòng)設(shè)置配置“open:true”選項(xiàng)，能夠在開發(fā)服務(wù)器啟動(dòng)時(shí)，自動(dòng)在瀏覽器中打開應(yīng)用程序。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

port:9999,//修改項(xiàng)目渲染端口為9999

host:"",//修改IPopen:true

}})以上介紹的都是Vite中的一些基礎(chǔ)配置，在項(xiàng)目的設(shè)計(jì)和發(fā)布過程中我們將會(huì)陸續(xù)接觸到更多的Vite配置內(nèi)容，同學(xué)們也可以前往Vite的官網(wǎng)進(jìn)行進(jìn)一步的了解和學(xué)習(xí)。任務(wù)1.2項(xiàng)目初始化【任務(wù)陳述】本任務(wù)要求根據(jù)項(xiàng)目素材，將Vue項(xiàng)目改寫為如圖1-1所示樣式?！救蝿?wù)分析】本任務(wù)要求同學(xué)們對(duì)Vue項(xiàng)目結(jié)構(gòu)有所了解。該項(xiàng)目頁面主要由HTML布局代碼、CSS樣式代碼、JavaScript腳本代碼以及圖片文件等組成，如何將這些原始素材放置在Vue項(xiàng)目的合理位置是項(xiàng)目實(shí)施的關(guān)鍵點(diǎn)。圖1-1“就業(yè)職通網(wǎng)”效果圖任務(wù)1.2項(xiàng)目初始化【任務(wù)實(shí)施】步驟一.部署HTML代碼。清空App.vue文件中的默認(rèn)代碼并輸入如下代碼：<template></template><script></script><style></style>App.vue是項(xiàng)目根組件，項(xiàng)目中所有組件都將被加載至該組件進(jìn)行渲染和展示。其中<template>標(biāo)簽主要用于部署HTML代碼，<script>標(biāo)簽主要用于部署JavaScript腳本代碼，<style>標(biāo)簽用于部署樣式代碼。將素材中的HTML代碼復(fù)制到<template>標(biāo)簽中。任務(wù)1.2項(xiàng)目初始化步驟二.部署CSS代碼。將素材中的“bootstrap.css”文件拷貝至項(xiàng)目的【assets】—>【css】目錄中。Vue靜態(tài)資源可以通過兩種方式進(jìn)行處理：在<script>被導(dǎo)入以及在<template>或<css>中通過相對(duì)路徑被引用。這類引用會(huì)被打包處理，需要將資源放在【assets】目錄中。放置在【public】目錄下或通過絕對(duì)路徑引用。這類資源將會(huì)直接被拷貝，而不會(huì)經(jīng)過打包處理。Vue更推薦將資源作為模塊依賴的一部分導(dǎo)入項(xiàng)目當(dāng)中，這樣腳本和樣式表會(huì)被壓縮且打包在一起，從而避免額外的網(wǎng)絡(luò)請(qǐng)求任務(wù)1.2項(xiàng)目初始化步驟二.部署CSS代碼。App.vue文件中的<style>標(biāo)簽主要用于部署樣式代碼，在<style>標(biāo)簽中導(dǎo)入素材中的CSS樣式文件。<template></template><script></script><style>@import

"./assets/css/bootstrap.css"</style>任務(wù)1.2項(xiàng)目初始化步驟三.部署圖片文件。將素材中的圖片文件拷貝至項(xiàng)目的【assets】—>【img】目錄中。在VSCode軟件中打開命令行工具，輸入“npmrundev”命令渲染項(xiàng)目，此時(shí)便可以看到項(xiàng)目被成功渲染了。任務(wù)1.2項(xiàng)目初始化【知識(shí)鏈接】1.2.1Vue項(xiàng)目結(jié)構(gòu)一個(gè)Vue項(xiàng)目包括如圖1-21所示的文件和目錄，接下來我們對(duì)其中主要文件和目錄進(jìn)行介紹。圖1-21Vue項(xiàng)目結(jié)構(gòu)任務(wù)1.2項(xiàng)目初始化【知識(shí)鏈接】1.2.1Vue項(xiàng)目結(jié)構(gòu)node_modules目錄npm加載的項(xiàng)目依賴模塊。public目錄public是靜態(tài)資源目錄，項(xiàng)目打包時(shí)，該目錄下的資源不會(huì)被編譯。assets目錄assets同樣是靜態(tài)資源目錄，項(xiàng)目打包時(shí)，該目錄下的資源將會(huì)被編譯?！局R(shí)鏈接】1.2.1Vue項(xiàng)目結(jié)構(gòu)App.vueApp.vue是項(xiàng)目根組件，項(xiàng)目中所有組件都將被加載至該組件進(jìn)行渲染和展示。main.js項(xiàng)目的核心文件，主要起到配置項(xiàng)目所必須的插件、實(shí)例化Vue等作用。項(xiàng)目創(chuàng)建完畢，main.js中會(huì)有默認(rèn)的配置。//導(dǎo)入createApp包import{createApp}from'vue'任務(wù)1.2項(xiàng)目初始化【知識(shí)鏈接】1.2.1Vue項(xiàng)目結(jié)構(gòu)//導(dǎo)入App.vue組件importAppfrom'./App.vue'//使用createApp函數(shù)將App.vue組件渲染至index.html中'id=app'的節(jié)點(diǎn)上createApp(App).mount('#app')index.htmlindex.html是該Vite項(xiàng)目的入口文件。【知識(shí)鏈接】1.2.1Vue項(xiàng)目結(jié)構(gòu)package.json項(xiàng)目配置文件。package.json文件其實(shí)就是對(duì)項(xiàng)目或者模塊包的描述，里面包含許多元信息。比如項(xiàng)目名稱，項(xiàng)目版本，項(xiàng)目執(zhí)行入口文件，項(xiàng)目貢獻(xiàn)者等等。npminstall命令會(huì)根據(jù)這個(gè)文件下載所有依賴模塊。vite.config.jsvite工具的配置文件。任務(wù)總結(jié)與拓展通過該任務(wù)的實(shí)施，掌握了Vue3框架以及Vue3項(xiàng)目的搭建過程。因?yàn)槊颗_(tái)電腦環(huán)境的差異，在項(xiàng)目環(huán)境的搭建過程中難免遇到一些不同的問題，需要保持認(rèn)真細(xì)致，培養(yǎng)嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度，排除錯(cuò)誤問題，積累項(xiàng)目經(jīng)驗(yàn)。同時(shí)掌握了Vue項(xiàng)目結(jié)構(gòu)和基礎(chǔ)代碼部署的方法，對(duì)于Vue項(xiàng)目中各文件和目錄的作用同學(xué)們需要熟記于心，這樣才能合理部署資源，進(jìn)行正確的代碼書寫。通過本章節(jié)學(xué)習(xí)，讀者應(yīng)對(duì)Vue有一個(gè)整體的認(rèn)識(shí)，并能夠進(jìn)行簡(jiǎn)單Vue項(xiàng)目的部署。【思考】當(dāng)項(xiàng)目默認(rèn)的運(yùn)行端口5173被占用時(shí)，如何修改項(xiàng)目運(yùn)行端口？【思考】如何在使用“npmrundev”命令渲染Vue項(xiàng)目時(shí)，能夠在瀏覽器自動(dòng)打開編譯頁面？39招聘崗位數(shù)據(jù)渲染任務(wù)2框架技術(shù)應(yīng)用Vue不但改善了前端的開發(fā)體驗(yàn)，還極大地提高了開發(fā)效率。如何快速的將后臺(tái)數(shù)據(jù)渲染到頁面當(dāng)中去，是本任務(wù)主要學(xué)習(xí)的知識(shí)。本任務(wù)將對(duì)Vue的基礎(chǔ)知識(shí)進(jìn)行講解，內(nèi)容包括數(shù)據(jù)的綁定、數(shù)據(jù)的渲染等。學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】掌握Vue插值數(shù)據(jù)綁定的方法；掌握v-text和v-html指令的使用；掌握v-bind屬性綁定指令的使用方法；了解Vue的雙向數(shù)據(jù)綁定模式；掌握v-model指令的使用；掌握Vue的條件渲染、列表渲染?！炯寄苣繕?biāo)】能夠熟練使用渲染指令構(gòu)建網(wǎng)頁；能夠熟練運(yùn)用Vue基礎(chǔ)知識(shí)創(chuàng)建Vue實(shí)例?！舅刭|(zhì)目標(biāo)】培養(yǎng)審美意識(shí)，培育審美能力；在審美能力提升中，融入堅(jiān)定文化自信，激發(fā)愛國主義情感。“就業(yè)職通車”網(wǎng)站最重要的功能當(dāng)屬“熱門招聘”模塊。人們可以通過該模塊查詢到當(dāng)前各企業(yè)的招聘信息，同時(shí)企業(yè)也能在網(wǎng)站中發(fā)布自己的招聘崗位信息。該模塊主要完成企業(yè)招聘信息錄入、招聘崗位發(fā)布以及崗位信息展示等功能。如圖1-1圖1-1“就業(yè)職通網(wǎng)”效果圖項(xiàng)目背景本任務(wù)要求實(shí)現(xiàn)“就業(yè)職通車”網(wǎng)站當(dāng)中“熱門招聘”模塊，其中使用Vue3框架實(shí)現(xiàn)“熱門招聘”中招聘信息填寫、招聘崗位信息渲染等功能的布局與樣式?！盁衢T招聘”模塊效果如圖2-1所示。圖2-1“熱門招聘”模塊效果圖任務(wù)規(guī)劃【任務(wù)陳述】本任務(wù)需要完成“熱門招聘”模塊中招聘簡(jiǎn)介部分。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握Vue插值數(shù)據(jù)綁定的方法。本任務(wù)實(shí)現(xiàn)效果如圖2-2所示。任務(wù)2.1招聘數(shù)據(jù)渲染圖2-2招聘簡(jiǎn)介效果圖任務(wù)2.1招聘數(shù)據(jù)渲染【任務(wù)分析】本任務(wù)需要將“熱門招聘”模塊中招聘簡(jiǎn)介數(shù)據(jù)通過數(shù)據(jù)綁定的方式顯示在界面上，任務(wù)流程如圖2-3所示。圖2-3任務(wù)流程圖【任務(wù)實(shí)施】步驟一.在<script>中準(zhǔn)備頁面數(shù)據(jù)。<scriptsetup>import{ref}from'vue'import"./assets/css/bootstrap.css"constarticle=ref("就業(yè)職通網(wǎng)主要面向高效應(yīng)屆畢業(yè)生，實(shí)現(xiàn)就業(yè)政策解讀、招聘信息瀏覽、簡(jiǎn)歷投遞等功能，以推動(dòng)應(yīng)屆畢業(yè)生更充分、更高質(zhì)量的就業(yè)。")</script>任務(wù)2.1招聘數(shù)據(jù)渲染【任務(wù)實(shí)施】步驟二.通過插值{{}}語法將文章數(shù)據(jù)渲染至頁面中。<template>

<!--頁面容器--><divclass="container"><main>

<!--文章內(nèi)容--><divclass="py-5text-center"><imgclass="d-blockmx-auto"src="assets/img/logo.png"><pclass="lead">{{article}}</p></div></main></div></template>任務(wù)2.1招聘數(shù)據(jù)渲染【任務(wù)實(shí)施】步驟三.在控制臺(tái)通過vuerundev指令進(jìn)行編譯。渲染結(jié)果如圖2-4所示。任務(wù)2.1招聘數(shù)據(jù)渲染圖2-4招聘簡(jiǎn)介效果圖【知識(shí)鏈接】2.1.1插值語法數(shù)據(jù)綁定最常見的形式就是使用{{...}}（雙大括號(hào)）的文本插值。其語法如下：<p>{{message}}</p>【例2-1】插值渲染實(shí)例。代碼如下：<template><divid="app"><div><p>姓名:{{newP}}</p><p>年齡:{{newPerson.age}}</p><p>{{newPerson.school.schoolName}}-{{newPerson.school.grade}}</p><p>家庭成員:{{newPerson.family.toString()}}</p></div></div></template>任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.1插值語法<scriptsetup>import{reactive}from'vue'constnewPerson=reactive({name:"小明",age:7,school:{schoolName:"天天小學(xué)",grade:"一年級(jí)"},family:["爺爺","奶奶","爸爸","媽媽"]})</script>任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.1插值語法<stylescoped>#app{color:red;}</style>頁面渲染效果如圖2-5所示。任務(wù)2.1招聘數(shù)據(jù)渲染圖2-5【例2-1】插值渲染效果圖【知識(shí)鏈接】2.1.2v-text指令語法v-text是用于操作純文本，它會(huì)替代顯示對(duì)應(yīng)的數(shù)據(jù)對(duì)象上的值。當(dāng)綁定的數(shù)據(jù)對(duì)象上的值發(fā)生改變，插值處的內(nèi)容也會(huì)隨之更新。讀者可以將其理解為JavaScript中的innerText方法?！纠?-2】v-text指令渲染實(shí)例。代碼如下：<template><divid="app"><divv-text="textStr"></div></div></template><scriptsetup>import{ref}from'vue'consttextStr=ref('<astyle="color:red">紅色</a>')</script>任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.2v-text指令語法代碼運(yùn)行效果如圖2-6所示。圖2-6【例2-2】v-text指令渲染效果圖如圖2-5所示，v-text指令并不能渲染HTML標(biāo)簽，而是將字符串原樣輸出到界面中。如果需要將字符串渲染為HTML標(biāo)簽，我們?cè)撊绾尾僮髂?？這就需要使用到v-html指令了。任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.3v-html指令語法v-html指令可用于HTML標(biāo)簽的渲染，類似于JavaScript中的innerHTML方法。例如，我們將上一個(gè)案例代碼，通過v-html指令進(jìn)行渲染?！纠?-3】v-html指令渲染實(shí)例。代碼如下：<template><divid="app"><divv-html="htmlStr"></div></div></template><scriptsetup>import{ref}from'vue'consthtmlStr=ref('<astyle="color:red">紅色</a>')</script>任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.3v-html指令語法代碼運(yùn)行效果如圖2-7所示。圖2-7【例2-3】v-html指令渲染效果圖注意：在網(wǎng)站上動(dòng)態(tài)渲染任意HTML是非常危險(xiǎn)的，因?yàn)槿菀讓?dǎo)致XSS攻擊，因此讀者在設(shè)計(jì)網(wǎng)頁界面時(shí)只在可信內(nèi)容上使用v-html，不能用在用戶提交的內(nèi)容上。任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.4v-once指令語法v-once指令只渲染元素和組件一次。隨后的重新渲染，元素或組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。【例2-4】v-once指令語法實(shí)例。代碼如下：<template><divid="app"><divv-once>{{num}}</div><buttonv-on:click="add">num自增</button></div></template>任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.4v-once指令語法v-once指令只渲染元素和組件一次。隨后的重新渲染，元素或組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過?！纠?-4】v-once指令語法實(shí)例。代碼如下：<scriptsetup>import{ref}from'vue'constnum=ref(1)functionadd(){num++}</script>任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】如圖2-8所示，單擊“num自增”按鈕，v-once綁定的標(biāo)簽內(nèi)容并不會(huì)隨之改變，說明v-once指令對(duì)數(shù)據(jù)僅進(jìn)行了一次渲染。圖2-8【例2-4】v-once指令渲染效果圖任務(wù)2.1招聘數(shù)據(jù)渲染【任務(wù)陳述】Vue中的數(shù)據(jù)綁定功能極大地提高了開發(fā)效率。本任務(wù)需要完成“崗位信息”顯示模塊中企業(yè)標(biāo)志的渲染效果。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握v-bind指令屬性綁定的方法。本任務(wù)實(shí)現(xiàn)效果如圖2-9所示。任務(wù)2.2企業(yè)標(biāo)志渲染圖2-9企業(yè)標(biāo)志效果圖【任務(wù)分析】本任務(wù)需要完成“崗位信息”顯示模塊中企業(yè)標(biāo)志的渲染效果，任務(wù)流程如圖2-10所示。任務(wù)2.2企業(yè)標(biāo)志渲染圖2-10任務(wù)流程圖【任務(wù)實(shí)施】步驟一.在“熱門招聘”模塊基礎(chǔ)上，通過import命令將圖像導(dǎo)入。<scriptsetup>import{reactive,ref}from'vue'import"./assets/css/bootstrap.css"importavatar_biaozhi1from"./assets/img/biaozhi1.png"

//企業(yè)標(biāo)志圖片importavatar_biaozhi2from"./assets/img/biaozhi2.png"

//企業(yè)標(biāo)志圖片conststyleclass=reactive({ avatar_biaozhi1,avatar_biaozhi2})constmessageList=ref([//崗位數(shù)據(jù)任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】{"id":110,"email":"lxm@",

"name":"華為技術(shù)有限公司",

"content":"招聘軟件工程師若干名。在這里,你將從事IT應(yīng)用層軟件、分布式云化軟件、互聯(lián)網(wǎng)軟件等的設(shè)計(jì)開發(fā),可以采用敏捷、Devops、開源等先進(jìn)的軟件設(shè)計(jì)開發(fā)模式,接觸最前沿的產(chǎn)品和軟件技術(shù)，成為大容量高并發(fā)技術(shù)的專家。","scale":1,"support":37,"has_sup":true,"time":1678949430654},任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】{"id":111,"email":"xxt@","name":"騰訊科技（深圳）有限公司",

"content":"招聘前端工程師10人，負(fù)責(zé)計(jì)費(fèi)營銷saas業(yè)務(wù)的前端開發(fā)工作，通過前端工程化、組件化、可視化的方法，實(shí)現(xiàn)前端UI表現(xiàn)和前端邏輯組件的快速生成。","scale":1,"support":60,"has_sup":true,"time":1675234219856},任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】{"id":112,"email":"zqq@163.com","name":"網(wǎng)之易信息技術(shù)（上海）有限公司",

"content":"招聘運(yùn)維工程師5人，負(fù)責(zé)IDC現(xiàn)場(chǎng)維護(hù)工作，保證基礎(chǔ)設(shè)施正常運(yùn)營環(huán)境，確保服務(wù)器等硬件設(shè)備穩(wěn)定高效運(yùn)行。本科或以上學(xué)歷，計(jì)算機(jī)及相關(guān)專業(yè)，2年以上相關(guān)工作經(jīng)驗(yàn)。","scale":1,"support":46,"has_sup":true,"time":1665284870606}])</script>任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】步驟二.將企業(yè)標(biāo)志屬性通過v-bind指令進(jìn)行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標(biāo)志。<template><divclass="d-flextext-mutedmb-3"><divclass="border-bottomcol-md-12"><img:src="messageList[0].scale==0?avatar_biaozhi1:avatar_biaozhi2"alt=""width="24"height="24"><strongclass="text-gray-dark">{{messageList[0].name}}</strong><p>{{messageList[0].content}}</p></div></div>?任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】步驟二.將企業(yè)標(biāo)志屬性通過v-bind指令進(jìn)行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標(biāo)志。<divclass="d-flextext-mutedmb-3">

<divclass="border-bottomcol-md-12">

<img:src="messageList[1].scale==0?avatar_biaozhi1:avatar_biaozhi2"alt=""width="24"height="24">

<strongclass="text-gray-dark">{{messageList[1].name}}</strong>

<p>{{messageList[1].content}}</p>

</div></div>?<divclass="d-flextext-mutedmb-3">任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】步驟二.將企業(yè)標(biāo)志屬性通過v-bind指令進(jìn)行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標(biāo)志。

<divclass="border-bottomcol-md-12"><img:src="messageList[2].scale==0?avatar_biaozhi1:avatar_biaozhi2"alt=""width="24"height="24">

<strongclass="text-gray-dark">{{messageList[2].name}}</strong>

<p>{{messageList[2].content}}</p>

</div></div></template>任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】步驟二.將企業(yè)標(biāo)志屬性通過v-bind指令進(jìn)行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標(biāo)志。我們通過v-bind:src=“messageList[0].scale==0?avatar_biaozhi1:avatar_biaozhi2"的三元表達(dá)式對(duì)不同企業(yè)的標(biāo)志進(jìn)行了區(qū)分渲染。對(duì)比起直接引用圖片地址的方式，屬性綁定更有利于我們后期的數(shù)據(jù)維護(hù)，一旦標(biāo)志地址發(fā)生改變，我們僅需要在import指令中重新選擇正確的圖片路徑即可。任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)實(shí)施】步驟三.在控制臺(tái)通過vuerundev指令進(jìn)行編譯。渲染結(jié)果如圖2-11所示。圖2-11企業(yè)標(biāo)志渲染效果圖v-bind指令能夠動(dòng)態(tài)的綁定一個(gè)或多個(gè)屬性值，相比起單向數(shù)據(jù)綁定而言，v-bind主要用于屬性的綁定。合理應(yīng)用v-bind指令，能夠?yàn)楹笃诘臄?shù)據(jù)維護(hù)提供極大的便利。任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語法v-bind指令主要用于響應(yīng)式的更新html屬性。如果需要在元素節(jié)點(diǎn)的屬性上綁定Vue的數(shù)據(jù)，不能直接使用{{}}插入值語法來實(shí)現(xiàn)，需要使用v-bind指令來完成。v-bind用于給元素的屬性賦值，可以實(shí)現(xiàn)屬性單向數(shù)據(jù)綁定。v-bind語法為：v-bind:屬性名=[變量名]。例如：v-bind:title="message"v-bind:可以縮寫為:符號(hào)，例如：:title="message"v-bind指令常常用于綁定標(biāo)簽屬性、樣式等，它支持綁定數(shù)值、字符串、數(shù)組、對(duì)象或一個(gè)表達(dá)式。任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語法例如：<!--綁定一個(gè)屬性--><imgv-bind:src="imageSrc"><!--動(dòng)態(tài)屬性名--><buttonv-bind:[key]="value"></button><!--縮寫形式--><img:src="imageSrc"><!--動(dòng)態(tài)屬性名縮寫--><button:[key]="value"></button><!--內(nèi)聯(lián)字符串拼接--><img:src="'/path/to/images/'+fileName">任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語法例如：<!--class綁定--><div:class="{red:isRed}"></div><div:class="[classA,classB]"></div><div:class="[classA,{classB:isB,classC:isC}]"></div><!--style綁定--><div:style="{fontSize:size+'px'}"></div><div:style="[styleObjectA,styleObjectB]"></div><!--綁定一個(gè)全是屬性的對(duì)象--><divv-bind="{id:someProp,'other-attr':otherProp}"></div>任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語法【例2-5】v-bind使用案例。如以下案例所示，通過v-bind指令將類名綁定至class屬性中。<template><divid="app"><pv-bind:class="styleclass.a">v-bind用于屬性綁定</p></div></template><scriptsetup>import{reactive}from'vue'conststyleclass=reactive({ a:"styleA",b:"styleB"})</script>任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語法【例2-5】v-bind使用案例。如以下案例所示，通過v-bind指令將類名綁定至class屬性中。<stylescoped>.styleA{color:red;}.styleB{color:blue;}</style>任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語法渲染Vue得到如圖2-12所示結(jié)果，Class樣式名為“styleA”。圖2-12【例2-5】v-bind使用效果圖任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)陳述】本任務(wù)需要完成“熱門招聘”模塊中“發(fā)布崗位”表單的界面渲染效果。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握v-model指令的方法，實(shí)現(xiàn)數(shù)據(jù)雙向綁定。本任務(wù)實(shí)現(xiàn)效果如圖2-13所示。圖2-13“發(fā)布崗位”表單渲染效果圖任務(wù)2.3招聘表單設(shè)計(jì)【任務(wù)分析】本任務(wù)需要完成“熱門招聘”模塊中“發(fā)布崗位”表單的界面渲染效果。將表單中信息進(jìn)行數(shù)據(jù)綁定。任務(wù)流程如圖2-14所示。圖2-14任務(wù)流程圖任務(wù)2.3招聘表單設(shè)計(jì)【任務(wù)實(shí)施】步驟一.在“熱門招聘”模塊中定義崗位信息數(shù)據(jù)。<scriptsetup>import{ref}from'vue'importavatar_biaozhi1from"./assets/img/biaozhi1.png"importavatar_biaozhi2from"./assets/img/biaozhi2.png"constmessage=reactive({id:"",email:"",name:"",content:"",scale:0})</script>任務(wù)2.3招聘表單設(shè)計(jì)【任務(wù)實(shí)施】步驟二.通過v-model指令，綁定name屬性至頁面表單中。<inputtype="text"class="form-controlactive"id="name"placeholder="請(qǐng)輸入企業(yè)名稱"requiredv-model="">步驟三.通過v-model指令，綁定email屬性至頁面表單中。<inputtype="email"class="form-control"style="width:80%;"id="email"placeholder="name@"requiredv-model="message.email">步驟四.通過v-model指令，綁定scale屬性至頁面表單中。因?yàn)槠髽I(yè)規(guī)模選擇框是radio類型，是否選中是通過其checked屬性進(jìn)行判定的，所以我們需要使用v-model指令綁定checked屬性，進(jìn)行選中與否的判斷。<!--企業(yè)規(guī)模：上市企業(yè)單選框--><inputid="male"name="scale"type="radio"class="form-check-input"requiredvalue="1"v-model="message.scale">上市企業(yè)<!--企業(yè)規(guī)模：非企業(yè)單選框--><inputid="female"name="scale"type="radio"class="form-check-input"value="0"v-model="message.scale">非上市企業(yè)任務(wù)2.3招聘表單設(shè)計(jì)【任務(wù)實(shí)施】步驟五.通過v-model指令，綁定content屬性至頁面表單中。<textareaclass="form-control"name=""id=""cols="30"rows="5"placeholder="請(qǐng)輸入招聘崗位信息和要求"v-model="message.content"></textarea>步驟六.“崗位發(fā)布”表單渲染結(jié)果如圖2-15所示。圖2-15“崗位發(fā)布”表單渲染效果圖通過在網(wǎng)頁表單中輸入數(shù)據(jù)，可見當(dāng)頁面數(shù)據(jù)發(fā)生變化時(shí)，message中數(shù)據(jù)也一并發(fā)生變化。將message中的數(shù)據(jù)進(jìn)行更改并保存，頁面的數(shù)據(jù)也將同步發(fā)生變化。由此可見，通過v-model指令實(shí)現(xiàn)了表單的雙向數(shù)據(jù)綁定。任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語法在原生Javascript的項(xiàng)目中，要獲取用戶輸入框輸入的內(nèi)容，需要通過DOM對(duì)象的方式。在Vue項(xiàng)目中則不用這么繁瑣，因?yàn)関ue通過了指令v-model來實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。像輸入框、單選框、復(fù)選框等類型的輸入控件都可以通過v-model指令綁定其value值，實(shí)現(xiàn)雙向數(shù)據(jù)綁定。所謂雙向綁定，指的是Vue實(shí)例中的數(shù)據(jù)與其渲染的DOM元素的內(nèi)容保持一致，無論誰被改變，另一方會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語法v-model指令對(duì)單行文本框<input>進(jìn)行數(shù)據(jù)綁定格式如下：<inputv-model="text">【例2-6】v-model單行文本框數(shù)據(jù)綁定案例。<template><divid="app"><p>{{message}}</p><inputtype="text"v-model="message"></div></template><scriptsetup>import{ref}from'vue'constmessage=ref('Helloworld')</script>任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語法如圖2-16所示，當(dāng)修改輸入框的value值時(shí)，p容器中的內(nèi)容也隨之發(fā)生變化，由此可見，當(dāng)我們修改輸入框中的值時(shí)，message中的數(shù)據(jù)也發(fā)生了相應(yīng)的變化。圖2-16【例2-6】v-model單行文本框數(shù)據(jù)綁定效果圖任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語法另外，v-model

還可以用于各種不同類型的輸入，<textarea>、<select>

元素。它會(huì)根據(jù)所使用的元素自動(dòng)使用對(duì)應(yīng)的DOM屬性和事件組合：文本類型的<input>和<textarea>元素會(huì)綁定valueproperty并偵聽input事件；<inputtype="checkbox">和<inputtype="radio">會(huì)綁定checkedproperty并偵聽change事件；<select>會(huì)綁定valueproperty并偵聽change事件。v-model指令對(duì)多行文本框<textarea>進(jìn)行數(shù)據(jù)綁定。注意在<textarea>中是不支持插值表達(dá)式的。需要使用v-model來替代。格式如下：<span>Multilinemessageis:</span><pstyle="white-space:pre-line;">{{message}}</p><textareav-model="message"placeholder="addmultiplelines"></textarea>任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語法v-model指令對(duì)復(fù)選框進(jìn)行數(shù)據(jù)綁定。單一的復(fù)選框，綁定布爾類型值，格式如下：<inputtype="checkbox"id="checkbox"v-model="checked"/><labelfor="checkbox">{{checked}}</label>v-model指令對(duì)單選按鈕進(jìn)行數(shù)據(jù)綁定格式如下：<div>Picked:{{picked}}</div><inputtype="radio"id="one"value="One"v-model="picked"/><labelfor="one">One</label><inputtype="radio"id="two"value="Two"v-model="picked"/><labelfor="two">Two</label>任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語法v-model指令對(duì)<select>選擇器進(jìn)行數(shù)據(jù)綁定格式如下：<div>Selected:{{selected}}</div><selectv-model="selected"><optiondisabledvalue="">Pleaseselectone</option><option>A</option><option>B</option><option>C</option></select>任務(wù)2.3招聘表單設(shè)計(jì)【任務(wù)陳述】本任務(wù)需要將“崗位發(fā)布”模塊中匿名發(fā)布功能進(jìn)行頁面渲染。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握條件渲染各種指令的使用方法。本任務(wù)實(shí)現(xiàn)效果如圖2-17所示。圖2-17匿名發(fā)布功能渲染效果圖任務(wù)2.4匿名發(fā)布渲染【任務(wù)分析】本任務(wù)需要將“崗位發(fā)布”模塊中匿名發(fā)布功能進(jìn)行頁面渲染。任務(wù)流程如圖2-18所示。圖2-18任務(wù)流程圖任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟一.首先我們?cè)O(shè)計(jì)評(píng)論列表用戶匿名功能。為messageList招聘信息列表中的各項(xiàng)信息添加unnamed屬性，用以表示該條招聘信息是否開啟匿名選項(xiàng)。messageList:[

{

id:110,email:"",name:"網(wǎng)絡(luò)技術(shù)公司",content:"招前端工程師20人",scale:0,

unnamed:false//匿名狀態(tài)，設(shè)置為false，表示不開啟匿名選項(xiàng)

}]任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟二.在<template>中通過v-if指令綁定unnamed屬性，用以判斷是否渲染企業(yè)名稱。<strongclass="text-gray-dark"v-if="!messagList[0].unnamed">

{{messageList[0].name}}</strong><strongclass="text-gray-dark"v-else>匿名用戶</strong>如上所示，當(dāng)v-if="!messageList[0].unnamed"中的表達(dá)式為true，則渲染企業(yè)名稱，否則渲染匿名企業(yè)信息。注意在此我們需要使用v-if指令而非v-show指令。因?yàn)関-show只是簡(jiǎn)單地基于CSS的display屬性進(jìn)行切換信息是否隱藏，并未真正做到匿名的功能。任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟三.在發(fā)表招聘信息表單中，通過切換按鈕設(shè)計(jì)是否開啟匿名的功能。在<template>中布局匿名開關(guān)代碼。<divclass="col-12py-2">

<divclass="form-checkform-switch">

<inputclass="form-check-input"

type="checkbox"role="switch"

id="unnamed-switch">

<labelfor="unnamed-switch">匿名發(fā)布</label>

</div></div>任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟四.為招聘信息message添加unnamed屬性，用以表示是否開啟匿名發(fā)布功能。constmessage=reactive({id:"",email:"",name:"",content:"",scale:0,unnamed:false//匿名狀態(tài)})任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟五.將unnamed屬性通過v-model雙向綁定到匿名評(píng)論按鈕上。<divclass="col-12py-2">

<divclass="form-checkform-switch">

<inputclass="form-check-input"

type="checkbox"role="switch"

id="unnamed-switch"

v-model="message.unnamed">

<labelfor="unnamed-switch">匿名發(fā)布</label>

</div></div>任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟六.“崗位發(fā)布”匿名企業(yè)功能渲染結(jié)果如圖2-19所示。圖2-19匿名企業(yè)功能渲染效果圖任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】在Vue中，我們可以通過指令條件性的選擇渲染某一塊內(nèi)容，此時(shí)我們就需要用到v-if系列指令，接下來我們一同來詳細(xì)學(xué)習(xí)這些指令的使用。2.4.1v-if指令語法在Vue中，v-if用于根據(jù)表達(dá)式的真假來操作DOM元素，可以切換元素的創(chuàng)建和銷毀；當(dāng)表達(dá)式的值為true時(shí)，元素存在于DOM樹中，表達(dá)式為false時(shí)，元素從DOM樹中移除，其語法為v-if="表達(dá)式"。【例2-7】v-if使用案例。<template><divid="app"><buttonv-on:click="isShow=!isShow">顯示/隱藏</button><divclass="ball"v-if="isShow"></div></div></template>任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】<scriptsetup>import{ref}from'vue'constisShow=ref(true)</script><stylescoped>.ball{ width:30px; height:30px; border-radius:30px; background:radial-gradient(blue,green); margin:20px;}</style>任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】渲染Vue得到如圖2-20所示結(jié)果。圖2-20【例2-7】v-if使用效果圖單擊“顯示/隱藏”按鈕，切換isShow的值，小球的可見性也隨之產(chǎn)生變化。任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】2.4.2v-else指令語法v-else指令必須搭配v-if指令使用，如果沒有v-if的存在v-else將變得毫無意義。其語法為：<divv-if="表達(dá)式">

表達(dá)式為true時(shí)，渲染該標(biāo)簽內(nèi)容</div><divv-else>

表達(dá)式為false時(shí)，渲染該標(biāo)簽內(nèi)容</div><template><divid="app"><divclass="ball"v-if="Math.random()>0.5"></div><divv-else>小球消失了</div></div></template>任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】【例2-8】v-else使用案例。<stylescoped>.ball{ width:30px; height:30px; border-radius:30px; background:radial-gradient(blue,green); margin:20px;}</style>此時(shí)如果“Math.random()>0.5”成立，“v-else”將不可見，反之，“v-else”的內(nèi)容將變?yōu)榭梢?。任?wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】2.4.3v-else-if指令語法當(dāng)v-if、v-else兩個(gè)指令無法滿足多個(gè)條件的業(yè)務(wù)需求時(shí)，可以使用v-else-if增加多種情況的判斷，v-else-if指令可以連續(xù)多個(gè)同時(shí)使用。任務(wù)2.4匿名發(fā)布渲染【例2-9】v-else-if使用案例。<template><divid="app"><divv-if="name==='小夢(mèng)'">小夢(mèng)</div><divv-else-if="name==='小明'">小明</div><divv-else-if="name==='小紅'">小紅</div><divv-else>都不是</div></div></template><scriptsetup>import{ref}from'vue'constname=ref('小明')</script>最終“小明”將被顯示在頁面中?！局R(shí)鏈接】2.4.4v-show指令語法v-show指令同樣可以決定一個(gè)元素是否可見，v-show指令是通過改變?cè)氐腃SS屬性（display屬性）來決定元素是顯示還是隱藏?！纠?-10】v-show使用案例。<template><divid="app"><divv-show="false">v-show</div></div></template>任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】運(yùn)行代碼，在瀏覽器中通過F12鍵調(diào)出開發(fā)者工具，可見如圖2-21所示代碼。圖2-21v-show實(shí)現(xiàn)原理代碼圖由此可見v-show是通過display:none的樣式設(shè)置，將標(biāo)簽進(jìn)行隱藏的。任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】2.4.5v-if和v-show指令區(qū)別控制手段不同。編譯過程不同。編譯條件不同?？刂剖侄危簐-show隱藏則是為該元素添加display:none，dom元素依舊還在。v-if顯示隱藏是將dom元素整個(gè)添加或刪除。編譯過程：v-if切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡(jiǎn)單的基于css切換。編譯條件：v-if是真正的條件渲染，它會(huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。只有渲染條件為假時(shí)，并不做操作，直到為真才渲染。v-show由false變?yōu)閠rue的時(shí)候不會(huì)觸發(fā)組件的生命周期。任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】2.4.5v-if和v-show指令區(qū)別v-if由false變?yōu)閠rue的時(shí)候，觸發(fā)組件的beforeCreate、create、beforeMount、mounted鉤子，由true變?yōu)閒alse的時(shí)候觸發(fā)組件的beforeDestory、destoryed方法。性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；任務(wù)2.4匿名發(fā)布渲染【任務(wù)陳述】本任務(wù)需要將“熱門招聘”模塊中各企業(yè)發(fā)布的招聘崗位信息進(jìn)行頁面渲染。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握列表渲染等各種指令的使用方法。本任務(wù)實(shí)現(xiàn)效果如圖2-22所示。圖2-22招聘崗位列表渲染效果圖任務(wù)2.5招聘崗位渲染【任務(wù)分析】本任務(wù)需要將“熱門招聘”模塊中各企業(yè)發(fā)布的招聘崗位信息進(jìn)行頁面渲染。任務(wù)流程如圖2-23所示。圖2-23任務(wù)流程圖任務(wù)2.5招聘崗位渲染【任務(wù)實(shí)施】步驟一.在<template>中將原來企業(yè)招聘信息列表的代碼刪除，僅保留第一條企業(yè)招聘信息代碼，作為列表數(shù)據(jù)模板。<divclass="text-mutedmb-3">

<!--企業(yè)招聘信息-->

</div>任務(wù)2.5招聘崗位渲染【任務(wù)實(shí)施】步驟二.使用v-for指令渲染列表數(shù)據(jù)，代碼如下。<!--使用v-for指令渲染列表數(shù)據(jù)--><divclass="text-mutedmb-3"

v-for="(item,index)inmessageList"v-bind:key="item.id">

<divclass="border-bottomcol-md-12">

<imgclass="me-2"

width="24"height="24"

v-bind:src="item.scale==0?avatar_biaozhi1:avatar_biaozhi2">

<strongclass="text-gray-dark"v-if="!item.unnamed">

{{}}

</strong>

<strongclass="text-gray-dark"v-else>匿名發(fā)布</strong>

<p>

{{item.content}}

</p>任務(wù)2.5招聘崗位渲染【任務(wù)實(shí)施】步驟二.使用v-for指令渲染列表數(shù)據(jù)，代碼如下。

<!--收藏樣式-->

<divclass="message_sup">

<small></small>

<divv-bind:class="['support',{supportActived:item.has_sup}]"v-on:click="support(index)">

<imgsrc="./assets/img/support.png"alt="">

<span>{{item.support}}</span>

</div>

</div>

</div></div>需要注意的是key值不建議綁定數(shù)組的索引，一般而言每條數(shù)據(jù)都會(huì)有一個(gè)唯一的id，用來標(biāo)識(shí)這條數(shù)據(jù)的唯一性，通常使用這個(gè)id作為key值。在Vue中，我們可以使用v-for指令渲染一組樣式相同的列表或表格數(shù)據(jù)。接下來我們一同來詳細(xì)學(xué)習(xí)v-for指令的使用。任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】2.5.1v-for渲染數(shù)組v-for指令可用于渲染一組樣式相同的列表或表格數(shù)據(jù)。v-for指令需要使用（item,key）initems形式的特殊語法。其中：items是源數(shù)據(jù)，例如一個(gè)數(shù)組或?qū)ο?；item則是數(shù)組或?qū)ο笾械拿恳豁?xiàng)元素；key則指代數(shù)組的索引值或?qū)ο蟮逆I值，具有唯一性。v-for指令可用于渲染數(shù)組、對(duì)象、字符串等多種格式的數(shù)據(jù)。渲染數(shù)組是我們最為常用的方式。任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】【例2-11】v-for數(shù)組渲染使用案例。<template><divid="app"><ul><liv-for="(item,index)inperson"v-bind:key="index">姓名：{{item}}</li></ul></div></template><scriptsetup>任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】import{reactive}from'vue'constperson=reactive(["小城","麗麗","小希","張三"])</script></script><stylescoped>ul{list-style:none;}ulli:nth-child(2n+1){background-color:skyblue;}</style>任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】渲染Vue得到如圖2-24所示結(jié)果。圖2-24【例2-11】v-for數(shù)組渲染效果圖v-for指令中綁定的是person數(shù)組，item表示數(shù)組中的每一項(xiàng)元素內(nèi)容，index表示當(dāng)前元素的索引值。任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】2.5.2v-for渲染對(duì)象v-for也可用于對(duì)象數(shù)據(jù)的渲染?！纠?-12】v-for對(duì)象數(shù)組渲染使用案例。<template><divid="app"><ul><liv-for="(value,key