Vue框架應(yīng)用實(shí)戰(zhàn)項(xiàng)目式教程 課件 任務(wù)2 招聘崗位數(shù)據(jù)渲染

1招聘崗位數(shù)據(jù)渲染任務(wù)2框架技術(shù)應(yīng)用Vue不但改善了前端的開(kāi)發(fā)體驗(yàn)，還極大地提高了開(kāi)發(fā)效率。如何快速的將后臺(tái)數(shù)據(jù)渲染到頁(yè)面當(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è)；能夠熟練運(yùn)用Vue基礎(chǔ)知識(shí)創(chuàng)建Vue實(shí)例?！舅刭|(zhì)目標(biāo)】培養(yǎng)審美意識(shí)，培育審美能力；在審美能力提升中，融入堅(jiān)定文化自信，激發(fā)愛(ài)國(guó)主義情感?！熬蜆I(yè)職通車(chē)”網(wǎng)站最重要的功能當(dāng)屬“熱門(mén)招聘”模塊。人們可以通過(guò)該模塊查詢到當(dāng)前各企業(yè)的招聘信息，同時(shí)企業(yè)也能在網(wǎng)站中發(fā)布自己的招聘崗位信息。該模塊主要完成企業(yè)招聘信息錄入、招聘崗位發(fā)布以及崗位信息展示等功能。如圖1-1圖1-1“就業(yè)職通網(wǎng)”效果圖項(xiàng)目背景本任務(wù)要求實(shí)現(xiàn)“就業(yè)職通車(chē)”網(wǎng)站當(dāng)中“熱門(mén)招聘”模塊，其中使用Vue3框架實(shí)現(xiàn)“熱門(mén)招聘”中招聘信息填寫(xiě)、招聘崗位信息渲染等功能的布局與樣式?！盁衢T(mén)招聘”模塊效果如圖2-1所示。圖2-1“熱門(mén)招聘”模塊效果圖任務(wù)規(guī)劃【任務(wù)陳述】本任務(wù)需要完成“熱門(mén)招聘”模塊中招聘簡(jiǎn)介部分。讀者通過(guò)實(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ù)需要將“熱門(mén)招聘”模塊中招聘簡(jiǎn)介數(shù)據(jù)通過(guò)數(shù)據(jù)綁定的方式顯示在界面上，任務(wù)流程如圖2-3所示。圖2-3任務(wù)流程圖【任務(wù)實(shí)施】步驟一.在<script>中準(zhǔn)備頁(yè)面數(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í)施】步驟二.通過(guò)插值{{}}語(yǔ)法將文章數(shù)據(jù)渲染至頁(yè)面中。<template>

