基于PBL 模式的Vue.js 课程教学改革实践探究

吴杰　马驰

摘要：高等教育中正在推行工程教育认证，要求培养学生运用知识解决实际工程问题的能力。Vue.js作为当前Web前端开发主流的框架，已经成为软件工程专业的专业课，是适应新工科背景下的教育改革的关键课程。针对Vue.js教学授课中存在的问题，构建并实施了基于项目导向学习（PBL）模式的教学方案，重新设计了教学内容、过程和考核方式，实现由知识传授向能力培养的转变。问卷调查和教学评价表明，改革后的教学模式更加契合工程教育认证的需求，提高了教学效果和学生的学习兴趣。

关键词：Vue.js；PBL模式；课程改革

中图分类号：G642 文献标识码：A

文章编号：1009-3044（2024）14-0146-04 开放科学（资源服务）标识码（OSID） ：

0 引言

工程认证是一种对工程教育质量的评估和认可，其核心要求是培养具备解决复杂工程问题能力的工程师[1]。随着互联网技术的快速发展，Web前端开发成为软件工程领域的一个重要分支，它涉及用户界面的设计、交互逻辑的实现、数据的展示和处理等多个方面，对于提高用户体验和满足业务需求具有重要的作用[2]。Vue.js是一款用于构建用户界面的MVVM模式JavaScript开源框架，Vue.js自从2014年发布以来，就受到了广大开发者和用户的欢迎和认可，成为目前最受欢迎的前端框架之一。Vue.js还被广泛应用于各种领域和行业，如阿里巴巴、百度、腾讯等许多知名的网站和平台都采用了Vue.js作为前端开发技术[3]。因此，在软件工程专业课程中引入Vue.js教学是十分必要和有意义的。Vue.js课程在软件工程专业的教学体系中的地位如图1所示。图中课程层次由低到高代表着教学年度的递增，虚线括起来的两门课程为Web前端的实践课程。根据Vue.js在图中的位置，我们可以明确地看出，Vue.js是构建Web前端的核心专业课，是解决Web复杂工程问题的关键课程。然而，在传统的教学模式下，往往只注重理论知识的传授和基本技能的训练，忽视了实际项目开发中所需要的综合能力和创新能力。为了解决这一问题，本文在Vue.js课程教学中引入了PBL教学模式。

PBL教学是一种基于问题的学习方法，它以真实或虚拟的工程问题为驱动，让学生在小组协作的过程中，主动探究问题、寻找解决方案、运用知识和技能、展示和评价成果[4]。PBL教学是实现工程认证目标的有效途径之一，它可以帮助学生提高工程能力和素养，培养工程思维和创新意识，适应工程实践的需求[5]。本文主要包括以下几个方面：1） 分析Vue.js课程现状及存在问题，明确改革目标和意义；2） 设计基于PBL教学模式的Vue.js课程体系，包括课程目标、内容、方法、组织、评价等；3） 评价PBL教学模式的Vue.js 课程改革效果，包括对教师、学生、课程等方面进行多维度、多角度、多层次的评价。

1 课程现状及问题分析

根据对国内外Vue.js教学现状的分析，可以发现Vue.js课程教学存在以下几个问题：

1） 相对Vue.js知识点的快速更新，教学资源更新不够及时。Vue.js作为一个由社区驱动的开源框架， 知识点更新频繁，版本迭代速度很快，如Vue.js的2.0 版本于2016年推出，3.0版本于2020年推出，其间每3～6个月更新一次次要版本，但是目前绝大部分教材仍然在讲授旧版本的API知识点，未能及时跟上版本升级，例如，菜鸟教程提供的Vue.js教程基于Vue.js2.1.8版本[6]。

2） 传统教学注重基础知识和技能的传授，而Vue.js需要学生掌握复杂的Web应用开发整体过程和综合能力。Vue.js不仅需要掌握基础语法知识，还需要学习组件开发、状态管理、路由配置、构建工具等进阶知识，以及把这些知识综合应用到完整的Web应用开发中的能力。但是传统教学侧重基础知识教授，未能系统地培养Web开发能力。这与Vue.js的专业性和复杂性要求存在差距[7]。

