《Vue.js前端框架基础项目式教程》（微课版）教案全套

191-XXXX学院教案教案（详案）2022-2023学年第2学期课程名称：Vue.js前端框架基础项目式教程课程代码：适用专业：大数据技术及应用教师姓名：所属系部：XXXXXXXXXXX学院职称：课时：总学时64（理实一体64）使用教材：教务处制

XX城市职业学院教学单元教案主题Vue实现单网页-输出Helloworld序号1课时2教学手段板书、多媒体教学方法讲授、讨论教学课型£理论£实训R一体化£（其它）教学目标能力目标：1.能掌握Vue.js的引入方式；2.了解前端开发模式的演变历程；3.能掌握HbuilderX软件的基本使用。知识目标：1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue的应用场景。素质目标：1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。教学重点1.能掌握Vue.js的引入方式；2.能掌握HbuilderX软件的基本使用。教学难点1.能掌握Vue.js的引入方式。教学过程设计备注任务1（输出Helloworld）（90分钟）第一课时一、创设情境，引入Vue.js框架1.教师通过应用场景描述，引出前端开发模式演变历程。Vue.js（简称Vue）是一个用于构建用户界面的JavaScript框架。随着Web项目的规模和复杂度的提升，前端开发模式经历了三个阶段的演变：模板渲染页面->AJAX前后端分离->MVVM。Vue是基于MVVM模式的前端框架。2.明确学习目标。了解前端开发模式演变的三个阶段了解MVVM模式了解Vue的核心思想和主要特性二、进行重点知识的讲解1.教师根据课件，介绍前端开发模式的三个阶段，以及各自特点。（1）基于模板渲染页面的开发模式基于模板渲染页面的开发模式主要是利用JSP（JavaServerPages，Java服务器页面）、PHP等技术创建页面模板，页面内容由后端计算生成，通过Web服务器将模板解析成HTML文件，经浏览器渲染后得到最终页面效果。（2）基于AJAX前后端分离的开发模式基于AJAX的开发模式使得Web应用可分为前端和后端，其中前端负责页面的布局与交互，后端负责业务逻辑的处理，前后端通过接口进行数据交互。（3）基于MVVM的开发模式MVVM（Model-View-ViewModel，模型-视图-视图模型）模式是一种简化用户界面的事件驱动编程方式。

2.教师根据课件，讲解MVVM模式的基本思想。以ViewModel（视图模型）层为枢纽，向上与View（视图）层进行双向数据绑定，向下与Model（模型）层通过接口交互数据，从而实现View和Model的自动同步。3.教师根据课件，讲解Vue的核心思想。（1）数据驱动（2）组件化2.教师根据课件，讲解Vue的主要特性。（1）轻量级（2）数据绑定（3）指令丰富（4）插件众多（5）组件化（6）虚拟DOM3.教师根据课件，讲解Vue应用开发相关的工具。（1）Vue库文件（2）VueCLI（3）Node.js、npm和webpack（4）ES6三、归纳总结，布置课后作业1.回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括前端开发模式演变的三个阶段，MVVM模式的基本思想，Vue框架的核心思想和主要特性，以及Vue应用开发相关的工具（Vue库文件、VueCLI等）的作用。2.布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3.使用在线学习平台下发课后作业。第二课时（Vue应用开发的环境搭建，体验Vue应用的开发与调试）一、回顾上节课内容，继续讲解本课时的知识1.教师对学生们的疑问进行统一答疑。2.回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了前端开发模式演变的三个阶段、Vue.js的基本概念和主要特性，以及Vue.js应用相关的工具。接下来，本节课将介绍Vue应用开发环境的搭建，包括开发工具安装配置、代码调试工具安装及使用方法，并结合“社会主义核心价值观网页”任务，体验Vue应用程序的构建、运行和调试过程。3.明确学习目标。了解Vue应用开发所需要的开发和调试工具掌握开发和调试工具的安装与使用熟悉Vue应用的开发、运行和调试流程二、进行重点知识的讲解1.教师根据课件，介绍Vue应用开发所需的开发和调试工具。（1）开发工具：HbuilderX。2.教师根据课件，介绍开发工具和调试工具的安装与使用，并结合安装与使用的演示进行讲解。3.Vue.js的引入方式和Vue2、Vue3的框架结构。4.教师根据课件，介绍Vue应用的开发、运行和调试流程，并通过实战项目进行演示。（1）需求描述历史名城游网站需要制作一个HTML页面，用于介绍某个历史名城的基本情况。页面内容包括标题、介绍文字、点赞按钮和点赞数。（2）实现思路使用HbuilderX创建一个HTML程序，引入Vue库文件，并编写相应的HTML、CSS和JavaScript代码。使用Chrome浏览器运行该程序，并通过调试工具查看相关信息。（3）任务实施任务1-1构建Vue应用程序任务1-2运行并调试Vue应用程序三、归纳总结，布置课后作业1.回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的Vue应用开发环境的搭建，包括开发工具安装配置、代码调试工具安装及使用方法，熟悉Vue应用的开发、运行和调试流程。2.布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3.使用在线学习平台下发课后作业。作业布置见教材第1章配套的习题教学反思

