Vue框架應(yīng)用實(shí)戰(zhàn)項(xiàng)目式教程 課件 任務(wù)3 崗位發(fā)布功能設(shè)計(jì)

1任務(wù)3崗位發(fā)布功能設(shè)計(jì)崗位發(fā)布功能設(shè)計(jì)任務(wù)3學(xué)習(xí)目標(biāo)Vue框架在界面中綁定事件后，需要監(jiān)聽相應(yīng)的事件，進(jìn)行事件處理。本任務(wù)主要講解響應(yīng)的事件處理器、常用修飾符、Vue.js監(jiān)聽屬性以及計(jì)算屬性的相關(guān)知識(shí)?！局R(shí)目標(biāo)】掌握v-on事件監(jiān)聽操作；熟悉stop、prevent、once、right等修飾符的使用方法；熟悉Vue中常用的交互事件；掌握computed計(jì)算屬性的使用方法；掌握watch偵聽器的使用。學(xué)習(xí)目標(biāo)【技能目標(biāo)】能夠熟練使用v-on綁定事件后對頁面進(jìn)行監(jiān)聽；能夠熟練運(yùn)用監(jiān)聽及計(jì)算屬性完成頁面動(dòng)態(tài)變化?！舅刭|(zhì)目標(biāo)】培養(yǎng)前端開發(fā)創(chuàng)新實(shí)踐意識(shí)；樹立前端開發(fā)者求真務(wù)實(shí)、開拓進(jìn)取的科學(xué)觀念。項(xiàng)目背景企業(yè)在發(fā)布就業(yè)信息的過程中需要一些數(shù)據(jù)驗(yàn)證及提醒服務(wù)?！盁衢T招聘”模塊中的“崗位發(fā)布”功能在填寫過程中以及提交后可以根據(jù)信息的填寫不同實(shí)現(xiàn)界面效果的動(dòng)態(tài)變化。該模塊主要完成崗位收藏、崗位信息預(yù)覽以及確認(rèn)發(fā)布等功能任務(wù)規(guī)劃在上一個(gè)任務(wù)的基礎(chǔ)上，本任務(wù)繼續(xù)實(shí)現(xiàn)“就業(yè)職通車”網(wǎng)站當(dāng)中“崗位發(fā)布”模塊，其中使用Vue3框架實(shí)現(xiàn)“崗位發(fā)布”中的崗位收藏、發(fā)布崗位、信息預(yù)覽等功能的布局與樣式?！皪徫话l(fā)布”功能效果如圖3-1所示。圖3-1“崗位發(fā)布”功能效果圖

任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)陳述】本任務(wù)需要完成“崗位發(fā)布”中崗位收藏功能部分。讀者通過實(shí)現(xiàn)該任務(wù)從而了解Vue的事件綁定機(jī)制，掌握v-on指令的使用方法。本任務(wù)實(shí)現(xiàn)效果如圖3-2所示。圖3-2崗位收藏功能效果圖【任務(wù)分析】本任務(wù)需要完成“崗位發(fā)布”中崗位收藏功能部分。在崗位信息列表中通過v-on指令設(shè)計(jì)鼠標(biāo)單擊事件，實(shí)現(xiàn)每次單擊收藏圖標(biāo)后收藏?cái)?shù)量加一，且收藏圖標(biāo)呈現(xiàn)激活樣式的功能。收藏按鈕樣式參考以下文件。任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)實(shí)施】步驟一.將收藏按鈕的圖片拷貝至assets文件夾下，HTML布局代碼拷貝至招聘崗位信息列表中，CSS樣式拷貝至<style>標(biāo)簽中。<template>文件：<divclass="text-mutedmb-3">

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

<imgclass="me-2"v-bind:src="messageList[0].scale==0?avatar_biaozhi1:avatar_biaozhi2"width="24"height="24">

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

<p>

{{messageList[0].content}}

</p>

<!--拷貝收藏樣式-->

<divclass="message_sup">

<small></small>

<divclass="support">

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

<span>108</span>

</div>

</div>

<!--收藏樣式end-->

</div></div>

