《Vue.js前端框架基础项目式教程》微课版高职全套教学课件

《Vue.js前端框架基础项目式教程》项目1Vue实现单网页项目2实现简易购物车功能项目3Vue实现音乐的播放项目4Vue组件化开发企业官网的登录和注册页项目5Vue组件化开发企业官网项目6实现网站简易后台系统项目7网站应用发布及部署全套可编辑PPT课件

本课件是可编辑的正常PPT课件

项目一Vue实现单网页本课件是可编辑的正常PPT课件

项目要

求本项目主要使用HBuilderX开发工具，使用Vue.js的CDN引入和Vue.js的本地引入两种方式开发单页面，通过单页面的开发来理解Vue.js来操作网页DOM的强大。本课件是可编辑的正常PPT课件

项目分

析要完成项目任务，需要掌握Vue.js的定义、特点、应用场景、Vue.js的CDN引入、Vue.js的本地引入、开发工具HbuilderX的基本使用等知识。本课件是可编辑的正常PPT课件

项目目

标【知识目标】1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue实例的创建方法；4.掌握插值表达式的基本使用；5.掌握模板语法的基本使用本课件是可编辑的正常PPT课件

项目目

标【技能目标】1.能掌握Vue实例；2.能掌握Vue的数据绑定；3.掌握Vue的事件监听。本课件是可编辑的正常PPT课件

项目目

标【素养目标】1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神；本课件是可编辑的正常PPT课件

项目目

标【思政目标】1.培养学生努力拼搏、踔厉奋发的奋斗精神；2.树立社会主义价值观。本课件是可编辑的正常PPT课件任务一输出Helloworld--任务演示本节乃至本项目内容讲述如何在不使用项目构建工具的条件下，安装和引入Vue.js，本小节的任务是使用Vue.js，在网页上输出HelloWorld。本课件是可编辑的正常PPT课件任务一

Vue实现单网页–知识准备Vue安装HbuilderX软件的安装Vue基础本课件是可编辑的正常PPT课件1.Vue基础Vue.js是一套用于构建用户界面（UserInterface，UI）的渐进式框架。程序员这样评价它：“Vue.js在兼具Angular.JS和React优点的同时，还剔除了它们的缺点。”常见的互联网技术网站掘金网、娱乐动漫网站哔哩哔哩、点餐App饿了么等都是用Vue.js开发的，如左图(掘金网首页)和右图(饿了么App首页)所示。本课件是可编辑的正常PPT课件1.Vue基础Vue基础-Vue的特点轻量级框架:是相对于重量级框架的一种设计模式，轻量级框架不带有侵略性应用程序接口（ApplicationrogrammingInterface，API），对容器也没有依赖性，易于配置，易于通用，启动时间较短。

1

2

双向数据绑定:我们不需要关心文档对象模型DocumentObjectModel，DOM）是怎样更新数据的，数据的改变可直接反映到DOM结构里。

3

带有特殊的指令:指令(Directives)带有v-前缀的特殊特征，当表达式的值改变时，指令会将其产生的连带影响响应式地作用于DOM。

4

插件化:Vue.js目前只提供基本的页面开发的功能，如果想开发更为复杂的场景需要一些其他插件的辅助。如路由、状态管理等。

5