XXXX职业学院教学单元教案主题项目二-实现简易数字易计数器序号2课时2教学手段板书、多媒体教学方法讲授、讨论教学课型£理论□实训■一体化□（其它）教学目标能力目标：1.能掌握Vue实例；2.能掌握Vue的数据绑定；3.掌握Vue的事件监听。知识目标：1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue实例的创建方法；4.掌握插值表达式的基本使用；5.掌握模板语法的基本使用。素质目标：1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。教学重点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用。教学难点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用教学过程设计备注一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、教师通过直接导入的方式导入新课开发环境介绍完毕以后，我们就可以小试牛刀了，使用Vue.js框架，实现一个简单的计数器，实现点击加1或减1操作。新课讲解知识点1-DOM基础知识DOM，全称为DocumentObjectModel，即文档对象模型。它是一个用于表示和交互网页中的文档结构的编程接口，由万维网联盟（W3C）制定。DOM将网页文档视为一个由节点组成的树状结构，每个节点都代表文档中的一个元素、属性、文本或注释等。这些节点之间存在层级关系，形成一个层次结构。通过DOM，开发者可以使用编程语言（如JavaScript）来访问、操作、修改网页的内容、结构和样式。例如，开发者可以获取元素、修改元素、添加和删除元素，以及处理事件等。DOM提供了对网页内容的编程访问，使得开发者可以在客户端实现丰富的用户交互和动态效果，提升用户体验。HTMLDOM模型被结构化为对象树，对象的HTMLDOM树为如图所示。知识点2-Vue的模板语法之插值表达式插值表达式是一种用于模板引擎中的表达式，它可以方便地将数据与页面内容绑定起来，使得页面展现更具动态性。通常情况下，插值表达式会被包含在特定的标记中，例如{{}}，表示将表达式的结果插入到标记所在的位置。Vue模板语法有2大类。（1）Vue的插值\t"/weixin_46841213/article/details/_blank"表达式{{}}功能:用于解析标签体内容。写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。（2）指令语法Vue总共提供了14个指令自定义指令，Vue提供了每一个指令都有特殊的作用，它们可以应用于模板中的元素，并且指定Vue如何处理DOM。Vue指令实质上就是html标签特殊的属性，Vue给html标签增加了一些自定义的属性，这些属性都是以v-开头都叫vue的指令。Vue指令的主要功能总结为一句话就是用于解析标签(包括:标签属性、标签体内容、绑定事件等）。本节中，我们主要来学习一下Vue的插值表达式{{}}。实际上，插值表达式的主要作用是进行数据绑定，最常见的形式是使用双大括号的文本插值。例如：Message:{{msg}}标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。{{}}对JavaScript表达式支持，例如：01<divid="app">02<h2>插值语法</h2>03<h4>你好，{{msg}}</h4>04</div>05<script>06const{createApp}=Vue07createApp({08data(){09return{10msg:'Helloworld'11}12}13}).mount('#app')14</script>JavaScript表达式总会返回一个值，而插值的意思就是把JavaScript表达式返回的结果插入到{{}}所在的位置。简单来说，插值的时候总需要吧一个值插入到模板中的大括号的位置，所以双大括号内容需要数据JavaScrpit代码来返回一个值。vue可以通过data提供数据。data必须是一个函数，并且返回一个对象，这个对象就代表vue提供的数据。data属性是Vue实例的一个选项，用于存储该Vue实例的响应式数据。Vue会自动追踪这些数据的变化，并在数据变化时更新DOM。在Vue组件中，data必须是一个函数，这个函数返回一个对象，对象中包含了所有需要在组件中使用的响应式数据。这样做是为了确保每个组件实例都可以维护一份被返回对象的独立的拷贝，避免多个实例之间共享同一个数据对象。01<script>02 exportdefault{03 data(){04 return{05 money:100，06 msg:'hello'，07constobj={name:'张三',，age:25，};07 }08 } 09 } 10 </script>使用{{}}显示数据。01<template>02 <divclass="app">03 <div>{{money}}</div>04 <div>{{msg}}</div>05 <div>{{}}</div>06 <div>{{msg.toUpperCase()}}</div>07 <div>{{obj.age>18?'成年'：'未成年'}}</div>08 </div> 09</template>01行定义页面模版部分；2行定义类名为app的容器；3行定义的div容器中显示变量money的内容；4行定义的div容器显示变量msg的内容；5行在div容器中显示对象obj的name属性；6行在div容器中显示变量msg全部转为大写的结果；7行在div容器中使用三元表达式显示对象obj的age属性值。四、上机练习布置上机任务，上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。第二课时一、回顾上节课内容二、明确本节课的任务三、进行重点知识的讲解1.Vue3的引入和使用来看一个具体的例子：1)首先，我们创建一个.html文件，用于交互。01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title></title>06 </head>07 <body>08 </body>09</html>（2）接着我们引入Vue3的相关包，这里引入的方式和之前JavaScript中介绍的引入的方式一样，直接在head部分进行引入即可。<!--引入Vue3--> <scriptsrc="/vue@next"></script>注意：/vue@next所代表的网站可能失效，也可以使用/vue@3.4.20/dist/vue.global.js，当然也可以将改网址内容下载到本地，进行本地引入也是可以的。如将上面网址的内容下载到本地，保存到本地后，也可以使用<scriptsrc="vue.global.js"></script>引入，当然要求此js文件和网页需要在一个目录下。（3）然后就是在body标签中添加模板用于将数据渲染到DOM的系统。01constapp={02 data(){03 return{04 message:'HelloWorld!'05 }06 }07 }08 Vue.createApp(app).mount('#app')Vue.createApp(app)表示创建Vue实例。Vue.createApp(app).mount(“#app)表示id为app的容器。(4)最后得到我们的完整文件如下。01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title>Vue3入门实例</title>06 <!--引入Vue3-->07 <scriptsrc="/vue@3.4.20/dist/vue.global.js"></script>08 </head>09 <body>10 <divid="app">11 {{message}}12 </div>13 <script>14 constapp={15 data(){16 return{17 message:'HelloWorld!'18 }19 }20 }21 Vue.createApp(app).mount('#app') 22 </script>23 </body>24</html>（4）将文件用浏览器打开，在页面中应该就会显示如下信息了，运行结果如图所示意。四、上机练习上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。五、归纳总结教师回顾本节课所讲的内容，对学生出现的共性问题，予以重点强调和讲解。六、布置作业教师通过高校教辅平台（/）布置本节课作业以及下节课的预习作业。作业布置教材项目一配套的习题教学反思通过网络查阅相关资料，培养学生查阅相关知识的能力。

XXXX职业学院教学单元教案主题项目二-实现简易数字易计数器序号3课时2教学手段板书、多媒体教学方法讲授、讨论教学课型£理论□实训■一体化□（其它）教学目标能力目标：1.能掌握Vue实例；2.能掌握Vue的数据绑定；3.掌握Vue的事件监听。知识目标：1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue实例的创建方法；4.掌握插值表达式的基本使用；5.掌握模板语法的基本使用。素质目标：1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。教学重点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用。教学难点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用教学过程设计备注一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、教师通过直接导入的方式导入新课开发环境介绍完毕以后，我们就可以小试牛刀了，使用Vue.js框架，实现一个简单的计数器，实现点击加1或减1操作。新课讲解知识点1-Vue的模板语法之指令语法1Vue中的模板语法中的指令语法。什么是指令呢？Vue指令实际上就是专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性。DOM元素的行间属性，Vue提供了内置的指令，必须以v-开头，后面的值均为变量。常用的指令语法一共有14各，他们分别是Vue提供的14个指令v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-\t"/shixiaoxiao106/article/details/_blank"model、v-slot、v-pre、v-cloak、v-once等。（1）指令v-textv-text的作用是在容器标签内控制字符串内容的输出，v-text输出纯文本。如果是纯文本输出，那么输出的字符串结果和插值输出一样的。看一个例子：01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title>v-text</title>06 <!--引入Vue3-->07 <scriptsrc="vue.global.js"></script>08 </head>09 <body>10 <divid="app"class="demo">11 <p>使用双大括号的文本插值：{{rawHtml}}</p>12 <p>使用v-text：<spanv-text="rawHtml"></span></p>13 </div>14 <script>15 constApp={16 data(){17 return{18 rawHtml:'<spanstyle="color:red">这里会显示成红色</span>'19 }20 }21 }22 Vue.createApp(App).mount("#app")23 </script>24 </body>25</html>7行引入vue；10行定义id等于app的div容器（dom节点）；11~12行使用了文本插值；15行定义实例对象；16~19行定义data属性，定义变量rawHtml的值；22行将app节点挂载到App实例上。运行程序，结果如图所示。这里，v-text和插值法都是将定义的字符串变量进行了原样输出。实际上，我们这里给出的网页的代码，如果要使得网页中的代码起作用，就要使用v-html指令。（2）v-html指令v-html指令可以输出解析后的文本，请看下面的例子。01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title>v-text</title>06 <!--引入Vue3-->07 <scriptsrc="vue.global.js"></script>08 </head>09 <body>10 <divid="app"class="demo">11 <p>使用双大括号的文本插值：{{rawHtml}}</p> 12 <p>使用v-text：<spanv-text="rawHtml"></span></p>13 <p>使用v-html：<spanv-html="rawHtml"></span></p>14 </div>15 <script>16 constApp={17 data(){18 return{19 rawHtml:'<spanstyle="color:red">这里会显示成红色</span>'20 }21 }22 }23 Vue.createApp(App).mount("#app")24 </script>25 </body>26</html>7行引入vue；10行定义id等于app的div容器（dom节点）；11行使用了文本插值；12行使用v-text将字符串变量进行原样暑促；13行使用v-html将字符串变量解析后进行输出，16~22行表示实例化app变量；17行定义data属性，定义变量rawHtml的值；22行将app节点挂载到App实例上。运行结果如图2-6：图2-6v-html输出解析后的文本的运行结果（3）v-show指令Vue中非常常用的两个条件指令—v-show和v-if。v-show指令是根据条件显示DOM元素的指令，可以用来动态控制DOM元素的显示和隐藏。v-show后面跟的是判断条件，不管初始条件是什么，元素总是会被渲染。语法：v-show="判断变量"当v-show值为false时，给对应DOM添加display:none属性；当v-show值为true时，绑定DOM会移除display:none，此时并不是把display变为block，而是保持元素style的原始性，也就是说，不管初始条件是什么，元素总是会被渲染。从实现效果可以看出DOM元素始终是存在的，v-show只是利用元素的display属性控制着元素的显示隐藏。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-show指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <pv-show="flag2">v-show的使用true显示</p> 11 <pv-show="flag1">v-show的使用false不显示</p>12</div>13</body>14<script>15 constApp={16 data(){17 return{18 flag1:false，19 flag2:true，20 }21 }22 }23 Vue.createApp(App).mount("#app")24</script>25</html>6行引入uve.global.js；9行定义id为app的容器；10行在p标签中使用v-show显示或隐藏元素，此时v-show的值实际为true，故应该显示p标签中的内容；11行在p标签中使用v-show显示或隐藏元素，此时v-show的值实际为false，故此时没有内容显示；15行实例化App对象；16~19行定义data属性，定义变量flag1和flag2；23行将app节点挂载到App实例上。运行结果如图：四、上机练习布置上机任务，上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。第二课时一、回顾上节课内容二、明确本节课的任务三、进行重点知识的讲解1.v-if指令和事件绑定指令v-on看到v-if，我们可以想到if…else条件判断语句，没错，Vue中还提供了v-else指令和v-else-if指令，学会v-if指令其他两个指令也就会了。这样我们再来理解v-if指令，就是根据表达式值的真假来销毁或者重建一个我们绑定的DOM元素。当条件为假的时候，DOM元素被删除，条件为真的时候，就重建一个绑定的DOM元素。首先看一个最直观的例子：01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <pv-if=true>您考了{{score}}</p> <!--true会直接显示--> 11 <pv-if=false>您考了{{score}}</p> <!--false不会渲染和显示-->12</div>13</body>14<script>15 constApp={16 data(){17 return{18 score:95 19 }20 }21 }22 Vue.createApp(App).mount("#app")23</script>24</html>这个例子中，定义了变量score等于整数95，然后使用v-if直接给定true和false条件，那么这里第一个p标签会显示，第2个p标签不会显示的。v-if是作为判断语句之用，v-else则是和v-if一起出现，当v-if判断为true时，v-else不执行；当v-if判断为false时，v-else才执行，这里给出一个例子。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if-else指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <h2v-if="isShow">11 {{message}}12 </h2>13 <h1v-else>这里v-if为false时显示</h1>14</div>15</body>16<script>17 constApp={18 data(){19 return{20 isShow:false，21 message:'HelloWorld!'22 }23 }24 }25 Vue.createApp(App).mount("#app")26</script>27</html>在上面的例子中，变量isShow的值为false，那么当v-if对isShow代表的条件进行判断的时候，此时v-if代表的h2标题不会被执行，而下面的h1标题会被执行。上面例子的运行如图所示。接下来，我们对比下v-if和v-show的异同。v-if和v-show看起来似乎差不多，当条件不成立时，其所对应的标签元素都不可见，但是这两个选项是有区别的:（1）v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。（2）v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS（display）切换。使用场景:（1）v-if适用于不需要频繁切换元素显示和隐藏的情况。（2）v-show适用于需要频繁切换元素的显示和隐藏的场景。我们再来介绍一下v-else-if指令的使用。v-else-if会在多个判断语句时使用到，但不常用。v-else-if：充当v-if的“else-if块”，可以连续多次使用，我们通过一个具体的例子来加以说明。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if-else指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <pv-if="grade==='A'">11 A12 </p>13 <pv-else-if="grade==='B'">14 B15 </p>16 <pv-else-if="grade==='C'">17 C18 </p>19 <pv-else>20 NotA/B/C21 </p>22 </div>23</body>24<script>25 constApp={26 data(){27 return{28 grade:'C'，29 message:'HelloWorld!'30 }31 }32 }33 Vue.createApp(App).mount("#app")34</script>35</html>上面的例子中，变量grade的值给成了字符C，13~14行判断grade的值等于字符A，显然此时不会输出A；15~16行判断grade的值是否等于字符B，显然此时的条件也是不满足的；17~18行判断grade的值是否等于字符C，此时条件满足，会输出字符。运行程序，结果如图所示。（5）事件绑定指令v-onVue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，原生的DOM对象有onclick、oninput等原生事件，在vue中为v-on:click、v-on:input等。v-on简写为@，看一个简单的例子。01<!DOCTYPEhtml>02<htmllang="en">03<head>04<metacharset="UTF-8">05<metaname="viewport"content="width=device-width，initial-scale=1.0">06<title>v-on的使用</title>07</head>08<body>09<divid="app">10<inputtype="button"value="点击"v-on:click="add">11</div>12<scriptsrc="/npm/vue@2/dist/vue.js"></script>13<script>14constvm=newVue({15el:"#app"，16data:{17tips:"请输入..."18}，19methods:{20 //声明方法121//add:function(){22//alert('11111')23//}24//或25//声明方法226add(){27alert('点击了')28}29}30})31</script>32</body>33</html>9~11行定义id等于app的容器，在该容器中放置了input标签，并使用v-on方法设置了点击事件，关联到了函数add；12行引入VUE；13~14行在<script>标签内部，通过newVue({...})创建了一个新的Vue实例。这个实例是Vue应用的核心，它管理着应用的数据和逻辑；15~18行指定了这个Vue实例将要挂载（管理）的DOM元素。这里的#app是一个ID选择器，意味着Vue实例将会接管ID为app的DOM元素（通常是一个<div>元素），并管理其内部的DOM，定义了Vue实例的数据对象。在这个对象中，我们定义了一个名为tips的属性，其初始值为“请输入..”。这个数据是响应式的，意味着Vue会追踪它的变化，并在数据更新时重新渲染DOM；19~29行定义了定义了一组可以在Vue实例中调用的方法。在这个例子中，定义了一个名为add的方法。methods属性是Vue实例的另一个选项，它包含了Vue实例上所有的方法。这些方法可以在模板中通过表达式调用，或者在Vue实例的生命周期钩子中调用。methods中的方法可以直接访问data中的数据，并且可以执行一些逻辑操作，如更新数据、处理用户输入等。注意，这里使用的Vue2的语法。运行程序，结果如图所示。求计数器的最大值和最小值四、上机练习上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。五、归纳总结教师回顾本节课所讲的内容，对学生出现的共性问题，予以重点强调和讲解。六、布置作业教师通过高校教辅平台（/）布置本节课作业以及下节课的预习作业。作业布置教材项目一配套的习题教学反思通过网络查阅相关资料，培养学生查阅相关知识的能力。

XXXX职业学院教学单元教案主题项目二-实现简易购物车序号4课时2教学手段板书、多媒体教学方法讲授、讨论教学课型£理论□实训■一体化□（其它）教学目标能力目标：1.能掌握Vue实例；2.能掌握Vue的数据绑定；3.掌握Vue的事件监听。知识目标：1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue实例的创建方法；4.掌握插值表达式的基本使用；5.掌握模板语法的基本使用。素质目标：1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。教学重点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用。教学难点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用教学过程设计备注一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、教师通过直接导入的方式导入新课介绍了v-show、v-if、v-on等指令后，我们介绍了一个简单的计数器的实现，今天再实现计数器的基础上，来实现一个简易购物车。新课讲解Vue的模板语法之指令语法21）属性绑定指令v-bind该指令的主要作用是为元素绑定属性，完整写法是v-bind:属性名，简写的话可以直接省略v-bind，只保留:属性名。注意：class属性、style属性、value属性、href属性，只要是属性都可以绑定，可以绑定标签的任意属性，甚至标签的自定义属性也可以使用v-bind指令进行绑定。首先看一个绑定图片的例子。下面通过绑定的img的src，以及a标签的href属性分别来演示v-bind的使用，下面通过一个具体的例子看看动态绑定图片的路径是如何完成的。01<imgv-bind:src=”src”/>02<script>03constapp=Vue.create){04data:{05src:”1.jpg”06}07}08)09</script>具体实现的代码如下：01

<scriptsrc="/vue@next"></script>

02

<divid="app"><imgv-bind:src="img"v-bind:alt="alt"></div>03<script>04constapp=Vue.createApp({05

data(){06

return{07

img:'/upload/image/20220720/6379395006328697315230168.jpg'，08

alt:'这是第一个图片'09

}10

}，11})12app.mount('#app')13</script>

运行结果如图所示。可以增加一个按钮来实现图片的切换，在id="app"的div中，增加如下代码：上面代码为button绑定一个handle事件函数。下面的代码具体给出了handle函数，在该函数中，实现了对img属性的重新赋值。V-bind有简化写法：<img:src=”img”alt=””>（2）双向数据绑定指令v-modev-mode指令在表单元素商可以创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。什么是双向数据绑定呢？数据可以更新到视图，通过视图可以更改数据。下面通过一个具体例子来说明。01

<scriptsrc="/vue@next"></script>

02

<divid="app">03

<inputtype="text"v-model="value">04

</br>05

{{value}}06

</div>07

<script>08

constapp=Vue.createApp({9

data(){10

return{11

value:''12

}13

}，1415

})16

constvm=app.mount('#app')17

</script>运行结果如图所示。在文本框中输入数据，可以通过插值方法立即能够获取到，这就是当数据更新时，视图也发生了变化。按下google浏览器的F12，进入开发者模式，选择Console，在如图所示的地方，输入“vm.value”然后回车，可以获取到刚刚在文本框输入的值。可以直接给vm.value进行赋值，令vm.value="zhangsan"，输入命令后进行回车，观察网页的变化，如图所示。这就是所谓的通过视图可以更改数据。四、上机练习布置上机任务，上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。第二课时一、回顾上节课内容二、明确本节课的任务三、进行重点知识的讲解（3）数据遍历v-for指令v-for可以实现页面列表渲染，常用来循环数组、对象、字符串、数字等。v-for指令需要使用iteminitems形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。下面我们来看一个实际例子。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <!--1.对列表的循环-->11 <h3>列表的循环</h3>12 <h4v-for="iindata1">{{i}}</h4>13 <!--2.对对象的循环-->14 <h3>对象带kv的循环</h3>15 <span>key变量放后面，value变量放前面</span>16 <h4v-for="(val，key)indata2">key是：{{key}}，value是：{{val}}</h4>17 <!--3.对字符串的循环-->18 <h4v-for="iindata3">{{i}}</h4>19 <h3>字符串的循环，带索引</h3>20 <h4v-for="(i，index)indata3">索引{{index}}的字符是{{i}}</h4>21 <!--4.对数字的循环，变量是5，相当于1...5-->22 <h4v-for="iindata4">{{i}}</h4>23 <h3>循环数字，带索引</h3>24 <h4v-for="(i，index)indata4">索引{{index}}的数字{{i}}</h4>25</div>26</body>27<script>28 constApp={29 data(){30 return{31 data1:[1，2，3]，32 data2:{name:'jack'，age:18}，33 data3:'helloworld'，34 data4:5 35 }36 }37 }38 Vue.createApp(App).mount("#app")39</script>40</html>运行程序，结果如图所示。四、上机练习上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。五、归纳总结教师回顾本节课所讲的内容，对学生出现的共性问题，予以重点强调和讲解。六、布置作业教师通过高校教辅平台（/）布置本节课作业以及下节课的预习作业。作业布置教材项目一配套的习题教学反思通过网络查阅相关资料，培养学生查阅相关知识的能力。

XXXX职业学院教学单元教案主题项目二-实现简易购物车序号5课时2教学手段板书、多媒体教学方法讲授、讨论教学课型£理论□实训■一体化□（其它）教学目标能力目标：1.能掌握Vue实例；2.能掌握Vue的数据绑定；3.掌握Vue的事件监听。知识目标：1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue实例的创建方法；4.掌握插值表达式的基本使用；5.掌握模板语法的基本使用。素质目标：1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。教学重点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用。教学难点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用教学过程设计备注一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、教师通过直接导入的方式导入新课一个简易购物车。新课讲解1.Vue的模板语法之指令语法21）属性绑定指令v-bind该指令的主要作用是为元素绑定属性，完整写法是v-bind:属性名，简写的话可以直接省略v-bind，只保留:属性名。注意：class属性、style属性、value属性、href属性，只要是属性都可以绑定，可以绑定标签的任意属性，甚至标签的自定义属性也可以使用v-bind指令进行绑定。首先看一个绑定图片的例子。下面通过绑定的img的src，以及a标签的href属性分别来演示v-bind的使用，下面通过一个具体的例子看看动态绑定图片的路径是如何完成的。01<imgv-bind:src=”src”/>02<script>03constapp=Vue.create){04data:{05src:”1.jpg”06}07}08)09</script>具体实现的代码如下：01