3） 传统教学注重考试结果，而Vue.js开发需要积累项目经验，更侧重学习过程。Vue.js开发强调动手能力和项目经验的积累，需要学生通过做项目不断练习提高。但是传统教学过于强调考试成绩，缺乏项目实训和过程评价。这与Vue.js开发的过程性要求存在差异[8]。

2 课程方案设计

针对传统教学方案无法充分展现Vue.js技术在真实项目开发中的应用价值，本文从教学内容、教学过程和评价机制三方面进行了课程改革，其中教学内容划分为Vue.js基础、Vue.js组件和路由和Vue.js进阶和实战三个模块，每个模块设计了引入问题，教学内容、实践项目和思政问题，教学过程按照PBL模式，分为基础理论讲解、提出问题、合作探究、方案形成、方案完善、自主学习和方案评价7个步骤。

2.1 教学内容

基于市场需求以及Vue.js技术在实际项目开发中的应用特点，对课程大纲进行了优化调整，并提出了以“行业应用导向，项目实践为核心，知识构建为基础，实践能力和问题解决能力为目标”的教学理念。

理论基础教学学时为24学时，教学内容分为三个模块。教学目标为：1） 巩固和强化Vue.js理论中的重点知识；2） 培养学生运用所学的基本概念和编程技能来实现前端页面及其操作的能力。课程内容及课时安排如表1所示。

在授课过程中，融入了课程思政的内容，通过不同类型的案例，引导学生理解并自觉实践vue.js开发的职业精神和职业规范，增强职业责任感。课程思政主要内容如表2所示。

结合Vue.js课程在本科的第六或第七学期开展教学，学生已掌握大部分专业课程这一特点，课程组通过校企共建的方式将企业中实际的项目作为教学模板，企业中的实际工作应用可拆解为以下综合实践教学。

综合实践教学共有6学时，跨度为3周进行。项目按照“调研选题-功能设计-详细设计-编码实现-测试-提交”这一过程进行。表3为综合项目三个阶段中教师和学生角色的任务安排。

2.2 教学过程

基于PBL教学的思想的Vue.js教学过程有利于激发学生的兴趣和动机，培养学生的自主和合作学习能力，提高学生的综合素质和实践能力。以“Vue.js组件和路由”为例，教学过程分为7个步骤：

1） 基础理论讲解。教师在课前准备与Vue.js组件和路由相关的术语，如组件、props、emit、slot、路由、动态路由、导航守卫等，并给出相应的解释和示例。教师在课堂上向学生介绍这些术语，并让学生在小组内讨论和理解它们的含义和用法。

2） 提出问题。教师在课前设计一个问题，要求学生使用Vue.js组件和路由开发一个简单的博客系统，实现首页、文章详情、关于我们等页面的路由跳转，并能够在不同的组件之间传递数据和事件。教师在课堂上向学生提出问题，并让学生在小组内分析和讨论它的需求和难点。

3） 合作探究。教师引导学生在小组内进行头脑风暴，对可能的解决方案或思路进行集体讨论。鼓励学生发挥创意，提出不同的想法，并记录下来。在适当的时候给予学生反馈和提示，帮助学生拓展和深化思考。

4） 方案形成。教师让学生在小组内对头脑风暴的结果进行整理和评价，选择最合适的解决方案，并对问题进行重新结构化。教师让学生明确问题的目标、范围、条件和标准，并将问题分解为若干个子问题或任务，如如何定义和注册组件、如何使用props和emit进行组件通信、如何使用slot实现组件的内容分发、如何安装和配置vue-router、如何使用动态路由和路由传参、如何使用导航守卫进行路由控制等。

5） 方案完善，教师让学生在小组内根据问题的子问题或任务，确定需要学习的知识点和技能，并制定学习目标和计划。教师让学生明确学习目标的具体内容、可行性、可测性和时限，并与教学大纲和课程目标相对应。教师在必要时给予学生指导和建议，帮助学生制定合理的学习目标和计划。

