《Vue.js 前端开发技术与实践》课件-教案

教案编号1学时2上课班级执行时间授课题目VSCode编辑器教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握VSCode编辑器的使用。教学重点、难点掌握VSCode编辑器的使用。教学资源范例及素材见“素材“文件夹教学内容与过程一、导入新课导入新课：介绍常用的编辑器，引入学习VSCode编辑器的使用。二、新课教学内容(操作演示讲授)1、下载及安装VSCode2、VSCode的界面介绍3、插件的获取及安装4、前端开发常用插件5、VSCode常用快捷操作三、课堂训练1、安装VSCode。2、汉化操作界面。3、安装前端开发常用插件四、课堂小结五、布置作业在传智教育.高校教辅平台上注册，并加入课堂/7-8班课堂序列号：29407c9-10班课堂序列号：29408g11-12-15班课堂序列号：29409d13-14-16班课堂序列号：29410f教学反思

教案编号2学时2上课班级执行时间授课题目ES6语法（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求1、掌握let定义变量。2、掌握变量的解构赋值3、掌握rest参数4、掌握箭头函数定义和使用教学重点、难点掌握变量的解构赋值、箭头函数定义和使用。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习二、新课教学内容(操作演示讲授)1、变量、常量声明2、变量的解构赋值3、rest参数4、箭头函数三、课堂训练1、上机训练1-let命令使用。2、上机训练2-对象的解构赋值使用。教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课作业。教学反思

教案编号3学时2上课班级执行时间授课题目ES6语法（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求1、掌握模板字符串2、了解Module的语法3、了解Promise的基本用法教学重点、难点重点掌握模板字符串；难点：Promise的基本用法。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习：上次课的内容。导入新课：ES6.0语法的学习二、新课教学内容(操作演示讲授)1、模板字符串2、Module的语法3、Promise的基本用法三、课堂训练上机训练-使用timeout方法返回一个Promise实例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号4学时2上课班级执行时间授课题目Vue入门（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求1、掌握Vue的核心设计思想。2、掌握Vue开发的步骤。教学重点、难点Vue的核心设计思想、使用Vue开发开发步骤教学资源范例及素材见“素材“文件夹教学内容与过程一、复习二、新课教学内容(操作演示讲授)1、Vue框架的优点2、Vue高效开发示例分析3、Vue是如何实现数据驱动的（MVVM开发模式）4、下载及安装Vue5、使用Vue开发三、课堂训练上机训练-下载及安装Vue，用VUE实现在计数的小应用，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号5学时2上课班级执行时间授课题目Vue入门（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握Vue开发和调试工具的使用教学重点、难点掌握Vue开发和调试工具的使用教学资源范例及素材见“素材“文件夹教学内容与过程一、复习复习MVVM开发模式。二、新课教学内容(操作演示讲授)1、Vue开发计数的小应用。2、安装和使用调试工具的使用三、课堂训练上机训练：上机完成教材第三章示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号6学时2上课班级执行时间授课题目Vue指令（1）数据绑定教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握Vue数据与页面绑定的指令，条件与列表渲染。教学重点、难点掌握条件与列表渲染教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习使用Vue开发的步骤，MVVM开发模式。二、教学内容(操作演示)1、文本节点绑定指令2、属性节点绑定3、样式绑定4、条件渲染5、列表渲染6、v-pre指令和v-once指令三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号7学时2上课班级执行时间授课题目Vue指令（2）--数据双向绑定教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握v-model指令的功能和使用方法，掌握页面各种表单控制与Vue数据绑定教学重点、难点掌握页面各种表单控制与Vue数据绑定教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、input和textarea元素2、radio和checkbox元素3、select元素4、双向绑定修饰符三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号8学时2上课班级执行时间授课题目Vue指令（3）--事件绑定教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握v-on指令的功能和使用方法，掌握事件修饰符的意义及应用场景。教学重点、难点掌握事件修饰符的意义及应用场景。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、监听事件2、事件修饰符三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号9学时2上课班级执行时间授课题目Vue实例对象（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求1、掌握配置对象常用的配置选项。2、掌握Vue实例生命周期。教学重点、难点掌握配置对象常用的配置选项、掌握Vue实例生命周期教学资源范例及素材见“素材“文件夹教学内容与过程一、复习二、新课教学内容(操作演示讲授)1、配置对象常用的配置选项(1)methods方法(2)计算属性computed(3)watch侦听器(4)过滤器filters2、Vue实例生命周期(1)Vue实例生命周期各阶段(2)Vue实例生命周期状态与钩子函数示例三、课堂训练学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号10学时2上课班级执行时间授课题目Vue实例对象（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握常用的Vue实例属性、和方法。教学重点、难点掌握常用的Vue实例属性、和方法。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习二、新课教学内容(操作演示讲授)1、常用的Vue实例属性2、常用的Vue实例方法（1）实例方法/数据（2）实例方法/事件（3）实例方法/生命周期三、课堂训练学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号11学时2上课班级执行时间授课题目Vue组件（1）组件定义及调用教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握Vue组件的意义及组件的定义和调用。教学重点、难点掌握Vue组件的意义及组件的定义和调用。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、Vue组件2、组件定义及调用（1）全局组件的定义及调用（2）局部组件的定义及调用三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业复习本次课的知识点，课堂练习没有完成的，课后接着完成。教学反思

