【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小时内删除侵权内容。