前端技术-element-ui 介绍 | 学习笔记

简介: 简介:快速学习前端技术-element-ui 介绍

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-element-ui 介绍】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/667/detail/11316


前端技术-element-ui 介绍

 

内容介绍

一、element-ui 简介

二、element-ui 的效果展示


一、element-ui 简介

1.定义

element-ui 是饿了么前端出品的基于 Vue.js 的后台组件库,方便程序员进行页面快速布局和构建 (通俗讲 element-ui 可以用在 vue 中,快速写页面的各种效果,不需要写 ccs 的样式,因为 element-ui 将样式都做了封装)

2.官网:

http:/lelement-cn.eleme.io/#/zh-CN

创建 06-element-ui.html

代码不用写,通过官方文档都可以找到

打开官网,滑动到组件的位置,点击查看详情,进入到组件位置,目录中有很多基本组件,后面写页面从里面找复制代码就可以,已经封装好了


二、element-ui 的效果展示

1.Button 按钮

image.png

在 element-ui 中提供了不同效果的按钮,根据这些按钮,

整合到页面中做不同效果,如何整合?点击显示代码,里面源码全部包括,直接将代码复制,改成需要的项目就可以

2.Upload 上传

里面包括各种上传的组件,实现上传文件,这个组件同样将代码提供出来了,另外提供过程中也包含 java 使用代码

3.Table 表格

提供了各种样式的表格

4.Message 消息提示

做很多功能时,成功或是失败会有提示,有不同状态的提示,每个状态都有不同的样式

在实际的工作开发中,美工就是负责页面样式模块的,用了element-ui 就不需要美工了

相关文章
|
17天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
57 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
机器学习/深度学习 前端开发 搜索推荐
未来趋势下的前端开发技术探索
随着人工智能和物联网技术的快速发展,前端开发领域也面临着新的挑战和机遇。本文将探讨未来趋势下前端开发技术的发展方向和应用场景,为广大前端开发者提供启示与思路。
|
1天前
|
前端开发 JavaScript UED
Web前端开发:探索技术与艺术的交融
Web前端开发:探索技术与艺术的交融
8 1
|
1天前
|
前端开发 JavaScript UED
前端技术:引领数字时代的交互之美
前端技术:引领数字时代的交互之美
|
1天前
|
XML 前端开发 JavaScript
前端技术的演变与实战应用
前端技术的演变与实战应用
|
13天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
27天前
|
编解码 前端开发 JavaScript
探索前端开发中的新趋势:WebAssembly 技术应用与展望
本文将深入探讨前端开发中的新趋势——WebAssembly 技术,介绍其在前端领域的应用场景和优势,并展望未来在前端开发中的潜在影响。通过对 WebAssembly 技术的原理解析和实际案例分析,帮助读者更好地了解并应用这一新兴技术。
|
29天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。
|
1月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。