《Vue框架应用实战项目式教程》高职全套教学课件

1《Vue框架应用实战项目式教程》框架技术应用任务1“就业职通车”项目初始化任务2招聘岗位数据渲染任务3岗位发布功能设计任务4岗位信息异步渲染任务5岗位信息异步渲染任务6“就业服务”模块设计7.26任务7岗位信息异步渲染-副本任务8文章数据全局管理任务9项目托管与发布全套可编辑PPT课件2“就业职通车”项目初始化任务1框架技术应用CONTENTS目录04/05/任务分析任务陈述01/02/项目背景学习目标07/08/任务总结知识链接06/任务实施03/任务规划09/课后练习学习目标开发环境搭建是项目开始的第一步，在企业项目工作中，需要大家拥有快速搭建项目环境的能力。本章节将带领大家搭建与配置开发环境、使用Vite工具创建Vue3项目，并完成Vue项目的初始化部署。学习目标【知识目标】了解Vue框架；掌握Vue开发环境的安装。【技能目标】能够搭建Vue开发环境。【素质目标】培养细致严谨的工作态度。项目背景Vue是一款友好的、多用途且高性能的JavaScript框架，Vue繁荣的生态圈提供了大量成熟的项目解决方案。使用Vue可以更快、更高效的开发项目，因此它被广泛应用于Web前端、移动端、跨平台应用的开发，使用场景十分广泛。本项目主要开发“就业职通车”网站，该网站是一个面向高校应届毕业生的就业网，实现了招聘信息浏览和发布、就业指导文章阅览、名企介绍等功能，以推动应届毕业生更充分更高质量的就业。任务规划本任务要求搭建与配置开发环境、使用Vite工具创建Vue3项目，并使用Vue3框架实现“就业职通网”项目布局与样式。首页效果如图1-1所示。图1-1“就业职通网”效果图任务1.1Vue环境配置【任务陈述】本任务要求配置Vue项目所必需的开发环境，并初始化Vue项目。具体任务目标如下：配置Vue项目所必须的开发环境，包括Node.js环境、VisualStudioCode开发工具、Vite工具等；在“:5173”地址中渲染Vue初始化项目，项目效果如图1-2所示。图1-2Vue项目渲染效果图任务1.1Vue环境配置【任务分析】该任务要求搭建Vue项目所必须的环境，并初始化和渲染项目。具体任务实施流程如图1-3所示。图1-3任务实施流程图任务1.1Vue环境配置【任务实施】步骤一.安装Node.JS环境。Node.js是一个开源的、跨平台的JavaScript运行时环境，Node.js具有独特的优势。打开Node.JS官网下载页面,如图1-4所示根据个人系统情况下载不同版本的Node.JS，本案例中以Windows系统上下载和安装Node.JS为例。图1-4Node.JS官网下载页任务1.1Vue环境配置【任务实施】双击下载后的安装包，单击“Run”按钮进行环境安装，如图1-5所示。图1-5Node.JS安装任务1.1Vue环境配置【任务实施】勾选“接受用户协议(IacceptthetermsintheLicenseAgreement)”复选框，单击“Next”按钮,如图1-6所示。图1-6勾选用户协议选项任务1.1Vue环境配置【任务实施】如图1-7所示，Node.JS默认安装目录为“C:\ProgramFiles\nodejs”，你可以修改目录，并单击“Next”按钮。图1-7选择安装路径如图1-8所示，单击树形图标来选择你需要的安装模式，然后单击“Next”按钮。图1-8选择需要安装的功能选项任务1.1Vue环境配置【任务实施】任务1.1Vue环境配置【任务实施】如图1-9所示，单击“Install”按钮开始安装Node.js。你也可以单击“Back”按钮来修改之前的配置。然后单击“Next”按钮，安装完成后单击“Finish”按钮退出安装向导。

