VUE例子之慕课网

作为一个Java后端开发者,小编已经将近3年没有写过前端了,当年在学校学习时候,H5刚出来,
我们都是用纯html标签+bootstrap样式来写网页的，还记得第一个网页写的是小米的官网。
时隔3年后，再次有了一个新的念头,写写前端,刚开始小编想用React来写的，
奈何React不支持双向数据绑定(其实是太难了,学不会^_),于是就考虑了一个国产的VUE,
听说VUE是很简单,于是我也跃跃欲试。前期断断续续积累支持大概一周时间。学习了基础语法。
感觉还可以。没有React那么难。于是周末11/03就模仿写了一个慕课网的页面，用到的技术是VUE+饿了么的Element。
下面将过程分享出来，并谈谈我对现代前端模块化开发的感受。因为不是专业的前端开发,所以大神勿喷。

作品展示慕课网

技术栈: VUE + ElementUI + axios

• 第一部分: 主要模仿慕课网
• 第二部分: 利用axios网络请求,随机生成诗词,添加todoList

第一部分: 主要模仿慕课网

项目目录(主要分为5个组件)

页面分别对应的模块

navMenu.vue

主要包含一个慕课网的login和文本和搜索框。

然后从ElementUI中找到模板，并填充自己的内容。并添加css阴影样式

添加阴影

bannerCard.vue

到ElementUI找布局

Aside中添加10个按钮(并添加css样式保持背景颜色一样)

Header中添加一个走马灯

Main中添加四个(css样式参考慕课网)

segmentation.vue

分割符号（前后在模板中添加两个加载转圈的logo并css为红色文本作为变量支持自定义）

shopClass.vue

原理类似todoList定义个卡片,根据数量来展示

到ElementUI中找到卡片组件

todoList

另外因为是写的第一个VUE例子,也写了一个todoList的例子,放在页面下方。可以随机生成诗词并添加到todoList中

原理是:

利用axios请求一个诗词API并通过VUE双向绑定展示到input便签中,当添加按钮指定就添加到诗词list中。

下面利用v-for展示todoList

到这里基本所有的内容描述了，如果也要练习建议代码克隆下来,仔细研究。VUE是很简单的，小编总共就学习了不到1周的时间,如果要算总时间应该也不超过24小时。说这些的目的并不是炫耀而是说一个道理,就是编程都是想通的,当你会一门语言，那么在学习其他语言就都是简单的.编程都是面向对象。

总结下来，现代的前端开发已经和之前小编学习时候是今非昔比了,难度不亚于后端开发,不过组件是开发是可以二次利用的,定义好组件，很多地方都可以使用(就像上面的segmentation.vue和shopClass.vue一样)。感兴趣的同学可以来学前端。

文章来源: springlearn.blog.csdn.net，作者：西魏陶渊明，版权归原作者所有，如需转载，请联系作者。

原文链接：springlearn.blog.csdn.net/article/details/83716168