基于vue 的WEB 前端開發(fā)課程教學(xué)模式探究

解秀萍 鄭秀春 牛紅霞 石家莊信息工程職業(yè)學(xué)院

眾所周知，現(xiàn)在的用戶群對Web 前端的使用體驗需求逐漸提升，這就使得web 前端開發(fā)的工作量隨之增加了很多，代碼量持續(xù)遞增，開發(fā)難度也越來越大。基于此情況，為了進(jìn)一步提升代碼復(fù)用率和開發(fā)效率，網(wǎng)頁開發(fā)框架開始受到了更高關(guān)注。vue 前端開發(fā)技術(shù)便誕生在這樣的背景之下，其是建立在MVVM 架構(gòu)模式基礎(chǔ)上的一種技術(shù)類型。是當(dāng)前非常流行的Web 前端開發(fā)技術(shù)之一。輕量級響應(yīng)式框架vue 的出現(xiàn)和應(yīng)用，不僅有效簡化了Web 前端開發(fā)流程，降低開發(fā)難度，提高開發(fā)效率，而且實現(xiàn)了Web 系統(tǒng)前、后端開發(fā)完全分離，全面提高了系統(tǒng)的靈活性和可擴(kuò)展性，其也為當(dāng)前高校Web 前端開發(fā)課程教學(xué)模式的創(chuàng)新與改革提供了一個全新的發(fā)展思路。以下是筆者結(jié)合自己近兩年相關(guān)工作經(jīng)驗，就此議題的相關(guān)內(nèi)容提出自己的幾點看法和建議。

一、關(guān)于vue 的簡要介紹

為進(jìn)一步提高開發(fā)效率，近些年我國相關(guān)專業(yè)領(lǐng)域一直都在不斷加大對Web 前端基于框架的開發(fā)力度，其中，vue 便屬于最為理想的框架之一。vue 與其他框架不同，其屬于構(gòu)建用戶界面的漸進(jìn)式框架，采用的設(shè)計方式是自底向上增量開發(fā)的理念，其擁有著更強的開放性和靈活性，而且vue 的框架結(jié)構(gòu)與其他積累框架相比也要更加簡單一些。vue 的優(yōu)勢主要體現(xiàn)在兩點：其一，vue 有助于開發(fā)人員快速掌握和使用。其二，vue 可以更加便捷高效地與既有項目或者第三方庫實現(xiàn)整合。第三，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

關(guān)于vue 的運行原理，在介紹vue 的運行原理之前，筆者在這里要介紹三個概念，分 別 是Observer、Compile 和Watcher。首先，關(guān)于Observer，Observer 是數(shù)據(jù)監(jiān)聽器，因此它的作用和價值便是監(jiān)聽數(shù)據(jù)，但是它的獨特之處就在于其可以對數(shù)據(jù)對象當(dāng)中的全部屬性進(jìn)行監(jiān)聽，并且會告知訂閱者哪些數(shù)據(jù)的屬性發(fā)生了什么樣的變化。其次，關(guān)于Compile，Compile 是指令解析器，Compile 的功能和價值在于掃描vue 中的指令，并且會對掃描后得到的指令進(jìn)行解析和編譯。還有，關(guān)于Watcher，Watcher 更像是一個協(xié)調(diào)者，協(xié)調(diào)Observer 和Compile，在Observer 和Compile 之間建立起連接，接收來自O(shè)bserver 的屬性變化通知，發(fā)揮自身的協(xié)調(diào)調(diào)度功能，并執(zhí)行指令綁定的響應(yīng)回調(diào)函數(shù)。

vue 創(chuàng)建對象的流程是：第一，為選定對象進(jìn)行初始化，初始化的過程當(dāng)中，Observer 會持續(xù)對選定對象的屬性進(jìn)行監(jiān)聽，與此同時，Compile 會對web頁面中的指令進(jìn)行掃描，并且對掃描后的指令進(jìn)行編譯，Watcher 則會在Dep 中添加一個閱讀者。第二，在系統(tǒng)運行過程中，Observer 會獲取屬性變化并且通知Dep，在Dep 中查找與該屬性對象對應(yīng)的訂閱者，并向添加該訂閱者的Watcher 發(fā)送變化通知，從而對視圖進(jìn)行相應(yīng)的更新。

