Vue框架应用实战项目式教程 课件 任务2 招聘岗位数据渲染.pptx

1招聘岗位数据渲染任务2框架技术应用

Vue不但改善了前端的开发体验，还极大地提高了开发效率。如何快速的将后台数据渲染到页面当中去，是本任务主要学习的知识。本任务将对Vue的基础知识进行讲解，内容包括数据的绑定、数据的渲染等。学习目标【知识目标】掌握Vue插值数据绑定的方法；掌握v-text和v-html指令的使用；掌握v-bind属性绑定指令的使用方法；了解Vue的双向数据绑定模式；掌握v-model指令的使用；掌握Vue的条件渲染、列表渲染。【技能目标】能够熟练使用渲染指令构建网页；能够熟练运用Vue基础知识创建Vue实例。【素质目标】培养审美意识，培育审美能力；在审美能力提升中，融入坚定文化自信，激发爱国主义情感。

“就业职通车”网站最重要的功能当属“热门招聘”模块。人们可以通过该模块查询到当前各企业的招聘信息，同时企业也能在网站中发布自己的招聘岗位信息。该模块主要完成企业招聘信息录入、招聘岗位发布以及岗位信息展示等功能。如图1-1图1-1“就业职通网”效果图项目背景

本任务要求实现“就业职通车”网站当中“热门招聘”模块，其中使用Vue3框架实现“热门招聘”中招聘信息填写、招聘岗位信息渲染等功能的布局与样式。“热门招聘”模块效果如图2-1所示。图2-1“热门招聘”模块效果图任务规划

【任务陈述】本任务需要完成“热门招聘”模块中招聘简介部分。读者通过实现该任务从而掌握Vue插值数据绑定的方法。本任务实现效果如图2-2所示。任务2.1招聘数据渲染图2-2招聘简介效果图

任务2.1招聘数据渲染【任务分析】本任务需要将“热门招聘”模块中招聘简介数据通过数据绑定的方式显示在界面上，任务流程如图2-3所示。图2-3任务流程图

【任务实施】步骤一.在script中准备页面数据。scriptsetupimport{ref}fromvueimport./assets/css/bootstrap.cssconstarticle=ref(就业职通网主要面向高效应届毕业生，实现就业政策解读、招聘信息浏览、简历投递等功能，以推动应届毕业生更充分、更高质量的就业。)/script任务2.1招聘数据渲染

【任务实施】步骤二.通过插值{{}}语法将文章数据渲染至页面中。template!--页面容器--divclass=containermain!--文章内容--divclass=py-5text-centerimgclass=d-blockmx-autosrc=assets/img/logo.pngpclass=lead{{article}}/p/div/main/div/template任务2.1招聘数据渲染

【任务实施】步骤三.在控制台通过vuerundev指令进行编译。渲染结果如图2-4所示。任务2.1招聘数据渲染图2-4招聘简介效果图

【知识链接】2.1.1插值语法数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值。其语法如下：p{{message}}/p【例2-1】插值渲染实例。代码如下：templatedivid=appdivp姓名:{{newP}}/pp年龄:{{newPerson.age}}/pp{{newPerson.school.schoolName}}-{{newPerson.school.grade}}/pp家庭成员:{{newPerson.family.toString()}}/p/div/div/template任务2.1招聘数据渲染

【知识链接】2.1.1插值语法scriptsetupimport{reactive}fromvueconstnewPerson=reactive({name:小明,age:7,school:{schoolName:天天小学,grade:一年级},family:[爷爷,奶奶,爸爸,妈妈]})/script任务2.1招聘数据渲染

【知识链接】2.1.1插值语法stylescoped#app{color:red;}/style页面渲染效果如图2-5所示。任务2.1招聘数据渲染图2-5【例2-1】插值渲染效果图

【知