<!--頁(yè)面容器--><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)通過(guò)vuerundev指令進(jìn)行編譯。渲染結(jié)果如圖2-4所示。任務(wù)2.1招聘數(shù)據(jù)渲染圖2-4招聘簡(jiǎn)介效果圖【知識(shí)鏈接】2.1.1插值語(yǔ)法數(shù)據(jù)綁定最常見(jiàn)的形式就是使用{{...}}（雙大括號(hào)）的文本插值。其語(yǔ)法如下：<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插值語(yǔ)法<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插值語(yǔ)法<stylescoped>#app{color:red;}</style>頁(yè)面渲染效果如圖2-5所示。任務(wù)2.1招聘數(shù)據(jù)渲染圖2-5【例2-1】插值渲染效果圖【知識(shí)鏈接】2.1.2v-text指令語(yǔ)法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ǔ)法代碼運(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指令語(yǔ)法v-html指令可用于HTML標(biāo)簽的渲染，類(lèi)似于JavaScript中的innerHTML方法。例如，我們將上一個(gè)案例代碼，通過(guò)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ǔ)法代碼運(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)頁(yè)界面時(shí)只在可信內(nèi)容上使用v-html，不能用在用戶提交的內(nèi)容上。任務(wù)2.1招聘數(shù)據(jù)渲染【知識(shí)鏈接】2.1.4v-once指令語(yǔ)法v-once指令只渲染元素和組件一次。隨后的重新渲染，元素或組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)?！纠?-4】v-once指令語(yǔ)法實(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指令語(yǔ)法v-once指令只渲染元素和組件一次。隨后的重新渲染，元素或組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)?！纠?-4】v-once指令語(yǔ)法實(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ì)隨之改變，說(shuō)明v-once指令對(duì)數(shù)據(jù)僅進(jìn)行了一次渲染。圖2-8【例2-4】v-once指令渲染效果圖任務(wù)2.1招聘數(shù)據(jù)渲染【任務(wù)陳述】Vue中的數(shù)據(jù)綁定功能極大地提高了開(kāi)發(fā)效率。本任務(wù)需要完成“崗位信息”顯示模塊中企業(yè)標(biāo)志的渲染效果。讀者通過(guò)實(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í)施】步驟一.在“熱門(mén)招聘”模塊基礎(chǔ)上，通過(guò)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ì)開(kāi)發(fā),可以采用敏捷、Devops、開(kāi)源等先進(jìn)的軟件設(shè)計(jì)開(kāi)發(fā)模式,接觸最前沿的產(chǎn)品和軟件技術(shù)，成為大容量高并發(fā)技術(shù)的專(zhuān)家。","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)營(yíng)銷(xiāo)saas業(yè)務(wù)的前端開(kāi)發(fā)工作，通過(guò)前端工程化、組件化、可視化的方法，實(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)營(yíng)環(huán)境，確保服務(wù)器等硬件設(shè)備穩(wěn)定高效運(yùn)行。本科或以上學(xué)歷，計(jì)算機(jī)及相關(guān)專(zhuā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)志屬性通過(guò)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)志屬性通過(guò)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)志屬性通過(guò)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)志屬性通過(guò)v-bind指令進(jìn)行綁定，并根據(jù)數(shù)據(jù)渲染出不同企業(yè)的標(biāo)志。我們通過(guò)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)通過(guò)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指令語(yǔ)法v-bind指令主要用于響應(yīng)式的更新html屬性。如果需要在元素節(jié)點(diǎn)的屬性上綁定Vue的數(shù)據(jù)，不能直接使用{{}}插入值語(yǔ)法來(lái)實(shí)現(xiàn)，需要使用v-bind指令來(lái)完成。v-bind用于給元素的屬性賦值，可以實(shí)現(xiàn)屬性單向數(shù)據(jù)綁定。v-bind語(yǔ)法為：v-bind:屬性名=[變量名]。例如：v-bind:title="message"v-bind:可以縮寫(xiě)為:符號(hào)，例如：:title="message"v-bind指令常常用于綁定標(biāo)簽屬性、樣式等，它支持綁定數(shù)值、字符串、數(shù)組、對(duì)象或一個(gè)表達(dá)式。任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語(yǔ)法例如：<!--綁定一個(gè)屬性--><imgv-bind:src="imageSrc"><!--動(dòng)態(tài)屬性名--><buttonv-bind:[key]="value"></button><!--縮寫(xiě)形式--><img:src="imageSrc"><!--動(dòng)態(tài)屬性名縮寫(xiě)--><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指令語(yǔ)法例如：<!--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指令語(yǔ)法【例2-5】v-bind使用案例。如以下案例所示，通過(guò)v-bind指令將類(lèi)名綁定至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指令語(yǔ)法【例2-5】v-bind使用案例。如以下案例所示，通過(guò)v-bind指令將類(lèi)名綁定至class屬性中。<stylescoped>.styleA{color:red;}.styleB{color:blue;}</style>任務(wù)2.2企業(yè)標(biāo)志渲染【知識(shí)鏈接】2.2.1v-bind指令語(yǔ)法渲染Vue得到如圖2-12所示結(jié)果，Class樣式名為“styleA”。圖2-12【例2-5】v-bind使用效果圖任務(wù)2.2企業(yè)標(biāo)志渲染【任務(wù)陳述】本任務(wù)需要完成“熱門(mén)招聘”模塊中“發(fā)布崗位”表單的界面渲染效果。讀者通過(guò)實(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ù)需要完成“熱門(mén)招聘”模塊中“發(fā)布崗位”表單的界面渲染效果。將表單中信息進(jìn)行數(shù)據(jù)綁定。任務(wù)流程如圖2-14所示。圖2-14任務(wù)流程圖任務(wù)2.3招聘表單設(shè)計(jì)【任務(wù)實(shí)施】步驟一.在“熱門(mén)招聘”模塊中定義崗位信息數(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í)施】步驟二.通過(guò)v-model指令，綁定name屬性至頁(yè)面表單中。<inputtype="text"class="form-controlactive"id="name"placeholder="請(qǐng)輸入企業(yè)名稱(chēng)"requiredv-model="">步驟三.通過(guò)v-model指令，綁定email屬性至頁(yè)面表單中。<inputtype="email"class="form-control"style="width:80%;"id="email"placeholder="name@"requiredv-model="message.email">步驟四.通過(guò)v-model指令，綁定scale屬性至頁(yè)面表單中。因?yàn)槠髽I(yè)規(guī)模選擇框是radio類(lèi)型，是否選中是通過(guò)其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í)施】步驟五.通過(guò)v-model指令，綁定content屬性至頁(yè)面表單中。<textareaclass="form-control"name=""id=""cols="30"rows="5"placeholder="請(qǐng)輸入招聘崗位信息和要求"v-model="message.content"></textarea>步驟六.“崗位發(fā)布”表單渲染結(jié)果如圖2-15所示。圖2-15“崗位發(fā)布”表單渲染效果圖通過(guò)在網(wǎng)頁(yè)表單中輸入數(shù)據(jù)，可見(jiàn)當(dāng)頁(yè)面數(shù)據(jù)發(fā)生變化時(shí)，message中數(shù)據(jù)也一并發(fā)生變化。將message中的數(shù)據(jù)進(jìn)行更改并保存，頁(yè)面的數(shù)據(jù)也將同步發(fā)生變化。由此可見(jiàn)，通過(guò)v-model指令實(shí)現(xiàn)了表單的雙向數(shù)據(jù)綁定。任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語(yǔ)法在原生Javascript的項(xiàng)目中，要獲取用戶輸入框輸入的內(nèi)容，需要通過(guò)DOM對(duì)象的方式。在Vue項(xiàng)目中則不用這么繁瑣，因?yàn)関ue通過(guò)了指令v-model來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。像輸入框、單選框、復(fù)選框等類(lèi)型的輸入控件都可以通過(guò)v-model指令綁定其value值，實(shí)現(xiàn)雙向數(shù)據(jù)綁定。所謂雙向綁定，指的是Vue實(shí)例中的數(shù)據(jù)與其渲染的DOM元素的內(nèi)容保持一致，無(wú)論誰(shuí)被改變，另一方會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。任務(wù)2.3招聘表單設(shè)計(jì)【知識(shí)鏈接】2.3.1v-model指令語(yǔ)法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指令語(yǔ)法如圖2-16所示，當(dāng)修改輸入框的value值時(shí)，p容器中的內(nèi)容也隨之發(fā)生變化，由此可見(jiàn)，當(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指令語(yǔ)法另外，v-model

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

