一、基本信息表
教师姓名 （负责人） | 胡献宇 | 职称 | 讲师 |
课程团队成员姓名 | 姜敏，寇丽君 | ||
学院 | 高等职业技术学院 | 系（部） | 计算机技术系 |
课程名称 | JavaScript开发实践 | 课程代码 | 52018CC112 |
学时 | 64 | 学分 | 4 |
课程类型 | □通识必修课 □通识选修课 □学科基础必修课 R专业必修课 □专业选修课 □其他 | 授课对象 | 专科学生 |
二、教学目标与学情分析
（一）学情分析
（1）课程授课对象为计算机应用技术专业专科二年级学生，本届学生通过前修网页设计与制作、JavaScript开发基础等基础性课程的学习，具有一定的网页设计能力，但是对于动态实现网页设计，依然缺乏系统性的认识，无法做到快速构建一个网页。
（2）经过与辅导员和班导师的沟通，了解到该届学生学习态度较为端正，思维较活跃，课程气氛较好，绝大多数的学生具有强烈的求知欲望，能够积极参与课堂讨论和学习。
（3）学生自入校以来，通过参加大学生创新创业项目的训练和比赛，已经具备了一定开发和创新能力。
（二）教学目标
（1）知识与能力目标
掌握父子组件通信的原理和方法；综合运用所学Vue.js组件通信的知识，完成一个综合实用案例，提升学生的编程能力和举一反三的能力。
（2）思政教学目标
在学习专业知识技能的同时深入学习贯彻党的二十大精神，充分利用好抗美援朝出征地红色文化资源，弘扬伟大抗美援朝精神。
三、教学内容设计
（一）教学重点与难点
1、教学重点
掌握Vue中父子组件的通信方式。
2、教学难点
掌握子组件向父组件传递数据的方式。
（二）课程思政元素
为深入学习贯彻党的二十大精神，充分利用好抗美援朝出征地红色文化资源，弘扬伟大抗美援朝精神，在课程第五章第四节中运用 Vue.js 组件通信，完成一个抗美援朝出征地知识问答的案例。
（三）教学内容设计
设计并实现抗美援朝出征地问答案例，实现综合练习Vue 指令，包括 v-if、v-else、v-for、v-model 和 v-on 指令，能够实现对指令的综合运用。案例教学主要分为三部分，第一部分是界面的设计，包括首页和弹框的设计，使用 ZUI
框架实现样式设计；第二部分是业务逻辑的开发，包括首页数据的渲染、弹框页面的数据处理；第三部分是组件之间的通信，包括首页数据传入弹框页面。课程最后号召大家大力弘扬伟大抗美援朝精神，传承红色基因，厚植爱国情怀，引导和激励学生在新时代新征程上踔厉奋发、勇毅前行。
四、教学方法与手段
讲授法和案例演示法
五、教学过程
教学活动 | 教师活动 | 学生活动 | |
课前活动 | 布置任务，让学生准备案例素材 发布案例知识点预习的视频 | 观看视频，复习Vue指令和Vue组件通信等知识。 | |
课中活动 | 考核先行学习情况 1、Vue指令包括哪些？ 2、父组件向子组件通信的关键字? | 根据课前学习回答问题 | |
案例引入 雄赳赳，气昂昂，跨过鸭绿江……”，曲调激昂雄壮，歌声气势恢宏、振奋人心，唱出了抗美援朝的主旋律，使同学们真切地感受到了志愿军昂扬的斗志、钢铁一般的意志和无畏的精神，让理想信念在歌声中愈加坚定。通过项目演示，一方面能了解到该案例要学习和使用的Vue.js 知识点，另一方面在学习技术的同时能加深对抗美援朝历史的了解，明白此时此刻幸福生活的来之不易。 案例讲解 1、界面布局设计和样式设计 参考效果图，使用HTML技术实现页面布局，引入ZUI框架，实现样式设计； 2、业务逻辑开发 详细开发，可参考案例教学实施。 |
观看案例效果，思考案例实现的思路和所用到的知识点
跟着老师动手实践。 | ||
课堂练习 补充数据信息，在首页渲染更多内容。 | 学生举一反三，对案例进行拓展和晚上，实践相关练习。 | ||
归纳总结 总结使用到的技术。希望通过这种方式，坚定学生理想信念，让学生能够爱党、爱国、爱社会主义、爱人民、爱集体。号召大家大力弘扬伟大抗美援朝精神，传承红色基因，厚植爱国情怀，引导和激励学生在新时代新征程上踔厉奋发、勇毅前行。 | 参与总结，认真听老师总结 | ||
课后活动 | 布置作业 1、在主页补充搜索功能； 2、在主页补充删除功能； | 完成作业。 |
案例教学实施
（1）首页数据渲染，引入Vue.js文件，在script标签内构建Vue实例，并声明数据，关键代码如下：
var app = new Vue({ el: '#app', data: { questions: [ { id: 1, img: 'img/0sh.jpg', problem: '抗美援朝中国将领生平——彭德怀', answer: `彭德怀（1898-1974），中国无产阶级革命家，军事家，政治家。中国人民解放军创建人和领导人之一，中华人民共和国元帅。原名得华，号石穿。湖南湘潭人。1898 年 10 月 24 日出生于湖南省湘潭县彭家围子。幼年读过两年书，因家贫辍学务农，下煤窑做工。十五岁参加饥民闹粜，被官府通缉，逃到洞庭湖当堤工。1916 年入湘军当兵，痛恨帝国主义侵略和军阀黑暗统治，萌发富国强兵思想。1919 年在连队秘密组织“救贫会”，后因派会员杀死一恶霸被捕，在押解途中逃脱。1922 年改名彭德怀，考入湖南陆 军军官讲武堂，毕业后回湘军任排长、连长、营长。}]} });; |
为了实现在首页显示相关数据信息，需要修改布局代码的逻辑，使用v-for遍历数组数据，并采用插值的方式和绑定属性的方式，实现标题的显示以及图片的显示，修改后的布局关键代码如下：
至此，首页布局及数据显示完成。
数据遍历后渲染效果图2所示：
图2数据遍历渲染效果
（2）在script标签内将对话框注册为全局组件，并设置关键属性，关键代码如下：
Vue.component('detail', { template: '#book-modal', data(){ return { answer: '', showicon: 3 } } }); |
接下来需要实现对话框内，揭晓问题答案。需要在组件内部，声明一个变量 showicon，用于控制显示提示信息以及图片信息；首先需要补充对话框的布局代码，关键代码如下：
抗美援朝中国将领生平——彭德怀 v-else-if='showicon==2'> |
学生问题回答正确效果如图 3 所示：
图3问题回答正确
实现组件之间的通信，在触发显示对话框的时候，需要将当前题目的 id 传给对话框，对话框根据参数实现数据的渲染，关键代码如下：
detail: function (index) { this.showModal = !this.showModal; this.detailquestion = this.questions[index - 1]; } |
至此，完成组件通信。
六、教学评价
明确了课程的价值目标，提高了育人效果。较好地发挥了文学经典不说教、不枯燥，但有深度、有思想、有立场的优势，尤其是采用党史问题回答的方式，对于培养学生的家国情怀、社会责任感和历史使命感等具有积极的教育作用。注重案例设计，较好地满足了大学生对有难度的高质量学习的需求，课程的挑战度增加了，学生的获得感也增强了。从知识与能力、情感与态度、价值与立场这三个维度，组织课堂教学和课下阅读，同步实现价值塑造、能力培养、知识传授三位一体的教学目标，教学方法接地气，课堂互动感强，学生参与度高。
七、思政教学反思
（一）思政教学的意义与价值
将与课程有关的思政元素融入课堂教学中去，潜移默化地对学生进行思想政治教育，完成“立德树人”的根本任务。通过对课程思政在教学中必要性，根据课程性质和案例性质实施课程思政，在章节案例的教学中融入抗美援朝和出征地知识的介绍。学生在学习掌握专业知识的同时，也能主动了解抗美援朝历史和精神，引导同学们将伟大的抗美援朝精神内化于心、外化于行，不断从中汲取力量，以青春之我、奋斗之我，为实现中华民族伟大复兴贡献力量。
（二）思政教学的成效和特色
通过对 Vue.js 组件通信应用——抗美援朝，那些你不知道的答案的学习，重点掌握 Vue.js 组件通信的原理和方法，在此引入思政元素——抗美援朝出征地，通过对抗美援朝问题的思考然后回答案例的问题，引导同学们主动了解抗美援朝历史和精神，珍惜今天的幸福生活，不辜负老战士的期望，要把抗美援朝精神传承好、弘扬好。正如习近平总书记所说：“青年是祖国的前途、民族的希望、创新的未来。青年一代有理想、有本领、有担当，科技就有前途，创新就有希望。”新中国正值风华正茂，朝气蓬勃。面向未来，青年学子须用尽青春之力，创造青春之中国、青春之民族，在新征程上不断创造出属于吾辈新奇迹。
（三）思政教学的改进措施
《JavaScript开发实践》课程是一门专业核心课，该课程主要以学习使用 Vue.js 做网页的形式学习 JavaScript 框架技术，因此比较容易引入思政元素。在授课过程中，教师能够通过案例、故事等教育学生爱党、爱国、尊重历史等，但是在总结思政元素的时候总感觉高度不够，或者不能准确地高度概括。接下来要在教学过程学、思、悟三大环节中，更加注重思政元素的主题升华，尤其是在日后教学“悟”环节要选取更广泛的思政元素和案例素材作为教学素材来对学生进行鼓励和引导。在传授专业课知识技能的同时对学生进行全方位的思想引领、价值引领、道德引领及法制引领，全面提高学生的综合素质，弘扬社会主义核心价值观，激发学生的民族自信与爱国主义热情。
八、教学资源拓展
Vue组件学习链接：https://cn.vuejs.org/guide/introduction.html
九、其他
无