Vue.js前端开发框架应用（微课版）-课程标准(大纲) .doc

PAGE

PAGE3

《Vue.js前端开发框架应用》课程标准

1.课程定位和课程设计

1.1课程性质与作用

《Vue.js前端开发框架应用》是软件技术专业的一门必修课程，是在学习HTMLWeb开发技术的基础上，开设的一门“理论+实践”的课程。课程对接企业人才培养目标，面向Web程序员工作岗位，培养学生能够使用Vue技术进行企业级项目开发的能力，具有探究学习、终生学习、分析问题和解决问题的能力，具有良好的程序思维能力，为学生的就业奠定基础。

前导课程：《静态网页设计》、《WEB前端框架应用》、《JavaScript程序设计》

后继课程：《WEB项目整合开发》

1.2课程基本理念

本课程设计理念是以职业能力培养为重点，以就业为导向，培养学生具备就业市场所需的职业技能。

在培养学生职业技能的同时，以学生为主体、关照学生、服务学生，不断提高学生思想水平、政治觉悟、道德品质、文化素养，让学生成为德才兼备、全面发展的人才。坚持不懈培育和弘扬社会主义核心价值观，引导广大学生做社会主义核心价值观的坚定信仰者、积极传播者、模范践行者。

1.3课程设计思路

基于实际工作内容开发课程，以行动导向进行教学设计，以学生为主体，以实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标、以施工任务（项目）为载体、理论学习与实践操作结合。同时通过采用“教”、“学”、“做”三位一体法教学法，教师边示范、边讲解、边提问，学生边做、边学、边思考，从而实现在做中教，在做中学，提高学生的实践能力和专业水平。

2.课程目标

知识目标：

通过这门课程的学习，学生能够熟练掌握Vue前端框架，搭建Vue开发环境，创建Vue项目，在Vue中进行数据绑定和事件监听，根据页面和业务需求合理拆分组件，使用vue-router实现单页面开发。

能力目标：

通过本课程的学习，学生能熟练使用Vue.js搭建网站，应用Vue框架开发前端Web网站，具备必备的程序调试和问题解决能力，能够熟练使用主流开发工具对应用程序进行调试、跟踪，确保网站运行正常，满足业务需求。

素质目标：

通过本课程的学习培养学生良好的职业道德和素养，认真负责的工匠精神，以及自主的学习能力、良好的与人沟通能力、良好的团队合作精神，并能在实践中进行独立思考和开拓创新。

3.课程内容与要求

学习情境设计：

学习情境

情境描述

职业能力（知识、技能、态度）

课时

初识Vue.js

前端技术的发展

Vue简介

Vue开发环境

使用Vite创建Vue3项目

了解前端技术的发展，能够说出使用框架开发项目的优势。

了解什么是Vue，能够说出Vue的基本概念

掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装

掌握常见的包管理工具的使用方法，能够应用npm和yarn相关命令下载、升级、卸载包

掌握Vite的使用方法，能够使用Vite创建Vue3项目

4

Vue.js开发基础

单文本组件

数据绑定

指令

事件对象

事件修饰符

计算属性

样式绑定

掌握单文件组件，能够创建并使用单文件组件

掌握数据绑定，能够定义数据并将数据渲染到页面中

掌握属性绑定指令，能够灵活运用v-bind指令给目标元素的属性动态绑定值

掌握事件绑定指令，能够灵活运用v-on指令给目标元素绑定事件

掌握双向数据绑定指令，能够灵活运用v-model指令在表单元素上实现数据的双向绑定

掌握条件渲染指令，能够灵活运用v-if、v-show指令根据不同的条件渲染不同的标签

掌握列表渲染指令，能够灵活运用v-for指令将数组、对象等中的数据渲染到页面中

掌握事件对象，能够灵活运用事件对象获取和修改DOM元素的属性

熟悉事件修饰符，能够阐述常见的事件修饰符

掌握计算属性，能够灵活运用计算属性实时监听数据的变化，当所依赖的数据发生变化时重新计算值

掌握侦听器，能够灵活运用侦听器监听数据的变化并进行相应的操作

掌握样式绑定，能够灵活运用v-bind绑定class和style属性实现元素样式的设置

22

组件基础

选项式API和组合式API

生命周期函数

组件的注册和引用

组件间的样式冲突

父组件向子组件传递数据

子组件向父组件传递数据

跨级组件之间的数据传递

熟悉选项式API和组合式API，能够说出选项式API和组合式API的区别

掌握生命周期函数的使用方法，能够灵活运用生命周期函数在特定时间执行特定的操作

掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成组件的注册

掌握引用组件的方法，能够在Vue项目中以标签的形式引用组件

掌握组件之间样式冲突问题的解决方法，能够运用style标签的scoped属性和深度选择器解决组件之间样式冲突的问题

掌握父组件向子组件传递数据的方法，能够使用props实