图1-9Node.JS安装与结束任务1.1Vue环境配置【任务实施】安装完成之后，检测PATH环境变量是否配置了Node.js。在桌面单击“开始”—>“运行”选项，在“运行”窗口中输入“cmd”命令，单击“确定”按钮，在弹出的命令窗口中输入“path”命令，按回车键输出如下结果：上面输出结果为本机环境变量的配置，我们可以看到环境变量中已经包含了C:\ProgramFiles\nodejs\，说明环境变量在Node.js安装的过程中已经配置成功。任务1.1Vue环境配置【任务实施】最后检测Node与npm版本号。在桌面单击“开始”—>“运行”选项，在“运行”窗口中输入“cmd”命令，单击“确定”按钮，在弹出的命令窗口中分别输入“node-v”和“npm-v”命令后，输出如图1-10结果，说明Node.js和npm环境安装成功。图1-10Node.JS和npm版本检测任务1.1Vue环境配置【任务实施】图1-11VSCode官网首页步骤二.安装VisualStudioCode开发工具。VisualStudioCode（简称“VSCode”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于MacOSX、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。打开VSCode官网首页，在如图1-11所示的下载列表中，选择自己系统对应的下载链接。其中“Stable”表示稳定版，“Insiders”表示预览版。任务1.1Vue环境配置【任务实施】如图1-12所示，双击打开安装包，勾选【我接受协议】，根据提示单击“下一步”进行逐步安装即可。图1-12VSCode安装过程任务1.1Vue环境配置【任务实施】完成VSCode软件安装后还需要下载Vue语法支持插件。在VSCode中打开“拓展”选项（快捷键:ctrl+shift+x），搜索“VueLanguageFeatures”插件，单击“安装”按钮进行下载与安装，如图1-13所示。图1-13拓展插件任务1.1Vue环境配置【任务实施】步骤三.初始化Vue项目。NPM的全称是NodePackageManager，是一个Node.js包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。接下来我们将通过NPM下载Vite工具，并进行Vue项目初始化。在VSCode中新建项目文件夹，并通过【终端】—>【新建终端】选项打开软件中的命令行窗口，如图1-14所示。图1-14打开VSCode终端窗口任务1.1Vue环境配置【任务实施】在软件命令行窗口中使用“npm

init

vite@latest”命令搭建一个Vite项目，如图1-15所示。Vite是Vue的作者尤雨溪在开发Vue3.0的时候开发的一个基于原生ES-Module的前端构建工具。能够帮助我们快速搭建和发布Vue项目。图1-15搭建Vite项目输入项目名称，如图1-16所示。图1-16输入项目名称选择项目所使用的框架。通过键盘的方向键进行框架选择，按下回车键表示确定，如图1-17所示。图1-17选择项目框架任务1.1Vue环境配置【任务实施】任务1.1Vue环境配置【任务实施】选择项目所使用的编程语言，在此我们选择“JavaScript”语言，如图1-18所示。图1-18选择编程语言完成配置选择之后，通过如下命令进入项目目录，安装项目所依赖的包，如图1-19所示。图1-19安装依赖任务1.1Vue环境配置【任务实施】步骤四.渲染Vue项目。完成项目依赖包安装之后，我们在命令行窗口继续输入“npmrundev”命令，如图1-20所示,项目便渲染至“:5173”地址中了。图1-20项目渲染【知识链接】1.1.1Vue3介绍1.更优的性能2.更小的体积3.支持组合API4.更好的支持TS5.提供了更先进的组件1.1.2Vite工具介绍Vite号称是下一代的前端开发和构建工具，目前已经在前端社区里逐步开始流行起来了。比起传统的webpack构建，Vite在性能速度上都有了质的提高。使用Vite工具构建的项目在项目根目录中存在一个“vite.config.js”配置文件，通过该文件能够对项目进行相关配置。【知识链接】1.端口设置Vite默认将Vue项目渲染至5173端口，我们也可以通过“vite.config.js”配置文件，对其渲染端口进行修改。在“vite.config.js”中添加如下代码，即可修改项目渲染端口。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

//修改项目渲染端口为9999

port:9999

}})【知识链接】2.监听地址设置通过“host”属性能够指定服务器应该监听哪个IP地址。例如将监听地址修改为“”。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

port:9999,//修改项目渲染端口为9999