<scriptsrc="/vue@next"></script>

02

<divid="app"><imgv-bind:src="img"v-bind:alt="alt"></div>03<script>04constapp=Vue.createApp({05

data(){06

return{07

img:'/upload/image/20220720/6379395006328697315230168.jpg'，08

alt:'这是第一个图片'09

}10

}，11})12app.mount('#app')13</script>

运行结果如图所示。可以增加一个按钮来实现图片的切换，在id="app"的div中，增加如下代码：上面代码为button绑定一个handle事件函数。下面的代码具体给出了handle函数，在该函数中，实现了对img属性的重新赋值。V-bind有简化写法：<img:src=”img”alt=””>（2）双向数据绑定指令v-modev-mode指令在表单元素商可以创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。什么是双向数据绑定呢？数据可以更新到视图，通过视图可以更改数据。下面通过一个具体例子来说明。01

<scriptsrc="/vue@next"></script>

02

<divid="app">03

<inputtype="text"v-model="value">04

</br>05

{{value}}06

</div>07

<script>08

constapp=Vue.createApp({9

data(){10

return{11

value:''12

}13

}，1415

})16

constvm=app.mount('#app')17

</script>运行结果如图所示。在文本框中输入数据，可以通过插值方法立即能够获取到，这就是当数据更新时，视图也发生了变化。按下google浏览器的F12，进入开发者模式，选择Console，在如图所示的地方，输入“vm.value”然后回车，可以获取到刚刚在文本框输入的值。可以直接给vm.value进行赋值，令vm.value="zhangsan"，输入命令后进行回车，观察网页的变化，如图所示。这就是所谓的通过视图可以更改数据。四、上机练习布置上机任务，上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。第二课时一、回顾上节课内容二、明确本节课的任务三、进行重点知识的讲解1.数据遍历v-for指令v-for可以实现页面列表渲染，常用来循环数组、对象、字符串、数字等。v-for指令需要使用iteminitems形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。下面我们来看一个实际例子。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <!--1.对列表的循环-->11 <h3>列表的循环</h3>12 <h4v-for="iindata1">{{i}}</h4>13 <!--2.对对象的循环-->14 <h3>对象带kv的循环</h3>15 <span>key变量放后面，value变量放前面</span>16 <h4v-for="(val，key)indata2">key是：{{key}}，value是：{{val}}</h4>17 <!--3.对字符串的循环-->18 <h4v-for="iindata3">{{i}}</h4>19 <h3>字符串的循环，带索引</h3>20 <h4v-for="(i，index)indata3">索引{{index}}的字符是{{i}}</h4>21 <!--4.对数字的循环，变量是5，相当于1...5-->22 <h4v-for="iindata4">{{i}}</h4>23 <h3>循环数字，带索引</h3>24 <h4v-for="(i，index)indata4">索引{{index}}的数字{{i}}</h4>25</div>26</body>27<script>28 constApp={29 data(){30 return{31 data1:[1，2，3]，32 data2:{name:'jack'，age:18}，33 data3:'helloworld'，34 data4:5 35 }36 }37 }38 Vue.createApp(App).mount("#app")39</script>40</html>运行程序，结果如图所示。2.监听属性监听属性(watch)是用来监听data中的数据是否发生变化，一般是监听data中的某个属性。watch中可以执行任何逻辑，如函数节流，Ajax异步获取数据，甚至操作DOM。下面看一个案例。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>监听属性</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app"> 10 用户名：<inputtype="text"v-model="username"><br>11 {{username}}<br>12 年龄：<inputtype="text"v-model="age"><br>13 {{age}}<br> 14</div>15</body>16<script> 17 constapp=Vue.createApp({18 data(){19 return{20 username:'许'，21 age:'多多' 22 } 23 }， 24 watch:{25 //监听userName的变化26 //有两个参数，newValue表示变化后的值，oldValue表示变化前的值27 username:function(newValue，oldValue){28 console.log('修改前的值：'+oldValue);29 console.log('修改后的值：'+newValue);30 }，31 //监听age的变化32 age:function(newValue，oldValue){33 console.log('修改前的值：'+oldValue);34 console.log('修改后的值：'+newValue);35 }36 }，37 })38 app.mount('#app')39</script> 40</html>06行引入vue；09行定义id为app的容器；10行放置文本输入框并和username进行双向数据绑定；11行使用插值表达式显示变量username的值；12行放置文本输入框并和变量age进行双向数据绑定；13行使用插值表达式显示变量age的值；17行创建vue实例；18~23行定义data属性，定义变量username和age的值；24~37行设置监听属性；27行设置对变量username监听，newValue表示变化后的值，oldValue表示变化前的值；28~29行输出newValue和oldValue的值；32行设置对变量age的监听，33~34行打印输出修改前的值和修改后的值。 运行程序，结果如图2-18所示。四、上机练习上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。五、归纳总结教师回顾本节课所讲的内容，对学生出现的共性问题，予以重点强调和讲解。六、布置作业教师通过高校教辅平台（/）布置本节课作业以及下节课的预习作业。作业布置教材项目一配套的习题教学反思通过网络查阅相关资料，培养学生查阅相关知识的能力。

