职业技术学校《前端框架技术vue》课程标准.docx

课程标准课程名称：前端框架技术专业大类：电子信息大类前端框架技术课程代码：0311067课程名称：前端框架技术课程性质：必修课程类别：职业技术基础课程适用专业：计兑机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：64（理实一体）一、课程定位前端框架技术是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了VUe的语法及使用技巧，涵盖了VUe的众多技术点，如SPA的项目结构、模板指令、组件及组件交互、路由router、状态管理Pinia、项目构建Vi1.e等，通过理论、图解、实战的方式阿群YUe的特性功能。通过学习本门课程，学生能更好地掌握VUC的特性，并且将新技术运用到实际的开发当中，提高自己开发WCb程序的水平.二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质第合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统Hn1.1.网页设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质星。课程教学按照：”提出工程实际案例、分析案例所需知识、知识准符,和生共同完成案例、布置任务、学生自主完成任务、小组交流、教加点评”的步骤进行。将课程基本知识点融于案例中，闱绕着案例来开展课堂教学活动,引导学生参与分析、讨论，让学生在具体的问题情境中，枳极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60%以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标（一）课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用相关工具，独立自主完成基于VUe技术的前端应用程序的设计与制作。同时对接行业标准和岗位要求强化学生的职业道谯意识和职业素质养成意识：通过小组合作学习，培养学生团队合作、协议沟通能力：为后续Web前端开发打卜.坚实的基础。（二）课程具体目标1.知识目标（1）掌握vue+vite的项目创建：（2）掌握VUe的模板语法：（3）掌握VUe组件的创建和调用；（4）掌握VUe父子组件间的交互；（5）掌握基于r。Uter库的SPA的开发；（6）掌握状态管理Pinia库。2,能力目标（1）能够设计、制作和调试复杂前端应用程序；（2）能合理规划、管理站点；（3）能综合使用vue实现前端的数据输入与输出：（4）能综合使用VUe实现前端的用户交互。3.素质目标（1）培养学生良好的语言表达能力：（2）培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识:（3）培养学生.严遂细致的学习态度和追求完美的工匠精神：（4）树立坚定的理想信念，厚植爱国主义情怀：四、课程内容及学习情境根据WCb前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体,基于Web前端开发的设计、开发与维护闵位的工作流程设置四个情境：1.VUC的基础架构和语法，2.vue的组件开发，3.基于router库的SPA开发，4.基于Pinia库的状态管理。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习或体主夫学习内容学习目标学时1学习情境1Vue的基础架构和谱法“春雨助农网站”关于我们、产品详情任务1：搭建开发环境并创建项目项目任务：完成创建“存雨助农”商城项目框架1 .掌握npm的安装：2 .掌握YSCode及相关插件的安装：3 .掌握浏览渊开发插件的安袋：4 .拿提使用npm命令创建项目:8任务2：导入静态素材资源4日任务；在Inain.js中杼入必要的样式和脚本I.掌握main.js中基础代码的含义：2.掌握资源导入与导出的语法：2任务3；f',5pp.VUC的temp1.ate标签攻目任务：利用静态页面素材实现关于我们视图I.掌握VtCmP1.atc标签的作用与语法：2任务4：使用axi。S请求服务器端json文件攻目任务：请求服务器然的产品数据1.掌握json的语法格式：2.常握I1.XiOS的ajax请求语法:3,掌提VM的生命周期函数：4任务5：实现Yue的数据展示项F1.任务；完成首页的产品列表功能I.使用data选项声明组件的响应式状态：2.掌握Vue的模板语法(文本插(ft、v-tcxt.v-htm1.v-for.v-bind)：4任务6：实现用户数据的输入攻目任务：完成产品洋情视181.掌握表单场入绑定模板指令v-modc1.：42学习情境2VUe的坦件开发“春雨助农网站”关于我们、产品列表组件任务7：实现组件的创建与调用项目任务：使用批件重构关于我们视图I.掌握组件的创建与调用：2.掌握组件的模板插槽：4任务8：实现父子组件间的数据传递项目任务:实现产品列表组件的产品搜索功能I.使用组件的methods选项定义函数；2 .通过props选项自定义组件属性：3 .掌捏监听事件模板指令won；4 .使用SCmi1.触发自定义事件；83学习情境3基于router库的SPA开发“春雨助农网站”产品洋情任务9：router的弓I入和配置项目任务：完成“春雨助农”项目路由友的过S1 .掌理MPA和SPA各自的特点：2 .掌握VUC-router库的安装：3 .TIEvuc-routcr的引入:4 .掌握跖由去的配以语法：4任务10：使用Route1.ink和RouteView项目任务，完成首页和关于我力两个视图间的切换1 .拿JSRoute1.ink的使用：2 .掌握RoutcV1CW的使用：4任务11：使用动态路由匹配项目任务：完成产品详情视图I.拿提路由参数的定义:2.掌弼路由参数的获取：44学习情境4基于pinia库的状态管理“春PH助农网站”产品详情任务12：定义Pinia的Store项目任务：实现注册与登录功能1.安理v-modc1.和>n指令的修饰符：2 .竽握Pinia用的安装和引入：3 .定义Pinia的Store；4任务13：订阅Pinia的状态更改原目任务：实现页头组件中登录成功后用户信息的显示、及用户注销1.使用Subscribe函数订阅状态更改：2.常提模板指令V-ShOw、v-if4任务M：定义Pinia的Action项目任务:完成的物车功能I.掌提定义Pinia的Ac1.ion的语法：2 .实现漆加购物车项和修改购物车项的数盘功能：3 .实现显示的物车数据：4 .实现计铝购物车总金翻：5 .实现脩改购物数届：8五、教学设计学习情境一，VUe的基础架构和语法项目名称：“春雨助农”网站学时：24教学目标1.掌握开发环境的搭建2 .掌握VUe+viIe项目的创建3 .掌握导入与导出的语法1.掌握temp1.ate）标签的作用与语法5 .掌握json的语法格式6 .掌握axios的ajax谙求语法7 .掌握VUe的生命周期函数8 .使用data选项声明组件的响应式状态9 .掌握YUe的模板语法（文本插值、V-IeX1、v-h1.m1.,v-for,v-bind）10 .掌握表单输入绑定模板指令"mode1.教学重点1 .掌握开发环境的搭建2 .掌握YUe+viIe项目的创建3 .掌据json的语法格式1.掌握axios的ajax请求语法5 .掌握vu。的生命周期函数6 .掌握VUe的模板语法（文本插值、v-text-v-htm1.>v-for,v-bind）7 .掌握表单.输入绑定模板指令v-modc1.学习难点1 .掌握VUe+vite项目的创建2 .掌握json的语法格式3 .掌握axios的Wax请求语法4 .掌握VUe的生命周期函数子任务主要教学内容任务1：搭建开发环境并创建项目1 .安装node,js及npm；2 .安装vseode及其vo1.ar插件3 .安装edge浏览器的devtoo1.s插件4 .使用npm命令创建vue+vite项目项目任务:完成创建“春雨助农”商城项目框架任务2：导入静态素材资源1.解析main,js中基础代码的含义2.掌握资源导入与导出的语法项目任务:在main,js中导人必要的样式和脚本任务3：编耳App.Vu。的<1.cmp1.aic>标卷I.解析temp1.ate标签的作用与语法项目任务：利用静态页面索材实现关干我们视图任务4：使用aioS请求服务器端json文件1 .掌握json的语法格式:2 .掌握axios的ajax请求讲法：3 .掌握VUe的生命周期函数项目仟务：请求服务器端的产品数据任务5：实现VUC的数据展示1.使用data选项泮明组件的响应式状态2拿翱VUC的模板语法（文本插值、V-Iextxv-ht三1.1.fOv-bind）项目任务:完成首页的产品列表功能任务6：实现用户数据的输入1.1.掌握表单输入绑定模板指令v-mode1.;项目任务：完成产品详情视图教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老如按照每个小组的完成情况对小组进行评分并总结。备注学习情境二，VUe的组件开发项目名称：“春雨助农”网站学时*12教学目标1 .掌握组件的创建与调用：2 .掌握组件的模板插槽：3 .使用组件的methods选项定义函数；4 .通过PmPS选项自定义组件属性：5 .掌握监听事件模板指令von：6 .使用Semi1.触发自定义千件：教学重点1 .掌握组件的创建与调用：2 .使用组件的methods选项定义函数：3 .通过props选项自定义殂件屈性：4 .使用Semit触发自定义事件：学习难点1 .掌握组件的创建与调用：2 .使用SCmit触发自定义事件:子任务主要教学内容任务7：实现祖件的创建与调用I.掌握组件的创建与调用：2.掌握组件的模板插梏；项目任务：使用组件电构关于我的视图任务8：实现父子组件间的数据传递I.使用组件的methods选项定义函数；2 .通过props选项自定义组件属性：3 .掌握监听事竹模板指令“on：4使用Semii触发自定义W件：项目任务：实现产品列表组件的产品搜索功能教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结0备注学习情境三，基于router库的SPA开发项目名称，“春雨助农”网站.学时：12教学目标1.掌握MPA和SPA各自的特点：2,握VUe-router旅的安装：3 .掌握vue-router的引入：4 .联樨路由表