教案编号12学时2上课班级执行时间授课题目Vue组件（2）--组件之间的通讯教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握组件的层级关系，掌握组件之间的通讯的方法。教学重点、难点掌握组件之间的通讯的方法。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、组件的层级关系2、组件之间的通讯（1）父组件传递数据给子组件（2）子组件传递数据给父组件（3）兄弟之间的数据传递三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号13学时2上课班级执行时间授课题目Vue过渡与动画（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握transition组件、使用transition组件制作过渡动画。教学重点、难点握transition组件、使用transition组件制作过渡动动。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习二、新课教学内容(操作演示讲授)1、transition组件2、transition组件应用CSS过渡制作过渡动画（1）单元素/组件过渡（2）多个元素过渡（3）多个组件过渡（4）列表过渡三、课堂训练学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号14学时2上课班级执行时间授课题目Vue过渡与动画（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习.教学目的及要求了解JavaScript钩子及使用钩子制作动画。掌握CSS动画。教学重点、难点难点：JavaScript钩子及使用钩子制作动画教学资源范例及素材见“素材“文件夹教学内容与过程一、复习二、新课教学内容(操作演示讲授)1、JavaScript钩子2、CSS动画三、课堂训练学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号15学时2上课班级执行时间授课题目Vue路由（1）VueRouter安装和基本用法教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握Vue路由的作用、及路由的基本用法。教学重点、难点路由的基本用法。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、安装VueRouter2、VueRoute基本用法3、设置路由被激活的链接样式4、设置路由切换过渡动画三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业复习本次课的知识点。教学反思

教案编号16学时2上课班级执行时间授课题目Vue路由（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握嵌套路由、命名路由、路由别名教学重点、难点掌握嵌套路由教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、实验内容(操作演示)1、嵌套路由2、命名路由3、路由别名三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业复习本次课的知识点。教学反思

教案编号17学时2上课班级执行时间授课题目Vue路由（3）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握路由重定向、命名视图、路由传递参数、路由对象的使用教学重点、难点理解掌握路由对象、路由参数传递教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、路由重定向2、命名视图3、路由传递参数（1）路由对象（2）路由传递参数（3）查询字符串传递参数三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业复习本次课的知识点。教学反思

教案编号18学时2上课班级执行时间授课题目Vue路由（4）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握路由实例及路由的使用，编程导航在实际开发上的应用教学重点、难点掌握路由实例及路由的使用，编程导航在实际开发上的应用教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、路由实例及方法2、编程式的导航实例三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号19学时2上课班级执行时间授课题目VueCli脚手架（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握搭建VueCLI开发环境、使用vue-cli创建项目的步骤。教学重点、难点使用vue-cli创建项目的步骤教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、教学内容(操作演示)1、搭建VueCLI开发环境（1）安装node.js（2）安装VueCli脚手架构建工具2、使用vue-cli创建项目3、启动项目4、项目的配置目录及配置文件（1）项目根目录（2）项目根目录（3）public目录（4）.src目录（5）router目录三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业复习本次课的知识点。教学反思

教案编号20学时2上课班级执行时间授课题目VueCli脚手架（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求掌握使用vue-cli开发项目。教学重点、难点使用vue-cli开发项目教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、实验内容(操作演示)1、新建单个文件组件2、配置路由3、在App.vue顶级组件中配置路由出口4、在浏览器中测试项目三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业使用传智播客.高校教辅平台下发课后作业。教学反思