简单:Vue.js学习使用难度不高，由中国人开发，中文文档很丰富，轻量化，性能好，可以利用虚拟DOM提高页面更新的速度。本课件是可编辑的正常PPT课件1.Vue基础Vue基础-MVVM设计模式介绍传统的模型-视图-控制器（Model-View-Controller，MVC）设计模式。Vue.js采用模型-视图-视图模型（Model-View-ViewModel，MVVM）的设计模式。是一个同步View和Model的对象。由数据驱动视图，实现双向绑定，View的变化会自动反映在ViewModel中。ViewModel代表UI组件，它负责将数据模型转化成UI进行展现View代表数据模型，用户可以在Model中定义数据修改和操作的业务逻辑Model本课件是可编辑的正常PPT课件1.Vue基础Vue基础-MVVM设计模式介绍例如在打开一个网站时，首先映入眼帘的是网站的外观，也就是网站的结构布局，这些内容就代表View，如图所示。当我们在网站上点击或输入内容时，需要与网站进行交互的逻辑通常被放在ViewModel里面；而网站上的数据请求等需要对数据库进行读取操作的部分通常被放在Model里面。它们彼此之间分工明确，相互独立。本课件是可编辑的正常PPT课件1.Vue基础Vue基础-MVVM设计模式介绍MVVM设计模式的工作原理如图所示。本课件是可编辑的正常PPT课件1.Vue基础Vue基础-Vue.js的发展历程加入了TypeScript并支持渐进式网页应用（ProgressiveWebApp，PWA），调整了目录结构，修改了ESLint、Babel、browserslist相关配置等。VueCLI3.0优化API（删除或、新增）、提升性能、改善生命周期函数和其他方法、拓展vue.js的使用场景。vue.js2.0简易上手的良好体验，同时尽可能地避免因一时的方便简易而影响长期的可维护性。vue.js1.0Vue.js的开发者是尤雨溪，Vue.js最早是一个单纯的实验项目。vue.js诞生本课件是可编辑的正常PPT课件1.Vue基础Vue基础-为什么要使用Vue.js以前，前端开发者开发HTML静态模板页面，是通过原生JavaScript语言操作DOM节点来实现页面元素的更新的。JQuery，它把操作DOM节点的方法做了二次封装，让前端开发者在开发时不用再考虑浏览器的兼容问题，告别了一个功能多套代码的日子，同时它的API对前端开发者而言更加友好，操作也更加简单。长期操作DOM节点会消耗性能，虚拟DOM树出现后。前端开发者不用直接操作真实DOM，而是使用虚拟DOM树，渲染时候会有一套机制来对比更新前与更新后的内容。然后只用把更新后的内容在真实DOM上做修改即可，这样大大提高了性能与效率。总之，使用Vue.js能够提高前端开发的效率，同时能够实现前、后端分离，使前、后端不必混在一起，以便能各自专注于自身逻辑的开发。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-直接用<script>引入引入法：<scriptsrc="/npm/vue/dist/vue.js"></script>引入之后，Vue.js便会被注册为一个全局变量，此时可直接使用Vue.js的相关语法。当然这种引入方法一般适用于多页面开发，跟JQuery的开发模式类似。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-直接用<script>引入注意：也可以本地引入，可以将上面src部分的内容粘贴到电脑地址栏敲入回车后，进行访问，然后在网页内容区域执行鼠标右键，保存到本地。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-直接用<script>引入保存到本地的文件如下。请将你下载的js文件和你要开发的网页保存到同一个目录下。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-直接用<script>引入此时使用如下代码进行引入。<scriptsrc="./vue.js"></script>本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入（1）下载及安装node.js

Node.js就是运行在服务端的JavaScript环境，是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用了事件驱动、非阻塞式I/O模型，因而轻量又高效。Node.js的包管理器npm，是全球最大的开源库生态系统之一。步骤01：访问其官网“/en/”，选择对应的版本下载，如图所示本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入步骤02：

开始安装。下载完成后，单击node-v6.9.2-x64.msi文件，进入Node.js安装界面，开始安装Node.js，单击“Next”按钮，如下图所示。步骤03：

选择同意接受相关协议，如上图所示。步骤04：

选择安装路径，如下图所示。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入步骤05：

开始安装。单击“Next”按钮，如下图所示。步骤06：

勾选自动安装必要的工具，点击“Next”，如上图所示。步骤07：点击Install安装，如下图所示。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入步骤08：

安装完成后，点击“Finish”完成安装，如下图所示。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入（2）node.js环境变量配置

Node.js下载完成后，还需要对环境变量进行必要的配置，可以按照如下步骤进行。步骤01：在node.js的安装目录中（也可以是其他目录），新建两个文件夹node_global和node_cache，如图所示本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入（2）node.js环境变量配置

步骤02：创建完两个文件夹后，在cmd窗口中输入以下命令，如图所示本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入（2）node.js环境变量配置

步骤03：设置环境变量，打开【系统属性】-【高级】-【环境变量】，在系统变量中新建一个变量，如图所示

变量名：NODE_PATH变量值：D:\configuration\nodejs\node_modules注意，D:\configuration\nodejs\node_global是新创建的全局模块安装路径。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入（2）node.js环境变量配置

步骤04：编辑【用户变量】中的path变量，如图所示本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入（2）node.js环境变量配置

步骤05：点击“新建”菜单，然后填入如图所示内容，如图所示本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入（2）node.js环境变量配置

步骤06：点击“新建”菜单，然后填入如图所示内容，如图所示。本课件是可编辑的正常PPT课件2.Vue安装Vue安装-通过NPM安装引入(3)Vue的安装

windows系统：

按Win+R组合键，打开运行对话框，输入“cmd”，如下图所示。按Enter键打开命令提示符窗口，在窗口中输入并执行下面的安装命令。在macOS系统：用户可以直接打开终端，在控制台里执行安装命令，如下图所示。本课件是可编辑的正常PPT课件3.HbuilderX软件的安装（1）进入官网，点击“极客开发工具”，如图所示

。

Hbuilder的安装本课件是可编辑的正常PPT课件3.HbuilderX软件的安装（2）点击“DownloadforWindows”，选择合适的版本下载，如图所示。Hbuilder的安装本课件是可编辑的正常PPT课件3.HbuilderX软件的安装(3)下载好后进行解压，如图所示。Hbuilder的安装本课件是可编辑的正常PPT课件3.HbuilderX软件的安装(4)找到HBuilderX.exe文件，如图所示。Hbuilder的安装本课件是可编辑的正常PPT课件3.HbuilderX软件的安装(1)打开该软件后，请选择自己喜欢的主题。(2)进入我们的项目建立阶段，点击“新建项目”，如图所示HbuilderX的使用方法本课件是可编辑的正常PPT课件3.HbuilderX软件的安装(3)创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，如图所示。HbuilderX的使用方法本课件是可编辑的正常PPT课件3.HbuilderX软件的安装(4)模版网页的默认内容，如图所示HbuilderX的使用方法本课件是可编辑的正常PPT课件3.HbuilderX软件的安装(5)要运行网页，可以安装如图所示步骤进行HbuilderX的使用方法本课件是可编辑的正常PPT课件任务一

