《Web前端框架应用》课程标准

1、Web前端框架应用课程标准课程学习目标掌握Vue的基本概念以及优势、Vue开发环境的搭建、Vue实例对象、内置指令、组 件、事件、生命周期、全局API以及实例属性、过渡动画、路由、状态管理等知识；能 根据具体工程要求，使用vue-cli脚手架工具快速搭建工程，实现网页或app页面的设 计。具有分析和解决实际问题的能力，养成良好的编程习惯，为以后从事专业化的web 前端开发工作奠定基础。教学目标课程对应的专 业核心能力专业核 心能力 比例课程对应的 专业核心能 力指标RJA专业能力：RJA2：掌握 Web熟练运用从事软刖端开发的知件编码、软件测识、技能和工试、软件实施与具，能够熟练维护等活动所需

2、50%应用于前端开的知识、技能和发等专业活工具。具备爱岗动，爱岗敬敬业的劳动态业，乐于奉度。献；教学目标A0B1：掌握Visual Studio Code工具安装及使用； 熟练使用该工具创立、能耐心细致编写代码设计简 单网页。A0B2：掌握Vue基础模板语法、单向和双向数据绑 定、样式绑定、常用指令以及自定义指令、计算选 项、状态监听、过滤器等；能爱岗敬业，乐于奉献 的进行页面设计；编程规范、设计出有爱国情怀的 作品。A0B3：掌握表单、事件等控制网页数据的动态展 示，能实现页面表单验证设计；爱岗敬业，乐于奉 献；编程规范、设计出有爱国情怀的作品。AOB5：掌握Vue工程开发环境搭建、常用布局

3、组 件、插件使用，并能够在此基础上快速进行网页设 计，爱岗敬业，求真务实的劳动态度；编程规范、 设计出有爱国情怀的作品。RJB问题解决： 能够识别、分 析、解决软件编 码、软件测试、 软件实施与维护 等活动中的常见 技术问题。具备 勇于探索、精益 求精的工匠精 神。30%RJB1：能够运 用Web前端框 架开发技术和 相关知识，对 开发过程中出 现的常见问题 进行识别、分 析和解决，勇 于探索，精益 求精；B0B1：能够运用Vue组件设计页面，并能解决设计 网页实现过程中出现的问题，勇于探索，精益求 精。BOB2：能够使用Vue插件设计页面，并能解决网页 或app工程实现过程中出现的问题；勇于

4、探索，精 益求精。逐步掌握分析前端框架问题的能力及解决 问题的能力。BOB3：能够搭建Vue的开发环境，使用Vue-cli快 速建立工程、能够解决运用webpack打包工程及发 布工程等遇到的问题；勇于探索，精益求精。B0B4:能够快速根据关键字快速获得未知领域的信 息，有一定的筛选能力；并用于解决快速页面设计 遇到的问题；勇于探索，精益求精。有快速学习能 力，未知领域知识获取应用能力。RJC信息素养： 熟练运用现代信 息技术及工具， 获取、处理和使 用信息。遵守网 络伦理道德。RJE终身学习； 具备终身学习意 识和自主学习能 力。20%RJC2：能够运 用现代信息技 术及工具查阅 专业文献、

5、获 取专业知识， 并将其运用于 工程实践中， 遵守网络空间 平安法规和制 度；EOB1:掌握使用搜索引擎、论坛、帮助文档、课外书 籍等方法解决学习中出现的问题，遵纪守法，按规 行事，遵守网络空间平安法规和制度；EOB2:能够主动阅读书后拓展知识并进行工程设计与 实现。学生遵守网络伦理道德，通过网络查询资料，完成 工程开发；遵纪守法，按规行事，遵守网络空间安 全法规和制度。RJE1：能够认 识不断探索和 学习的必要 性，具有自主 学习和终身学 习的意识；合计100%单元教学设计单元 名称对应的教学目 标编号教学内容学时评价方式理论教学方式1 .基础局部A0B1课堂讲授：Vue的核心设计思想Vue

6、开发环境搭建Vue开发和调试工具 的使用Vue工程的创立Vue数据绑定Vue事件监听组件定义与注册生命周期钩子函数 演示与练习：1 .搭建Vue开发环境2.IIelloWorld 案例3.学生列表案例课程平台讨论版：安装、卸载VSCode、 vue-devtools webpack过程中出现的 问题。104一体化教学讲授教师演示学生练习.出勤+课堂表现+平台访问情况(20%).课后作业(10%).课程平台线上小测(20%).阶段作品(50%)A0B2B0B1E0B1E0B22.提高局部A0B3课堂讲授：.模板语法.数据绑定.样式绑定.计算.指令.组件. Vue 常用 API. Render 函

7、数. Vue路由. Vuex状态管理.服务器渲染. Element-UI演示及练习：.插值语法、指令语 法.单项数据绑定、双 向数据绑定.绑定 class.条件渲染、列表渲 染.表单创立及其验证.组件通信.常见API使用. Render函数运用课程平台讨论版：运用Vue开发基础知识解决实际问题104一体化教学讲授教师演示学生练习.出勤+课堂表现+平台访问情况(20%).课后作业(10%).课程平台线上小测(20%)4.阶段作品(50%)B0B2E0B1E0B23.工程实践A0B5课堂讲授：.微商城工程展示.工程搭建&方案工程实践：模块1 工程搭建.创立工程.配置路由.配置Vuex.配置 axios.目录结构模块1 商城首页.页面结构.顶部标题栏230一体化教学讲授教师演示学生练习.出勤+课堂表现+平台访问情况(20%).实践作品(40%).工程报告(40%)B0B4E0B1E0B2.轮播图.九宫格展示区域.底部导航栏模块3新闻资讯.新闻资讯列表.新闻详情模块4图片提供.图片列表.图片详情模块5 商品购买.商品详情页.购物车模块6 分类列表.页面结构搭建. better-scroll 运 用课堂演示及练习：完整工程展示4.项 目部 署及 辩论B0B1课堂讲授：L工程部署辩论：22教师辅导学生练习学生辩论1.辩论(100%)B0B2B0B3B0B4E0B