host:""//修改IP

}})【知识链接】3.应用自启动设置配置“open:true”选项，能够在开发服务器启动时，自动在浏览器中打开应用程序。import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({

plugins:[vue()],

server:{

port:9999,//修改项目渲染端口为9999

host:"",//修改IPopen:true

}})以上介绍的都是Vite中的一些基础配置，在项目的设计和发布过程中我们将会陆续接触到更多的Vite配置内容，同学们也可以前往Vite的官网进行进一步的了解和学习。任务1.2项目初始化【任务陈述】本任务要求根据项目素材，将Vue项目改写为如图1-1所示样式。【任务分析】本任务要求同学们对Vue项目结构有所了解。该项目页面主要由HTML布局代码、CSS样式代码、JavaScript脚本代码以及图片文件等组成，如何将这些原始素材放置在Vue项目的合理位置是项目实施的关键点。图1-1“就业职通网”效果图任务1.2项目初始化【任务实施】步骤一.部署HTML代码。清空App.vue文件中的默认代码并输入如下代码：<template></template><script></script><style></style>App.vue是项目根组件，项目中所有组件都将被加载至该组件进行渲染和展示。其中<template>标签主要用于部署HTML代码，<script>标签主要用于部署JavaScript脚本代码，<style>标签用于部署样式代码。将素材中的HTML代码复制到<template>标签中。任务1.2项目初始化步骤二.部署CSS代码。将素材中的“bootstrap.css”文件拷贝至项目的【assets】—>【css】目录中。Vue静态资源可以通过两种方式进行处理：在<script>被导入以及在<template>或<css>中通过相对路径被引用。这类引用会被打包处理，需要将资源放在【assets】目录中。放置在【public】目录下或通过绝对路径引用。这类资源将会直接被拷贝，而不会经过打包处理。Vue更推荐将资源作为模块依赖的一部分导入项目当中，这样脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求任务1.2项目初始化步骤二.部署CSS代码。App.vue文件中的<style>标签主要用于部署样式代码，在<style>标签中导入素材中的CSS样式文件。<template></template><script></script><style>@import

"./assets/css/bootstrap.css"</style>任务1.2项目初始化步骤三.部署图片文件。将素材中的图片文件拷贝至项目的【assets】—>【img】目录中。在VSCode软件中打开命令行工具，输入“npmrundev”命令渲染项目，此时便可以看到项目被成功渲染了。任务1.2项目初始化【知识链接】1.2.1Vue项目结构一个Vue项目包括如图1-21所示的文件和目录，接下来我们对其中主要文件和目录进行介绍。图1-21Vue项目结构任务1.2项目初始化【知识链接】1.2.1Vue项目结构node_modules目录npm加载的项目依赖模块。public目录public是静态资源目录，项目打包时，该目录下的资源不会被编译。assets目录assets同样是静态资源目录，项目打包时，该目录下的资源将会被编译。【知识链接】1.2.1Vue项目结构App.vueApp.vue是项目根组件，项目中所有组件都将被加载至该组件进行渲染和展示。main.js项目的核心文件，主要起到配置项目所必须的插件、实例化Vue等作用。项目创建完毕，main.js中会有默认的配置。//导入createApp包import{createApp}from'vue'任务1.2项目初始化【知识链接】1.2.1Vue项目结构//导入App.vue组件importAppfrom'./App.vue'//使用createApp函数将App.vue组件渲染至index.html中'id=app'的节点上createApp(App).mount('#app')index.htmlindex.html是该Vite项目的入口文件。【知识链接】1.2.1Vue项目结构package.json项目配置文件。package.json文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npminstall命令会根据这个文件下载所有依赖模块。vite.config.jsvite工具的配置文件。任务总结与拓展通过该任务的实施，掌握了Vue3框架以及Vue3项目的搭建过程。因为每台电脑环境的差异，在项目环境的搭建过程中难免遇到一些不同的问题，需要保持认真细致，培养严谨的工作态度，排除错误问题，积累项目经验。同时掌握了Vue项目结构和基础代码部署的方法，对于Vue项目中各文件和目录的作用同学们需要熟记于心，这样才能合理部署资源，进行正确的代码书写。通过本章节学习，读者应对Vue有一个整体的认识，并能够进行简单Vue项目的部署。【思考】当项目默认的运行端口5173被占用时，如何修改项目运行端口？【思考】如何在使用“npmrundev”命令渲染Vue项目时，能够在浏览器自动打开编译页面？39招聘岗位数据渲染任务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>中准备页面数据。<scriptsetup>import{ref}from'vue'import"./assets/css/bootstrap.css"constarticle=ref("就业职通网主要面向高效应届毕业生，实现就业政策解读、招聘信息浏览、简历投递等功能，以推动应届毕业生更充分、更高质量的就业。")</script>任务2.1招聘数据渲染【任务实施】步骤二.通过插值{{}}语法将文章数据渲染至页面中。<template>