Vue实现单网页–任务示范1.页面中以CDN的形式导入Vue2

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width，initial-scale=1.0">

<title>Vue2CDNDemo</title>

<!--引入Vue2的CDN链接-->

<scriptsrc="/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>

<!--Vue实例将要挂载的元素-->

<divid="app">

{{message}}

</div>

<!--Vue实例的JavaScript代码-->

<script>

//创建一个新的Vue实例

varapp=newVue({

el:'#app'，//挂载到id为app的元素上

data:{

message:'helloworld'//定义在Vue实例中的数据

}

});

</script>

</body>

</html>本课件是可编辑的正常PPT课件任务一

Vue实现单网页–任务示范2.页面中以CDN的形式导入Vue2

可以将CDN等js保存到本地，参阅右边的GIF动画演示。本课件是可编辑的正常PPT课件任务一

Vue实现单网页–任务示范2.页面中以CDN的形式导入Vue3

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width，initial-scale=1.0"><title>Vue3CDNDemo</title><!--引入Vue3的CDN链接（包含运行时编译器）-->

<scriptsrc="/npm/vue@3.2.27/dist/d.js"></script></head><body><!--Vue实例将要挂载的元素--><divid="app">{{message}}</div><!--Vue实例的JavaScript代码--><script>//使用Vue3的createApp方法创建Vue应用const{createApp}=Vue;//创建一个新的Vue应用

