基于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） 資助