元素。它會(huì)根據(jù)所使用的元素自動(dòng)使用對(duì)應(yīng)的DOM屬性和事件組合：文本類(lèi)型的<input>和<textarea>元素會(huì)綁定valueproperty并偵聽(tīng)input事件；<inputtype="checkbox">和<inputtype="radio">會(huì)綁定checkedproperty并偵聽(tīng)change事件；<select>會(huì)綁定valueproperty并偵聽(tīng)change事件。v-model指令對(duì)多行文本框<textarea>進(jìn)行數(shù)據(jù)綁定。注意在<textarea>中是不支持插值表達(dá)式的。需要使用v-model來(lái)替代。格式如下：<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指令語(yǔ)法v-model指令對(duì)復(fù)選框進(jìn)行數(shù)據(jù)綁定。單一的復(fù)選框，綁定布爾類(lèi)型值，格式如下：<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指令語(yǔ)法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)行頁(yè)面渲染。讀者通過(guò)實(shí)現(xiàn)該任務(wù)從而掌握條件渲染各種指令的使用方法。本任務(wù)實(shí)現(xiàn)效果如圖2-17所示。圖2-17匿名發(fā)布功能渲染效果圖任務(wù)2.4匿名發(fā)布渲染【任務(wù)分析】本任務(wù)需要將“崗位發(fā)布”模塊中匿名發(fā)布功能進(jìn)行頁(yè)面渲染。任務(wù)流程如圖2-18所示。圖2-18任務(wù)流程圖任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟一.首先我們?cè)O(shè)計(jì)評(píng)論列表用戶匿名功能。為messageList招聘信息列表中的各項(xiàng)信息添加unnamed屬性，用以表示該條招聘信息是否開(kāi)啟匿名選項(xiàng)。messageList:[

{

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

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

}]任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟二.在<template>中通過(guò)v-if指令綁定unnamed屬性，用以判斷是否渲染企業(yè)名稱(chēng)。<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è)名稱(chēng)，否則渲染匿名企業(yè)信息。注意在此我們需要使用v-if指令而非v-show指令。因?yàn)関-show只是簡(jiǎn)單地基于CSS的display屬性進(jìn)行切換信息是否隱藏，并未真正做到匿名的功能。任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟三.在發(fā)表招聘信息表單中，通過(guò)切換按鈕設(shè)計(jì)是否開(kāi)啟匿名的功能。在<template>中布局匿名開(kāi)關(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屬性，用以表示是否開(kāi)啟匿名發(fā)布功能。constmessage=reactive({id:"",email:"",name:"",content:"",scale:0,unnamed:false//匿名狀態(tài)})任務(wù)2.4匿名發(fā)布渲染【任務(wù)實(shí)施】步驟五.將unnamed屬性通過(guò)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中，我們可以通過(guò)指令條件性的選擇渲染某一塊內(nèi)容，此時(shí)我們就需要用到v-if系列指令，接下來(lái)我們一同來(lái)詳細(xì)學(xué)習(xí)這些指令的使用。2.4.1v-if指令語(yǔ)法在Vue中，v-if用于根據(jù)表達(dá)式的真假來(lái)操作DOM元素，可以切換元素的創(chuàng)建和銷(xiāo)毀；當(dāng)表達(dá)式的值為true時(shí)，元素存在于DOM樹(shù)中，表達(dá)式為false時(shí)，元素從DOM樹(shù)中移除，其語(yǔ)法為v-if="表達(dá)式"?！纠?-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的值，小球的可見(jiàn)性也隨之產(chǎn)生變化。任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】2.4.2v-else指令語(yǔ)法v-else指令必須搭配v-if指令使用，如果沒(méi)有v-if的存在v-else將變得毫無(wú)意義。其語(yǔ)法為：<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”將不可見(jiàn)，反之，“v-else”的內(nèi)容將變?yōu)榭梢?jiàn)。任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】2.4.3v-else-if指令語(yǔ)法當(dāng)v-if、v-else兩個(gè)指令無(wú)法滿足多個(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>最終“小明”將被顯示在頁(yè)面中?！局R(shí)鏈接】2.4.4v-show指令語(yǔ)法v-show指令同樣可以決定一個(gè)元素是否可見(jiàn)，v-show指令是通過(guò)改變?cè)氐腃SS屬性（display屬性）來(lái)決定元素是顯示還是隱藏?！纠?-10】v-show使用案例。<template><divid="app"><divv-show="false">v-show</div></div></template>任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】運(yùn)行代碼，在瀏覽器中通過(guò)F12鍵調(diào)出開(kāi)發(fā)者工具，可見(jiàn)如圖2-21所示代碼。圖2-21v-show實(shí)現(xiàn)原理代碼圖由此可見(jiàn)v-show是通過(guò)display:none的樣式設(shè)置，將標(biāo)簽進(jìn)行隱藏的。任務(wù)2.4匿名發(fā)布渲染【知識(shí)鏈接】2.4.5v-if和v-show指令區(qū)別控制手段不同。編譯過(guò)程不同。編譯條件不同。控制手段：v-show隱藏則是為該元素添加display:none，dom元素依舊還在。v-if顯示隱藏是將dom元素整個(gè)添加或刪除。編譯過(guò)程：v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷(xiāo)毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件；v-show只是簡(jiǎn)單的基于css切換。編譯條件：v-if是真正的條件渲染，它會(huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N(xiāo)毀和重建。只有渲染條件為假時(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ù)需要將“熱門(mén)招聘”模塊中各企業(yè)發(fā)布的招聘崗位信息進(jìn)行頁(yè)面渲染。讀者通過(guò)實(shí)現(xiàn)該任務(wù)從而掌握列表渲染等各種指令的使用方法。本任務(wù)實(shí)現(xiàn)效果如圖2-22所示。圖2-22招聘崗位列表渲染效果圖任務(wù)2.5招聘崗位渲染【任務(wù)分析】本任務(wù)需要將“熱門(mén)招聘”模塊中各企業(yè)發(fā)布的招聘崗位信息進(jìn)行頁(yè)面渲染。任務(wù)流程如圖2-23所示。圖2-23任務(wù)流程圖任務(wù)2.5招聘崗位渲染【任務(wù)實(shí)施】步驟一.在<template>中將原來(lái)企業(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，用來(lái)標(biāo)識(shí)這條數(shù)據(jù)的唯一性，通常使用這個(gè)id作為key值。在Vue中，我們可以使用v-for指令渲染一組樣式相同的列表或表格數(shù)據(jù)。接下來(lái)我們一同來(lái)詳細(xì)學(xué)習(xí)v-for指令的使用。任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】2.5.1v-for渲染數(shù)組v-for指令可用于渲染一組樣式相同的列表或表格數(shù)據(jù)。v-for指令需要使用（item,key）initems形式的特殊語(yǔ)法。其中：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)inperson"v-bind:key="value.id">學(xué)號(hào)：{{value.id}}-姓名：{{}}</li></ul></div></template>任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】<scriptsetup>import{reactive}from'vue'constperson=reactive([{id:900108,name:"小軍"},{id:900107,name:"麗麗"},{id:900308,name:"優(yōu)優(yōu)"},{id:900204,name:"小雄"},{id:900301,name:"大明"},])</script><stylescoped>ul{list-style:none;}ulli:nth-child(2n+1){background-color:skyblue;}</style>任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】渲染Vue得到如圖2-25所示結(jié)果。圖2-25【例2-12】v-for對(duì)象數(shù)組渲染效果圖因?yàn)槭卿秩緦?duì)象類(lèi)型的數(shù)據(jù)，我們可以將形參命名為key和value，這樣代碼能夠更加語(yǔ)義化。其中key指對(duì)象的鍵值，value則是對(duì)應(yīng)的屬性值。任務(wù)2.5招聘崗位渲染【知識(shí)鏈接】2.5.3v-for渲染字符串v-for指令也可用于字符串格式數(shù)據(jù)的渲染?！纠?-13】v-for字符串格式數(shù)據(jù)使用案例。<template><divid="app"><spanclass="span"v-for="(word,index)instr"v-bind:key="index">{{word}}</span></div></template><scriptsetup>import{ref}from'vue'conststr=ref('hello'