constapp=createApp({data(){return{message:'helloworld'//定义在Vue应用中的数据}}});//挂载Vue应用到id为app的元素上app.mount('#app');</script></body></html>本课件是可编辑的正常PPT课件任务一

Vue实现单网页–任务示范2.页面中以CDN的形式导入Vue3

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width，initial-scale=1.0"><title>Vue3CDNDemo</title><!--引入Vue3的CDN链接（包含运行时编译器）-->

<scriptsrc="/npm/vue@3.2.27/dist/d.js"></script></head><body><!--Vue实例将要挂载的元素--><divid="app">{{message}}</div><!--Vue实例的JavaScript代码--><script>//使用Vue3的createApp方法创建Vue应用const{createApp}=Vue;//创建一个新的Vue应用

constapp=createApp({data(){return{message:'helloworld'//定义在Vue应用中的数据}}});//挂载Vue应用到id为app的元素上app.mount('#app');</script></body></html>本课件是可编辑的正常PPT课件任务一

Vue实现单网页–进阶提高1.本地引入Vue2

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width，initial-scale=1.0"><title>Vue2CDNDemo</title><!--引入Vue2的CDN链接-->

<scriptsrc="./js/vue2.6.14.js"></script>

<style> #app{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*设置容器高度为视口高度，以便内容垂直居中*/flex-direction:column;/*使得子元素垂直排列*/} .box{ font-size:28px; text-align:center; } </style></head><body><!--Vue实例将要挂载的元素--><divid="app"><h1>社会主义核心价值观</h1><pclass="box">{{message}}</p></div>

<!--Vue实例的JavaScript代码--><script>//创建一个新的Vue实例varapp=newVue({el:'#app'，//挂载到id为app的元素上data:{message:'富强、民主、文明、和谐，自由、平等、公正、法治，爱国、敬业、诚信、友善'//定义在Vue实例中的数据}});</script></body></html>本课件是可编辑的正常PPT课件任务一

Vue实现单网页–进阶提高1.本地引入Vue2

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width，initial-scale=1.0"><title>Vue2CDNDemo</title><!--引入Vue2的CDN链接-->

<scriptsrc="./js/vue2.6.14.js"></script>

<style> #app{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*设置容器高度为视口高度，以便内容垂直居中*/flex-direction:column;/*使得子元素垂直排列*/} .box{ font-size:28px; text-align:center; } </style></head><body><!--Vue实例将要挂载的元素--><divid="app"><h1>社会主义核心价值观</h1><pclass="box">{{message}}</p></div>

<!--Vue实例的JavaScript代码--><script>//创建一个新的Vue实例varapp=newVue({el:'#app'，//挂载到id为app的元素上data:{message:'富强、民主、文明、和谐，自由、平等、公正、法治，爱国、敬业、诚信、友善'//定义在Vue实例中的数据}});</script></body></html>本课件是可编辑的正常PPT课件任务一

Vue实现单网页–进阶提高1.本地引入Vue3<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width，initial-scale=1.0">

<title>Vue3Demo</title>

<!--引入Vue3的CDN链接（包含运行时编译器）-->

<scriptsrc="./js/vue.3.2.27.js"></script>

<style> #app{ display:flex; justify-content:center; /*水平居中*/ text-align:center; flex-direction:column; /*使得子元素垂直排列*/ } .box{ width:40%; margin:0auto; min-height:100px; } p{ text-indent:2em; font-size:32px; text-align:left; } </style> </head>

<body>

<!--Vue实例将要挂载的元素-->

<divid="app"> <h1style="text-align:center;">学习贯彻党的二十大精神</h1>

<divclass="box"> <p>{{message}}

</p> </div> </div>

<!--Vue实例的JavaScript代码-->

<script> //使用Vue3的createApp方法创建Vue应用

const{ createApp }=Vue; //创建一个新的Vue应用

constapp=createApp({ data(){ return{ message:'高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。'//定义在Vue应用中的数据

} } }); //挂载Vue应用到id为app的元素上 app.mount('#app'); </script> </body></html>本课件是可编辑的正常PPT课件任务一

Vue实现单网页–进阶提高运行程序，结果如下。中国共产党第二十次全国代表大会必将为中华民族伟大复兴谋划新布局、勾勒新蓝图、展望新未来。百年征程，充分证明党的伟大，党的力量，中国共产党必将为全国各族人民美好生活谱写新的篇章。每个青年大学生不忘初心，不断攻坚克难，在学习求知的道路上不断努力拼搏、踔厉奋发，不负青春不负韶华，一步一个脚印，踏踏实实地走下去，勇于到条件艰苦的基层、国家建设的一线、项目攻关的前沿，经受锻炼，增长才干，努力成为祖国建设发展需要的有用人才。本课件是可编辑的正常PPT课件任务一

Vue实现单网页–项目小结本项目主要讲解了Vue的概述、特点、应用，vue.js的CDN引用、vue.js的本地引用、HBuilderX的安装和简单使用。本课件是可编辑的正常PPT课件谢谢项目二实现简易购物车功能本课件是可编辑的正常PPT课件

项目要

求本项目主要使用Vue内置指令来实现简易购物车功能。定义购物车所需的数据，例如商品列表、商品数量、总价等，可以实现商品的添加、删除，可以显示商品的总价格。当点击“+”或“-”按钮时，购物车内的数量会随之增加或减少，同时总价也随之增加或减少。本课件是可编辑的正常PPT课件

项目分

析要完成项目任务，需要掌握Vue实例对象的创建的多种方法、常用内置指令的使用等。应掌握data数据、methods方法和computed计算属性的定义和使用，能够使用v-model进行双向数据绑定、使用v-on进行事件绑定等知识。本课件是可编辑的正常PPT课件

项目目

标【知识目标】1.了解网页DOM的树形结构；2.了解Vue引入方式；3.掌握Vue实例的创建方法；4.掌握插值表达式的基本使用；5.掌握模板语法的基本使用。本课件是可编辑的正常PPT课件

项目目

标【技能目标】1.能掌握Vue实例；2.能掌握Vue的数据绑定；3.掌握Vue的事件监听。本课件是可编辑的正常PPT课件

项目目

标【素养目标】1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。本课件是可编辑的正常PPT课件

项目目

标【思政目标】1.培养学生理性消费观念；2.树立正确“三观”、树立良好的人格。本课件是可编辑的正常PPT课件任务一实现简易数字易计数器--任务演示在Vue中实现一个简易的数字易计数器（一个可以增加和减少数字的计数器），需要用到以下Vue和JavaScript的基础知识：数据属性（data）、方法（methods）、事件监听（v-on或@）、模板语法（插值、指令等）、双向数据绑定（v-model）等。本课件是可编辑的正常PPT课件任务一

实现简易数字易计数器–知识准备Vue的模板语法之插值表达式DOM基础知识Vue的模板语法之指令语法1本课件是可编辑的正常PPT课件1.DOM基础知识DOM，全称为DocumentObjectModel，即文档对象模型。它是一个用于表示和交互网页中的文档结构的编程接口，由万维网联盟（W3C）制定。DOM将网页文档视为一个由节点组成的树状结构，每个节点都代表文档中的一个元素、属性、文本或注释等。这些节点之间存在层级关系，形成一个层次结构。通过DOM，开发者可以使用编程语言（如JavaScript）来访问、操作、修改网页的内容、结构和样式。例如，开发者可以获取元素、修改元素、添加和删除元素，以及处理事件等。DOM提供了对网页内容的编程访问，使得开发者可以在客户端实现丰富的用户交互和动态效果，提升用户体验。本课件是可编辑的正常PPT课件1.DOM基础知识HTMLDOM模型被结构化为对象树，对象的

HTMLDOM树为如图所示。本课件是可编辑的正常PPT课件2.Vue的模板语法之插值表达式插值表达式是一种用于模板引擎中的表达式，它可以方便地将数据与页面内容绑定起来，使得页面展现更具动态性。通常情况下，插值表达式会被包含在特定的标记中，例如{{}}，表示将表达式的结果插入到标记所在的位置。（1）Vue的插值表达式{{}}功能:用于解析标签体内容。写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。本课件是可编辑的正常PPT课件2.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必须是一个函数，这个函数返回一个对象，对象中包含了所有需要在组件中使用的响应式数据。这样做是为了确保每个组件实例都可以维护一份被返回对象的独立的拷贝，避免多个实例之间共享同一个数据对象。本课件是可编辑的正常PPT课件2.Vue的模板语法之插值表达式data属性中的数据可以是多样的，例如：<script> exportdefault{ data(){ return{ money:100， msg:'hello'，

constobj={name:'张三',age:25，};//定义了对象 } } } </script>

<template>

<divclass="app">

<div>{{money}}</div>

<div>{{msg}}</div>

<div>{{}}</div>

<div>{{msg.toUpperCase()}}</div>

<div>{{obj.age>18?'成年'：'未成年'}}</div>

</div>

</template>使用插值表达式来获取数据本课件是可编辑的正常PPT课件2.Vue的模板语法之插值表达式看一个完整的案例。运行结果为：本课件是可编辑的正常PPT课件2.Vue的模板语法之插值表达式又一个实例。运行结果如图所示。本课件是可编辑的正常PPT课件2.Vue的模板语法之插值表达式插值表达式中除了可以写模型变量还可写其他东西，首先可以按照字面内容进行输出。第1行定义id等于box的容器，2行表示通过插值表达式输出字符abc，3行通过插值表达式输出整数123。通过插值表达式可以输出四则运算。1行定义id等于box的容器，3行通过插值表达式运算1加上2的结果，结果输出为3，4行通过插值表达式输出字符串hello拼接上字符串world的结果，结果为helloworld；5行通过插值表达式输出10乘以2的结果，结果是输出20。本课件是可编辑的正常PPT课件2.Vue的模板语法之插值表达式通过插值表达式可以输出逻辑运算的结果。1行定义id等于box的容器，2行通过插值表达式输出逻辑变量true与上逻辑变量false的结果，结果为false；3行定义逻辑变量true或上逻辑变量false的结果，结果为true；4行对逻辑变量true进行取反，结果为false。通过插值表达式还可以输出三目运算的结果。1行定义id等于box的div容器，2行通过插值表达式输出三目运算的结果，三目运算的一般形式为：表达式1?表达式2:表达式3。该表达式表示先执行表达式1，执行完毕，表达式1的结果如果为真，那么执行表达式2，并且这个整体的运算式的结果是表达式2的结果，否则执行表达式3，运算式的结果是表达式3的结果。本课件是可编辑的正常PPT课件2.Vue的模板语法之插值表达式插值函数中也可以使用使用全局函数。1行定义id为box的容器，2行通过插值表达式输出一个随机数；3行将实数12.23转成整数进行输出，这里得到的结果是12。本课件是可编辑的正常PPT课件3.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-model、v-slot、v-pre、v-cloak、v-once等。（1）指令v-textv-text的作用是在容器标签内控制字符串内容的输出，v-text输出纯文本。如果是纯文本输出，那么输出的字符串结果和插值输出一样的。看一个例子：本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法17行引入vue；10行定义id等于app的div容器（dom节点）；11~12行使用了文本插值；15行定义实例对象；16~19行定义data属性，定义变量rawHtml的值；22行将app节点挂载到App实例上。运行程序，结果如下。本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法1（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的原始性，也就是说，不管初始条件是什么，元素总是会被渲染。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实例上。本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法1运行结果如图所示。（4）v-if指令看到v-if，我们可以想到if…else条件判断语句，没错，Vue中还提供了v-else指令和v-else-if指令，学会v-if指令其他两个指令也就会了。这样我们再来理解

v-if指令，就是根据表达式值的真假来销毁或者重建一个我们绑定的DOM元素。当条件为假的时候，DOM元素被删除，条件为真的时候，就重建一个绑定的DOM元素。首先看一个最直观的例子：本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法1这个例子中，定义了变量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才执行，这里给出一个例子。在上面的例子中，变量isShow的值为false，那么当v-if对isShow代表的条件进行判断的时候，此时v-if代表的h2标题不会被执行，而下面的h1标题会被执行。上面例子的运行如图所示。本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法1我们对比下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块”，可以连续多次使用，我们通过一个具体的例子来加以说明。本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法1本例中，变量grade的值给成了字符C，13~14行判断grade的值等于字符A，显然此时不会输出A；15~16行判断grade的值是否等于字符B，显然此时的条件也是不满足的；17~18行判断grade的值是否等于字符C，此时条件满足，会输出字符。运行程序，结果如图所示。本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法1（5）事件绑定指令v-onVue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，原生的DOM对象有onclick、oninput等原生事件，在vue中为v-on:click、v-on:input等。v-on简写为

@，看右边的例子。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的语法。本课件是可编辑的正常PPT课件3.Vue的模板语法之指令语法1运行程序，结果如图所示。本课件是可编辑的正常PPT课件任务一实现简易数字易计数器--任务示范我们使用前面学习到的知识，通过一个简单的实例，编写一个计数器，通过编写计数器进一步体验Vue的编程方式。6行引入vue.global.js；9行定义id为app的div容器；10行定义button按钮，并绑定点击add事件；11行使用插值表达式显示变量count的值；12行定义button按钮，并绑定点击sub事件；17行创建vue应用汇实例；18行定义data属性，19~21行定义coun变量；23~32行定义methods属性，该属性中可以定义多个函数，执行一定的功能；24~27行定义add函数，对count变量加1，并在控制台打印输出；28~32行定义sub函数，对count变量减1，并在控制台打印相应的信息。34行将app的Dom节点挂载到Vue实例上。运行程序，结果如图所示。本课件是可编辑的正常PPT课件任务一实现简易数字易计数器--任务拓展在基本计数器的基础上，我们要实现下最大值和最小值的限制。当累加到最大值和累减到最小值时，实现对应的按钮隐藏。运行结果如图所示。本课件是可编辑的正常PPT课件任务一实现简易数字易计数器--任务实施请完成本任务中的案例和示范代码。本课件是可编辑的正常PPT课件任务二实现简易购物车--任务演示在Vue中实现简易购物车功能会涉及到更多的Vue特性和概念，以及一些常见的开发实践，主要涉及到的知识是数据属性（data）、组件的使用和组件的通信、模板语法（插值、指令等）、计算属性等。这里实现了一个简易的购物车页面，可以添加商品，这里是设置书籍名、出版日期、书籍价格等，可以对购买数量进行增加和减少，也可以删除所添加的书籍，可以清空购物车，可以显示商品的总价格，具体效果如图所示。本课件是可编辑的正常PPT课件任务二

Vue实现单网页–知识准备Vue的模板语法之指令语法2本课件是可编辑的正常PPT课件1.Vue的模板语法之指令语法2（1）属性绑定指令v-bind该指令的主要作用是为元素绑定属性，完整写法是v-bind:属性名，简写的话可以直接省略v-bind，只保留:属性名。注意：class属性、style属性、value属性、href属性，只要是属性都可以绑定，可以绑定标签的任意属性，甚至标签的自定义属性也可以使用v-bind指令进行绑定。首先看一个绑定图片的例子。下面通过绑定的img的src，以及a标签的href属性分别来演示v-bind的使用，下面通过一个具体的例子看看动态绑定图片的路径是如何完成的。本课件是可编辑的正常PPT课件1.Vue的模板语法之指令语法2具体实现的代码如下：运行结果如图所示。本课件是可编辑的正常PPT课件1.Vue的模板语法之指令语法2可以增加一个按钮来实现图片的切换，在id="app"的div中，增加如下代码：上面代码为button绑定一个handle事件函数。下面的代码具体给出了handle函数，在该函数中，实现了对img属性的重新赋值。本课件是可编辑的正常PPT课件1.Vue的模板语法之指令语法2（2）双向数据绑定指令v-modev-mode指令在表单元素商可以创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。什么是双向数据绑定呢？数据可以更新到视图，通过视图可以更改数据。下面通过一个具体例子来说明。本课件是可编辑的正常PPT课件1.Vue的模板语法之指令语法2运行结果如图所示。在文本框中输入数据，可以通过插值方法立即能够获取到，这就是当数据更新时，视图也发生了变化。本课件是可编辑的正常PPT课件1.Vue的模板语法之指令语法2按下google浏览器的F12，进入开发者模式，选择Console，在如图所示的地方，输入“vm.value”然后回车，可以获取到刚刚在文本框输入的值。可以直接给vm.value进行赋值，令vm.value="zhangsan"，输入命令后进行回车，观察网页的变化，如图所示。这就是所谓的通过视图可以更改数据,请看右边的GiF动画演示。本课件是可编辑的正常PPT课件1.Vue的模板语法之指令语法2（3）数据遍历v-for指令v-for可以实现页面列表渲染，常用来循环数组、对象、字符串、数字等。v-for指令需要使用

iteminitems形式的特殊语法，其中

items是源数据数组，而

item则是被迭代的数组元素的别名。下面我们来看一个实际例子。运行程序，结果如图所示。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务示范在前面属性绑定指令v-bind、双向数据绑定指令v-mode、遍历v-for指令多指令的基础上，我们给出简易购物车的代码。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务示范在前面属性绑定指令v-bind、双向数据绑定指令v-mode、遍历v-for指令多指令的基础上，我们给出简易购物车的代码。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务示范在前面属性绑定指令v-bind、双向数据绑定指令v-mode、遍历v-for指令多指令的基础上，我们给出简易购物车的代码。08~59行定义CSS样式；62行定义id为app的div容器，并设置了CSS;63行设置了文本输入框，并和变量inpName进行了双向数据绑定；64行设置了文本输入框并和变量inpDate进行了双向数据绑定；65行设置了文本输入框并和变量inpMoney进行了双向数据绑定；66行放置了文本输入框，并绑定了单击事件add；79行使用v-for对列表list进行遍历；80行使用插值表达式显示序号；82行使用插值表达式显示书籍名称；83行使用插值表达式显示书籍的出版日期；84行使用插值表达式显示书籍的价格；85行放置button按钮，并设置了单击事件subNumber，并给该函数传递了参数index；86行使用插值表达式显示商品的数量；87行设置了button按钮，并设置了单击事件addNumber，并传递了参数index，90行放置了button按钮行设置了单击事件del，并传递了参数index；95行使用插值表达式显示变量emptyBox的值；96行使用插值表达式显示变量allmoney的值；100行使用CDN方式引入vue；102行创建vue实例；103~111行定义了data属性，定义了inpName、inpDate、inpMoney变量；109~135行定义了list集合，在该集合中定义多个书籍信息，包含书籍名、出版日期、价格、数量等；136行定义了methods属性，138行表示书籍名、出版日期和价格只有有任意一个为空，就返回；141行定义对象obj，键为bookName的值为inpName，键为pubDate的值为inpDate，键为price的值为inpMoney，键为num的值为1；147~150行表示将对象obj放到list集合中，并将inpName、pubDate、inpMoney三个变量清空；153~155行定义了删除函数del，根据索引进行删除，splice(index，1)表示从列表index处删除一个元素；156~162行表示定义了subNumber函数，该函数对指定的某个商品的数量进行减一操作，如果商品数量为1，就直接返回，否则就直接执行减一操作；163~165行定义了购物车的某个商品的数量的加一操作；166~172行表示定义了计算商品的总金额，首先定义定义变量num，然后遍历list集合，将每个记录的价格和数量相乘，然后进行累加，最后返回总的金额；173~178行定义函数emptyBox，该函数判断如果列表的长度为空，则直接返回“购物车为空”的内容，180行将id为app的容器挂载到app实例上。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务拓展当某个数据属性发生变化时，你可能需要从这个变化中触发一些异步操作，比如从服务器获取新的数据。在这些情况下，使用

watch

可以确保在数据真正改变时触发这些操作，而不是在每次组件重新渲染时都触发。1.监听属性监听属性(watch)是用来监听data中的数据是否发生变化，一般是监听data中的某个属性。watch中可以执行任何逻辑，如函数节流，Ajax异步获取数据，甚至操作DOM。下面看一个案例。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务拓展运行程序，结果如图所示。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务拓展在Vue中，计算属性（computedproperties）通常用于处理基于其他响应式数据的复杂逻辑，并且当依赖的数据发生变化时，它们会自动重新计算。2.计算属性什么是计算属性呢？模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。各位同学可以计算下每一个学期自己所有的消费明细，自己每一年的消费明细，理性消费，尊重父母的劳动成果，不可盲目的攀比，要形成正确的消费观。我们首先看一个案例。06行引入vue；09行定义id为app的div容器；10行使用插值表达式调用变量message的值；11行显示计算属性reversedMessage的值；15行定义名为app的常量；16~20行表示定义data属性，该属性中定义了message变量；21~27行定义了计算属性reversedMessage，24行将message变量进行字符上的翻转作为计算属性的值。计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。注意：计算属性实际上可以理解为能够在里面写一些计算逻辑的属性。具有的作用：一是减少模板中的计算逻辑；二是有数据缓存功能，当我们的数据没有变化的时候，不会再次执行计算的过程。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务拓展每一个计算属性都包含一个getter和一个setter，我们上面的两个示例都是计算属性的默认用法，

只是利用了getter来读取。此时的计算属性就是用到了setter函数，在你需要时，也可以提供一个setter函数，

显示的表现出来。当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义的操作，例如：本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务拓展10行表示设置点击事件，直接修改计算属性的值；11行表示文本输入框输入的内容直接与变量name1双向绑定；12行表示文本输入框的内容直接和变量name2双向数据绑定；13~16行表示文本数据框和计算属性进行双向数据绑定，并调用了四次；21~24行定义data属性，在该属性中定义了两个变量，分别是name1和name2；27~41行定义了计算属性fullname，为其设置了get和set方法，get方法是调用时被触发，set方法是修改计算属性的值时被触发；44~52行是定义methods方法，定义了getName方法，用于获取姓名，定义了updateName方法，该方法中直接修改计算属性fullname的值。运行程序，结果如图所示：本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务拓展运行结果中，“console.log("有人读取了fullname")”只输出了一次，本身代码中进行了三次调用，应该被打印输出三次，这是怎么回事呢？这里就涉及到了计算属性的缓存特性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新请求值。这就意味着只要name1和name2还没有发生改变，多次访问fullname计算属性会立即返回之前缓存的计算结果，并不是还要调用计算属性，重新计算的。如果此时我们在姓或名输入框输入任意值，就看到计算属性重新计算值了。此时，如图所示。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务拓展计算属性的set方法是在计算属性被修改时，会被触发执行。这里在网页中设置了一个按钮（图上为“修改计算属性的值”位置处），为该按钮设置了updateName()方法，只要点击该按钮，计算属性的值就被修改为zhang_san，此时执行的结果如图所示。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务进阶有了计算属性以后，购物车中的计算所有加入购物车的商品的总价也可以使用计算属性来实现了。在methods属性之前，添加如下代码：找到如下代码：此时就是使用了计算属性计算商品的总价了，运行程序，会发现运行结果仍然是正确的。至于到底用计算属性和普通方法计算商品的总价，就看读者朋友的取舍了。本课件是可编辑的正常PPT课件任务二

实现简易购物车–任务实施请完成前面的案例和本任务。本课件是可编辑的正常PPT课件任务二

实现简易购物车–项目小结本项目主要讲解了Vue实例对象的创建、常用内置指令的使用等。通过本章的学习，读者应重点掌握data属性、methods方法和computed计算属性、监听属性的定义，能够使用v-model进行双向数据绑定，使用v-on进行事件的绑定。本课件是可编辑的正常PPT课件谢谢项目三Vue实现音乐的播放本课件是可编辑的正常PPT课件

项目要

求本项目主要使用脚手架、Vite构建工具创建Vue项目，使用Vue原生方法和使用Vue第三方框架，实现mp3等音频文件的播放、暂停、停止播放功能。本课件是可编辑的正常PPT课件

项目分

析要完成项目任务，需要掌握Node.js的下载、安装以及环境配置、使用脚手架VueCLI创建项目、使用Vite构建项目、Vue播放音频文件实现播放、暂停、停止播放、利用第三方库Howler.js实现音乐播放等知识。本课件是可编辑的正常PPT课件

项目目

标【知识目标】要完成项目任务，需要掌握Node.js的下载、安装以及环境配置、使用脚手架VueCLI创建项目、使用Vite构建项目、Vue播放音频文件实现播放、暂停、停止播放、利用第三方库Howler.js实现音乐播放等知识。本课件是可编辑的正常PPT课件

项目目

标【技能目标】1.能掌握Vue创建项目的方法；2.能掌握Node.js的安装和环境变量配置；3.掌握Vue实现音乐播放。本课件是可编辑的正常PPT课件

项目目

标【素养目标】1.培养学生按标准做事的习惯；2.培养学生独立完成任务的品格素质、技能素质以及综合素质；3.培养学生能够找到适合自己的学习方法并正确运用；4.培养学生的团队合作精神。本课件是可编辑的正常PPT课件

项目目

标【思政目标】1.培养学生学习探究精神；2.树立歌唱祖国、热爱祖国的爱国主义精神。本课件是可编辑的正常PPT课件任务一使用脚手架等创建项目--任务演示Vue.js可以直接在网页中引入，也可以使用项目构建工具VueCLI，它可以快速构建一个“开箱即用”的大型单页应用，并提供了优秀的构建配置。开发者只需要关注业务本身和核心代码的编写。本课件是可编辑的正常PPT课件任务一

使用脚手架等创建项目–知识准备Node.js的下载及安装本课件是可编辑的正常PPT课件1.Node.js的下载及安装Node.js是一个开源的、跨平台的JavaScript运行时环境，它基于Google的V8引擎，允许JavaScript代码在服务端运行。要使用组件式开发，就必须安装Node.js。这里首先介绍Node.js的下载。本课件是可编辑的正常PPT课件任务一

使用脚手架等创建项目–知识准备Node.js的下载及安装本课件是可编辑的正常PPT课件任务一

使用脚手架等创建项目–任务示范Vue可以进行组件式开发。哪什么是组件式开发呢？在Vue中，组件是可复用的Vue实例，它们具有独立的模板、逻辑和样式。组件化允许开发者将页面或应用分割成独立、可复用的部分，从而简化代码结构，提高可读性和可维护性。组件式开发具有以下特点：模块化：组件可以根据特定的功能或UI部分来划分，这样代码更加模块化，更易于管理；可复用性：由于组件是独立的，因此它们可以在不同的页面或应用中被多次使用，提升了代码的复用率；独立性：组件之间是相互独立的，一个组件的状态或逻辑变化不会影响其他组件，这有助于代码的解耦；单文件组件：Vue支持将组件的模板、样式和逻辑封装在一个.vue文件中，使得组件结构更加清晰。本课件是可编辑的正常PPT课件任务一

使用脚手架等创建项目–任务示范使用组件式开发的优势和作用：提高开发效率：通过复用现有组件，减少了重复编写代码的需要，从而加速了开发过程。增强团队协作：团队成员可以分别专注于不同的组件开发，实现并行工作，提高工作效率。易于维护和扩展：由于代码是模块化的，因此当需求变更时，更容易找到并修改相关代码。同时，添加新功能或修改现有功能也更为方便。有了组件式开发的概念之后，我们准备着手进行Vue的项目创建了。Vue项目的创建主要有以下三种方式。本课件是可编辑的正常PPT课件任务一

使用脚手架等创建项目–任务示范1.Vue的脚手架vue-cli创建项目使用vue-cli创建项目首先要使用如下命令在命令行安装脚手架工具：检查脚手架是否安装成功，可以在命令行下使用如