6） 自主学习。教师让学生根据学习目标和计划，自主地收集和整理相关的信息和资料，进行个人学习。教师提供一些学习资源和参考资料，如Vue.js官方文档、Vue Router官方文档等，并鼓励学生利用网络和图书馆等途径寻找更多的学习资源。教师在学生学习的过程中，随时关注学生的学习进度和困难，及时给予帮助和支持。

7） 方案评价。教师让学生在小组内分享和交流自己的学习成果，包括收集到的信息、资料、代码等，并进行讨论和评价。教师让学生在小组内合作，将各自的学习成果整合为一个完整的博客系统项目，并进行测试和调试。教师让每个小组向全班展示和演示自己的项目，并邀请其他小组提出意见和建议。教师对每个小组的项目进行评价和反馈，给予表扬和鼓励。

2.3 评价机制

为了有效地评价学生的学习效果和能力，本课程采用了过程性考核和期末考核相结合的方式，其中过程性考核和期末考核各占总成绩的50%。过程性考核主要考查学生在课程学习过程中的表现，期末考核主要考查学生对课程知识和技能的掌握程度和应用能力。具体的考核方式和内容如表4所示。通过该评价机制，既能够激励学生在课程学习过程中保持积极的态度和行为，又能够检验学生在课程学习结束后的成果和水平，从而达到提高学生的综合素质和实践能力的目的。

3 改革效果的评估和反馈

为了评价PBL模式的教学方案对Vue.js课程的改革效果，采用了问卷对学生满意度进行了调查。参与对象为20级和21级的学生，学生数量分别为162名和161名。问卷调查的内容包括学生对课程的满意度，学生的学习动机和兴趣，学生的自学能力和水平，教师的教学能力和水平。问卷调查和期末考试成绩如图2所示。

21级学生使用PBL教学法进行Vue.js课程学习后，问卷调查显示21级学生课程满意度平均分为84 分，较20级的76分有显著提高，学习兴趣和动机平均分为80分，较20级的71分有明显提升，自学能力提高到81.6分，20级为73.2分；21级学生的期末考试平均分为82分，而20级的平均分为78分，提高了4分。PBL 模式对Vue.js课程的教学效果有显著的正向影响，21 级学生在所有指标上都优于20级学生，其中最明显的是自学能力和水平，其次是学习动机和兴趣。

4 结束语

针对Vue.js课程传统教学中存在的问题，设计并实施了一种基于PBL教学模式的课程改革方案。通过对教学内容、教学过程和评价方式的调整优化，实现了由知识传授向能力培养的转变。调查结果表明，PBL教学模式在提高学生的学习兴趣，培养自主学习能力，激发问题解决能力等方面发挥了重要作用，取得了良好的教学效果。本文的研究为进一步推广PBL 教学模式到其他专业课程提供了有益的借鉴和参考， 有助于实现工程教育认证的要求，培养高素质的应用型人才。

参考文献：

[1] 彭文庆，朱永健，彭刚.基于“培养解决复杂工程问题能力”的工程教育专业认证探讨[J].当代教育理论与实践，2017，9（6）：14-18.

[2] 陈佳，孙菲，孙焕志，等“. 1+X证书”制度与计算机应用技术专业建设对接研究[J].当代教研论丛，2023，9（9）：27-30.

[3] 时明.Web主流前端开发框架研究[J].信息记录材料，2020，21（5）：215-216.

[4] 董艳，孙巍.促进跨学科学习的产生式学习（DoPBL）模式研究：基于问题式PBL和项目式PBL的整合视角[J].远程教育杂志，2019，37（2）：81-89.

[5] 唐伟杰，陈婷.以IEET工程认证促进实践教学质量的提高[J].科技风，2023（9）：11-13.

[6] 方生.基于“ Vue.js” 前端框架技术的研究[J].电脑知识与技术，2021，17（19）：59-60，64.

[7] 李臣之.课程实施：意义与本质[J].课程 教材 教法，2001，21（9）：13-17.

[8] 尹波.新工科背景下大数据专业课程体系研究和实践[J].计算机时代，2021（7）：98-100，103.

【通联编辑：王 力】

基金项目：本文系广东省重点建设学科科研能力提升项目（No.2021ZDJS082） ；惠州学院网络教学改革项目（编号：WLJG006） 资助