任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)實(shí)施】步驟一.將收藏按鈕的圖片拷貝至assets文件夾下，HTML布局代碼拷貝至招聘崗位信息列表中，CSS樣式拷貝至<style>標(biāo)簽中。<style>樣式：<stylescoped>.message_sup{

display:flex;

justify-content:space-between;

align-items:center;}.support{

cursor:pointer;

display:flex;

align-items:flex-start;

height:22px;

overflow:hidden;

margin:10px;}.supportspan{

margin-left:5px;}.supportActivedimg{

position:relative;

top:-25px;}</style>

任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)實(shí)施】步驟一.將收藏按鈕的圖片拷貝至assets文件夾下，HTML布局代碼拷貝至招聘崗位信息列表中，CSS樣式拷貝至<style>標(biāo)簽中。<完成代碼部署后，界面效果如圖3-3所示。圖3-3招聘崗位信息收藏圖

任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)實(shí)施】步驟三.因?yàn)楹笃趍essage中的信息內(nèi)容在發(fā)表之后需要添加到messageList信息列表中，所以我們需要確保message和messageList列表中信息屬性的一致，為message同樣添加support和has_sup屬性。message:{

id:"",

name:"",

email:"",

content:"",

scale:"1",

support:0,

//收藏?cái)?shù)量默認(rèn)為0

has_sup:false

//默認(rèn)為false，表示本條信息還未收藏。}

任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)實(shí)施】步驟四.在methods中定義support方法，用于編寫收藏功能代碼。functionsupport(){}步驟五.將support方法綁定至收藏頁面收藏按鈕中。<!--收藏樣式--><divclass="message_sup">

<small></small>

<!--綁定support功能-->

<divclass="support"

v-on:click="support(0)">

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

<span>108</span>

</div></div><!--收藏樣式end-->

任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)實(shí)施】步驟六.編寫support函數(shù)邏輯代碼，實(shí)現(xiàn)單擊圖標(biāo)后，收藏?cái)?shù)量加一且收藏圖標(biāo)呈現(xiàn)激活樣式的功能。functionsupport(index){//每次單擊后，收藏狀態(tài)激活

messageList[index].has_sup=true

//收藏?cái)?shù)量自增messageList[index].support+=1}通過has_sup進(jìn)行是否收藏狀態(tài)的判斷，單擊按鈕后設(shè)置has_sup屬性為true，并且support值加一。

任務(wù)3.1崗位收藏功能開發(fā)【任務(wù)實(shí)施】步驟七.收藏圖片的樣式是通過supportActived樣式進(jìn)行控制的，我們將該樣式通過v-bind指令綁定至收藏圖片的樣式列表中，同時(shí)將頁面中的收藏?cái)?shù)量通過插值表達(dá)式插入。<divclass="message_sup">

<small></small>

<!--通過v-bind將supportActived樣式綁定到頁面中-->

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

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

<span>{{messageList[0].support}}</span>

</div></div>我們通過supportActived:messageList[0].has_sup表達(dá)式設(shè)置supportActived樣式添加與否，如果has_sup為true，表示已經(jīng)收藏，則啟用supportActived樣式。否則不啟用。頁面中的收藏?cái)?shù)量則通過{{messageList[0].support}}插值表達(dá)式進(jìn)行數(shù)據(jù)綁定。

任務(wù)3.1崗位收藏功能開發(fā)【知識(shí)鏈接】3.1.1v-on指令語法v-on是事件監(jiān)聽指令，直接與事件類型配合使用。用法：v-on:事件名="操作方法"，例如：v-on:click=“alert('hello')”。和v-bind一樣vue同樣給v-on提供了簡寫方式，只需要通過@事件名的方式就可以了。例如：@click="alert('hello')"。當(dāng)然，v-on不僅只有click一種事件，還有諸如v-on:mouseenter、v-on:mouseleave等眾多事件指令?！纠?-1】v-on監(jiān)聽click事件案例。代碼如下：<template><divid="app"><p>{{message}}</p><buttonv-on:click="reverseMessage">反轉(zhuǎn)字符串</button></div></template><scriptsetup>import{ref}from'vue'constmessage=ref('HelloWorld')functionreverseMessage(){message.value=message.value.split('').reverse().join('')}</script>如上代碼所示，我們通過v-on指令綁定了reverseMessage方法。當(dāng)單擊按鈕時(shí)候，觸發(fā)reverseMessage方法，反轉(zhuǎn)字符串。