<!--页面容器--><divclass="container"><main>

<!--文章内容--><divclass="py-5text-center"><imgclass="d-blockmx-auto"src="assets/img/logo.png"><pclass="lead">{{article}}</p></div></main></div></template>任务2.1招聘数据渲染【任务实施】步骤三.在控制台通过vuerundev指令进行编译。渲染结果如图2-4所示。任务2.1招聘数据渲染图2-4招聘简介效果图【知识链接】2.1.1插值语法数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值。其语法如下：<p>{{message}}</p>【例2-1】插值渲染实例。代码如下：<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>任务2.1招聘数据渲染【知识链接】2.1.1插值语法<scriptsetup>import{reactive}from'vue'constnewPerson=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】插值渲染效果图【知识链接】2.1.2v-text指令语法v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。读者可以将其理解为JavaScript中的innerText方法。【例2-2】v-text指令渲染实例。代码如下：<template><divid="app"><divv-text="textStr"></div></div></template><scriptsetup>import{ref}from'vue'consttextStr=ref('<astyle="color:red">红色</a>')</script>任务2.1招聘数据渲染【知识链接】2.1.2v-text指令语法代码运行效果如图2-6所示。图2-6【例2-2】v-text指令渲染效果图如图2-5所示，v-text指令并不能渲染HTML标签，而是将字符串原样输出到界面中。如果需要将字符串渲染为HTML标签，我们该如何操作呢？这就需要使用到v-html指令了。任务2.1招聘数据渲染【知识链接】2.1.3v-html指令语法v-html指令可用于HTML标签的渲染，类似于JavaScript中的innerHTML方法。例如，我们将上一个案例代码，通过v-html指令进行渲染。【例2-3】v-html指令渲染实例。代码如下：<template><divid="app"><divv-html="htmlStr"></div></div></template><scriptsetup>import{ref}from'vue'consthtmlStr=ref('<astyle="color:red">红色</a>')</script>任务2.1招聘数据渲染【知识链接】2.1.3v-html指令语法代码运行效果如图2-7所示。图2-7【例2-3】v-html指令渲染效果图注意：在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击，因此读者在设计网页界面时只在可信内容上使用v-html，不能用在用户提交的内容上。任务2.1招聘数据渲染【知识链接】2.1.4v-once指令语法v-once指令只渲染元素和组件一次。随后的重新渲染，元素或组件及其所有的子节点将被视为静态内容并跳过。【例2-4】v-once指令语法实例。代码如下：<template><divid="app"><divv-once>{{num}}</div><buttonv-on:click="add">num自增</button></div></template>任务2.1招聘数据渲染【知识链接】2.1.4v-once指令语法v-once指令只渲染元素和组件一次。随后的重新渲染，元素或组件及其所有的子节点将被视为静态内容并跳过。【例2-4】v-once指令语法实例。代码如下：<scriptsetup>import{ref}from'vue'constnum=ref(1)functionadd(){num++}</script>任务2.1招聘数据渲染【知识链接】如图2-8所示，单击“num自增”按钮，v-once绑定的标签内容并不会随之改变，说明v-once指令对数据仅进行了一次渲染。图2-8【例2-4】v-once指令渲染效果图任务2.1招聘数据渲染【任务陈述】Vue中的数据绑定功能极大地提高了开发效率。本任务需要完成“岗位信息”显示模块中企业标志的渲染效果。读者通过实现该任务从而掌握v-bind指令属性绑定的方法。本任务实现效果如图2-9所示。任务2.2企业标志渲染图2-9企业标志效果图【任务分析】本任务需要完成“岗位信息”显示模块中企业标志的渲染效果，任务流程如图2-10所示。任务2.2企业标志渲染图2-10任务流程图【任务实施】步骤一.在“热门招聘”模块基础上，通过import命令将图像导入。<scriptsetup>import{reactive,ref}from'vue'import"./assets/css/bootstrap.css"importavatar_biaozhi1from"./assets/img/biaozhi1.png"

//企业标志图片importavatar_biaozhi2from"./assets/img/biaozhi2.png"

