Vue框架應用實戰(zhàn)項目式教程 課件 任務1“就業(yè)職通車”項目初始化；任務2 招聘崗位數(shù)據(jù)渲染；任務3 崗位發(fā)布功能設(shè)計

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

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

init

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

plugins:[vue()],

server:{

//修改項目渲染端口為9999

port:9999

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

plugins:[vue()],

server:{

port:9999,//修改項目渲染端口為9999

host:""http://修改IP

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

plugins:[vue()],

server:{

port:9999,//修改項目渲染端口為9999

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

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

"./assets/css/bootstrap.css"</style>任務1.2項目初始化步驟三.部署圖片文件。將素材中的圖片文件拷貝至項目的【assets】—>【img】目錄中。在VSCode軟件中打開命令行工具，輸入“npmrundev”命令渲染項目，此時便可以看到項目被成功渲染了。任務1.2項目初始化【知識鏈接】1.2.1Vue項目結(jié)構(gòu)一個Vue項目包括如圖1-21所示的文件和目錄，接下來我們對其中主要文件和目錄進行介紹。圖1-21Vue項目結(jié)構(gòu)任務1.2項目初始化【知識鏈接】1.2.1Vue項目結(jié)構(gòu)node_modules目錄npm加載的項目依賴模塊。public目錄public是靜態(tài)資源目錄，項目打包時，該目錄下的資源不會被編譯。assets目錄assets同樣是靜態(tài)資源目錄，項目打包時，該目錄下的資源將會被編譯?！局R鏈接】1.2.1Vue項目結(jié)構(gòu)App.vueApp.vue是項目根組件，項目中所有組件都將被加載至該組件進行渲染和展示。main.js項目的核心文件，主要起到配置項目所必須的插件、實例化Vue等作用。項目創(chuàng)建完畢，main.js中會有默認的配置。//導入createApp包import{createApp}from'vue'任務1.2項目初始化【知識鏈接】1.2.1Vue項目結(jié)構(gòu)//導入App.vue組件importAppfrom'./App.vue'//使用createApp函數(shù)將App.vue組件渲染至index.html中'id=app'的節(jié)點上createApp(App).mount('#app')index.htmlindex.html是該Vite項目的入口文件?！局R鏈接】1.2.1Vue項目結(jié)構(gòu)package.json項目配置文件。package.json文件其實就是對項目或者模塊包的描述，里面包含許多元信息。比如項目名稱，項目版本，項目執(zhí)行入口文件，項目貢獻者等等。npminstall命令會根據(jù)這個文件下載所有依賴模塊。vite.config.jsvite工具的配置文件。任務總結(jié)與拓展通過該任務的實施，掌握了Vue3框架以及Vue3項目的搭建過程。因為每臺電腦環(huán)境的差異，在項目環(huán)境的搭建過程中難免遇到一些不同的問題，需要保持認真細致，培養(yǎng)嚴謹?shù)墓ぷ鲬B(tài)度，排除錯誤問題，積累項目經(jīng)驗。同時掌握了Vue項目結(jié)構(gòu)和基礎(chǔ)代碼部署的方法，對于Vue項目中各文件和目錄的作用同學們需要熟記于心，這樣才能合理部署資源，進行正確的代碼書寫。通過本章節(jié)學習，讀者應對Vue有一個整體的認識，并能夠進行簡單Vue項目的部署?！舅伎肌慨旐椖磕J的運行端口5173被占用時，如何修改項目運行端口？【思考】如何在使用“npmrundev”命令渲染Vue項目時，能夠在瀏覽器自動打開編譯頁面？38招聘崗位數(shù)據(jù)渲染任務2框架技術(shù)應用Vue不但改善了前端的開發(fā)體驗，還極大地提高了開發(fā)效率。如何快速的將后臺數(shù)據(jù)渲染到頁面當中去，是本任務主要學習的知識。本任務將對Vue的基礎(chǔ)知識進行講解，內(nèi)容包括數(shù)據(jù)的綁定、數(shù)據(jù)的渲染等。學習目標【知識目標】掌握Vue插值數(shù)據(jù)綁定的方法；掌握v-text和v-html指令的使用；掌握v-bind屬性綁定指令的使用方法；了解Vue的雙向數(shù)據(jù)綁定模式；掌握v-model指令的使用；掌握Vue的條件渲染、列表渲染?！炯寄苣繕恕磕軌蚴炀毷褂娩秩局噶顦?gòu)建網(wǎng)頁；能夠熟練運用Vue基礎(chǔ)知識創(chuàng)建Vue實例?！舅刭|(zhì)目標】培養(yǎng)審美意識，培育審美能力；在審美能力提升中，融入堅定文化自信，激發(fā)愛國主義情感?！熬蜆I(yè)職通車”網(wǎng)站最重要的功能當屬“熱門招聘”模塊。人們可以通過該模塊查詢到當前各企業(yè)的招聘信息，同時企業(yè)也能在網(wǎng)站中發(fā)布自己的招聘崗位信息。該模塊主要完成企業(yè)招聘信息錄入、招聘崗位發(fā)布以及崗位信息展示等功能。如圖1-1圖1-1“就業(yè)職通網(wǎng)”效果圖項目背景本任務要求實現(xiàn)“就業(yè)職通車”網(wǎng)站當中“熱門招聘”模塊，其中使用Vue3框架實現(xiàn)“熱門招聘”中招聘信息填寫、招聘崗位信息渲染等功能的布局與樣式?！盁衢T招聘”模塊效果如圖2-1所示。圖2-1“熱門招聘”模塊效果圖任務規(guī)劃【任務陳述】本任務需要完成“熱門招聘”模塊中招聘簡介部分。讀者通過實現(xiàn)該任務從而掌握Vue插值數(shù)據(jù)綁定的方法。本任務實現(xiàn)效果如圖2-2所示。任務2.1招聘數(shù)據(jù)渲染圖2-2招聘簡介效果圖任務2.1招聘數(shù)據(jù)渲染【任務分析】本任務需要將“熱門招聘”模塊中招聘簡介數(shù)據(jù)通過數(shù)據(jù)綁定的方式顯示在界面上，任務流程如圖2-3所示。圖2-3任務流程圖【任務實施】步驟一.在<script>中準備頁面數(shù)據(jù)。<scriptsetup>import{ref}from'vue'import"./assets/css/bootstrap.css"constarticle=ref("就業(yè)職通網(wǎng)主要面向高效應屆畢業(yè)生，實現(xiàn)就業(yè)政策解讀、招聘信息瀏覽、簡歷投遞等功能，以推動應屆畢業(yè)生更充分、更高質(zhì)量的就業(yè)。")</script>任務2.1招聘數(shù)據(jù)渲染【任務實施】步驟二.通過插值{{}}語法將文章數(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>任務2.1招聘數(shù)據(jù)渲染【任務實施】步驟三.在控制臺通過vuerundev指令進行編譯。渲染結(jié)果如圖2-4所示。任務2.1招聘數(shù)據(jù)渲染圖2-4招聘簡介效果圖【知識鏈接】2.1.1插值語法數(shù)據(jù)綁定最常見的形式就是使用{{...}}（雙大括號）的文本插值。其語法如下：<p>{{message}}</p>【例2-1】插值渲染實例。代碼如下：<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>任務2.1招聘數(shù)據(jù)渲染【知識鏈接】2.1.1插值語法<scriptsetup>import{reactive}from'vue'constnewPerson=reactive({name:"小明",age:7,school:{schoolName:"天天小學",grade:"一年級"},family:["爺爺","奶奶","爸爸","媽媽"]})</script>任務2.1招聘數(shù)據(jù)渲染【知識鏈接】2.1.1插值語法<stylescoped>#app{color:red;}</style>頁面渲染效果如圖2-5所示。任務2.1招聘數(shù)據(jù)渲染圖2-5【例2-1】插值渲染效果圖【知識鏈接】2.1.2v-text指令語法v-text是用于操作純文本，它會替代顯示對應的數(shù)據(jù)對象上的值。當綁定的數(shù)據(jù)對象上的值發(fā)生改變，插值處的內(nèi)容也會隨之更新。讀者可以將其理解為JavaScript中的innerText方法?！纠?-2】v-text指令渲染實例。代碼如下：<template><divid="app"><divv-text="textStr"></div></div></template><scriptsetup>import{ref}from'vue'consttextStr=ref('<astyle="color:red">紅色</a>')</script>任務2.1招聘數(shù)據(jù)渲染【知識鏈接】2.1.2v-text指令語法代碼運行效果如圖2-6所示。圖2-6【例2-2】v-text指令渲染效果圖如圖2-5所示，v-text指令并不能渲染HTML標簽，而是將字符串原樣輸出到界面中。如果需要將字符串渲染為HTML標簽，我們該如何操作呢？這就需要使用到v-html指令了。任務2.1招聘數(shù)據(jù)渲染【知識鏈接】2.1.3v-html指令語法v-html指令可用于HTML標簽的渲染，類似于JavaScript中的innerHTML方法。例如，我們將上一個案例代碼，通過v-html指令進行渲染?！纠?-3】v-html指令渲染實例。代碼如下：<template><divid="app"><divv-html="htmlStr"></div></div></template><scriptsetup>import{ref}from'vue'consthtmlStr=ref('<astyle="color:red">紅色</a>')</script>任務2.1招聘數(shù)據(jù)渲染【知識鏈接】2.1.3v-html指令語法代碼運行效果如圖2-7所示。圖2-7【例2-3】v-html指令渲染效果圖注意：在網(wǎng)站上動態(tài)渲染任意HTML是非常危險的，因為容易導致XSS攻擊，因此讀者在設(shè)計網(wǎng)頁界面時只在可信內(nèi)容上使用v-html，不能用在用戶提交的內(nèi)容上。任務2.1招聘數(shù)據(jù)渲染【知識鏈接】2.1.4v-once指令語法v-once指令只渲染元素和組件一次。隨后的重新渲染，元素或組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過?！纠?-4】v-once指令語法實例。代碼如下：<template><divid="app"><divv-once>{{num}}</div><buttonv-on:click="add">num自增</button></div></template>任務2.1招聘數(shù)據(jù)渲染【知識鏈接】2.1.4v-once指令語法v-once指令只渲染元素和組件一次。隨后的重新渲染，元素或組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。【例2-4】v-once指令語法實例。代碼如下：<scriptsetup>import{ref}from'vue'constnum=ref(1)functionadd(){num++}</script>任務2.1招聘數(shù)據(jù)渲染【知識鏈接】如圖2-8所示，單擊“num自增”按鈕，v-once綁定的標簽內(nèi)容并不會隨之改變，說明v-once指令對數(shù)據(jù)僅進行了一次渲染。圖2-8【例2-4】v-once指令渲染效果圖任務2.1招聘數(shù)據(jù)渲染【任務陳述】Vue中的數(shù)據(jù)綁定功能極大地提高了開發(fā)效率。本任務需要完成“崗位信息”顯示模塊中企業(yè)標志的渲染效果。讀者通過實現(xiàn)該任務從而掌握v-bind指令屬性綁定的方法。本任務實現(xiàn)效果如圖2-9所示。任務2.2企業(yè)標志渲染圖2-9企業(yè)標志效果圖【任務分析】本任務需要完成“崗位信息”顯示模塊中企業(yè)標志的渲染效果，任務流程如圖2-10所示。任務2.2企業(yè)標志渲染圖2-10任務流程圖【任務實施】步驟一.在“熱門招聘”模塊基礎(chǔ)上，通過import命令將圖像導入。<scriptsetup>import{reactive,ref}from'vue'import"./assets/css/bootstrap.css"importavatar_biaozhi1from"./assets/img/biaozhi1.png"

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

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

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

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

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

"content":"招聘運維工程師5人，負責IDC現(xiàn)場維護工作，保證基礎(chǔ)設(shè)施正常運營環(huán)境，確保服務器等硬件設(shè)備穩(wěn)定高效運行。本科或以上學歷，計算機及相關(guān)專業(yè)，2年以上相關(guān)工作經(jīng)驗。","scale":1,"support":46,"has_sup":true,"time":1665284870606}])</script>任務2.2企業(yè)標志渲染【任務實施】步驟二.將企業(yè)標志屬性通過v-bind指令進行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標志。<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>?任務2.2企業(yè)標志渲染【任務實施】步驟二.將企業(yè)標志屬性通過v-bind指令進行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標志。<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">任務2.2企業(yè)標志渲染【任務實施】步驟二.將企業(yè)標志屬性通過v-bind指令進行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標志。

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

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

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

