Vue框架应用实战项目式教程 课件 任务3 岗位发布功能设计

1任务3岗位发布功能设计岗位发布功能设计任务3学习目标Vue框架在界面中绑定事件后，需要监听相应的事件，进行事件处理。本任务主要讲解响应的事件处理器、常用修饰符、Vue.js监听属性以及计算属性的相关知识。【知识目标】掌握v-on事件监听操作；熟悉stop、prevent、once、right等修饰符的使用方法；熟悉Vue中常用的交互事件；掌握computed计算属性的使用方法；掌握watch侦听器的使用。学习目标【技能目标】能够熟练使用v-on绑定事件后对页面进行监听；能够熟练运用监听及计算属性完成页面动态变化。【素质目标】培养前端开发创新实践意识；树立前端开发者求真务实、开拓进取的科学观念。项目背景企业在发布就业信息的过程中需要一些数据验证及提醒服务。“热门招聘”模块中的“岗位发布”功能在填写过程中以及提交后可以根据信息的填写不同实现界面效果的动态变化。该模块主要完成岗位收藏、岗位信息预览以及确认发布等功能任务规划在上一个任务的基础上，本任务继续实现“就业职通车”网站当中“岗位发布”模块，其中使用Vue3框架实现“岗位发布”中的岗位收藏、发布岗位、信息预览等功能的布局与样式。“岗位发布”功能效果如图3-1所示。图3-1“岗位发布”功能效果图

任务3.1岗位收藏功能开发【任务陈述】本任务需要完成“岗位发布”中岗位收藏功能部分。读者通过实现该任务从而了解Vue的事件绑定机制，掌握v-on指令的使用方法。本任务实现效果如图3-2所示。图3-2岗位收藏功能效果图【任务分析】本任务需要完成“岗位发布”中岗位收藏功能部分。在岗位信息列表中通过v-on指令设计鼠标单击事件，实现每次单击收藏图标后收藏数量加一，且收藏图标呈现激活样式的功能。收藏按钮样式参考以下文件。任务3.1岗位收藏功能开发【任务实施】步骤一.将收藏按钮的图片拷贝至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岗位收藏功能开发【任务实施】步骤一.将收藏按钮的图片拷贝至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岗位收藏功能开发【任务实施】步骤一.将收藏按钮的图片拷贝至assets文件夹下，HTML布局代码拷贝至招聘岗位信息列表中，CSS样式拷贝至<style>标签中。<完成代码部署后，界面效果如图3-3所示。图3-3招聘岗位信息收藏图