//企业标志图片conststyleclass=reactive({ avatar_biaozhi1,avatar_biaozhi2})constmessageList=ref([//岗位数据任务2.2企业标志渲染【任务实施】{"id":110,"email":"lxm@",

"name":"华为技术有限公司",

"content":"招聘软件工程师若干名。在这里,你将从事IT应用层软件、分布式云化软件、互联网软件等的设计开发,可以采用敏捷、Devops、开源等先进的软件设计开发模式,接触最前沿的产品和软件技术，成为大容量高并发技术的专家。","scale":1,"support":37,"has_sup":true,"time":1678949430654},任务2.2企业标志渲染【任务实施】{"id":111,"email":"xxt@","name":"腾讯科技（深圳）有限公司",

"content":"招聘前端工程师10人，负责计费营销saas业务的前端开发工作，通过前端工程化、组件化、可视化的方法，实现前端UI表现和前端逻辑组件的快速生成。","scale":1,"support":60,"has_sup":true,"time":1675234219856},任务2.2企业标志渲染【任务实施】{"id":112,"email":"zqq@163.com","name":"网之易信息技术（上海）有限公司",

"content":"招聘运维工程师5人，负责IDC现场维护工作，保证基础设施正常运营环境，确保服务器等硬件设备稳定高效运行。本科或以上学历，计算机及相关专业，2年以上相关工作经验。","scale":1,"support":46,"has_sup":true,"time":1665284870606}])</script>任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。<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>​任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。<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">任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。

