【WEB前端全棧成長計劃】第三階段 考核開發實錄（五）（web全棧開發進階之路）

根據第三階段的作業需求，還需要做MOOC課程頁面，我們簡單來看看頁面內容：

主要就是框紅框這部分，我觀察了下其他的頁面，培訓認證，在線實驗等，都是一樣的文檔結構，所以在做MOOC課程的時候，我將頁面主要分成頂部和主體兩個部分，也就是兩個組件啦

這幾個組件好幾個頁面有用到，所以我新建了一個目錄叫public，用于放置公共組件，下面那幾個tab組件，是因為頁面主體有個tab切換效果，我就先建了出來。

新建完所需要的組件，后面的操作步驟和前面首頁是一樣的，即在MOOC課程組件CloudClassroom.vue內引入組件，使用組件，這里需要提一嘴的是，這個頁面，有個tab切換功能：

需要我們用到@click去綁定一個方法用于實現tab切換功能，代碼如下：

? ?

組件publicHead的內容我們就略過了，很簡單，我們看下classListsContent.vue組件的代碼：

? ?

這里大家需要注意看的是我重構的數據結構，以及課程按鈕切換功能，我是用chooseClass方法來設置當前選擇的標簽的index，然后使用v-if去做判斷，是否讓當前課程顯示。具體的同學們可以看看我的代碼，MOOC課程頁面就搭建完成了，看下效果：

其實不論是課程切換還是課程標簽切換，我用的是一樣的方法邏輯，以上就是我完成WEB全棧課程第三階段作業的大致流程，這里分享給大家，文章中提到的是最常用到的一些用法，涉及到axios和vuex等稍微復雜的技術的，這里沒有使用的需求，如果以后我有用到，我會接著分享到博客里哦，如果有不正確的地方，歡迎大家批評指正！

web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。