{

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

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

}]任務2.4匿名發(fā)布渲染【任務實施】步驟二.在<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>如上所示，當v-if="!messageList[0].unnamed"中的表達式為true，則渲染企業(yè)名稱，否則渲染匿名企業(yè)信息。注意在此我們需要使用v-if指令而非v-show指令。因為v-show只是簡單地基于CSS的display屬性進行切換信息是否隱藏，并未真正做到匿名的功能。任務2.4匿名發(fā)布渲染【任務實施】步驟三.在發(fā)表招聘信息表單中，通過切換按鈕設(shè)計是否開啟匿名的功能。在<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>任務2.4匿名發(fā)布渲染【任務實施】步驟四.為招聘信息message添加unnamed屬性，用以表示是否開啟匿名發(fā)布功能。constmessage=reactive({id:"",email:"",name:"",content:"",scale:0,unnamed:false//匿名狀態(tài)})任務2.4匿名發(fā)布渲染【任務實施】步驟五.將unnamed屬性通過v-model雙向綁定到匿名評論按鈕上。<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>任務2.4匿名發(fā)布渲染【任務實施】步驟六.“崗位發(fā)布”匿名企業(yè)功能渲染結(jié)果如圖2-19所示。圖2-19匿名企業(yè)功能渲染效果圖任務2.4匿名發(fā)布渲染【知識鏈接】在Vue中，我們可以通過指令條件性的選擇渲染某一塊內(nèi)容，此時我們就需要用到v-if系列指令，接下來我們一同來詳細學習這些指令的使用。2.4.1v-if指令語法在Vue中，v-if用于根據(jù)表達式的真假來操作DOM元素，可以切換元素的創(chuàng)建和銷毀；當表達式的值為true時，元素存在于DOM樹中，表達式為false時，元素從DOM樹中移除，其語法為v-if="表達式"?！纠?-7】v-if使用案例。<template><divid="app"><buttonv-on:click="isShow=!isShow">顯示/隱藏</button><divclass="ball"v-if="isShow"></div></div></template>任務2.4匿名發(fā)布渲染【知識鏈接】<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>任務2.4匿名發(fā)布渲染【知識鏈接】渲染Vue得到如圖2-20所示結(jié)果。圖2-20【例2-7】v-if使用效果圖單擊“顯示/隱藏”按鈕，切換isShow的值，小球的可見性也隨之產(chǎn)生變化。任務2.4匿名發(fā)布渲染【知識鏈接】2.4.2v-else指令語法v-else指令必須搭配v-if指令使用，如果沒有v-if的存在v-else將變得毫無意義。其語法為：<divv-if="表達式">

表達式為true時，渲染該標簽內(nèi)容</div><divv-else>

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

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