Vue框架應用實戰(zhàn)項目式教程 課件 任務3 崗位發(fā)布功能設計

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

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

任務3.1崗位收藏功能開發(fā)【任務實施】步驟一.將收藏按鈕的圖片拷貝至assets文件夾下，HTML布局代碼拷貝至招聘崗位信息列表中，CSS樣式拷貝至<style>標簽中。<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>

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

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

id:"",

name:"",

email:"",

content:"",

scale:"1",

support:0,

//收藏數(shù)量默認為0

has_sup:false

//默認為false，表示本條信息還未收藏。}

任務3.1崗位收藏功能開發(fā)【任務實施】步驟四.在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-->

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

messageList[index].has_sup=true

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

任務3.1崗位收藏功能開發(fā)【任務實施】步驟七.收藏圖片的樣式是通過supportActived樣式進行控制的，我們將該樣式通過v-bind指令綁定至收藏圖片的樣式列表中，同時將頁面中的收藏數(shù)量通過插值表達式插入。<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表達式設置supportActived樣式添加與否，如果has_sup為true，表示已經收藏，則啟用supportActived樣式。否則不啟用。頁面中的收藏數(shù)量則通過{{messageList[0].support}}插值表達式進行數(shù)據綁定。

任務3.1崗位收藏功能開發(fā)【知識鏈接】3.1.1v-on指令語法v-on是事件監(jiān)聽指令，直接與事件類型配合使用。用法：v-on:事件名="操作方法"，例如：v-on:click=“alert('hello')”。和v-bind一樣vue同樣給v-on提供了簡寫方式，只需要通過@事件名的方式就可以了。例如：@click="alert('hello')"。當然，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">反轉字符串</button></div></template><scriptsetup>import{ref}from'vue'constmessage=ref('HelloWorld')functionreverseMessage(){message.value=message.value.split('').reverse().join('')}</script>如上代碼所示，我們通過v-on指令綁定了reverseMessage方法。當單擊按鈕時候，觸發(fā)reverseMessage方法，反轉字符串。

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

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

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

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

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

任務3.1崗位收藏功能開發(fā)【知識鏈接】3.1.3$event參數(shù)$event是Vue里面的事件對象，通過$event參數(shù)能夠獲取事件對象的許多屬性，如頁面位置，標簽內容等?！纠?-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ā)事件等。任務3.2發(fā)布崗位功能開發(fā)【任務陳述】本任務需要完成“崗位發(fā)布”表單中單擊確認發(fā)布按鈕實現(xiàn)招聘崗位信息發(fā)布的功能。讀者通過實現(xiàn)該任務從而掌握Vue中事件監(jiān)聽和常用的事件修飾符。本任務實現(xiàn)效果如圖3-6所示。圖3-6確認發(fā)布圖任務3.2發(fā)布崗位功能開發(fā)【任務分析】本任務需要通過Vue交互事件設計發(fā)布崗位功能。要求單擊提交按鈕后，能夠將表單中的數(shù)據渲染至頁面中，表單中各項內容均為必填項，如有未填寫的內容則禁止信息提交，并彈窗提示。發(fā)布崗位信息后，瀏覽器頁面能自動滾動到崗位信息位置，如圖3-7所示。圖3-7彈窗提示效果圖任務3.2發(fā)布崗位功能開發(fā)【任務實施】步驟一.添加submit提交方法，用于表單內容提交。在submit中編寫如下代碼，用于判斷當崗位信息輸入不全時，系統(tǒng)進行彈窗提示。functionsubmit(){//用戶信息輸入不全時，系統(tǒng)彈窗提示

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

//將發(fā)表的信息添加到messageList數(shù)組中messageList.value.push(messageInfo)}任務3.2發(fā)布崗位功能開發(fā)【任務實施】步驟五.完成崗位信息發(fā)布后，我們將表單中的信息加以清空。//清空表單信息=""message.email=""message.content=""message.scale="1"message.support=0message.has_sup=falsemessage.unnamed=false本任務主要學習Vue交互事件的使用，了解常用的鼠標事件、鍵盤事件和表單事件的使用方法。任務3.2發(fā)布崗位功能開發(fā)【知識鏈接】3.2.1事件修飾符在前端開發(fā)中，開發(fā)人員經常需要為元素綁定事件。vue提供了很多事件修飾符，來代替處理一些DOM事件細節(jié)。Vue中常用的修飾符如表3-1所示。表3-1常用事件修飾符任務3.2發(fā)布崗位功能開發(fā)【知識鏈接】3.2.1事件修飾符修飾符 描述 .stop 防止事件冒泡，等同于JavaScript中的event.stopPropagation() .prevent 防止執(zhí)行預設的行為，等同于JavaScript中的event.preventDefault() .once 只觸發(fā)一次事件 .right 定義鼠標右鍵事件 接下來我們一起詳細認識這些事件修飾符的使用方法。stop修飾符stop修飾符用于防止事件冒泡，通俗來說就是阻止事件向父元素傳遞，阻止任何父事件處理程序被執(zhí)行，等同于JavaScript中的event.stopPropagation()。任務3.2發(fā)布崗位功能開發(fā)【知識鏈接】【例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>任務3.2發(fā)布崗位功能開發(fā)【知識鏈接】當未添加.stop修飾符時，單擊按鈕效果如圖3-8所示。圖3-8【例3-3】.stop修飾符效果圖我們可以看到，單擊按鈕時，不僅觸發(fā)了自身的handleAddInner事件，同時也調用了父元素的handleAdd事件。此時我們?yōu)榘粹o添加.stop修飾符，阻止冒泡事件的發(fā)生，代碼運行效果如圖3-9所示。圖3-9確認發(fā)布圖任務3.2發(fā)布崗位功能開發(fā)【知識鏈接】此時單擊按鈕，僅調用了按鈕自身的handleAddInner事件，而父元素的的handleAdd事件并未被觸發(fā)。prevent修飾符某些標簽擁有自身的默認事件，比如<a>標簽單擊后會進行頁面的跳轉。這類默認事件雖然是冒泡后開始的，但不會因為.stop而停止執(zhí)行。阻止執(zhí)行這類預設的行為，.prevent就派上用場了。【例3-4】.prevent修飾符案例。代碼如下：<template>

<divid="app">

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

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

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

<divid="app">

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

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

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

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

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

<divid="app">

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

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

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

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

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

<div>

<div>

單價：￥{{

jiesuan.price}}

</div>

<div>

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

</div>

<div>

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

<div>

<div>

單價：￥{{

jiesuan.price}}

</div>

<div>

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

</div>

<div>

總價：<inputtype="text"v-model="jiesu