1、Web前端开发技术课程标准一、课程定位Web前端开发技术本课程是计算机软件技术专业、计算机网络技术专业的一门专业必修课，本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体打破了传统的学科体系的模式，通过多个项目的练习操作，熟练地掌握岗位所需知识和技能，并不断强化，项目体现操作能力和解决问题能力的培养。充分体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。二、课程目标通过本课程学习掌握VUE的知识体系，模板语法、组件、过渡动画、生命周期等基础内容。掌握VUE基本概念、VUE实例、VUE模板语法、VUE生命周期、VUE组件及组件间通信、VUE过渡与动画；掌握VUEYLI脚
2、手架、脚手架配置、APP路由、单页面APP创建、APP组件开发、VUEYLI组件间传参、VUEYLI插槽、组件切换过渡动画、编译打包处理。培养学生web前端开发能力。同时，通过本课程的学习，提高学生的操作技能，培养学生踏实认真、精益求精、创新的精神，培养良好的职业道德，为学生学习动态网站开发相关课程提供知识和技术支持。通过项目的实现，让学生具备良好的综合素质和职业道德，能够吃苦耐劳、爱岗敬业、团结合作。1 .知识目标(1)理解Vue编程理念与直接操作Dom的差异(2) VUe常用的基础语法(3)理解MVVM设计模式(4)掌握VUe的组件和实例(5)掌握前端组件化，全局样式与局部样式(6)掌握父
3、子组件传值与组件参数校验(7)熟悉VUe中的动画特效(8)理解VUe中的CSS动画原理2 .能力目标(1)具备VUe常用的基础语法应用能力(2)具备使用VUe编写TOclOLiSt功能的能力(3)具备插槽的使用，动态组件的应用能力(4)具备Vue-cli脚手架工具的使用的能力(5)具备组件化思维修改TodOLiSt的能力(6)具备VUe中使用animate.css库的能力(7)具备VUe中同时使用过渡与动画效果能力(8)具备VUe中使用VeIOCity.js库的能力(9)具备VUe中动画的封装能力3 .素质目标具有社会主义和共产主义的理想信念具有改革开放的意识和强烈的竞争意识具有良好的行为规范
4、和社会公德以及较强的法制观念具有良好的职业道德和质量服务意识具有不断学习、不断创新的进取精神具有团队协作精神和较强的协调能力及独立工作的能力具有健康的体魄和良好的心理素质能吃苦耐劳、爱岗敬业三、课程设计1.设计思想以校企合作为切入点，以培养职业能力为核心，以项目教学为主要手段，积极探索教学方法与成绩评价方法的创新，保证课程目标的实现。以职业能力培养为核心的课程设计。在重视学生专业能力的同时，重视方法能力与社会能力的培养。学生通过课程学习掌握脚本语言开发等全方面开发能力。以项目教学为手段的课程实施。一是教学组织项目化，把课程内容设计为若干个实践项目，教学要求具体并可操作；二是教学方法强调启发引导
5、法、合作学习法、真实体验法、循序渐进法等多种方法的灵活运用；三是考核体系由教师、学生、企业共同参与的多元考核、鼓励学生不断追求完善的动态考核、重视平时学习过程的随机考核构成。课程开发和学习情境设计，整个学习领域由以下6个学习情境(课程单元)组成:表1学习情境学习情景1学习情景2学习情景3学习情景4学习情景5VUE基础语法Vue中的组件深入理解VueVue中的动画特Webpack打包工组件效具2.课时分配建议本课程课时为98课时，其中理论教学48课时，实践教学50课时。表2学习要求及学时分配序号项目模块知识内容与要求技能内容与要求学时1VUE基础语法(I)VUE开发环境搭建(2)挂载点，模版与实
6、例(3) VUe实例中的数据,事件和方法(4) Vue中的属性绑定和双向数据绑定(5) v-if,V-Show与v-for指令(6) VUe实例生命周期(7) VUe的模版语法(8)计算属性,方法与侦听器(9)计算属性的getter和setter方法(10) Vue中的样式绑定(IDVUe中的条件渲染(12) Vue中的列表渲染(13) Vue中的set方法(14) Vue中的事件绑定(15) VUe中的表单绑定实训1VUE开发环境搭建实训2Vue实例中的数据,事件和方法实训3Vue中的属性绑定和双向数据绑定实训4v-if,v-show与v-for指令实训5VUe中的样式绑定、条件渲染、列表渲
7、染实训6VUe中的Set方法、事件绑定、表单绑定302Vue中的组件(1)开发TodoList(v-model、v-forv-on)(2)MVvM模式(3)前端组件化(4)使用组件改造TodoLiSt(5)简单的组件间传值(6)组件与实例的关系实训1开发TodoList(V-model、v-for、v-on)实训2用组件化思改造TodoList实训3简单的组件间传值20实训4简单的组件间传值实训5组件与实例的关系3深入理解Vue组件(1)使用组件的细节点(2)父子组件间的数据传递(3)组件参数校验与非props特性(4)给组件绑定原生事件*(5)非父子组件间的传值(6)在VUe中使用插槽(7)
8、作用域插槽(8)动态组件与v-once指令(9)vue-cIi的简介与使用(10)使用vue-cIi开发TodOLiSt实训1父子组件间的数据传递实训2组件参数校验与非props特性实训3给组件绑定原生事件实训4在VUe中使用插槽实训5作用域插槽实训6动态组件与v-once指令实训7使用VUC-Cli开发TodoList244Vue中的动画特效(1)Vue动画-Vue中CSS动画原理(2)在VUe中使用animate,css库(3)在VUe中同时使用过渡和动画(4)VUe中的JS动画与Velocity.js的结合(5) VUe中多个元素或组件的过渡(6) VUe中的列表过渡(7) VUe中的动
9、画封装实训1Vue动画基础实训2在Vue中使用animate,css库实训3在VUe中同时使用过渡和动画实训4Js动画与Velocity.js的结合实训5Vue中的动画封装165Webpack打包工具(1) Webpack配置(2) Webpack解析stylus(3) WebPaCk编译es6语法(4) WebPaCk安装第三方库实训1Webpack配置实训2Webpack解析stylus实训3es6语法8实训4Webpack安装第三方库3.课程单元描述表3课程单元1课程单元名称VUE基础语法课时数理论教学实践教学1614学习目标知识目标1 .熟悉vue基本语法2 .掌握挂载点，模版与实例3
10、 .熟悉VUe中的属性绑定和双向数据绑定4 .掌握VUe实例生命周期5 .掌握VUe的模版语法能力目标1 .能够完成VUE开发环境搭建2 .具备使用VUe实例中的数据,事件和方法的能力3 .能够正确运用v-if,V-Show与v-for指令4 .能够运用VUe中的样式绑定、条件渲染、列表渲染素质目标自主学习专业知识和积极探索的能力具有资料收集与整理的能力，协调人际关系的能力学习内容VUE开发环境搭建、挂载点，模版与实例、VUe实例中的数据，事件和方法、Vue中的属性绑定和双向数据绑定v-if,v-show与v-for指令、VUC实例生命周期、VUe的模版语法、计算属性，方法与侦听器、计算属性的
11、getter和setter、VUe中的样式绑定，条件渲染、列表渲染、VUe中的Set方法教学方法和建议教学方法：任务分解讲解、案例教学教学建议：在示例中教师亲自敲出代码，演示整个编程过程教学条件要求1 .课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础具备简单的编程基础，熟悉HTML标记，JaVaSCriPt基础、基本教师所需执教能力要求1 .重视现代信息技术的应用2 .突出专业技能培养目标3 .注重教与学的互动4 .积极引导学生搜索及查阅资料5 .能精心设计案例表4课程单元2课程单元名称Vue中的组件课时数理论教学实践教学1010学习目标知识目标1 .掌握组件基础知识2 .掌握
12、MVVM模式3 .理解组件化开发思想4 .了解组件与实例的关系能力目标1 .能够正确运用组件开发技术2 .能够利用前端组件化完成开发3 .能够使用组件改造TodoList4 .能够实现简单的组件间传值素质目标自主学习专业知识和积极探索的能力具有资料收集与整理的能力，协调人际关系的能力不断学习、不断创新的精神学习内容开发TOdOLiSt(V-InodC1、v-forv-on)、MVVM模式、前端组件化、使用组件改造TOdOLiSt、简单的组件间传值、todolist组件与实例的关系教学方法和建议教学方法：任务分解讲解、案例教学教学建议：在示例中教师亲自敲出代码，演示整个编程过程计算机操作能力1.
13、课程标准2.授课计划3.授课教案教学条件要求4.教学案例学生已有基础具备简单的编程基础，熟悉HTML标记，JaVaSCriPt基础、基本计算机操作能力教师所需执教能力要求1 .重视现代信息技术的应用2 .突出专业技能培养目标3 .注重教与学的互动4 .积极引导学生搜索及查阅资料5 .能精心设计案例表5课程单元3课程单元名称深入理解Vue组件课时数理论教学实践教学1212学习目标知识目标1 .掌握熟悉组件的细节点知识2 .掌握组件参数校验与非props特性3 .理解掌握作用域插槽的概念4 .掌握vue-cli的简介与使用能力目标1 .能够实现父子组件之间的数据传递2 .能够给组件绑定原生事件3
14、能够在VUe中使用插槽4 .能够运用动态组件与v-once指令5 .能够使用VUe-CIi开发TOdoLiSt素质目标自主学习专业知识和积极探索的能力具有资料收集与整理的能力，协调人际关系的能力不断学习、不断创新的精神学习内容使用组件的细节点、父子组件间的数据传递、组件参数校验与非PrOPS特性、给组件绑定原生事件、非父子组件间的传值、在VUe中使用插槽、作用域插槽、动态组件与v-once指令、vue-cIi的简介与使用、使用vue-cIi开发TodoLiSt教学方法和建议教学方法：任务分解讲解、案例教学教学建议：在示例中教师亲自敲出代码，演示整个编程过程教学条件要求1 .课程标准2 .授课
15、计划3 .授课教案4 .教学案例学生已有基础具备简单的编程基础，熟悉HTML标记，JaVaSCriPt基础、基本计算机操作能力教师所需执教能力要求1 .重视现代信息技术的应用2 .突出专业技能培养目标3 .注重教与学的互动4 .积极引导学生搜索及查阅资料5 .能精心设计案例表6课程单元4课程单元名称Vue中的动画特效课时数理论教学实践教学88学习目标知识目标1 .熟悉掌握VUe动画基础知识2 .掌握熟悉animate,css库3 .掌握熟悉Velocity.js能力目标1,能够在VUC中使用animate,css库2 .能够Vue中同时使用过渡和动画3 .能够完成VUC中的动画封装素质目标自主
16、学习专业知识和积极探索的能力具有资料收集与整理的能力，协调人际关系的能力不断学习、不断创新的精神学习内容Vue动画-Vue中CSS动画原理、在Vue中使用animate.css库、在VUe中同时使用过渡和动画、Vue中的Js动画与Velocity,js的结合、Vue中多个元素或组件的过渡、Vue中的列表过渡、VUe中的动画封装教学方法和建议教学方法：任务分解讲解、案例教学教学建议：在示例中教师亲自敲出代码，演示整个编程过程教学条件要求1 .课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础具备简单的编程基础，熟悉HTML标记，JaVaSCriPt基础、基本计算机操作能力教师所需执教
17、能力要求1 .重视现代信息技术的应用2 .突出专业技能培养目标3 .注重教与学的互动4 .积极引导学生搜索及查阅资料5 .能精心设计案例表7课程单元5课程单元名称Webpack打包工具课时数理论教学实践教学44学习目标知识目标1. 认识WebPaCk打包工具2. 了解WebPaCk解析stylus3. 了解WebPaCk编译es6语法能力目标1 .能够完成WebPaCk配置2 .能够在WebPaCk中安装第三方库素质目标自主学习专业知识和积极探索的能力具有资料收集与整理的能力，协调人际关系的能力不断学习、不断创新的精神学习内容Webpack配置、Webpack解析stylusWebpack编译
18、es6语法、Webpack安装第三方库教学方法和建议教学方法：任务分解讲解、案例教学教学建议：在示例中教师亲自敲出代码，演示整个编程过程教学条件要求1 .课程标准2 .授课计划3 .授课教案4.教学案例学生已有基础具备简单的编程基础，熟悉HTML标记，JaVaSCriPt基础、基本计算机操作能力教师所需执教能力要求1 .重视现代信息技术的应用2 .突出专业技能培养目标3 .注重教与学的互动4 .积极引导学生搜索及查阅资料5 .能精心设计案例四、课程评价1 .Web前端开发技术课程评价及方式说明学生的成绩评定以主要由总结性考核（占50%）.教师技能考核（20%）.考勤（占15%）,课堂提问（占5
19、作业（占10席）等几方面构成。2 .CWeb前端开发技术课程过程考核说明（1）理论知识的掌握以试卷形式考核，题型包括单选、判断、简答、编程等；（2）考勤及课堂提问依据是平时学生的上课出状况、回答课堂提问的积极性及正确率；（3）作业是指每个教学单元中要求学生完成的作业。以完成的数量和质量给予成绩;表8考核标准序号考核项目考核内容成绩比例（%）1形成性考核考勤根据学生上课的出勤情况评分：旷课1次扣2分；迟到、早退2次各扣1分，课堂违纪被老师点名批评2次扣1分152课堂提问回答问题的积极性、准确性、深度53作业完成情况、质量，不交作业1次扣2分，5次不交不得分204总结性考核期末进行闭卷进行综
20、合考试（试卷），理论知识考核505职业技能和职业素质考核测试学生对知识的掌握和技术的应用能力以及实训中职业素质的习惯养成，关键代码是否注释、代10码是否缩进、是否符合企业规范、是否遵守实践场所管理规定等进行打分合计100表9总结性考核标准序号考核项目考核内容成绩比例(%)1VUE基础语法VUE开发环境搭建、挂载点，模版与实例；Vue实例中的数据,事件和方法；VUe中的属性绑定和双向数据绑定;v-if,V-ShoW与v-for指令、VUe实例生命周期；VUe的模版语法；计算属性,方法与侦听器；计算属性的getter和setter、Vue中的样式绑定，条件渲染；列表渲染；VUe中的Set方法352
21、Vue中的组件开发ToCIoLiSt(v-modeIsv-forsv-on)；MVVM模式；前端组件化；使用组件改造TodoList;简单的组件间传值;todolist；组件与实例的关系303深入理解Vue组件使用组件的细节点；父子组件间的数据传递；组件参数校验与非props特性；给组件绑定原生事件；非父子组件间的传值；在VUe中使用插槽；作用域插槽；动态组件与v-once指令；vue-cli的简介与使用；使用vue-cli开发TodoList154Vue中的动画特效VUC动画-VUe中CSS动画原理；在VUe中使用animate.css库；在VUe中同时使用过渡和动画;VUe中的Js动画与V
22、elocity,js的结合；VUe中多个元素或组件的过渡；Vue中的列表过渡；VUC中的动画封装155Webpack打包工具Webpack配置;Webpack解析stylus；Webpack编译es6语法；WebPaCk安装第三方库5合计100表10技能考核点序号考核项目考核内容成绩比例(%)1VUE基础语法VUE基础语法；Vue实例中的数据,事件和方法；v-if,V-ShOW与v-for指令、Vue实例生命周期；Vue的模版语法；计算属性，方法与侦听器；计算属性的getter和setter、Vue中的样式绑定，条件渲染；列表渲染；VUe中的Set方法202Vue中的组件MWM模式;简单的组件
23、间传值；todolist；组件与实例的关系203深入理解Vue组件父子组件间的数据传递；组件参数校验与非props特性；给组件绑定原生事件；在VUe中使用插槽；作用域插槽；动态组件与v-once指令；204Vue中的动画特效VUe动画基础;在VUe中使用各种动画库资源205Webpack打包工具WebPaCk配置；WebPaCk安装第三方库20合计100五、实施建议1 .授课资料编写建议授课资料是实现教学目标的重要载体，必须依据本课程标准以及IT岗位国家职业标准和IT专业培养目标为主线编写授课计划、教案和教学案例，坚持理论够用，强调知识传授的趣味性。教材应充分体现任务引领，引入必要的理论知识，
24、增加实践操作内容，强调理论在实践过程中的应用。编写内容的组织应以任务组织、项目驱动的原则，随同教材配备电子教案、多媒体教学课件和综合实践题目，便于组织教学。本课程先行课程是计算机应用基础、网页编程和JaVaSCriPI脚本程序，建议本课程在第五学期开设。2 .教学方法建议（1）在教学过程中，应立足于加强学生知识运用能力的培养，采用项目教学，以工作任务引领提高学生学习兴趣，激发学生的成就动机。（2）本课程教学的关键是“理论与实践教学一体化”，在教学过程中，教师示范和学生分组讨论、训练互动，学生提问与教师解答、指导有机结合。（3）在教学过程中，要创设真实项目情境，利用相关知识分析设计过程，在分析工作过程中提高学生的岗位适应能力。（4）在教学过程中，要应用多媒体、投影、计算机等教学资源辅助教学，帮助学生熟悉页面的制作和编程。（5）教学过程中教师应积极引导学生提升职业素养，提高职业道德。六、教材及其它教学资源教材使用教材：Vue.js前端开发实战，中国工信出版集团，人民邮电出版社十三五规划教材，黑马程序员编著2020年出版。参考书目：1.Vue.js从入门到项目实战，清华大学出版社，刘汉伟，2019.04.01出版.
