《Web前端开发技术》课程标准.docx

《《Web前端开发技术》课程标准.docx》由会员分享，可在线阅读，更多相关《《Web前端开发技术》课程标准.docx（14页珍藏版）》请在第壹文秘上搜索。

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 .授课计划3 .授课教案4 .教学案例学生已有基础具备简单的编程基础，熟悉HTML标记，JaVaSCriPt基础、基本计算机操作能力教师所需执教能力要求1 .重视现代信息技术的应用2 .突出专业技能培养目标3 .注重教与学的互动4 .积极引导学生搜索及查阅资料5 .能精心设计案例表6课程单元4课程单元名称Vue中的动画特效课时数理论教学实践教