任務(wù)3.1崗位收藏功能開發(fā)【知識(shí)鏈接】3.1.1v-on指令語法代碼運(yùn)行效果如圖3-4所示。圖3-4【例3-1】v-on指令監(jiān)聽事件效果圖

任務(wù)3.1崗位收藏功能開發(fā)【知識(shí)鏈接】3.1.2v-on指令的混合使用v-on也可以綁定多個(gè)事件，例如：<divclass="app">

<buttonv-on:mouseenter='onenter'v-on:mouseleave='leave'>clickme</button></div>

可以簡寫為：<divclass="app">

<buttonv-on="{mouseenter:onenter,mouseleave:leave}">clickme</button></div>

任務(wù)3.1崗位收藏功能開發(fā)【知識(shí)鏈接】3.1.3$event參數(shù)$event是Vue里面的事件對象，通過$event參數(shù)能夠獲取事件對象的許多屬性，如頁面位置，標(biāo)簽內(nèi)容等?！纠?-2】$event事件案例。代碼如下：<template><div><buttonid="mybtn"v-on:click="click($event)">$event參數(shù)信息</button></div></template><scriptsetup>import{ref}from'vue'functionclick(e){console.log(e)}</script>單擊鏈接后頁面輸出如圖3-5所示。圖3-5【例3-2】$event事件效果圖在輸出參數(shù)中我們能夠獲取被單擊對象的一些基本屬性，如位置、觸發(fā)事件等。任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)陳述】本任務(wù)需要完成“崗位發(fā)布”表單中單擊確認(rèn)發(fā)布按鈕實(shí)現(xiàn)招聘崗位信息發(fā)布的功能。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握Vue中事件監(jiān)聽和常用的事件修飾符。本任務(wù)實(shí)現(xiàn)效果如圖3-6所示。圖3-6確認(rèn)發(fā)布圖任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)分析】本任務(wù)需要通過Vue交互事件設(shè)計(jì)發(fā)布崗位功能。要求單擊提交按鈕后，能夠?qū)⒈韱沃械臄?shù)據(jù)渲染至頁面中，表單中各項(xiàng)內(nèi)容均為必填項(xiàng)，如有未填寫的內(nèi)容則禁止信息提交，并彈窗提示。發(fā)布崗位信息后，瀏覽器頁面能自動(dòng)滾動(dòng)到崗位信息位置，如圖3-7所示。圖3-7彈窗提示效果圖任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)實(shí)施】步驟一.添加submit提交方法，用于表單內(nèi)容提交。在submit中編寫如下代碼，用于判斷當(dāng)崗位信息輸入不全時(shí)，系統(tǒng)進(jìn)行彈窗提示。functionsubmit(){//用戶信息輸入不全時(shí)，系統(tǒng)彈窗提示

if(.trim()==""||message.email.trim()==""||message.content.trim()==""){alert("信息輸入不全，請輸入完整信息！")return}}任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)實(shí)施】步驟二.將submit方法通過v-on指令綁定到提交按鈕上，因?yàn)樘峤话粹o在表單中具有默認(rèn)的跳轉(zhuǎn)行為，所以我們需要通過prevent事件修飾符防止執(zhí)行預(yù)設(shè)的行為。代碼如下所示。<buttonclass="w-100btnbtn-successbtn-lg"type="submit"v-on:click.prevent="submit">提交</button>步驟三.在submit方法中定義messageList對象，用于接收表單中的數(shù)據(jù)。任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)實(shí)施】步驟三.在submit方法中定義messageList對象，用于接收表單中的數(shù)據(jù)。letmessageInfo={id:Date.now(),email:message.email,name:,content:message.content,scale:message.scale,support:0,//收藏?cái)?shù)量has_sup:false,//收藏狀態(tài)unnamed:message.unnamed//匿名狀態(tài)}任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)實(shí)施】一般而言，信息中的id屬性值是在插入數(shù)據(jù)庫時(shí)生成的，是該信息在數(shù)據(jù)庫中的主鍵值。因?yàn)樵诖宋覀冞€未與服務(wù)端產(chǎn)生聯(lián)調(diào)，為了表示id值的唯一性，暫且使用Data.now()生成唯一的時(shí)間戳用以表示id值。步驟四.將messageInfo信息通過push方法加入到messageList數(shù)組中。如果希望后發(fā)表的留言能置頂顯示，也可以使用unshift方法將信息添加到messageList數(shù)組的頭部。functionsubmit(){//用戶信息輸入不全時(shí)，系統(tǒng)彈窗提示if(.trim()==""||message.email.trim()==""||message.content.trim()==""){alert("信息輸入不全，請輸入完整信息！")return}任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)實(shí)施】letmessageInfo={id:Date.now(),email:message.email,name:,content:message.content,scale:message.scale,support:0,//收藏?cái)?shù)量has_sup:false,//收藏狀態(tài)unnamed:message.unnamed//匿名狀態(tài)}

//將發(fā)表的信息添加到messageList數(shù)組中messageList.value.push(messageInfo)}任務(wù)3.2發(fā)布崗位功能開發(fā)【任務(wù)實(shí)施】步驟五.完成崗位信息發(fā)布后，我們將表單中的信息加以清空。//清空表單信息=""message.email=""message.content=""message.scale="1"message.support=0message.has_sup=falsemessage.unnamed=false本任務(wù)主要學(xué)習(xí)Vue交互事件的使用，了解常用的鼠標(biāo)事件、鍵盤事件和表單事件的使用方法。任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】3.2.1事件修飾符在前端開發(fā)中，開發(fā)人員經(jīng)常需要為元素綁定事件。vue提供了很多事件修飾符，來代替處理一些DOM事件細(xì)節(jié)。Vue中常用的修飾符如表3-1所示。表3-1常用事件修飾符任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】3.2.1事件修飾符修飾符 描述 .stop 防止事件冒泡，等同于JavaScript中的event.stopPropagation() .prevent 防止執(zhí)行預(yù)設(shè)的行為，等同于JavaScript中的event.preventDefault() .once 只觸發(fā)一次事件 .right 定義鼠標(biāo)右鍵事件 接下來我們一起詳細(xì)認(rèn)識(shí)這些事件修飾符的使用方法。stop修飾符stop修飾符用于防止事件冒泡，通俗來說就是阻止事件向父元素傳遞，阻止任何父事件處理程序被執(zhí)行，等同于JavaScript中的event.stopPropagation()。任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】【例3-3】.stop修飾符案例。代碼如下：<template>

<divid="app">

<h3>.stop修飾符：阻止冒泡</h3>

<div>{{num}}</div>

<divv-on:click="handleAdd">

<buttonv-on:click.stop="handleAddInner">單擊添加</button>

</div>

</div></template><scriptsetup>import{ref}from'vue'constnum=ref(0)functionhandleAdd(){num.value++}functionhandleAddInner(){console.log("handleAddInner")}</script>任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】當(dāng)未添加.stop修飾符時(shí)，單擊按鈕效果如圖3-8所示。圖3-8【例3-3】.stop修飾符效果圖我們可以看到，單擊按鈕時(shí)，不僅觸發(fā)了自身的handleAddInner事件，同時(shí)也調(diào)用了父元素的handleAdd事件。此時(shí)我們?yōu)榘粹o添加.stop修飾符，阻止冒泡事件的發(fā)生，代碼運(yùn)行效果如圖3-9所示。圖3-9確認(rèn)發(fā)布圖任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】此時(shí)單擊按鈕，僅調(diào)用了按鈕自身的handleAddInner事件，而父元素的的handleAdd事件并未被觸發(fā)。prevent修飾符某些標(biāo)簽擁有自身的默認(rèn)事件，比如<a>標(biāo)簽單擊后會(huì)進(jìn)行頁面的跳轉(zhuǎn)。這類默認(rèn)事件雖然是冒泡后開始的，但不會(huì)因?yàn)?stop而停止執(zhí)行。阻止執(zhí)行這類預(yù)設(shè)的行為，.prevent就派上用場了?！纠?-4】.prevent修飾符案例。代碼如下：<template>

