《Web前端开发》课件-项目八 浅谈Vue

Web前端开发项目八浅谈Vue任务一初识Vue学习目标：知识目标：了解什么是Vue及其工作原理。技能目标：能够配置Vue的开发环境，完成Vue项目创建，熟练使用VisualStudioCode开发工具。素质目标：培养学生解决问题的能力，培养学生实践操作能力。任务准备：一、Vue的概念

Vue是指一个用于构建用户界面的渐进式框架，具有许多独特的功能和优势，它采用组件化的方式来构建用户界面，并且允许开发人员创建可重复使用的组件。这种方法可以极大地简化代码，并提高Web应用程序的可维护性和可重复性，它可以更好地组织与优化程序开发，Vue的核心库只关注视图层，非常容易与其他库或已有项目进行整合，比较容易学习。任务准备：二、Vue的工作原理Vue的数据驱动是通过MVVM（Model-View-ViewModel）模式来实现的，其基本工作原理如图8.1所示。从图8.1中可以看出，MVVM主要包含三个部分，分别是数据（model）、视图（view）和视图模型（viewmodel）。数据部分主要负责业务数据；视图部分属于DOM，主要负责视图的处理；视图模型是连接视图与数据的数据模型，负责监听数据和视图的修改。在MVVM架构下，数据和视图之间并没有直接的联系，而是通过视图模型进行交互，数据和视图模型之间的交互是双向的，因此视图的变化会同步到数据中，而数据的变化也会立即反应到视图上。任务实施：

任务描述：进入Node.js官方网站，如图8.2所示，下载Node.js，要求Node.js版本为1.6版本或更高版本。创建Vue项目，项目名称为“vue_project”。任务实施：实施步骤：1.安装Node.js。2.打开命令提示符程序（cmd），定义Vue项目存储位置为“D:\教学\项目八”。

如图8.3所示。3.在cmd中，输入命令行“npminitvue@latest”。

该命令是用于初始化一个新的Vue.js项目，点击回车，出现如图8.4所示提示信息。4.输入项目名称“vue_project”。

注意项目名称不能含有大写字母，如图8.5所示。任务实施：其他选项的含义如下，可以选中默认的“No”。AddTypeScript?含义：是否使用TypeScript语法?AddJSXSupport?含义：是否启用JSX支持?AddVueRouterforSinglePageApplicationdevelopment?含义：是否引入VueRouter进行单页面应用开发?AddPiniaforstatemanagement?含义：是否引入Pinia用于状态管理?AddVitestforUnitTesting?含义：是否引入vitest用于单元测试?AddanEnd-to-EndTestingSolution?含义：是否要引入一款端到端(EndtoEnd)测试工具?AddESLintforcodequality?含义：是否引入ESLint用于代码质量检测?任务实施：5.进入项目vue_project，安装所需依赖包。

在cmd中，输入“cdvue_project”，进入vue项目。输入“npminstall”，安装依赖包。如图8.6所示。如果需要卸载依赖包，我们用到的命令是“npmuninstall”。图8.6cmd界面4任务实施：6.运行项目vue_project。

在cmd中，输入“npmrundev”，运行项目vue_project。当出现图8.7所示的页面时，表示“vue_project”已经运行起来了。其中，就是当前项目的访问地址。图8.7cmd界面5任务实施：7.在浏览器中访问Vue项目。

打开浏览器，输入地址当出现图8.8所示的页面时，表示Vue项目已经创建成功。图8.8浏览器页面任务实施：8.安装开发环境VisualStudioCode+Volar扩展。

在官网下载软件“VisualStudioCode”并安装，点击左侧工具栏“Extensions”按钮，搜索“VueLanguageFeatures(Volar)”插件，单击安装后，如图8.9所示。9.VisualStudioCode开发环境界面如图8.10所示。

安装好开发环境，就可以进行Vue项目的开发了。图8.9Volar插件安装界面图8.10VisualStudioCode开发环境界面