<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>任务2.2企业标志渲染【任务实施】步骤二.将企业标志属性通过v-bind指令进行绑定，并根据数据渲染出不同企业的标志。我们通过v-bind:src=“messageList[0].scale==0?avatar_biaozhi1:avatar_biaozhi2"的三元表达式对不同企业的标志进行了区分渲染。对比起直接引用图片地址的方式，属性绑定更有利于我们后期的数据维护，一旦标志地址发生改变，我们仅需要在import指令中重新选择正确的图片路径即可。任务2.2企业标志渲染【任务实施】步骤三.在控制台通过vuerundev指令进行编译。渲染结果如图2-11所示。图2-11企业标志渲染效果图v-bind指令能够动态的绑定一个或多个属性值，相比起单向数据绑定而言，v-bind主要用于属性的绑定。合理应用v-bind指令，能够为后期的数据维护提供极大的便利。任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法v-bind指令主要用于响应式的更新html属性。如果需要在元素节点的属性上绑定Vue的数据，不能直接使用{{}}插入值语法来实现，需要使用v-bind指令来完成。v-bind用于给元素的属性赋值，可以实现属性单向数据绑定。v-bind语法为：v-bind:属性名=[变量名]。例如：v-bind:title="message"v-bind:可以缩写为:符号，例如：:title="message"v-bind指令常常用于绑定标签属性、样式等，它支持绑定数值、字符串、数组、对象或一个表达式。任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法例如：<!--绑定一个属性--><imgv-bind:src="imageSrc"><!--动态属性名--><buttonv-bind:[key]="value"></button><!--缩写形式--><img:src="imageSrc"><!--动态属性名缩写--><button:[key]="value"></button><!--内联字符串拼接--><img:src="'/path/to/images/'+fileName">任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法例如：<!--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><!--绑定一个全是属性的对象--><divv-bind="{id:someProp,'other-attr':otherProp}"></div>任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法【例2-5】v-bind使用案例。如以下案例所示，通过v-bind指令将类名绑定至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>任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法【例2-5】v-bind使用案例。如以下案例所示，通过v-bind指令将类名绑定至class属性中。<stylescoped>.styleA{color:red;}.styleB{color:blue;}</style>任务2.2企业标志渲染【知识链接】2.2.1v-bind指令语法渲染Vue得到如图2-12所示结果，Class样式名为“styleA”。图2-12【例2-5】v-bind使用效果图任务2.2企业标志渲染【任务陈述】本任务需要完成“热门招聘”模块中“发布岗位”表单的界面渲染效果。读者通过实现该任务从而掌握v-model指令的方法，实现数据双向绑定。本任务实现效果如图2-13所示。图2-13“发布岗位”表单渲染效果图任务2.3招聘表单设计【任务分析】本任务需要完成“热门招聘”模块中“发布岗位”表单的界面渲染效果。将表单中信息进行数据绑定。任务流程如图2-14所示。图2-14任务流程图任务2.3招聘表单设计【任务实施】步骤一.在“热门招聘”模块中定义岗位信息数据。<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>任务2.3招聘表单设计【任务实施】步骤二.通过v-model指令，绑定name属性至页面表单中。<inputtype="text"class="form-controlactive"id="name"placeholder="请输入企业名称"requiredv-model="">步骤三.通过v-model指令，绑定email属性至页面表单中。<inputtype="email"class="form-control"style="width:80%;"id="email"placeholder="name@"requiredv-model="message.email">步骤四.通过v-model指令，绑定scale属性至页面表单中。因为企业规模选择框是radio类型，是否选中是通过其checked属性进行判定的，所以我们需要使用v-model指令绑定checked属性，进行选中与否的判断。<!--企业规模：上市企业单选框--><inputid="male"name="scale"type="radio"class="form-check-input"requiredvalue="1"v-model="message.scale">上市企业<!--企业规模：非企业单选框--><inputid="female"name="scale"type="radio"class="form-check-input"value="0"v-model="message.scale">非上市企业任务2.3招聘表单设计【任务实施】步骤五.通过v-model指令，绑定content属性至页面表单中。<textareaclass="form-control"name=""id=""cols="30"rows="5"placeholder="请输入招聘岗位信息和要求"v-model="message.content"></textarea>步骤六.“岗位发布”表单渲染结果如图2-15所示。图2-15“岗位发布”表单渲染效果图通过在网页表单中输入数据，可见当页面数据发生变化时，message中数据也一并发生变化。将message中的数据进行更改并保存，页面的数据也将同步发生变化。由此可见，通过v-model指令实现了表单的双向数据绑定。任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法在原生Javascript的项目中，要获取用户输入框输入的内容，需要通过DOM对象的方式。在Vue项目中则不用这么繁琐，因为vue通过了指令v-model来实现数据的双向绑定。像输入框、单选框、复选框等类型的输入控件都可以通过v-model指令绑定其value值，实现双向数据绑定。所谓双向绑定，指的是Vue实例中的数据与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法v-model指令对单行文本框<input>进行数据绑定格式如下：<inputv-model="text">【例2-6】v-model单行文本框数据绑定案例。<template><divid="app"><p>{{message}}</p><inputtype="text"v-model="message"></div></template><scriptsetup>import{ref}from'vue'constmessage=ref('Helloworld')</script>任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法如图2-16所示，当修改输入框的value值时，p容器中的内容也随之发生变化，由此可见，当我们修改输入框中的值时，message中的数据也发生了相应的变化。图2-16【例2-6】v-model单行文本框数据绑定效果图任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法另外，v-model

还可以用于各种不同类型的输入，<textarea>、<select>

元素。它会根据所使用的元素自动使用对应的DOM属性和事件组合：文本类型的<input>和<textarea>元素会绑定valueproperty并侦听input事件；<inputtype="checkbox">和<inputtype="radio">会绑定checkedproperty并侦听change事件；<select>会绑定valueproperty并侦听change事件。v-model指令对多行文本框<textarea>进行数据绑定。注意在<textarea>中是不支持插值表达式的。需要使用v-model来替代。格式如下：<span>Multilinemessageis:</span><pstyle="white-space:pre-line;">{{message}}</p><textareav-model="message"placeholder="addmultiplelines"></textarea>任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法v-model指令对复选框进行数据绑定。单一的复选框，绑定布尔类型值，格式如下：<inputtype="checkbox"id="checkbox"v-model="checked"/><labelfor="checkbox">{{checked}}</label>v-model指令对单选按钮进行数据绑定格式如下：<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>任务2.3招聘表单设计【知识链接】2.3.1v-model指令语法v-model指令对<select>选择器进行数据绑定格式如下：<div>Selected:{{selected}}</div><selectv-model="selected"><optiondisabledvalue="">Pleaseselectone</option><option>A</option><option>B</option><option>C</option></select>任务2.3招聘表单设计【任务陈述】本任务需要将“岗位发布”模块中匿名发布功能进行页面渲染。读者通过实现该任务从而掌握条件渲染各种指令的使用方法。本任务实现效果如图2-17所示。图2-17匿名发布功能渲染效果图任务2.4匿名发布渲染【任务分析】本任务需要将“岗位发布”模块中匿名发布功能进行页面渲染。任务流程如图2-18所示。图2-18任务流程图任务2.4匿名发布渲染【任务实施】步骤一.首先我们设计评论列表用户匿名功能。为messageList招聘信息列表中的各项信息添加unnamed属性，用以表示该条招聘信息是否开启匿名选项。messageList:[

{

id:110,email:"",name:"网络技术公司",content:"招前端工程师20人",scale:0,

unnamed:false//匿名状态，设置为false，表示不开启匿名选项

}]任务2.4匿名发布渲染【任务实施】步骤二.在<template>中通过v-if指令绑定unnamed属性，用以判断是否渲染企业名称。<strongclass="text-gray-dark"v-if="!messagList[0].unnamed">