XXXX职业学院教学单元教案主题项目二-实现简易购物车序号6课时2教学手段板书、多媒体教学方法讲授、讨论教学课型£理论□实训■一体化□（其它）教学目标能力目标：1.能掌握Vue实例；2.能掌握Vue的数据绑定；3.掌握Vue的事件监听。知识目标：1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue实例的创建方法；4.掌握插值表达式的基本使用；5.掌握模板语法的基本使用。素质目标：1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。教学重点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用。教学难点1.掌握插值表达式的基本使用；2.掌握模板语法的基本使用教学过程设计备注一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、教师通过直接导入的方式导入新课Vue.js中的计算属性是基于它的响应式系统来实现的，它可以根据Vue实例的数据状态来动态计算出新的属性值。在Vue组件中，计算属性常用于对数据进行处理和转换，以及动态生成一些需要的数据，我们有必要掌握下计算属性。新课讲解1.计算属性什么是计算属性呢？模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。各位同学可以计算下每一个学期自己所有的消费明细，自己每一年的消费明细，理性消费，尊重父母的劳动成果，不可盲目的攀比，要形成正确的消费观。我们首先看一个案例。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>Computed</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <p>原始信息为:"{{message}}"</p>11 <p>使用计算属性处理后的数据:"{{reversedMessage}}"</p><!-- 把复杂处理放在了计算属性里面了-->12</div>13</body>14<script>15 constApp={16 data(){17 return{18 message:'Hello' 19 } 20 }，21 computed:{22 reversedMessage:function(){23 //`this`指向vm实例24 returnthis.message.split('').reverse().join('')25 }26 }27 }28 Vue.createApp(App).mount("#app")29</script>30</html>06行引入vue；09行定义id为app的div容器；10行使用插值表达式调用变量message的值；11行显示计算属性reversedMessage的值；15行定义名为app的常量；16~20行表示定义data属性，该属性中定义了message变量；21~27行定义了计算属性reversedMessage，24行将message变量进行字符上的翻转作为计算属性的值。计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。注意：计算属性实际上可以理解为能够在里面写一些计算逻辑的属性。具有的作用：一是减少模板中的计算逻辑；二是有数据缓存功能，当我们的数据没有变化的时候，不会再次执行计算的过程。每一个计算属性都包含一个getter和一个setter，我们上面的两个示例都是计算属性的默认用法，只是利用了getter来读取。此时的计算属性就是用到了setter函数，在你需要时，也可以提供一个setter函数，显示的表现出来。当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义的操作，例如：01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>Computed</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <button@click="updateName">修改计算属性的值</button><br>11 姓：<inputtype="text"v-model="name1"><br>名：12 <inputtype="text"v-model="name2"><br>全称：13 <inputtype="text"v-model="fullname"><br>14 <inputtype="text"v-model="fullname"><br>15 <inputtype="text"v-model="fullname"><br>16 <inputtype="text"v-model="fullname"><br> 17</div>18</body>19<script> 20 constapp=Vue.createApp({21 data(){22 return{23 name1:'zhang'，24 name2:'san' 25 } 26 }， 27 computed:{28 fullname:{29 //getter 30 get:function(){31 console.log("有人读取了fullname");32 return1+'-'+233 }，34 //setter35 set:function(newValue){36 this.message=newValue;37 console.log("set方法被触发了");38