教案编号21学时2上课班级执行时间授课题目VueCli脚手架（3）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求综合利用Vue.js技术，开发项目。教学重点、难点灵活应用Vue.js技术开发项目。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、实验内容(操作演示)1、项目介绍2、创建项目3、项目的目录及文件结构4、配置路由5、各模块功能的实现三、学生上机操作四、课堂小结五、布置作业课后继续完成。教学反思

教案编号22学时2上课班级执行时间授课题目VueCli脚手架（4）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求综合利用Vue.js技术，开发项目。教学重点、难点灵活应用Vue.js技术开发项目。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习上次课的内容。二、实验内容(操作演示)1、各模块功能的实现2、在浏览器中测试项目3、项目打包三、学生上机操作学生上机操作练习课本上的示例，教师巡堂指导。四、课堂小结五、布置作业课后继续完成。教学反思

教案编号23学时2上课班级执行时间授课题目Vuex状态管理（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求1.掌握Vuex安装和基本使用2.掌握Vuex配置选项教学重点、难点掌握Vuex配置选项。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习组件之间的通讯，引入Vue状态管理。二、新课教学内容(操作演示讲授)1、Vuex安装和基本使用2、Vuex配置选项（1）state配置选项（2）getters配置选项（3）mutations配置选项（4）actions配置选项（5）modules配置选项三、课堂训练学生上机操示例10-1至示例10-8，教师巡堂指导。四、课堂小结五、布置作业课后继续完成。教学反思

教案编号24学时2上课班级执行时间授课题目Vuex状态管理（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习。教学目的及要求1.掌握Vuex在模块化的打包系统中的使用。2.掌握Vuex在项目开发中的应用。教学重点、难点掌握Vuex在项目开发中的应用。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习：Vuex配置选项。导入新课：在模块化的打包系统使用Vuex二、新课教学内容(操作演示讲授)1、模块化的打包系统中使用Vuex（1）在创建项目时选择安装Vuex（2）npm安装Vuex包2、通讯录案例（1）案例分析（2）实现步骤三、课堂训练1、创建创建通讯录项目时选择安装Vuex。2、实现通讯录的各个功能。教师巡堂指导。四、课堂小结五、布置作业通讯录案例没有完成，课后继续完成。教学反思

教案编号25学时2上课班级执行时间授课题目前后台数据交互技术（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习.教学目的及要求1、了解web前后台数据交互方式。2、了解后台接口文档。3.、掌握接口调用技术—Axios。教学重点、难点掌握接口调用技术--Axios教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习：Vuex状态管理。导入新课：前后台数据交互。二、新课教学内容(操作演示讲授)1、web前后台数据交互方式2、后台接口文档3、接口调用技术（1）Axios基本介绍（2）Axios的基本用法（3）Axios的常用方法（4）axios全局配置（5）在VueCli项目中使用Axios三、课堂训练操作在VueCli项目中使用Axios，教师巡堂指导。四、课堂小结五、布置作业使用高校教辅平台下发课后作业。教学反思

教案编号26学时2上课班级执行时间授课题目前后台数据交互技术（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习.教学目的及要求掌握Axios前后台数据交互技术的应用。教学重点、难点掌握Axios前后台数据交互技术的应用。教学资源范例及素材见“素材“文件夹教学内容与过程一、复习导入新课复习：在VueCli项目中使用Axios。导入新课：VueCli项目前后台数据交互案例二、新课教学内容(操作演示讲授)1、成语查询前后台数据交互案例（1）案例介绍（2）案例实现步骤三、课堂训练上机操作实现成语查询的功能，教师巡堂指导。四、课堂小结五、布置作业使用高校教辅平台下发课后作业。教学反思

教案编号27学时2上课班级执行时间授课题目Vue移动端项目实践（1）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习.教学目的及要求了解。掌握。。教学重点、难点掌握。。教学资源范例及素材见“素材“文件夹教学步骤、内容与时间分配一、复习导入新课复习：导入新课：javasript语言的学习二、新课教学内容(操作演示讲授)三、课堂训练四、课堂小结五、布置作业教学后记

教案编号28学时2上课班级执行时间授课题目Vue移动端项目实践（2）教学方法教师先操作演示讲解实例中的知识点，实例由浅入深。后让学生上机验证。再课堂综合练习.教学目的及要求了解。掌握。。教学重点、难点