职业学院移动应用开发专业使用Vue优化web页面课程标准.docx
XXXX职业学院移动应用开发专业使用Vue优化Web页面课程标准一、课程基本信息1.*程名称:使用YU。优化Web页面(54411405>2课程H性:专业核心课(B类).3.开课学期I31学年,第2学期4基准学时I84学时,计匚学分二、课程定位"史用Vue优化Web页面3是移动应用开发专业的核心课程之一,是该专业的专业必修课.通过本课程的学习,使学生具备Beb应用开发相关知识、良好的编程习惯和前端项目开发的能力,能胜任基于eb前端开发等工作任务.Vuc的前端体系中,Vue指令,生命同期,Vue姐件占据了非常重要的位置,不仅成为Web项目开发的利器,而R也是人们接触和使用VUC的一个基础.通过详实的内容和丰富的窠例,引领学生学习VUe指令,生命周期,YUe组件的开发体系,以及这套技术在项目开发中的实际应用。同时,通过教学过程中的实际开发过程的规冠要求,培养学生分析和解决实际问题的能力,强化学生的职业道德意识、职业素质笄逆识和创新意识,为学生以后从事更专业化的软件开发工作览定基础.£使用VUe优化Web页面是面向计算机相关专业的一门专业Vue开发入门课程,涉及Vue基础特性.VUe指令,VUe过滤器,VUC姐件,YUCX状态管理等内容,通过本课程的学习,学生能够了解VUe的语法,健弊掌握VUe开发技术并开发简单的<山前端项目。前导课程有CHTM1.商业网站设计、使用JaVaSCriP1.设计交互页面式使用ES6优化配b页面,后续课程有打好用BOOtStraP优化能b页面、毕业实习等.三、课程目标1.能力目标(1)具缶使用Jm(1.,CSS,JaVaSCriP1.等技术编写网站前台静态页面的能力:(2)具备使用Ajax等技术编写无刷新网站界面的能力:(3)具符在Web环境卜创隹,使用Vue快速开发项目的能力:2知识目标(1)了解本课程的教学目标和该课程在本专业课程体系中的作用、考核方式:(2)掌握HTM1.,CSS,JavaScript等基本的网页编程知识:(3)掌握使用AjaX等技术编写无刷新网站界面;(4)掌握在Web环境下创建,配置并籁程访问MySQ1.数据库的相关知识:(5)熟悉Web环境下文件律作,邮件端程等相关的知识:(6)掌握VUe联础特性,VUe指令,Vue过/器,YUe组件,YUeX状态管理&态度目标(1)具备前端的一叫相关知识,尤其是HnI1.JCSS1JavaScript:(2)具备良好的职业道M素养和产海细致的工作作风:(3)具备一定的自学能力,独立分析问题和解决问题的能力。四、课程设计本课程标准在设计上本看僦方法.理应用的总体思路.突出体现职业教育的技能型、应用性特色,着重培养学生的实践应用技能.力求达到理论方法好用,技术技能过便的目的.首先应依据专业人才培养方案中关于人才培养目标的阐述,明确课程目标;其次,结合职业教育课程观、教学观、能力双,旗于软件工程的开发过程,以项目化教学来组织课程内容,在课程内容的选择与排序中,以软件工程实施的不同阶段、典型任分为软体,将课程内容划分为互相联系的学习情景:第三,通过对各学习情故中学习目标、主要内容、授课方式、师生要求等各项内容的描述.来现葩课程所要求的内容:第四,通过对课程内容的选取和组合.以一个完整的项目为战体,完成课程的实施;G后,通过时项目实施过程中各个环节的考察和评价,来完成时课程的评鉴与考核。2.课时分配序号课程单元学习任务参考学时1YUe.js简介了解Tuejs是什么”,了解”为什么要用Vue.js",掌握"Yue.js的He11o*OrId掌握.网页开发的前世今生,掌握“MVC、招YP、MVVM三者的区别和优劣”82基础特性了解.实例及选项了解.模板二掌握"数据二掌握"方法”,常握"生命周期"83指令了解”内置.指令了解"v-bind",掌握“-roode1.",掌握"'if-e1.se-show”.掌握'-for”84过游器了解.过沌器原理概述”,了解"过沌器注册掌握“双向过漉器:掌握"动态参数",掌握“过泄器在Vue.js2.0中的变化”85过渡了rcss过渡了解“CSS过渡的用法”,掌握"CSS过渡钩子函数掌握.显示声明过渡类型",掌握“自定义过渡类名.86组件了解组件注册二了解"全局注册掌握"筒部注册掌握"注册语法怖”,掌握"组件选项”87Vue.js常用插件了解"Vue-router",了解"引用方式”,掌握"基本用法掌握"倏套路内掌握“路由兀配”88Vue.js工程实例了解“准备工作二了解“webpack'.掌握“vueToader",掌握.目录结构二掌握"前端开发”89状态管理:Vuex了解“概述8了解"筒单实例掌握"所衢组件”,掌握"创建并注入store”.掌握“创建action及组件调用方式”10跨平台开发:Weex了解“CeX简介”,了解“eex安装,掌握Fos环境安装掌握“andruid环境安装”,掌握、曲雉运行”811Vue.js2.0新特性了解"Render函数了解"creaieE1.cmn1.用法,掌握使用案例二掌握函数化俎件”,掌握"JSV43.课程单元描述I1.程单元一Vue.”介课程单元名称Vue.js简介课时数8学习目标通过学习,学生能够了解"Yue.js是什么",了解"为什么要用Vue.js*.掌提Hue.js的He1.1。wor1.d",掌握"网页开发的前世今生掌握WC'MVP.MVVM三者的区别和优劣.学习内容1. Vue.js是什么2. 为什么要用VUe.js3. Vue.js的HeIIouorId,1.网页开发的前世今生5 .MVC,MVP,MVVM三者的区别和优劣6 .开发工具学习方法和建议在教学中采用理论讲授法、启发引导法、窠例分析法、,一定要能询动学生学习的主动性,让学牛.自己总结提商教学条件要求多媒体网络教室学生已有菸础WEB前跳HTM1.与CSS技术能力,JavaScript编程技术开发教师执教能力要求时ES6的前世今生了解得非常透彻,相关知识非常熟练,能够对学生的想法及时做出评价并善于引导学生理界单元二MWtt课程单元名珠施础特性课时数、学习目标通过学习,学生能够了解”实例及选项",了解"快板M掌握"数据”,掌握”方法掌握"生命周期"学习内容1 .实例及选Iij1.1 模板1.2 数据1.3 方法1.4 生命周期2 .数据绑定1 .1数据绑定语法2 .2计算属性3 .3表单拄件4 .IC1.aSS与Sty1.e绑定3 .模板泡染3.1 前后崩渲染对比3.2 条件渲染3.3 列表演染3.4 4IcBp1.atc标签用法4 1W件绑定与监听4.1 方法及内联语句处埋器4.2 修饰符4.3 与传统事件绑定的区别5.Vue.cxtend学习方法和建议在教学中采用理论讲授法、培发引导法、案例分析法、,一定要能调动学生学习的主动性,让学生自己总结提高教学条件要求多媒体网络教史学生已有基础WEB前端HTM1.与CSS技术能力,JavaScript编程技术开发教酊执.教能力要求对ES6的曲世今生了解得非常透彻相关知识非常熟练,能够对学生的想法及时做出评价并善于引导学生课程单元三指令课程总元名称指令课时数8学习目标通过学习,学生能够了解“内置指令,了解“u-bim,掌握*v-tnode1.*,掌握"v-if-e1.se-shw*,掌握"v-fcr"学习内容1 .内置指令1.1 v-bind1.2 v-三odc1.1.3 V-if-e1.se-show1. 4v-for1. 5v-on1.6 v-text1.7 VTnM1.1.8v-e1.1.9 v-ref1.10 V-DrC1.11 v-cIoak1.12v-once2 .自定义指令基础2.1 指令的注册2.2 指令的定义对象2.3 指令实例属性2.4 4元素指令3 .指令的高级选项3.1 1params3.2 deep3.3 IwoVay3.4 acceptState三ent3.5 termina1.3.6 priority4 .指令在Vue.Js2.。中的变化4.1 新的种子一函数4.2 钩子函数实例和参数变化4.3 UPdate函数触发变化4.4 参数binding对象学习方法和建议在教学中采用理论讲授法、启发引导法、窠例分析法、,一定要能遍动学生学习的主动性,让学生自己总结提高教学条件要求多媒体网络教室学生已有祭眦WEB前跳HTM1.与CSS技术能力,JavaScript编程技术开发教师执教能力要求时ES6的前世今生了解得非常透彻.相关知识非常熟竦,能够对学生的想法及时做出评价并善于引导学生课程单元名珠过谑器课时数、学习目标通过学习,学生能够了解”过谑器晚理概述了解“过泄器注册掌握"双向过泄器",掌握"动态多数掌握“过滤器在YUe.js2.O中的变化”学习内容1 .过渔湍原理概述2 .过浓据注册3 .双向过滤甥1.动态参数5 .过酒器在YUe.js2.。中的变化6 .计算局性与过漉零学习方法和建议在教学中采用理论讲授法、启发引导法、窠例分析法、,一定要能遍动学生学习的主动性,让学牛.自t2总结提商教学条件要求多媒体网络教室学生已有祭眦WEB前跳HTM1.与CSS技术能力,JavaScript编程技术开发教师执教能力要求时ES6的前世今生了解得非常透彻.相关知识非常熟竦,能够对学生的想法及时做出评价并善于引导学生1«程单元五过波课程单元名称过渡课时数8学习目标通过学习,学生能够了解"CSS过渡”,了解"CSS过渡的用法掌握"CSS过渡的子函数二掌樨”显示声明过渡类型二掌握”自定义过渡类名”学习内容1. CSS过渡1.1 CSS过渡的用法1.2 CSS过渡钩子函数1.3 显示声明过渡类型1.4 自定义过渡类名2. JaVaSCriPt过渡1 .1Ve1.ocity,js2 .2JavaScript过渡使用3 .过渡系统在Vu%js2.Q中的变化3.1 用法变化3.2 类名变化3.3 笆子函数变化3. 4transitiongroup学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、,一定要能得动学生学习的主动性,让学生自己总结提高教学条件要求多媒体网络教空学生已有明础WEB前跳HTM1.与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻相关知识非常熟练,能够对学生的想法及时做出评价并善于引导学生W三*融件课程单元名称讥件课时数学习目标通过学习,学生能鲂了解”组件注册了解"全局注册",掌握"局部注册",掌握"注册语法糖",掌握"组件选项”学习内容1 .«1件注册1.1 全局注册1.2 局部注册1.3 注册语法题2 .祖件选项2.1 31件选项中与YUe选项的区别2.2 组件ProPS3 .组件间通信3.1 1宜接访问3.2 自定义事件监听3.3 自定义W件触发机制3.4 子组件索引4 .内容分发4.1 基础用法4.2 漏谛作用域4.3 默认$134.4 s1.ot属性相同4.5 Moda1.实例5 .动态组件5.1 基础用法5.2 keep-a1.ive5.3 activate钩子函数6 .Vue.js2.Q中的变化6. 1event6.2keep-a1.ive6.3s1.ot6.4refs学习方法和建议在教学中采用理改讲授法、启发引导法、案例分析法、,一定要能调动学生学习的主动性,让学生自己总结提湎教学条件要求多媒体网络教室学生已有基础WEB前湘HTMI.与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻.相关知识非常熟练.能够对学生的想法及时做出评价并善于引导学生课程单元七”常用件课程单元名称Vue.js常用插件课时数8学习目标通过学习,学生能够了解ue-router",了解"引用方式",掌握"基本用法",掌握"嵌套路由M掌握"路由匹用”学习内容1. Vuerouter1.1 引用方式1.2 基本用法1.3 帙套路由1.4 路由匹配1.5 具名路由1.6 路由对象1.7 v-1.ink1.8 路由配置项1.9 route钩子函数1.10 路由实例属性及方法1.11 的变化2. VUe-resource2.1 引用方式2.2 使用方式2.3 S1IttP的api方法和选项参数2.4 拦器2.5 Srcsourcc用法2.6 时装SerYiCe层3.Vue-devtoo1.s3.1 安装方式3.2 使用效果学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、,一定要能得动学生学习的主动性,让学生自己总结提高教学条件要求多媒体网络教空学生已有明础WEB前跳HTM1.与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻相关知识非常熟练,能够对学生的想法及时做出评价并善于引导学生M单元八vu”工S卖例课程单元名称Vue.js工程实例课时数学习目标通过学习,学生能鲂了解“准备工作",JftTwebDac1.T,掌握-Vue-Ioader",掌握"目录结构",掌握"前端开发"学习内容1 .准备工作1.1 webpack1.2 vuc-1.oadcr2 .目录结构3 .前端开发4 .后谕联网5 .部朝上线5.1 1生成线上文件5.2 ninx5.3 Rit1.ab5.4 jenkins学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、,一定要能网动学生学习的主动性,让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前端HTM1.与CSS技术能力.JavaScript编程技木开发教师执教能力要求对ES6的解世今生了解得非常透彻,相关知识非常熟练,能够对学生的想法及时做出评价并善于引沐学生瓷"元九状和H1.VuM课程单元名称伏态管理:Vuex课时数B学习目标调过学习,学生能够了解"概述",了解”简能实例",掌握"所衢级件掌握"创建并注入StorC,常旌创建EICtion及组件词用方式*学习内容1 .概述2 .简单实例2.1 所需祖件2.2 创建并注入StOre2.3 3创建action及,件调用方式2.4 4创建ImJtMiOn2.5 坦件获取Sta1.C3 .严格模式4 .中间件1 .1快照4 .21.ogger5 .表单处理6 .目录结构6.1 简单项目6.2 大型项目7 .实例7.1state结构7.2actions.Js7.3app.js7.4组件结构7.5baseM件7.6屣示希果8 .Vue.js2.O的变化8.1 Stnte8.2 Getters8.3 Mutations8.4 Actions8.5 5Modu1.es学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、,一定要能诩动学生学习的主动性,让学生自己总结提拓教学条件要求多媒体网络教室学生已有基础WEB前端HTM1.与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻,相关知识非常熟练,能防时学生的妞法及时做出评价并港于引峥学生课程单元十JHt台开发,Vmx课程单元名称踏平台开发:Weex课时数、学习目标通过学习,学生旎够了解PeCX简介*了解飞eex安茂二掌握"i。S环境安装掌握"android环境安装、常梅”web端运行”学习内容1. Weex简介2. WeeX安奘1. 1i。S环境安装2. 2android环境安装3. 3Veb端运行3. WeeX实例与运行1. WeeX基础语法1.1 数据绑定1.2 事件绑定1.3 模板逻辑5. WCCX内置担件5.1scro1.1.er5.21.ist5.3Switch5.4S1.ider5.5wxc-tabbar5.6wxc-navr>agc6. WMX内置模块6. 1do*6.2 steam6.3 noda1.6.4 animation6.5 webview6.6 navigator6.7 storage学习方法和建议在教学中采用理改讲授法、启发引导法、案例分析法、,一定要能调动学生学习的主动性,让学生自己总结提高教学条件要求多媒体网络教室学生已有基础WEB前编HTM1.与CSS技术能力.JavaScript编程技术开发教师执教能力要求对ES6的前世今生了解得非常透彻,相关知识非常熟练,能好对学生的想法及时做出评价并善于引导学生售程单元十一Vu.J.2.课程单元名称k'ue.Js2.0新特性课时数1学习目标通过学习,学生能修了解Xendor函数了解"createEiement用法掌握“使用案例,掌娓”函数化组件掌握ISX”学习内容1 .Render函数1.1 CrcateE1.cment用法1.2 使用案例1.3 函数化祖件1.4 JSX2 .极芬端演染1 .1YUe-SCrVe1.renderCr2 .2简单实例3 .3缓存和流式响应4 .ISPR实例学习方法和建议在教学中采用理论讲授法、启发引导法、案例分析法、,一定要能圜动学生学习的主动性让学生自己总结提高教学条件要求多媒体网络教室学生己有基础WEB前端HTM1.与CSS技术能力,JavaScript编程技术开发教师执教能力要求对ES6的附世今生了解得非常透彻,相关知识非常熟练,能够对学生的想法及时做出评价并善于引导学生五、课程考核本课程考核偏市与考核学生的学习过程及学习结果,因此考勤占28,课堂纪律及作业占20%,项目测验及期末考试占60S,六、教材及其它教学资源1 .财效材4Vuejs前端开发实战黑马程序员告出版社:人民邮电出版社ISIW:9787115523235版次:1出版时间:202004012 .X书CVue2实践揭秘(牌文视点出品)梁擀坤著出版社:电子工业出版社ISBN:9787121310683一次r1出版时间:2017-04-01深入浅出Vue.js(图灵出品)刘博文著出版社:人民邮电出版社ISBN:9787115509055版次,1出版时间:2019-03-01Vue.js从入门到JS日实战刘汉伟若出版社:清华大学出版社ISBN:9787302523888版次rI出版时间:2019-03-013 .其它教学资M七、编制说明ttM>m制单位.信息工程学院制日期:2020.12.5教学单位负责人:Xn