<divid="app">

<h3>.prevent修飾符：阻止事件本身默認(rèn)行為的發(fā)生</h3>

<ahref=""v-on:click.prevent="">百度</a>

</div></template>任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】代碼運(yùn)行效果如圖3-10所示。圖3-10【例3-4】.prevent修飾符效果圖此時(shí)我們單擊文字鏈接，發(fā)現(xiàn)頁面并未發(fā)生跳轉(zhuǎn)，說明prevent修飾符生效了。任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】once修飾符once修飾符表示事件只觸發(fā)一次，但是不影響事件的冒泡，上層的事件仍然會(huì)被觸發(fā)，并且頁面刷新后這個(gè)次數(shù)會(huì)重置?！纠?-5】.once修飾符案例。代碼如下：<template>

<divid="app">

<div>{{num}}</div>

<h3>.once修飾符：事件只發(fā)生一次</h3>

任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】

<buttonv-on:click.once="handleAdd">只觸發(fā)一次</button>

</div></template><scriptsetup>import{ref}from'vue'constnum=ref(0)functionhandleAdd(){numnum.value++}</script>任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】運(yùn)行效果如圖3-11所示。圖3-11【例3-5】.once修飾符效果圖單擊按鈕，可以發(fā)現(xiàn)數(shù)值僅僅增加了一次，之后就不再向上遞增，說明.once指令生效了。任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】right修飾符right修飾符用于定義鼠標(biāo)右擊事件?！纠?-6】right修飾符案例。代碼如下：<template>