二、基于vue 的WEB 前端開發(fā)課程教學(xué)模式分析

（一）構(gòu)建完善的課程知識結(jié)構(gòu)

根據(jù)筆者的調(diào)查和了解，發(fā)現(xiàn)當(dāng)前有一部分高校在該課程領(lǐng)域的知識結(jié)構(gòu)方面安排并不是很合理，其并沒有認(rèn)識到界面設(shè)計和代碼設(shè)計二者是同等重要的，在實際教學(xué)中存在著明顯的傾向性教學(xué)，或傾向于界面設(shè)計，或傾向于代碼設(shè)計。在web 前端開發(fā)技術(shù)不斷創(chuàng)新與升級的背景下，高校需要結(jié)合現(xiàn)實發(fā)展需求和學(xué)校自身情況來重新構(gòu)建起課程知識結(jié)構(gòu)，將vue 這一開發(fā)技術(shù)的理論和實踐教學(xué)融入課程知識結(jié)構(gòu)體系當(dāng)中來，為學(xué)生們提供更多學(xué)習(xí)、了解和應(yīng)用vue 技術(shù)的機(jī)會，其對于相關(guān)專業(yè)學(xué)生未來步入相應(yīng)崗位后實際工作的開展也會有著非常大的幫助。除此之外，高校一定要在綜合考量各方面因素之后再進(jìn)行課程知識結(jié)構(gòu)的調(diào)整，要充分考慮到實際崗位的需求變化、學(xué)校課程教學(xué)的實際情況以及當(dāng)代學(xué)生群體的認(rèn)知和學(xué)習(xí)規(guī)律等等，進(jìn)而更好的確保課程知識結(jié)構(gòu)的合理性與系統(tǒng)性。

（二）追求教學(xué)方式的多元化

之前高校在web 前端開發(fā)課程教學(xué)工作當(dāng)中，主要采用的教學(xué)方式有案例教學(xué)法、問題驅(qū)動型教學(xué)法等等，這些教學(xué)方式雖然也呈現(xiàn)出比較理想的教學(xué)效果，但是，其并不能夠完全滿足當(dāng)下web 前端開發(fā)課程教學(xué)的需求變化?；诖饲闆r，高校在該課程教學(xué)工作當(dāng)中應(yīng)該積極創(chuàng)新和應(yīng)用更具新穎性和高效性的教學(xué)方式，要將網(wǎng)頁設(shè)計與制作中所涉及的關(guān)鍵技術(shù)和知識點更多的融入實際教學(xué)當(dāng)中來。基于vue 的web 前端開發(fā)課程教學(xué)模式，筆者建議高職院?？梢远鄳?yīng)用慕課、微課等方式來進(jìn)行教學(xué)，將vue 的相關(guān)知識制作成為精簡的小視頻，將其放置到網(wǎng)絡(luò)平臺上面供學(xué)生們學(xué)習(xí)和了解，更好地學(xué)習(xí)vue 的操作技巧，了解vue 的運行原理，了解vue 在當(dāng)前web 前端開發(fā)領(lǐng)域中發(fā)揮著什么樣的重要作用和價值。

三、結(jié)束語

綜上所述，Web 前端開發(fā)課程是當(dāng)前高職院校計算機(jī)應(yīng)用技術(shù)、軟件工程等相關(guān)專業(yè)中的一門重要課程，該課程教學(xué)意在引導(dǎo)學(xué)生們學(xué)習(xí)和了解當(dāng)今社會中最具先進(jìn)性的Web 前端開發(fā)技術(shù)，并且能夠?qū)W以致用。將vue 融入Web 前端開發(fā)課程當(dāng)中，讓學(xué)生們了解當(dāng)前最流行的輕量級響應(yīng)式框架，對于學(xué)生們學(xué)習(xí)該課程以及未來參加網(wǎng)站開發(fā)相關(guān)工作都有著非常大的幫助作用。