任务3.1岗位收藏功能开发【任务实施】步骤三.因为后期message中的信息内容在发表之后需要添加到messageList信息列表中，所以我们需要确保message和messageList列表中信息属性的一致，为message同样添加support和has_sup属性。message:{

id:"",

name:"",

email:"",

content:"",

scale:"1",

support:0,

//收藏数量默认为0

has_sup:false

//默认为false，表示本条信息还未收藏。}

任务3.1岗位收藏功能开发【任务实施】步骤四.在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岗位收藏功能开发【任务实施】步骤六.编写support函数逻辑代码，实现单击图标后，收藏数量加一且收藏图标呈现激活样式的功能。functionsupport(index){//每次单击后，收藏状态激活

messageList[index].has_sup=true

//收藏数量自增messageList[index].support+=1}通过has_sup进行是否收藏状态的判断，单击按钮后设置has_sup属性为true，并且support值加一。

任务3.1岗位收藏功能开发【任务实施】步骤七.收藏图片的样式是通过supportActived样式进行控制的，我们将该样式通过v-bind指令绑定至收藏图片的样式列表中，同时将页面中的收藏数量通过插值表达式插入。<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样式。否则不启用。页面中的收藏数量则通过{{messageList[0].support}}插值表达式进行数据绑定。

任务3.1岗位收藏功能开发【知识链接】3.1.1v-on指令语法v-on是事件监听指令，直接与事件类型配合使用。用法：v-on:事件名="操作方法"，例如：v-on:click=“alert('hello')”。和v-bind一样vue同样给v-on提供了简写方式，只需要通过@事件名的方式就可以了。例如：@click="alert('hello')"。当然，v-on不仅只有click一种事件，还有诸如v-on:mouseenter、v-on:mouseleave等众多事件指令。【例3-1】v-on监听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方法。当单击按钮时候，触发reverseMessage方法，反转字符串。

任务3.1岗位收藏功能开发【知识链接】3.1.1v-on指令语法代码运行效果如图3-4所示。图3-4【例3-1】v-on指令监听事件效果图

任务3.1岗位收藏功能开发【知识链接】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岗位收藏功能开发【知识链接】3.1.3$event参数$event是Vue里面的事件对象，通过$event参数能够获取事件对象的许多属性，如页面位置，标签内容等。【例3-2】$event事件案例。代码如下：<template><div><buttonid="mybtn"v-on:click="click($event)">$event参数信息</button></div></template><scriptsetup>import{ref}from'vue'functionclick(e){console.log(e)}</script>单击链接后页面输出如图3-5所示。图3-5【例3-2】$event事件效果图在输出参数中我们能够获取被单击对象的一些基本属性，如位置、触发事件等。任务3.2发布岗位功能开发【任务陈述】本任务需要完成“岗位发布”表单中单击确认发布按钮实现招聘岗位信息发布的功能。读者通过实现该任务从而掌握Vue中事件监听和常用的事件修饰符。本任务实现效果如图3-6所示。图3-6确认发布图任务3.2发布岗位功能开发【任务分析】本任务需要通过Vue交互事件设计发布岗位功能。要求单击提交按钮后，能够将表单中的数据渲染至页面中，表单中各项内容均为必填项，如有未填写的内容则禁止信息提交，并弹窗提示。发布岗位信息后，浏览器页面能自动滚动到岗位信息位置，如图3-7所示。图3-7弹窗提示效果图任务3.2发布岗位功能开发【任务实施】步骤一.添加submit提交方法，用于表单内容提交。在submit中编写如下代码，用于判断当岗位信息输入不全时，系统进行弹窗提示。functionsubmit(){//用户信息输入不全时，系统弹窗提示

if(.trim()==""||message.email.trim()==""||message.content.trim()==""){alert("信息输入不全，请输入完整信息！")return}}任务3.2发布岗位功能开发【任务实施】步骤二.将submit方法通过v-on指令绑定到提交按钮上，因为提交按钮在表单中具有默认的跳转行为，所以我们需要通过prevent事件修饰符防止执行预设的行为。代码如下所示。<buttonclass="w-100btnbtn-successbtn-lg"type="submit"v-on:click.prevent="submit">提交</button>步骤三.在submit方法中定义messageList对象，用于接收表单中的数据。任务3.2发布岗位功能开发【任务实施】步骤三.在submit方法中定义messageList对象，用于接收表单中的数据。letmessageInfo={id:Date.now(),email:message.email,name:,content:message.content,scale:message.scale,support:0,//收藏数量has_sup:false,//收藏状态unnamed:message.unnamed//匿名状态}任务3.2发布岗位功能开发【任务实施】一般而言，信息中的id属性值是在插入数据库时生成的，是该信息在数据库中的主键值。因为在此我们还未与服务端产生联调，为了表示id值的唯一性，暂且使用Data.now()生成唯一的时间戳用以表示id值。步骤四.将messageInfo信息通过push方法加入到messageList数组中。如果希望后发表的留言能置顶显示，也可以使用unshift方法将信息添加到messageList数组的头部。functionsubmit(){//用户信息输入不全时，系统弹窗提示if(.trim()==""||message.email.trim()==""||message.content.trim()==""){alert("信息输入不全，请输入完整信息！")return}任务3.2发布岗位功能开发【任务实施】letmessageInfo={id:Date.now(),email:message.email,name:,content:message.content,scale:message.scale,support:0,//收藏数量has_sup:false,//收藏状态unnamed:message.unnamed//匿名状态}

//将发表的信息添加到messageList数组中messageList.value.push(messageInfo)}任务3.2发布岗位功能开发【任务实施】步骤五.完成岗位信息发布后，我们将表单中的信息加以清空。//清空表单信息=""message.email=""message.content=""message.scale="1"message.support=0message.has_sup=falsemessage.unnamed=false本任务主要学习Vue交互事件的使用，了解常用的鼠标事件、键盘事件和表单事件的使用方法。任务3.2发布岗位功能开发【知识链接】3.2.1事件修饰符在前端开发中，开发人员经常需要为元素绑定事件。vue提供了很多事件修饰符，来代替处理一些DOM事件细节。Vue中常用的修饰符如表3-1所示。表3-1常用事件修饰符任务3.2发布岗位功能开发【知识链接】3.2.1事件修饰符修饰符 描述 .stop 防止事件冒泡，等同于JavaScript中的event.stopPropagation() .prevent 防止执行预设的行为，等同于JavaScript中的event.preventDefault() .once 只触发一次事件 .right 定义鼠标右键事件 接下来我们一起详细认识这些事件修饰符的使用方法。stop修饰符stop修饰符用于防止事件冒泡，通俗来说就是阻止事件向父元素传递，阻止任何父事件处理程序被执行，等同于JavaScript中的event.stopPropagation()。任务3.2发布岗位功能开发【知识链接】【例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发布岗位功能开发【知识链接】当未添加.stop修饰符时，单击按钮效果如图3-8所示。图3-8【例3-3】.stop修饰符效果图我们可以看到，单击按钮时，不仅触发了自身的handleAddInner事件，同时也调用了父元素的handleAdd事件。此时我们为按钮添加.stop修饰符，阻止冒泡事件的发生，代码运行效果如图3-9所示。图3-9确认发布图任务3.2发布岗位功能开发【知识链接】此时单击按钮，仅调用了按钮自身的handleAddInner事件，而父元素的的handleAdd事件并未被触发。prevent修饰符某些标签拥有自身的默认事件，比如<a>标签单击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的，但不会因为.stop而停止执行。阻止执行这类预设的行为，.prevent就派上用场了。【例3-4】.prevent修饰符案例。代码如下：<template>

<divid="app">

<h3>.prevent修饰符：阻止事件本身默认行为的发生</h3>

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

</div></template>任务3.2发布岗位功能开发【知识链接】代码运行效果如图3-10所示。图3-10【例3-4】.prevent修饰符效果图此时我们单击文字链接，发现页面并未发生跳转，说明prevent修饰符生效了。任务3.2发布岗位功能开发【知识链接】once修饰符once修饰符表示事件只触发一次，但是不影响事件的冒泡，上层的事件仍然会被触发，并且页面刷新后这个次数会重置。【例3-5】.once修饰符案例。代码如下：<template>

<divid="app">

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

<h3>.once修饰符：事件只发生一次</h3>

任务3.2发布岗位功能开发【知识链接】

<buttonv-on:click.once="handleAdd">只触发一次</button>

</div></template><scriptsetup>import{ref}from'vue'constnum=ref(0)functionhandleAdd(){numnum.value++}</script>任务3.2发布岗位功能开发【知识链接】运行效果如图3-11所示。图3-11【例3-5】.once修饰符效果图单击按钮，可以发现数值仅仅增加了一次，之后就不再向上递增，说明.once指令生效了。任务3.2发布岗位功能开发【知识链接】right修饰符right修饰符用于定义鼠标右击事件。【例3-6】right修饰符案例。代码如下：<template>

<divid="app">

<h3>.right修饰符：右键单击事件</h3>

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

任务3.2发布岗位功能开发【知识链接】

<buttonv-on:click.right="handleAdd">右键单击</button>

</div></template><scriptsetup>import{ref}from'vue'constnum=ref(0)functionhandleAdd(){ num.value++}</script>任务3.2发布岗位功能开发【知识链接】代码运行效果如图3-12所示。图3-12【例3-6】right修饰符效果图通过鼠标右键单击按钮，可以发现数值向上递增，说明right指令生效了。任务3.3信息预览功能开发【任务陈述】本任务需要完成“发布岗位”表单中信息预览的界面渲染效果。当用户更新预览框中的内容时，能将信息同步到企业名称输入框、邮箱输入框和规模选项框中。读者通过实现该任务从而掌握vue中computed计算属性的使用方法。本任务实现效果如图3-13所示。【任务分析】本任务需要完成“发布岗位”表单中信息预览的界面渲染效果，当用户更新预览框中的内容时，能将岗位信息同步到企业名称输入框、邮箱输入框和规模选项框中。图3-13信息预览渲染效果图任务3.3信息预览功能开发【任务实施】步骤一.在<template>中将预览框绑定计算属性tip。<tr><td>信息预览:</td><tdcolspan="3"><inputclass="form-control"placeholder="企业,规模,邮箱"v-model="tip"></td></tr>步骤二.设置tip计算属性的getter，当计算属性的依赖对象发生变化时，更新计算属性内容。<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信息预览功能开发【任务实施】步骤三.设置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信息预览功能开发【任务实施】步骤四.当我们更新预览框中的内容时，企业名称输入框、邮箱输入框和规模选择框的内容也将随之发生变化，如图3-14所示。图3-14信息预览渲染效果图任务3.3信息预览功能开发【知识链接】3.3.1getter和setter函数Vue的computed属性可以被视为是data属性一样，既可以读取值也能够设置值。因此在computed中可分成getter（读取值）和setter（设置值），一般情况没有设置setter，默认预设中只有getter。我们可以通过手动添加get()和set()方法进行getter和setter的设置。【例3-7】computed属性案例。代码如下：<template>

<div>

<div>

单价：￥{{

jiesuan.price}}

</div>

<div>

数量：<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信息预览功能开发【知识链接】运行结果如图3-15所示。图3-15【例3-7】computed属性效果图如图3-15所示，当修改数量时，计算属性通过getter修改了total总价。当修改total总价时，计算属性通过setter修改了数量。总结来说就是，getter的时候会收集依赖，setter的时候会触发依赖更新。任务3.4字符统计功能开发【任务陈述】本任务将完成“岗位发布”模块中岗位信息字数统计监听功能。实时显示录入字数，并检查字数不能少于20个字符。读者通过实现该任务从而掌握vue框架中侦听器使用方法。本任务实现效果如图3-16所示。图3-16岗位信息字数监听效果图任务3.4字符统计功能开发【任务分析】本任务将完成“岗位发布”模块中岗位信息字数统计监听功能。在vue中设置侦听器，用于侦听用户输入的留言内容字符数。当用户输入字符数少于20时，界面效果如图3-17所示。（样式为：list-group-item-warning）图3-17字符数少于20效果图任务3.4字符统计功能开发【任务分析】当用户输入字符数超出140时，界面效果如图3-18所示。（样式为：list-group-item-danger）当用户输入的字符数在20至140之间时，界面效果如图3-19所示。（样式为：list-group-item-success）图3-18字符数超出140效果图图3-19字符数在20至140之间效果图任务3.4字符统计功能开发【任务实施】步骤一.在<template>中使用v-model指令将留言框信息内容和message对象的content属性进行双向绑定。<textareaclass="form-control"name=""id=""cols="30"rows="5"placeholder="请输入招聘岗位信息和要求"v-model="message.content"></textarea>步骤二.因为字符数提示框中的文本内容是动态变化的，所以我们要准备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字符统计功能开发【任务实施】步骤五.在侦听器中添加逻辑代码，对用户输入的字符数进行判断。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实例初始化的时候，即调用一次函数。任务3.4字符统计功能开发【任务实施】步骤六.接下来设置不同字符数情况下的样式表现。先准备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字符统计功能开发【任务实施】步骤八.在侦听器中对不同字符数情况下的样式表现进行设置。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侦听器的使用，掌握侦听器的各个参数配置，并了解侦听器与计算属性的不同使用场景。相较于计算属性而言，侦听器的使用更为灵活，更偏向于数据会反复变化，需要多次计算的情况下使用。任务3.4字符统计功能开发【知识链接】3.4.1侦听器的使用虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。侦听器会在监测的数据发生变化时调用相应的回调函数。【例3-8】侦听器的使用案例。代码如下：<template>

<div>

<div>

单价：￥{{

jiesuan.price}}

</div>

<div>

数量：<inputtype="text"v-model="jiesuan.num">

</div>

<div>

总价：<inputtype="text"v-model="jiesu