<divid="app">

<h3>.right修飾符：右鍵單擊事件</h3>

<div>{{num}}</div>

任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】

<buttonv-on:click.right="handleAdd">右鍵單擊</button>

</div></template><scriptsetup>import{ref}from'vue'constnum=ref(0)functionhandleAdd(){ num.value++}</script>任務(wù)3.2發(fā)布崗位功能開發(fā)【知識(shí)鏈接】代碼運(yùn)行效果如圖3-12所示。圖3-12【例3-6】right修飾符效果圖通過鼠標(biāo)右鍵單擊按鈕，可以發(fā)現(xiàn)數(shù)值向上遞增，說明right指令生效了。任務(wù)3.3信息預(yù)覽功能開發(fā)【任務(wù)陳述】本任務(wù)需要完成“發(fā)布崗位”表單中信息預(yù)覽的界面渲染效果。當(dāng)用戶更新預(yù)覽框中的內(nèi)容時(shí)，能將信息同步到企業(yè)名稱輸入框、郵箱輸入框和規(guī)模選項(xiàng)框中。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握vue中computed計(jì)算屬性的使用方法。本任務(wù)實(shí)現(xiàn)效果如圖3-13所示。【任務(wù)分析】本任務(wù)需要完成“發(fā)布崗位”表單中信息預(yù)覽的界面渲染效果，當(dāng)用戶更新預(yù)覽框中的內(nèi)容時(shí)，能將崗位信息同步到企業(yè)名稱輸入框、郵箱輸入框和規(guī)模選項(xiàng)框中。圖3-13信息預(yù)覽渲染效果圖任務(wù)3.3信息預(yù)覽功能開發(fā)【任務(wù)實(shí)施】步驟一.在<template>中將預(yù)覽框綁定計(jì)算屬性tip。<tr><td>信息預(yù)覽:</td><tdcolspan="3"><inputclass="form-control"placeholder="企業(yè),規(guī)模,郵箱"v-model="tip"></td></tr>步驟二.設(shè)置tip計(jì)算屬性的getter，當(dāng)計(jì)算屬性的依賴對象發(fā)生變化時(shí)，更新計(jì)算屬性內(nèi)容。<scriptsetup>consttip=computed({get(){if(==""&&message.email=="")returnletscale=message.scale==0?"非上市":"上市"letname=message.unnamed==true?"匿名":returnname+","+scale+","+message.email},set(val){letarr=val.split(",")=arr[0]message.scale=arr[1]=="非上市"?"0":"1"message.email=arr[2]}})</script>任務(wù)3.3信息預(yù)覽功能開發(fā)【任務(wù)實(shí)施】步驟三.設(shè)置tip計(jì)算屬性的setter，當(dāng)更新計(jì)算屬性內(nèi)容時(shí)，同步更新計(jì)算屬性所依賴的對象。<scriptsetup>consttip=computed({get(){if(==""&&message.email=="")returnletscale=message.scale==0?"非上市":"上市"letname=message.unnamed==true?"匿名":returnname+","+scale+","+message.email},set(val){letarr=val.split(",")=arr[0]message.scale=arr[1]=="非上市"?"0":"1"message.email=arr[2]}})</script>任務(wù)3.3信息預(yù)覽功能開發(fā)【任務(wù)實(shí)施】步驟四.當(dāng)我們更新預(yù)覽框中的內(nèi)容時(shí)，企業(yè)名稱輸入框、郵箱輸入框和規(guī)模選擇框的內(nèi)容也將隨之發(fā)生變化，如圖3-14所示。圖3-14信息預(yù)覽渲染效果圖任務(wù)3.3信息預(yù)覽功能開發(fā)【知識(shí)鏈接】3.3.1getter和setter函數(shù)Vue的computed屬性可以被視為是data屬性一樣，既可以讀取值也能夠設(shè)置值。因此在computed中可分成getter（讀取值）和setter（設(shè)置值），一般情況沒有設(shè)置setter，默認(rèn)預(yù)設(shè)中只有g(shù)etter。我們可以通過手動(dòng)添加get()和set()方法進(jìn)行g(shù)etter和setter的設(shè)置。【例3-7】computed屬性案例。代碼如下：<template>

