《ECharts数据可视化实战》课件第6章 Vue.js项目开发基础 教案

第6章Vue.js项目开发基础教案课程名称：《ECharts数据可视化实战》课程类别：必修适用专业：大数据技术类、商务数据分析与应用、电子商务等相关专业总学时：64学时（其中理论32学时，实验32学时）总学分：4.0学分本章学时：12学时材料清单《ECharts数据可视化实战》教材。配套PPT。数据。代码。引导性提问。探究性问题。拓展性问题。教学目标与基本要求教学目标首先介绍Vue概述、Vue的下载和引用、第一个Vue实例。然后着重介绍Vue常用指令、事件监听、事件处理和事件修饰符、双向数据绑定、了解Vue生命周期。最后介绍Vue路由的搭建、掌握Axios组件获取后台数据。基本要求Vue的下载和引用、创建第一个Vue实例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架获取后台数据。问题引导性提问引导性提问需要教师根据教材内容和学生实际水平，提出问题，启发引导学生去解决问题，提问，从而达到理解、掌握知识，发展各种能力和提高思想觉悟的目的。Vue.js中，如何遍历一组数组中的数据？探究性问题探究性问题需要教师深入钻研教材的基础上精心设计，提问的角度或者在引导性提问的基础上，从重点、难点问题切入，进行插入式提问。或者是对引导式提问中尚未涉及但在课文中又是重要的问题加以设问。Vue.js中，如何进行双向数据绑定？Vue.js中，如何进行页面跳转？拓展性问题拓展性问题需要教师深刻理解教材的意义，学生的学习动态后，根据学生学习层次，提出切实可行的关乎实际的可操作问题。亦可以提供拓展资料供学生研习探讨，完成拓展性问题。如何在开发中实现前后端分离？主要知识点、重点与难点主要知识点Vue的下载和引用、创建第一个Vue实例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架获取后台数据。重点掌握Vue常用指令。Vue路由的搭建。难点掌握Axios框架获取后台数据。教学过程设计理论教学过程了解Vue概述。了解Web前端技术发展概述。了解Web前端三大主流框架。掌握Vue的下载与引入。掌握Vue实例及其选项。掌握双大括号标签、v-text与v-html指令。了解Vue优化指令：v-cloak，v-once，v-pre。掌握v-if/v-else-if/v-else指令用于条件渲染。掌握v-show指令用于切换元素的显示与隐藏。掌握v-bind指令用于单向数据绑定。掌握v-for指令用于列表渲染。掌握v-on指令用于事件监听与事件处理。掌握v-model指令用于双向数据绑定。掌握Vue实例创建期间的生命周期函数。掌握路由的安装和基本使用。掌握嵌套路由、传递参数及获取参数、路由重定向、编程式导航。Axios的安装及引入、get请求、post请求。实验教学过程在HTML文件中创建第一个Vue实例代码分析。输出data对象的属性值案例代码分析。使用简单表达式关键实例代码分析。v-text指令与插值表达式案例代码分析。v-text与v-html指令及胡子语法案例代码分析。v-if指令案例代码分析。v-if&v-else指令案例代码分析。v-else-if指令案例代码分析。v-if/v-else-if/v-else指令案例代码分析。v-show指令案例代码分析。v-bind指令案例代码分析。v-for指令遍历数组案例代码分析。v-on指令产生随机数案例代码分析。v-on指令绑定方法案例代码分析。v-on指令-阻止冒泡案例代码分析。v-model指令-绑定单行文本框案例代码分析。v-model指令-文本框搜索图书信息案例代码分析。v-model指令-绑定文本域案例代码分析。v-model指令-绑定文本域案例代码分析。v-model指令-绑定多个复选框案例代码分析。v-model指令-绑定单选下拉列表案例代码分析。生命周期函数案例代码分析。vue-router的使用案例代码分析。嵌套路由示例案例代码分析。query传参案例代码分析。params传参案例代码分析。router.goBack()后退按钮案例代码分析。使用axios检测用户是否可用案例代码分析。教材与参考资料教材范路桥，郑述招，陈红玲，等．ECharts数据可视化实战[M]．西安：西安电子科技大学出版社．2023．参考资料范路桥，张良均，郑述招，等[M].Web数据可视化(ECharts版).北京：人民邮电出版社，2021.黑马程序员.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.师晓利，刘志远，杜琰琪.Vue.js前端开发实战[M].北京：人民邮电出版社，2020.王凤丽，豆连军.Vue.js前端开发技术[M].北京：人民邮电出版社，2019.肖睿，龙颖，李辉，等.Vue.js企业开发实战[M].北京：人民邮电出版社，2018.百度ECharts官网./zh/2022-5-7