小结初识Vue

一、Vue的概念

二、Vue的工作原理

三、搭建Vue的开发环境，创建Vue项目任务测试：一、选择题1、下列选项中，安装Vue模块正确的命令是（）。A、npminstallvueB、node.jsinstallvueC、nodeinstallvueD、npmmyvue2、MVVM架构主要包含三个部分，其中不包括（）。A、数据（Model）B、视图（View）C、视图模型（viewModel）D、Message3、下面选项中，用于卸载指定包依赖的命令是（）。A、npminstallB、node.jsuninstallC、nodeinstallD、npmuninstall4、在MVVM设计模式中，Model代表的是()。A、数据模型B、控制器C、视图D、监听模型5、Vue.js3.0的入口文件是()。A、main.jsB、App.vueC、index.vueD、index.html二、问答题

简述Vue的概念。项目八浅谈Vue任务二Vue基础入门学习目标：知识目标：熟识Vue项目目录结构及语法。技能目标：运用VisualStudioCode开发环境完成Vue项目创建。素质目标：培养学生实践操作能力，培养学生归纳总结的能力。任务准备：

一、Vue项目目录结构Vue项目的目录结构如图8.11所示。在目录结构中，各项含义如下。（1）.vscode是VSCode工具的配置文件夹。（2）node_modules是Vue项目的运行依赖文件夹。（3）public是资源文件夹，里面的favicon.ico就是浏览器中的项目图标。（4）src是源码文件夹。（5）.gitignore是git忽略文件。（6）index.html是程序启动的入口HTML文件。（7）package_lock.json是信息描述文件。（8）README.md是注释文件。（9）vite.config.js是Vue的配置文件。图8.11Vue项目的目录结构任务准备：二、Vue模板语法Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上，所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。1.文本插值

最基本的数据绑定形式就是文本插值，它使用的是“Mustache”语法（即双括号）。结构如下。

<template>

<p>{{msg}}</p>

</template>

<script>

exportdefault{

data(){

return{msg:"好好学习"}

}

}

</script>任务准备：2.使用JavaScript表达式

每一个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法就是是否可以合法的写在return的后面。示例如下。

<template>

<p>{{number+1}}</p>

<p>{{ok?'yes':'no'}}</p>

<p>{{message.split('').reverse().join('')}}</p>

</template>

<script>

exportdefault{

data(){

return{

number:10,

ok:true,

message:"大家好"}

}

}

</script>任务准备：3.原始HTML

双大括号将会将数据插值为纯文本，而不是HTML，若想插入HTML，你需要使用v-html指令。结构如下。

<template>

<p>纯文本：{{rawHtml}}</p>

<p>属性：<spanv-html="rawHtml"></span></p>

</template>

<script>