<div>

<div>

單價(jià)：￥{{

jiesuan.price}}

</div>

<div>

數(shù)量：<inputtype="text"v-model="jiesuan.num">

</div>

<div>

總價(jià)：<inputtype="text"v-model="total">

</div>

</div></template><scriptsetup>import{reactive,computed}from'vue'constjiesuan=reactive({price:18,num:0})consttotal=computed({get(){returnjiesuan.price*jiesuan.num},set(newVal){

jiesuan.num=newVal/jiesuan.price

}})</script>任務(wù)3.3信息預(yù)覽功能開發(fā)【知識(shí)鏈接】運(yùn)行結(jié)果如圖3-15所示。圖3-15【例3-7】computed屬性效果圖如圖3-15所示，當(dāng)修改數(shù)量時(shí)，計(jì)算屬性通過getter修改了total總價(jià)。當(dāng)修改total總價(jià)時(shí)，計(jì)算屬性通過setter修改了數(shù)量?？偨Y(jié)來說就是，getter的時(shí)候會(huì)收集依賴，setter的時(shí)候會(huì)觸發(fā)依賴更新。任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【任務(wù)陳述】本任務(wù)將完成“崗位發(fā)布”模塊中崗位信息字?jǐn)?shù)統(tǒng)計(jì)監(jiān)聽功能。實(shí)時(shí)顯示錄入字?jǐn)?shù)，并檢查字?jǐn)?shù)不能少于20個(gè)字符。讀者通過實(shí)現(xiàn)該任務(wù)從而掌握vue框架中偵聽器使用方法。本任務(wù)實(shí)現(xiàn)效果如圖3-16所示。圖3-16崗位信息字?jǐn)?shù)監(jiān)聽效果圖任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【任務(wù)分析】本任務(wù)將完成“崗位發(fā)布”模塊中崗位信息字?jǐn)?shù)統(tǒng)計(jì)監(jiān)聽功能。在vue中設(shè)置偵聽器，用于偵聽用戶輸入的留言內(nèi)容字符數(shù)。當(dāng)用戶輸入字符數(shù)少于20時(shí)，界面效果如圖3-17所示。（樣式為：list-group-item-warning）圖3-17字符數(shù)少于20效果圖任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【任務(wù)分析】當(dāng)用戶輸入字符數(shù)超出140時(shí)，界面效果如圖3-18所示。（樣式為：list-group-item-danger）當(dāng)用戶輸入的字符數(shù)在20至140之間時(shí)，界面效果如圖3-19所示。（樣式為：list-group-item-success）圖3-18字符數(shù)超出140效果圖圖3-19字符數(shù)在20至140之間效果圖任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【任務(wù)實(shí)施】步驟一.在<template>中使用v-model指令將留言框信息內(nèi)容和message對象的content屬性進(jìn)行雙向綁定。<textareaclass="form-control"name=""id=""cols="30"rows="5"placeholder="請輸入招聘崗位信息和要求"v-model="message.content"></textarea>步驟二.因?yàn)樽址麛?shù)提示框中的文本內(nèi)容是動(dòng)態(tài)變化的，所以我們要準(zhǔn)備promptMsg屬性和promptSty樣式屬性，用于表示提示的信息內(nèi)容。constpromptMsg=ref("")步驟三.將promptMsg通過插值嵌入頁面中。<divclass="col-12py-2"><pclass="list-group-itemlist-group-item-actionlist-group-item-warning">{{promptMsg}}</p></div>步驟四.啟用偵聽器，對message對象的content屬性進(jìn)行偵聽，該屬性表示用戶輸入的崗位信息內(nèi)容。watch(message,(newVal,oldVal)=>{})任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【任務(wù)實(shí)施】步驟五.在偵聽器中添加邏輯代碼，對用戶輸入的字符數(shù)進(jìn)行判斷。watch(message,(newVal,oldVal)=>{if(newVal.content.length<=20){promptMsg.value="輸入內(nèi)容不少于20個(gè)字符"}elseif(newVal.content.length>140){promptMsg.value="輸入內(nèi)容不超過140個(gè)字符"}else{promptMsg.value="您已輸入"+newVal.content.length+"個(gè)字符"}},{immediate:true,deep:true})使用immediate:true啟動(dòng)初始偵聽，在Vue實(shí)例初始化的時(shí)候，即調(diào)用一次函數(shù)。任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【任務(wù)實(shí)施】步驟六.接下來設(shè)置不同字符數(shù)情況下的樣式表現(xiàn)。先準(zhǔn)備promotSty屬性，用于表示不同的樣式名。constpromptMsg=ref("")constpromptSty=ref("")步驟七.將promotSty通過v-bind指令綁定到頁面樣式中。<divclass="col-12py-2"><pv-bind:class="['list-group-item','list-group-item-action',promotSty]">{{promptMsg}}</p></div>任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【任務(wù)實(shí)施】步驟八.在偵聽器中對不同字符數(shù)情況下的樣式表現(xiàn)進(jìn)行設(shè)置。watch(message,(newVal,oldVal)=>{if(newVal.content.length<=20){promptMsg.value="輸入內(nèi)容不少于20個(gè)字符"promptSty.value="list-group-item-warning"}elseif(newVal.content.length>140){promptMsg.value="輸入內(nèi)容不超過140個(gè)字符"promptSty.value="list-group-item-danger"}else{promptMsg.value="您已輸入"+newVal.content.length+"個(gè)字符"promptSty.value="list-group-item-success"}},{immediate:true,deep:true})本任務(wù)主要學(xué)習(xí)watch偵聽器的使用，掌握偵聽器的各個(gè)參數(shù)配置，并了解偵聽器與計(jì)算屬性的不同使用場景。相較于計(jì)算屬性而言，偵聽器的使用更為靈活，更偏向于數(shù)據(jù)會(huì)反復(fù)變化，需要多次計(jì)算的情況下使用。任務(wù)3.4字符統(tǒng)計(jì)功能開發(fā)【知識(shí)鏈接】3.4.1偵聽器的使用雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器。這就是為什么Vue通過watch選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。偵聽器會(huì)在監(jiān)測的數(shù)據(jù)發(fā)生變化時(shí)調(diào)用相應(yīng)的回調(diào)函數(shù)?！纠?-8】偵聽器的使用案例。代碼如下：<template>

<div>

<div>

單價(jià)：￥{{

jiesuan.price}}

</div>

<div>

數(shù)量：<inputtype="text"v-model="jiesuan.num">

</div>

<div>

總價(jià)：<inputtype="text"v-model="jiesu