Vue.js前端开发框架应用（微课版）-课程标准(大纲)、-课后习题及答案汇 董宁第1-8章

PAGEPAGE3《Vue.js前端开发框架应用》课程标准1.课程定位和课程设计1.1课程性质与作用《Vue.js前端开发框架应用》是软件技术专业的一门必修课程，是在学习HTMLWeb开发技术的基础上，开设的一门“理论+实践”的课程。课程对接企业人才培养目标，面向Web程序员工作岗位，培养学生能够使用Vue技术进行企业级项目开发的能力，具有探究学习、终生学习、分析问题和解决问题的能力，具有良好的程序思维能力，为学生的就业奠定基础。前导课程：《静态网页设计》、《WEB前端框架应用》、《JavaScript程序设计》后继课程：《WEB项目整合开发》1.2课程基本理念本课程设计理念是以职业能力培养为重点，以就业为导向，培养学生具备就业市场所需的职业技能。在培养学生职业技能的同时，以学生为主体、关照学生、服务学生，不断提高学生思想水平、政治觉悟、道德品质、文化素养，让学生成为德才兼备、全面发展的人才。坚持不懈培育和弘扬社会主义核心价值观，引导广大学生做社会主义核心价值观的坚定信仰者、积极传播者、模范践行者。1.3课程设计思路基于实际工作内容开发课程，以行动导向进行教学设计，以学生为主体，以实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标、以施工任务（项目）为载体、理论学习与实践操作结合。同时通过采用“教”、“学”、“做”三位一体法教学法，教师边示范、边讲解、边提问，学生边做、边学、边思考，从而实现在做中教，在做中学，提高学生的实践能力和专业水平。2.课程目标知识目标：通过这门课程的学习，学生能够熟练掌握Vue前端框架，搭建Vue开发环境，创建Vue项目，在Vue中进行数据绑定和事件监听，根据页面和业务需求合理拆分组件，使用vue-router实现单页面开发。能力目标：通过本课程的学习，学生能熟练使用Vue.js搭建网站，应用Vue框架开发前端Web网站，具备必备的程序调试和问题解决能力，能够熟练使用主流开发工具对应用程序进行调试、跟踪，确保网站运行正常，满足业务需求。素质目标：通过本课程的学习培养学生良好的职业道德和素养，认真负责的工匠精神，以及自主的学习能力、良好的与人沟通能力、良好的团队合作精神，并能在实践中进行独立思考和开拓创新。3.课程内容与要求学习情境设计：学习情境情境描述职业能力（知识、技能、态度）课时初识Vue.js前端技术的发展Vue简介Vue开发环境使用Vite创建Vue3项目了解前端技术的发展，能够说出使用框架开发项目的优势。了解什么是Vue，能够说出Vue的基本概念掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装掌握常见的包管理工具的使用方法，能够应用npm和yarn相关命令下载、升级、卸载包掌握Vite的使用方法，能够使用Vite创建Vue3项目4Vue.js开发基础单文本组件数据绑定指令事件对象事件修饰符计算属性样式绑定掌握单文件组件，能够创建并使用单文件组件掌握数据绑定，能够定义数据并将数据渲染到页面中掌握属性绑定指令，能够灵活运用v-bind指令给目标元素的属性动态绑定值掌握事件绑定指令，能够灵活运用v-on指令给目标元素绑定事件掌握双向数据绑定指令，能够灵活运用v-model指令在表单元素上实现数据的双向绑定掌握条件渲染指令，能够灵活运用v-if、v-show指令根据不同的条件渲染不同的标签掌握列表渲染指令，能够灵活运用v-for指令将数组、对象等中的数据渲染到页面中掌握事件对象，能够灵活运用事件对象获取和修改DOM元素的属性熟悉事件修饰符，能够阐述常见的事件修饰符掌握计算属性，能够灵活运用计算属性实时监听数据的变化，当所依赖的数据发生变化时重新计算值掌握侦听器，能够灵活运用侦听器监听数据的变化并进行相应的操作掌握样式绑定，能够灵活运用v-bind绑定class和style属性实现元素样式的设置22组件基础选项式API和组合式API生命周期函数组件的注册和引用组件间的样式冲突父组件向子组件传递数据子组件向父组件传递数据跨级组件之间的数据传递熟悉选项式API和组合式API，能够说出选项式API和组合式API的区别掌握生命周期函数的使用方法，能够灵活运用生命周期函数在特定时间执行特定的操作掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成组件的注册掌握引用组件的方法，能够在Vue项目中以标签的形式引用组件掌握组件之间样式冲突问题的解决方法，能够运用<style>标签的scoped属性和深度选择器解决组件之间样式冲突的问题掌握父组件向子组件传递数据的方法，能够使用props实现数据传递掌握子组件向父组件传递数据的方法，能够使用自定义事件实现数据传递14路由初识路由初识VueRouter路由重定向嵌套路由动态路由命名路由编程式导航导航守卫了解什么是路由，能够说出前后端路由的基本工作原理掌握VueRouter的安装，能够独立安装VueRouter掌握VueRouter的基本使用方法，能够在项目中配置VueRouter掌握路由重定向的使用方法，能够解释路由重定向的实现掌握嵌套路由的使用方法，能够实现路由的嵌套掌握动态路由的使用方法，能够实现动态路由的匹配掌握命名路由的使用方法，能够解释命名路由的实现掌握编程式导航的使用方法，能够灵活应用编程式导航掌握导航守卫的使用方法，能够实现路由访问权限的控制16网络请求Axios了解Axios的基本概念，能够说出Axios的功能和主要特性掌握Axios的安装和使用方法，能够在项目中安装并使用Axios4课程设计设计前的准备设计过程设计总结使用Vue创建项目根据需求文档，完成业务开发实践中进行独立思考和创新12总学时724.课程实施4.1教学条件4.1.1软硬件条件软件或学习平台：操作系统（Windows7及后续版本）、开发工具（Chrome、VisualStudioCode、Node.js等）4.1.2师资条件课程要求教学能力强、教学经验丰富、精通业务、教学效果好，且具有良好综合素质的教师担任。在信息技术课程教学中，教师要帮助学生正确认识面对五花八门的互联网信息时所应具备的思想政治立场。明确互联网信息的判断标准。理性分析和分类哪些是政治立场正确，而哪些又是不正确的。并且对自身在网络环境中发表言论的行为负责，始终秉持正确的政治立场，帮助学生建立正确的人生观、价值观。4.2教学方法建议“项目驱动”教学法在讲解知识点之前，通过一个实际的项目（采用受学生欢迎的学习、娱乐网站中的页面），引出知识点。为了解决项目的问题，讲解知识点，提高学生兴趣。问题引导法教师在课堂上提出问题，引导学生分析问题，最后达到解决问题的目的。这种教学方法以问题的设计和回答为主要形式，实施要点是教师如何引导学生去分析问题、解决问题这一探究过程。案例教学法围绕一定的目的，把实际中真实的情景加以典型化处理，形成供学员思考分析和决断的案例，通过独立研究和相互讨论的方式，来提高学员的分析问题和解决问题的能力的一种方法。4.3教学评价、考核要求教学评价通过职教云平台实现全过程数据采集和即时评价，主要由平时成绩、期末考试成绩两部分的评价构成。考核比例及要求：评价构成评价要素评价主体评价标准平时成绩（50%）考勤（40%）考勤表满分100，扣分标准：旷课：15/次迟到：5/次病假、事假：2/次作业（40%）教师评价依据需求文档结合代码评价、系统评价实践性环节（20%）（抢答、编码）学生互评、小组互评、教师评价依据问题答案、编码效果期末考试成绩（50%)代码、说明书教师评价依据评分表5.课程资源开发与利用（1）根据课程目标、学生实际以及本课程的专业技能特性，本课程的教学资源应该由教材、平台资源、网络资源等组成。推荐教材：《Vue.js前端开发框架应用》，董宁江平编著，人民邮电出版社，2024.6推荐学习参考资料：序号数字资源名称网址1vue.js官方网站/2Vue.js中文文档/guide/6.其他说明本课程标准根据“软件技术”专业人才培养方案制订，适用于三年制高职“软件技术”专业，也适用于软件测试等专业，根据专业不同，可以根据实际情况进行取舍变动。习题什么是Vue.js？Vue.js（简称Vue，发音为/vjuː/，类似view，官网网站：/），是一款用于构建前端Web页面的JavaScript框架。它基于标准HTML、CSS和JavaScript开发，为高效地开发前端Web页面，提供了一套声明式的、组件化的JavaScript框架。Vue.js最初发布于2014年。Vue.js经历了0.x版本阶段（2014年2月～2015年10月），1.x版本阶段（2015年10月～2016年9月），2.x版本阶段（2016年9月～2020年9月），发行版名称为，3.x版本阶段（2020年9月~本书出版时）。Vue.js不同的版本在构建和编码上有较大的差异1-2简述MVVM模式。MVVM是Model-View-ViewModel的缩写，即模型-视图-视图模型，它代表了一种软件开发中的架构模式，其核心是实现View（视图）和Model（数据模型）之间的双向数据绑定，可以使某一方数据更新时能自动传递到另一方。在MVVM模式下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View中数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。ViewModel通过双向数据绑定把View和Model连接了起来，而View和Model之间的同步工作完全是自动的，无须人为干涉，因此开发者只需关注业务逻辑，不需要关注View和Model之间的数据同步问题。1-3分别使用引用方式和构建方式创建Vue.js项目并运行。引用方式步骤：参见教材1.2.2构建方式步骤：参见教材1.2.32-1简述Vue.js的响应式原理。声明式渲染是Vue.js对数据进行操作的模式，也叫作响应式渲染。模型（Model）层是普通的JavaScript对象，当视图（View）层中的DOM节点上绑定了Vue.js的对象时，如果这个对象的属性发生了任何改变，无须进行其他操作，页面上的对应的数据会自动发生变化，即更新，所以叫作响应式渲染。Vue.js使用模板语法可以将数据声明式地绑定呈现到DOM上。在底层机制中，Vue.js会将模板编译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue.js能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作实现响应式。2-2利用计算属性计算总分和平均分。代码：/dongning/VueCode/tree/mian/2-2打开链接点击下载即可获取2-3简述Vue.js的生命周期。在Vue.js中，每个组件从创建开始都可能需要经历挂载、更新、卸载等一系列的过程。在这个过程中的某一个阶段，可能想要添加一些特定的代码。Vue.js提供了组件的生命周期函数可以实现这一需求。生命周期函数是一些钩子函数（回调函数），在某个时间会被Vue.js源码内部进行回调，在生命周期中可以编写属于自己的逻辑代码。下图是实例生命周期的图表。3-1指令的功能及基本语法格式是什么？Vue.js的指令是带有v-前缀的特殊属性，它们作用于HTML元素上。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。我们也可以将指令看作是特殊的HTML标签属性。3-2Vue.js有哪些常用的内置指令？v-once指令的目的是只渲染元素一次;v-text指令主要用来更新元素文本内容，将实例中的数据作为纯文本输出，等同于DOM中的innerText属性v-html指令会将实例中的数据当作HTML标签解析后输出在一个元素内使用v-pre指令，则该元素的所有Vue.js模板语法都会被保留并按原样渲染v-cloak指令用于显示当数据未解析完成时页面元素渲染的样式v-memo指令的值是一个数组，它可以包含多个数据。这个指令会缓存使用它的元素模板的子树。当模板中的数据更新时，它会将数组里包含的数据的每个值作比较，如果每个值都没有变化，即当前值与最后一次的渲染相同，那么整个子树的更新将被跳过。v-bind指令的参数是要绑定的html属性名称，值是绑定的数据名或者表达式，也可以是一个函数Vue.js中监听事件使用v-on指令v-for指令用来遍历数组、对象，它类似于for循环可以遍历一组数据，并且基于这些原始数据将多次渲染元素或模板v-if指令可以实现条件渲染，Vue.js会根据表达式的值的真假来渲染元素v-show指令和v-if指令的用法基本上是一样的。它们都是根据一个条件决定是否显示元素v-model指令是双向数据绑定3-3通过列表渲染生成购物车表格。代码：/dongning/VueCode/tree/mian/3-3打开链接点击下载即可获取3-4编写代码，实现简易计算器。代码：/dongning/VueCode/blob/mian/3-4/3-4.html3-5编写代码，实现两个数的比较。代码：/dongning/VueCode/blob/mian/3-5/3-5.html4-1方法事件处理器和内联事件处理器有什么区别？内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似）。方法事件处理器：一个指向Vue.js组件实例中定义的方法名或是路径。4-2Vue.js在事件处理中可以使用哪些事件修饰符？.stop：阻止事件传播.prevent：阻止事件默认行为.self：仅元素自身触发.capture：默认的冒泡事件更改为捕获事件.once：事件最多被触发一次当同时使用了多个事件修饰符时，要注意修饰符的调用顺序。例如：@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent只会阻止对元素本身的点击事件的默认行为。4-3利用watch实现书籍实时检索。答案代码链接：/dongning/VueCode/tree/mian/4-34-4实现购物车的几个功能。（1）+、-的数量增加和减少。（2）移除按钮删除此书籍。（3）自动计算总价格。（4）购物车清空时隐藏表格，并且显示“购物车为空”。答案代码链接：/dongning/VueCode/tree/mian/4-44-5实例学生管理页面创建新用户的功能。答案代码链接：/dongning/VueCode/blob/mian/4-5/4-5.html5-1绑定样式与绑定内联样式有什么区别？绑定内联样式是使用Vue.js时，如果需要通过html元素的style属性来设置样式，可以采用:style指令绑定包含内联样式的JavaScript对象的方式实现。5-2举例说明如何为一个页面元素绑定多个不同样式并分别控制样式的有效性。<div:class="{'bigFont':true,'underlineFont':false}"></div>样式名后面的布尔值决定该样式是否有效5-3举例说明绑定内联样式的JavaScript对象中的字段属性是如何与CSS中的样式条目对应的，它们的转换规则是怎样的。CSS中的样式条目是短横线命名（kebab-cased）的，比如：background-color；对应到绑定内联样式的JavaScript对象需要转换成驼峰命名法（camelCase）：backgroundColor5-4使用Vue.js的样式绑定实现如下图所示的表格。答案代码下载链接：/dongning/VueCode/blob/mian/5-4/5-4.html5-5创建页面实现夜间模式和白天模式间的切换，效果如下图。图510白天模式样式图511夜间模式样式答案代码下载链接：/dongning/VueCode/blob/mian/5-5/5-5.html6-1组件的全局注册和局部注册有什么区别？全局注册指的是使用Vue.js应用实例的component()方法，让组件在当前Vue.js应用中全局可用局部注册的组件需要在使用它的父组件中显式导入。局部注册的组件只能在导入它的父组件中使用。6-2构建方式定义组件时，组件代码页面分为哪几个部分，每个部分的作用是什么？单文件组件将html模板、代码逻辑与CSS样式分别放在template、script和style三个代码块中并在同一个文件中封装，组合了组件的视图、逻辑和样式，可以看作是Web前端开发中html、CSS和JavaScript三种语言经典组合的自然延伸。6-3在多个组件相互嵌套构成的页面中，父组件可以通过什么方式传递数据到子组件，祖先组件可以通过什么方式传递数据到子组件？父组件向子组件传递数据需要用到props选项。props是组件中的特殊属性，需要传递给组件的数据必须在其props列表上声明。祖先组件可以通过数据依赖（使用provide选项）传递数据给子孙组件，祖先组件相对于其所有的后代组件，会作为数据依赖的提供者，任何其后代的组件，无论层级有多深，都可以注入由父组件提供给整条路径的数据依赖。6-4使用构建模式创建Vue.js项目，自定义组件实现如下图所示的页面。答案代码下载地址：/dongning/VueCode/tree/mian/6-46-5使用构建模式创建Vue.js项目，灵活使用组件相关知识实现一个购物车页面，效果如下图（实现商品的勾选和数量增减功能即可，不要求实现商品的增加与删除、购物车清空和结算功能）。答案代码下载地址：/dongning/VueCode/tree/mian/6-57-1简要说明什么是客户端路由，它和服务器端路由有什么区别。在传统的Web应用项目开发过程中，路由通常指的是服务器端路由，其作用是服务器根据用户访问的链接（URL）路径返回不同的响应结果。在一个传统的服务器端渲染的Web应用项目中，当链接被点击时浏览器会从服务器端获取响应，然后重新加载整个页面。在Vue.js