exportdefault{

data(){

return{

rawHtml任务二</a>"}

}

}

</script>任务实施：任务描述：在VisualStudioCode环境中，制作第一个Vue项目页面，页面显示如图8.12所示。在页面下方通过渲染原始HTML的方法，关联中国新闻网图8.12页面效果图任务实施：实施步骤：1.创建并打开Vue项目vue_project。(1)

输入命令“npminitvue@latest”

设置项目名称“projectname:vue_project”(2)

输入命令“npminstal”安装依赖包。(3)

输入命令“npmrundev”运行项目。任务实施：2.编写vue文件。

打开src文件夹，在App.vue中编写如下代码。<script>

exportdefault{

data(){

return{

message1:"我要好好学习",

message2:"我爱我的祖国"

}

}

}</script><template>

<h3>我是中国人</h3>

<p>{{message1}}</p>

<p>{{message2}}</p></template>任务实施：3.去除自带样式。删除src文件夹下，main.js文件中的“import'./assets/main.css'”自带样式。4.添加链接中国新闻网的链接。

在<script></script>标签中return语句中添加以下代码。rawHtml:"<ahref=中国新闻网</a>"在<template></template>标签中添加以下代码。<pv-html="rawHtml"></p>

小结Vue基础入门

一、Vue项目目录结构

二、Vue模板语法

1.文本插值2.使用JavaScript表达式3.原始HTML任务测试：一、选择题1、如果将原始HTML在页面直接显示则需要添加属性（）。A、v-htmlB、v-bindC、v-forD、v-model2、在<template>标签中，使用JavaScript表达式定义页面元素，正确的是（）。A、{{vara=1}}B、{{if(ok){returnmessage}}}C、{{number+1}}D、{number}3、运行Vue项目的命令是（）。A、npminstallB、node.jsuninstallC、nodeinstallD、npmrundev二、问答题

请简述如何把return的标签结构添加到<template>中，在页面上直接显示标签结构。项目八浅谈Vue任务三初探Vue基础操作（一）学习目标：知识目标：熟识Vue属性绑定方法和Vue条件渲染指令。技能目标：运用Vue属性绑定和Vue条件渲染完成Vue项目创建。素质目标：培养学生实践操作能力，培养学生自学能力。任务准备：一、Vue属性绑定

属性绑定是Vue中常用的一种方式，通过将属性绑定到Vue实例中的数据上，可以实现数据与界面的双向绑定。Vue中的属性绑定应使用v-bind指令，具体格式如下。

v-bind:属性名="属性值"示例如下。

<template>

<divv-bind:id="dynamicId"v-bind:class="msg">属性绑定测试</div>

</template>

<script>

exportdefault{

data(){

return{

msg:"active",

dynamicId:"appID"}

}

}

</script>

<style>

.active{color:red}

</style>任务准备：需要注意的是，v-bind指令要求元素属性的属性值与组件的属性名必须保持一致。例如，v-bind:class="msg"和msg:"active"，元素class属性的属性值为msg，组件的属性名也必须为msg。另外，如果绑定的值是null或者undefined，那么该属性将会从渲染的元素上移除，示例如下。

<template>

<divv-bind:id="dynamicId"v-bind:title="dTitle">属性绑定测试</div>

</template>

<script>

exportdefault{

data(){

return{

dTitle:null}}}

</script>

此时，“dTitle:null”，则<div>标签上“title”属性会被移除。因为v-bind指令经常使用，所以提供了特定的简写语法，这里可以省略“v-bind”关键字，但是“：”不能省略，示例如下。

<div:id="dynamicId":class="msg">属性绑定测试</div>任务准备：2.Vue属性动态绑定多个值如果需要在元素内一次绑定多个属性的属性值，可以参考以下示例。

<template>

<divv-bind="attributes">属性绑定测试</div>

</template>

<script>

exportdefault{

data(){

return{

attributes:{

id:"appId",

title:"appTitle"}

}

}

}

</script>在这个示例中，一次绑定了两个属性和属性值，分别为id属性和title属性。任务准备：

在Vue中，提供了很多条件渲染，这类似于JavaScript中的条件语句。包括：v-if、v-else、v-else-if、v-show等。1.v-if

的使用

“v-if”指令用于条件性的渲染一部分内容。这部分内容只有在指令表达式返回值为true时，才能被渲染，示例如下。

<template>

<divv-if="sign">条件渲染v-if</div>

</template>

<script>

exportdefault{

data(){

return{

sign:true}

}}

</script>

在这个实例中，“sign”的值为“true”时，<div>标签可以渲染显示，“sign”的值为“false”时，<div>标签不可以显示。任务准备：2.v-else的使用

“v-else”是为“v-if”添加的“else”部分，示例如下。

<template>

<divv-if="sign">条件渲染v-if</div>

<divv-else>条件渲染v-else</div>

</template>

<script>

exportdefault{

data(){

return{

sign:tru

}

}}

</script>

在这个示例中，“sign”值为“true”时，<div>标签“条件渲染v-if”内容可以被渲染出来；“sign”值为“false”时，<div>标签“条件渲染v-else”内容被渲染出来。任务准备：3.v-else-if的使用

当“v-if”和“v-else”两个指令无法满足更多业务需求时，可以使用“v-else-if”指令增加多种情况的判断。4.v-show的使用

“v-show”指令是另一个可以按条件来显示元素的条件渲染语句，它的用法与“v-if”的用法基本一样，只是不能配有“v-else”指令。

v-if指令和v-show指令的区别在于：v-if指令是按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。另外，v-if指令也是惰性的，如果在初次渲染时条件值为false，则不会做任何操作。条件区块只有当条件首次变为true时才被渲染。相比之下，v-show指令在应用时，元素无论初始条件如何，都会被渲染。总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好；如果在运行时绑定条件很少改变，则v-if更合适。任务实施：

任务描述：制作第一个Vue项目页面，要求用户输入学生成绩，然后根据输入的成绩，给出学生成绩等级，90分~100分成绩A等级，80分~90分成绩B等级，70分~80分成绩C等级，60发~70分成绩及格，60分以下成绩不及格。页面显示如图8.13所示。图8.13页面效果图任务实施：实施步骤：1.创建并打开Vue项目vue_project。(1)

输入命令“npminitvue@latest”

设置项目名称“projectname:vue_project”(2)

输入命令“npminstal”安装依赖包。(3)

输入命令“npmrundev”运行项目。任务实施：2.编写vue文件。

打开src文件夹，在App.vue中构建页面。<script>…</script><template>

<h2>学生成绩等级查询</h2>

学生成绩：<inputtype="text"id="score"placeholder="请输入成绩"

v-model="score"/><br/>

学生成绩等级：</template>

其中“v-model”是Vue的双向绑定指令，它能将页面上的控件输入的值同步更新到相关绑定的data属性中，同时也会在更新data绑定属性的时候，更新页面上输入控件的值。任务实施：3.去除自带样式。

删除src文件夹下，main.js文件中的“import'./assets/main.css'”自带样式。4.在<script></script>标签中添加脚本代码。

<script>

exportdefault{

data(){

return{score:''}

}

}

</script>任务实施：5.在<template></template>标签中添加“v-else-if”分支情况。<template>

学生成绩：<inputtype="text"id="score"placeholder="请输入成绩"

v-model="type"/><br/>

学生成绩等级：

<divv-if="score>=90">A等级</div>

<divv-else-if="score>=80">B等级</div>

<divv-else-if="score>=70">C等级</div>

<divv-else-if="score>=60">及格</div>

<divv-else>不及格</div></template>

小结Vue基础操作（一）

一、Vue项目属性绑定

1.Vue属性绑定

2.Vue属性动态绑定多个值

二、Vue条件渲染

1.v-if的使用

2.v-else的使用

3.v-else-if的使用

4.v-show的使用任务测试：一、选择题1、在Vue项目中，表单元素上数据双向绑定的指令是（）。A、v-ifB、v-bindC、v-forD、v-model2、在Vue中，以下表达式正确的是（）。A、{{varstr="你好"}}B、{{if(ok){returnmsg}}}C、{{ok?"Yes":"No"}}D、{msg,num}3、Vue条件渲染中不包括指令（）。A、v-ifB、v-elseC、v-showD、v-on二、问答题简述什么是Vue属性绑定。项目八浅谈Vue任务四初探Vue基础操作（二）学习目标：知识目标：熟识Vue中v-for指令的使用方法。技能目标：运用Vue中v-for指令实现列表渲染，能利用v-for指令渲染对象，遍历对象属性。素质目标：培养学生实践操作能力，培养学生自学能力。任务准备：一、列表渲染1.基本数组列表渲染Vue提供了v-for指令，用来辅助开发者基于数组、对象、字符串等来循环渲染相似的UI结构，v-for指令需要使用iteminitems或itemofitems的特殊语法，其中items是源数据的数组，item是迭代项的别名。示例如下。

<template>

<h2>列表渲染</h2>

<pv-for="iteminarrays">{{item}}</p>

</template>

<script>

exportdefault{

data(){

return{

arrays:["理想","梦想","荣誉","光荣"]}

}

}

</script>任务准备：2.复杂数组列表渲染

大多数情况下，我们需要渲染的数据来源于网络请求，多数都是“JSON”格式的数据，这时候我们也可以通过v-for来渲染数据，示例如下。

<template>

<h2>列表渲染</h2>

<pv-for="itemofresult">{{item.title}}</p>

</template>

<script>

exportdefault{

data(){

return{

result:[

{"id":1,"name":"xx","title":"科技进步"},

{"id":2,"name":"yy","title":"时代发展"},

{"id":3,"name":"zz","title":"技术创新"}]

}

}

}</script>在这个示例中，我们可以依次把数组中的“title”所对应的值遍历出来。输出结果为：科技进步时代发展技术创新任务准备：3.多参数列表渲染

v-for指令也支持使用第二个参数表示当前项的索引值。示例如下。

<template>

<h2>列表渲染</h2>

<pv-for="(item,index)inarrays">{{item}},索引值{index}</p>

</template>

<script>

exportdefault{

data(){

return{

arrays:["理想","梦想","荣誉","光荣"]}

}

}

</script>

在这个示例中，我们可以依次把数组“arrays”所对应的值和索引值遍历出来。输出结果为：理想,索引值0梦想,索引值1荣誉,索引值2光荣,索引值3任务准备：二、对象的渲染

v-for

指令除了可以遍历数组，还可以遍历对象的所有属性。示例如下。

<template>

<pv-for="(value,key,index)ofstudent">{{value}}--{{key}}--{{index}}</p>

</template>

<script>

exportdefault{

data(){

return{

student:{

name:"小红",

age:20,

class:"大一年级"}

}

}

}

</script>

在这个示例中，“(value,key,index)ofstudent”中value表示对象中属性值，key表示对象中属性名，index表示对象中属性的索引值，三者顺序不能改变。

输出结果为：小红—name—0

20—age—1

大一年级—class--2任务实施：任务描述：

利用Vue开发一个简单的员工列表页面，来实现员工信息的添加和删除。页面显示效果如图8.14所示。任务实施：实施步骤：1.创建并打开Vue项目vue_project。(1)

输入命令“npminitvue@latest”

设置项目名称“projectname:vue_project”(2)

输入命令“npminstal”安装依赖包。(3)

输入命令“npmrundev”运行项目。任务实施：2.编写vue文件。打开src文件夹，在App.vue中构建页面。<template>

<h3>员工信息表</h3>

<button>添加员工</button> 

<button>删除员工</button>

<tableborder="1"cellspacing="0"style="margin-top:10px;text-align:center;">

<tr><th>姓名</th><th>部门</th><th>性别</th><th>年龄</th>

</tr>

<tr><td>姓名</td><td>部门</td><td>性别</td><td>年龄</td>

</tr>

</table></template>任务实施：3.去除自带样式删除src文件夹下，main.js文件中的“import'./assets/main.css'”自带样式。4.添加script代码，定义data()中return回来的empolyees数组。<script>

exportdefault{

data(){

return{

empolyees:[]}

}

}</script>任务实施：5.添加script代码，在exportdefault{}中定义添加和删除员工信息的函数addemp()和delemp()。<script>

exportdefault{

methods:{

addemp(){

varempolyee={name:"小红",partment:"开发部",sex:"女",age:18}

this.empolyees.push(empolyee);},

delemp(){

this.empolyees.pop();}}}</script>任务实施：6.在table表格中，利用“v-for”指令实现列表渲染。<trv-for="iteminempolyees"><td>{{}}</td><td>{{item.partment}}部门</td><td>{{item.sex}}性别</td><td>{{item.age}}</td></tr>7.为“添加员工”按钮和“删除员工”按钮绑定单击事件函数。<button@click="addemp">添加员工</button><button@click="delemp">删除员工</button>

小结Vue基础操作（二）

一、列表渲染

1.基本数组列表渲染

2.复杂数组列表渲染3.多参数列表渲染

二、对象的渲染

任务测试：一、选择题1、在Vue项目中，页面列表渲染的指令是（）。A、v-ifB、v-bindC、v-forD、v-model2、在Vue中，“v-for”指令实现列表渲染时，语法格式为（）。A、iteminitemsB、itemonitemsC、forinitemsD、forofitems3、“v-for”指令除了可以遍历数组，还可以遍历对象的所有属性。其中遍历出的每条信息中不包括（）。A、indexB、keyC、valueD、number二、问答题

简述v-for指令实现页面列表渲染的基本过程。项目八浅谈Vue任务五

Vue的事件处理学习目标：知识目标：掌握内联事件处理器和方法事件处理器的定义方法，熟记自定义传参和事件传参的方法。技能目标：使用内联事件处理器和方法事件处理器，运用方法处理器完成自定义参数传参和事件参数传参。素质目标：培养学生实践操作能力，激发学生学习兴趣。任务准备：

Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。其中，事件处理是Vue框架非常重要的一部分，接下来我们详细讲解Vue事件处理的相关内容。一、事件处理可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。格式如下。

v-on:click="methodName"或@click="handler"事件处理的特点如下。(1)一般使用button按钮绑定事件。(2)事件的回调要在ViewModel的methods里面。(3)methods配置的函数都被vue所管理，this的指向是ViewModel或者实例对象。(4)@click="demo"和@click="demo($evetn)"区别在于后者可以传参。任务准备：二、事件处理器的类型1.内联事件处理器内联事件处理器是指事件被触发时执行的内联JavaScript语句（与onclick类似）。通常用于简单场景，示例如下。

<script>

exportdefault{

data(){

return{

num:0

}

}

}

</script>

<template>

<button@click="num++">计数</button>

<div>数值：{{num}}</div>

</template>

在这个示例中，每单击一次按钮button，num数值加1。任务准备：2.方法事件处理器

方法事件处理器：一个指向组件上定义的方法的属性名或是路径，示例如下。<script>

exportdefault{

data(){

return{num:0}

},

methods:{

addNum(){this.num++;}

}

}</script><template>

<button@click="addNum">计数</button>

<div>数值：{{num}}</div></template>

在这个示例中，methods是Vue实例上定义方法的地方，这些方法可以在Vue实例中使用，并可以被绑定到Vue模板中的事件上，this指向的是data返回的对象。任务准备：三、事件传参1.自定义参数传参很多时候，我们需要传递自定义参数，示例如下。

<script>

exportdefault{

data(){

return{num:0}

},

methods:{

addNum(msg){this.num++;console.log(msg);}

}

}

</script>

<template>

<button@click="addNum('hello')">计数</button>

<div>数值：{{num}}</div>

</template>

在这个示例中，我们可以自定义参数内容，在@click="addNum('hello')"中自定义参数为“hello”，在methods中的addNum(msg)函数中，msg就可以取到这个参数。任务准备：2.事件参数传参很多时候，除了需要传递自定义参数，还需要访问原生DOM事件。这时，可以向该处理器传入一个特殊的“$event”变量。“$event”常见用法就是在事件处理函数中捕获事件对象，它只能在template中使用，不能在JavaScript中直接访问，示例如下。

<script>

exportdefault{

data(){

return{arrs:["集体","光荣","梦想","腾飞"]}

},

methods:{getHandler(arr,e){console.log(arr);console.log(e);}

}

}

</script>

<template>

<h3>事件参数和自定义参数</h3>

<div@click="getHandler(item