《Vue应用开发》全套PPT课件.pptx

Vue 应用开发导言主讲人： 职称：讲师 教学概述课程性质描述 《Vue 应用开发》是一门基于工作过程开发出来的学习领域课程，是Web 前端设计相关专业职业核心课程。本课程注重对学生职业能力和创新精神、实践能力的培养，培养学生利用 Vue 框架进行模块化动态网页项目的设计和开发。是融理论和实践一体化，教、学、做一体化的专业课程，是工学结合课程。 适用专业：web前端、UI、网页设计相关专业。 开设课时：54 建议课时：54导言教学概述典型工作任务描述 现今我们已经进入了互联网时代，HTML、CSS、JavaScript 技术的引入极大的扩充了我们编写精彩网页世界的能力，但是相较基础的 Web 技术，完整项目构建还是比较繁杂，不利于中大型项目开发。 Vue 的单页面框架技术是优化前端网页开发的一项热门技术，它将整个前端网页系统规整为一个单页面网页，并在根节点网页上延伸上层应用和数据交互，并结合模板技术，让 Web 项目的构建和完善更加便捷和高效。我们根据 Vue 框架使用阶段的不同设置 Vue 应用开发的典型工作任务，包括 Vue项目构建、Vue 网页设计、Vue 组件化开发、网页交互与数据通信、Vue 项目打包部署。导言知识准备课程学习目标基本理论方面掌握 Vue 框架的原理和组成部分；掌握 Vue 插件和 CLI 工具；掌握 Vue 项目的构建方式；掌握 Vue 模板语法原理；掌握 Vue 表单输入绑定原理；掌握 Vue 常用指令、事件绑定和修饰符；掌握 Vue 中侦听器和计算属性的原理；掌握 Vue 组件化开发思想。导言知识准备课程学习目标基本技能方面熟练掌握 Vue CLI 工具的安装；熟练掌握 Vue 项目的构建；熟练掌握 Vue 模板语法的使用；熟练掌握 Vue 表单输入绑定的使用；熟练掌握 Vue 常用指令、事件绑定和修饰符的使用；熟练掌握 Vue 中侦听器和计算属性的使用；熟练掌握 Vue 组件化开发流程和方式；熟练掌握 Vue-Resource 网络数据交互使用方式；熟练掌握 Axios 网络数据交互使用方式；熟练掌握 Vue 项目的打包与部署方式。导言知识准备课程学习目标职业素养方面能够完成真实业务逻辑向代码的转化；能够独立分析解决问题；能够快速准确地查找参考资料；能够与小组其他成员通力合作。导言知识准备学习组织形式与方法亲爱的同学，欢迎你学习《Vue 应用开发》课程！与你过去使用的传统教材相比，这是一种全新的学习材料，它帮助你更好地了解未来的工作及其要求，通过这本活页式教材学习如何通过 Vue 框架快速构建前端网页项目的重要的、典型的工作，促进你的综合职业能力发展，使你有可能在短时间内成为前端开发的技能能手。主动学习用好工作活页团队协作把握好学习过程和学习资源导言知识准备学习情境设计使用 vue.js 完成网页设计使用 vue init 构建Vue 2.x项目使用 vue create 构建Vue 2.x项目使用 vue ui 构建Vue 3.x项目使用v-model构建智慧医养注册页面使用渲染指令构建智慧医养首页使用computed计算健康设备购物车数据智慧医养首页Banner组件化开发使用Vue Router组件化开发智慧医养导航使用 Vue-Resource 完成智慧医养用户注册使用 Axios 实时展示智慧医养首页数据Vue项目打包与部署导言谢谢课程名称： Vue 应用开发主讲人： Vue 应用开发第一单元 Vue 项目构建主讲人： 职称：讲师 教学概述概述 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue 就是一个用于搭建类似于网页论坛这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。 Vue 项目开发的项目是单页应用程序，简称 SPA。顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用。教学概述教学导航知识重点Vue 的安装使用知识难点利用 Vue 进行响应式网页开发推荐教学方式从 Vue 功能进行介绍，让学生有大体了解实际构建项目，让学生掌握如何使用建议学时16 学时推荐学习方法通过老师讲解掌握 Vue 基本概念，然后进行实操一步步通过 Vue 构建项目，加深印象必须掌握的理论知识Vue Cli 工具构成必须掌握的技能使用 Vue 构建项用 vue create 构建 Vue 2.x 项目使用 vue.js 完成网页设计使用 vue ui 构建 Vue 3.x 项目使用 vue init 构建 Vue 2