VUE例子之慕课网

2021年09月15日 阅读数:1
这篇文章主要向大家介绍VUE例子之慕课网,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

做为一个Java后端开发者,小编已经将近3年没有写过前端了,当年在学校学习时候,H5刚出来,咱们都是用纯html标签+bootstrap样式来写网页的,还记得第一个网页写的是小米的官网。时隔3年后,再次有了一个新的念头,写写前端,刚开始小编想用React来写的,奈何React不支持双向数据绑定(实际上是太难了,学不会_),因而就考虑了一个国产的VUE,据说VUE是很简单,因而我也跃跃欲试。前期断断续续积累支持大概一周时间。学习了基础语法。感受还能够。没有React那么难。因而周末11/03就模仿写了一个慕课网的页面,用到的技术是VUE+饿了么的Element。css

下面将过程分享出来,并谈谈我对现代前端模块化开发的感觉。由于不是专业的前端开发,因此大神勿喷。html

 

做品展现慕课网

VUE例子之慕课网_vue

image前端

技术栈: VUE + ElementUI + axios

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

  • 第二部分: 利用axios网络请求,随机生成诗词,添加todoListios

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

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

VUE例子之慕课网_vue_02

imagebootstrap

页面分别对应的模块axios

VUE例子之慕课网_vue_03

image后端

navMenu.vue

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

VUE例子之慕课网_vue_04

image

而后从ElementUI中找到模板,并填充本身的内容。并添加css阴影样式

VUE例子之慕课网_vue_05

image

VUE例子之慕课网_vue_06

image

添加阴影

VUE例子之慕课网_vue_07

image

bannerCard.vue

VUE例子之慕课网_vue_08

image

到ElementUI找布局

VUE例子之慕课网_vue_09

image

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

VUE例子之慕课网_vue_10

image

Header中添加一个走马灯

VUE例子之慕课网_vue_11

image

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

VUE例子之慕课网_vue_12

image

VUE例子之慕课网_vue_13

image

segmentation.vue

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

VUE例子之慕课网_vue_14

image

VUE例子之慕课网_vue_15

image

shopClass.vue

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

VUE例子之慕课网_vue_16

image

到ElementUI中找到卡片组件

VUE例子之慕课网_vue_17

image

VUE例子之慕课网_vue_18

image

todoList

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

VUE例子之慕课网_vue_19

image

原理是:

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

下面利用v-for展现todoList

VUE例子之慕课网_vue_20

image

VUE例子之慕课网_vue_21

image

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

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


我的博客: https://blog.springlearn.cn