{{messageList[0].name}}</strong><strongclass="text-gray-dark"v-else>匿名用户</strong>如上所示，当v-if="!messageList[0].unnamed"中的表达式为true，则渲染企业名称，否则渲染匿名企业信息。注意在此我们需要使用v-if指令而非v-show指令。因为v-show只是简单地基于CSS的display属性进行切换信息是否隐藏，并未真正做到匿名的功能。任务2.4匿名发布渲染【任务实施】步骤三.在发表招聘信息表单中，通过切换按钮设计是否开启匿名的功能。在<template>中布局匿名开关代码。<divclass="col-12py-2">

<divclass="form-checkform-switch">

<inputclass="form-check-input"

type="checkbox"role="switch"

id="unnamed-switch">

<labelfor="unnamed-switch">匿名发布</label>

</div></div>任务2.4匿名发布渲染【任务实施】步骤四.为招聘信息message添加unnamed属性，用以表示是否开启匿名发布功能。constmessage=reactive({id:"",email:"",name:"",content:"",scale:0,unnamed:false//匿名状态})任务2.4匿名发布渲染【任务实施】步骤五.将unnamed属性通过v-model双向绑定到匿名评论按钮上。<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">匿名发布</label>

</div></div>任务2.4匿名发布渲染【任务实施】步骤六.“岗位发布”匿名企业功能渲染结果如图2-19所示。图2-19匿名企业功能渲染效果图任务2.4匿名发布渲染【知识链接】在Vue中，我们可以通过指令条件性的选择渲染某一块内容，此时我们就需要用到v-if系列指令，接下来我们一同来详细学习这些指令的使用。2.4.1v-if指令语法在Vue中，v-if用于根据表达式的真假来操作DOM元素，可以切换元素的创建和销毁；当表达式的值为true时，元素存在于DOM树中，表达式为false时，元素从DOM树中移除，其语法为v-if="表达式"。【例2-7】v-if使用案例。<template><divid="app"><buttonv-on:click="isShow=!isShow">显示/隐藏</button><divclass="ball"v-if="isShow"></div></div></template>任务2.4匿名发布渲染【知识链接】<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>任务2.4匿名发布渲染【知识链接】渲染Vue得到如图2-20所示结果。图2-20【例2-7】v-if使用效果图单击“显示/隐藏”按钮，切换isShow的值，小球的可见性也随之产生变化。任务2.4匿名发布渲染【知识链接】2.4.2v-else指令语法v-else指令必须搭配v-if指令使用，如果没有v-if的存在v-else将变得毫无意义。其语法为：<divv-if="表达式">

表达式为true时，渲染该标签内容</div><divv-else>

表达式为false时，渲染该标签内容</div><template><divid="app"><divclass="ball"v-if="Math.random()>0.5"></div><divv-else>小球消失了</div></div></template>任务2.4匿名发布渲染【知识链接】【例2-8】v-else使用案例。<stylescoped>.ball{ width:30px; height:30px; border-radius:30px; background:radial-gradient(blue,green); margin:20px;}</style>此时如果“Math.random()>0.5”成立，“v-else”将不可见，反之，“v-else”的内容将变为可见。任务2.4匿名发布渲染【知识链接】2.4.3v-else-if指令语法当v-if、v-else两个指令无法满足多个条件的业务需求时，可以使用v-else-if增加多种情况的判断，v-else-if指令可以连续多个同时使用。任务2.4匿名发布渲染【例2-9】v-else-if使用案例。<template><divid="app"><divv-if="name==='小梦'">小梦</div><divv-else-if="name==='小明'">小明</div><divv-else-if="name==='小红'">小红</div><divv-else>都不是</div></div></template><scriptsetup>import{ref}from'vue'constname=ref('小明')</script>最终“小明”将被显示在页面中。【知识链接】2.4.4v-show指令语法v-show指令同样可以决定一个元素是否可见，v-show指令是通过改变元素的CSS属性（display属性）来决定元素是显示还是隐藏。【例2-10】v-show使用案例。<template><divid="app"><divv-show="false">v-show</div></div></template>任务2.4匿名发布渲染【知识链接】运行代码，在浏览器中通过F12键调出开发者工具，可见如图2-21所示代码。图2-21v-show实现原理代码图由此可见v-show是通过display:none的样式设置，将标签进行隐藏的。任务2.4匿名发布渲染【知识链接】2.4.5v-if和v-show指令区别控制手段不同。编译过程不同。编译条件不同。控制手段：v-show隐藏则是为该元素添加display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除。编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。v-show由false变为true的时候不会触发组件的生命周期。任务2.4匿名发布渲染【知识链接】2.4.5v-if和v-show指令区别v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法。性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；任务2.4匿名发布渲染【任务陈述】本任务需要将“热门招聘”模块中各企业发布的招聘岗位信息进行页面渲染。读者通过实现该任务从而掌握列表渲染等各种指令的使用方法。本任务实现效果如图2-22所示。图2-22招聘岗位列表渲染效果图任务2.5招聘岗位渲染【任务分析】本任务需要将“热门招聘”模块中各企业发布的招聘岗位信息进行页面渲染。任务流程如图2-23所示。图2-23任务流程图任务2.5招聘岗位渲染【任务实施】步骤一.在<template>中将原来企业招聘信息列表的代码删除，仅保留第一条企业招聘信息代码，作为列表数据模板。<divclass="text-mutedmb-3">

<!--企业招聘信息-->

</div>任务2.5招聘岗位渲染【任务实施】步骤二.使用v-for指令渲染列表数据，代码如下。<!--使用v-for指令渲染列表数据--><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>匿名发布</strong>

<p>

{{item.content}}

</p>任务2.5招聘岗位渲染【任务实施】步骤二.使用v-for指令渲染列表数据，代码如下。

<!--收藏样式-->

<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值不建议绑定数组的索引，一般而言每条数据都会有一个唯一的id，用来标识这条数据的唯一性，通常使用这个id作为key值。在Vue中，我们可以使用v-for指令渲染一组样式相同的列表或表格数据。接下来我们一同来详细学习v-for指令的使用。任务2.5招聘岗位渲染【知识链接】2.5.1v-for渲染数组v-for指令可用于渲染一组样式相同的列表或表格数据。v-for指令需要使用（item,key）initems形式的特殊语法。其中：items是源数据，例如一个数组或对象；item则是数组或对象中的每一项元素；key则指代数组的索引值或对象的键值，具有唯一性。v-for指令可用于渲染数组、对象、字符串等多种格式的数据。渲染数组是我们最为常用的方式。任务2.5招聘岗位渲染【知识链接】【例2-11】v-for数组渲染使用案例。<template><divid="app"><ul><liv-for="(item,index)inperson"v-bind:key="index">姓名：{{item}}</li></ul></div></template><scriptsetup>任务2.5招聘岗位渲染【知识链接】import{reactive}from'vue'constperson=reactive(["小城","丽丽","小希","张三"])</script></script><stylescoped>ul{list-style:none;}ulli:nth-child(2n+1){background-color:skyblue;}</style>任务2.5招聘岗位渲染【知识链接】渲染Vue得到如图2-24所示结果。图2-24【例2-11】v-for数组渲染效果图v-for指令中绑定的是person数组，item表示数组中的每一项元素内容，index表示当前元素的索引值。任务2.5招聘岗位渲染【知识链接】2.5.2v-for渲染对象v-for也可用于对象数据的渲染。【例2-12】v-for对象数组渲染使用案例。<template><divid="app"><ul><liv-for="(value,key