当前位置：首页 > news >正文

Element UI框架学习篇(一)

news 文章来源：https://blog.csdn.net/SSS4362/article/details/128954649 2025/1/14 0:50:16

Element UI框架学习篇(一)

1.准备工作

1.1 下载好ElementUI所需要的文件

ElementUI官网

1.2 插件的安装

1.2.1 更改标签的时实现自动修改

在这里插入图片描述

1.2.2 element UI提示插件

在这里插入图片描述

1.3 使用ElementUI需要引入的文件

<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<!-- 先导vue.js再导入elementUI 因为elementUI是基于vue开发的页面美化插件-->
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>

2 栅格布局

2.1 一行一格

2.1.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}body{margin:0;}</style>
</head>
<body><div id="app"><!-- 一行一格 占据整行的  24就为占据整行--><el-row><el-col :span="24" class="a"><!-- <div class="a">第一行</div> -->第一行</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.1.2 运行截图

在这里插入图片描述

2.2 一行多格

2.2.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}</style>
</head>
<body><div id="app"><el-row><el-col :span="5" class="b">2-1</el-col><el-col :span="14" class="d">2-2</el-col><el-col :span="5" class="c">2-3</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.2.2 运行截图

在这里插入图片描述

2.3 水平居中

2.3.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}</style>
</head>
<body><div id="app"><!-- 水平居中 (总长度-占据长度)/2 --><el-row><el-col :span="4" class="a" :offset="10">3-1</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.3.2 运行截图

在这里插入图片描述

2.4 响应式布局

2.4.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>.a{background-color: red;}.b{background-color: blue;}.c{background-color: green;}.d{background-color: skyblue;}body{margin:0;}</style>
</head>
<body><div id="app"><!-- 响应式布局 sm和lg只有一个能有效--><el-row><el-col class="a" :sm="14" :lg="20">5-1</el-col><el-col class="c" :sm="10" :lg="4">5-2</el-col></el-row><el-row><el-col class="b" :sm="20" :lg="4">6-1</el-col><!-- 可以sm=0操作一下 --><el-col class="d" :sm="4" :lg="20">6-2</el-col></el-row></div><script>new Vue({el:"#app",})</script>
</body>
</html>

2.4.2 运行截图

a 当宽度大于≥768px时

在这里插入图片描述

b 当宽度大于≥1200px时

在这里插入图片描述

Element UI框架学习篇(一)

Element UI框架学习篇(一) 1.准备工作 1.1 下载好ElementUI所需要的文件 ElementUI官网 1.2 插件的安装 1.2.1 更改标签的时实现自动修改 1.2.2 element UI提示插件 1.3 使用ElementUI需要引入的文件 <link rel"stylesheet" href"../elementUI/element…...

编程日记 2023/2/10 1:46:08

【算法】【C语言】

差分算法力扣1094题目描述学习代码思考力扣1094 题目描述车上最初有 capacity 个空座位。车只能向一个方向行驶（也就是说，不允许掉头或改变方向） 给定整数 capacity 和一个数组 trips , trip[i] [numPassengersi, fromi, toi] 表示第 …...

编程日记 2023/2/10 1:44:59

【✨十五天搞定电工基础】基本放大电路

本章要求1. 理解放大电路的放大作用和共发射极放大电路的性能特点； 2. 掌握静态工作点的估算方法和放大电路的微变等效电路分析法； 3. 了解放大电路输入、输出电阻和电压放大倍数的计算方法，了解放大电路的频率特性、互补功率放大…...

编程日记 2023/2/10 1:43:49

MyBatis 入门教程详解

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...

编程日记 2023/2/10 1:42:39

shiro、springboot、vue、elementUI CDN模式前后端分离的权限管理demo 附源码

shiro、springboot、vue、elementUI CDN模式前后端分离的权限管理demo 附源码源码下载地址 https://github.com/Aizhuxueliang/springboot_shiro.git 前提你电脑的安装好这些工具：jdk8、idea、maven、git、mysql； shiro的主要概念 Shiro是一个强大…...

编程日记 2023/2/10 1:41:27

智能优化算法——粒子群优化算法（PSO）（小白也能看懂）

前言： 暑假期间，因科研需要，经常在论文中看到各种优化算法，所以自己学习了一些智能优化的算法，做了一些相关的纸质性笔记，寒假一看感觉又有点遗忘了，并且笔记不方便随时查看，所以希…...

编程日记 2023/2/10 1:40:19

Lesson 6.4 逻辑回归手动调参实验

文章目录一、数据准备与评估器构造1. 数据准备2. 构建机器学习流二、评估器训练与过拟合实验三、评估器的手动调参在补充了一系列关于正则化的基础理论以及 sklearn 中逻辑回归评估器的参数解释之后，接下来，我们尝试借助 sklearn 中的逻辑回归评估器&…...

编程日记 2023/2/10 1:39:10

Oracle数据库入门大全

oracle数据库 Oracle 数据库、实例、用户、表空间、表之间的关系 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pSv0SArH-1675906973035)(vx_images/573695710268888.png 676x)] 数据库数据库是数据集合。Oracle是一种数据库管理系统&#xff…...

编程日记 2023/2/10 1:38:02

C语言操作符详解(下)

提示：本篇内容是C语言操作符详解下篇文章目录前言八、条件表达式九、逗号表达式十、下标引用、函数调用和结构成员1. [ ] 下标引用操作符2. ( ) 函数调用操作符3.结构成员访问操作符十一、表达式求值1. 隐式类型转换举例说明1举例说明2举例说明32.算数转换3.操作…...

编程日记 2023/2/10 1:36:55

【五六七人口普查】我国省市两级家庭户住房状况

人口数据是我们在各项研究中最常使用的数据！之前我们分享过第七次人口普查（简称七普）的数据！很多小伙伴拿到数据后都反馈数据非常好用，同时很多小伙伴咨询有没有前面几次人口普查的数据，这样方便做人口变化…...

编程日记 2023/2/10 1:35:48

大数据框架之Hadoop：入门（二）从Hadoop框架讨论大数据生态

第2章从Hadoop框架讨论大数据生态 2.1 Hadoop是什么 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。主要解决，海量数据的存储和海量数据的分析计算问题。广义上来说，Hadoop通常是指一个更广泛的概念-Hadoop生态圈。 2.2 Hadoop发展历史 1&…...

编程日记 2023/2/10 1:34:41

负载均衡反向代理下的webshell上传+apache漏洞

目录一、负载均衡反向代理下的webshell上传1、nginx 负载均衡2、搭建环境3、负载均衡下的 WebShell连接的难点总结难点一、需要在每一台节点的相同位置都上传相同内容的 WebShell难点二、无法预测下次的请求交给哪台机器去执行。难点三、下载文件时，可能会出现飘逸&…...

编程日记 2023/2/10 1:33:33

打造安全可信的通信服务，阿里云云通信发布《短信服务安全白皮书》

随着数字化经济的发展，信息保护和数据安全成为企业、个人关注的焦点。近日，阿里云云通信发布《短信服务安全白皮书》，该白皮书包含安全责任共担、安全合规、安全架构三大板块，呈现了阿里云云通信在信息安全保护方面的技术能力、安…...

编程日记 2023/2/10 1:32:22

Python项目实战——外汇牌价（附源码）

前言几乎每个人都在使用银行卡，今天我们就来爬取某行外汇牌价，获取我们想要的数据。环境使用 python 3.9pycharm 模块使用 requests 模块介绍 requestsrequests是一个很实用的Python HTTP客户端库，爬虫和测试服务器响应数据时经常会用到&…...

编程日记 2023/2/10 1:31:10

String、StringBuffer、StringBuilder有什么区别？

第5讲 | String、StringBuffer、StringBuilder有什么区别？ 今天我会聊聊日常使用的字符串，别看它似乎很简单，但其实字符串几乎在所有编程语言里都是个特殊的存在，因为不管是数量还是体积，字符串都是大多数应用中的重要…...

编程日记 2023/2/10 1:30:03

python基于django+vue的高铁地铁火车订票管理系统

目录 1 绪论 1 1.1课题背景 1 1.2课题研究现状 1 1.3初步设计方法与实施方案 2 1.4本文研究内容 2 2 系统开发环境 4 2.1 使用工具简介 4 2.2 环境配置 4 2.4 MySQL数据库 5 2.5 框架介绍 5 3 系统分析 6 3.1系统可行性分析 6 3.1.1经济可行性 6 3.1.2技术可行性 6 3.1.3运行可…...

编程日记 2023/2/10 1:28:57

全栈自动化测试技术笔记(一)：前期调研怎么做

昨天下午在家整理书架，把很多看完的书清理打包好，预约了公益捐赠机构上门回收。整理的过程中无意翻出了几年前的工作记事本，里面记录了很多我刚开始做自动化和性能测试时的笔记。虽然站在现在的角度来看，那个时候无论是技术细…...

编程日记 2023/2/10 1:27:49

专家培养计划

1、先知道一百个关键词进入一个行业，如果能快速掌握其行业关键词，你会发现，你和专家的距离在迅速缩短。若不然，可能同事间的日常交流，你都会听得云里雾里，不知所云。比如做零售，就要了解零售…...

编程日记 2023/2/10 1:26:42

583. 两个字符串的删除操作 72. 编辑距离

583. 两个字符串的删除操作 dp[i][j]:以i-1结尾的word1和j-1结尾的word2 变成相同字符串最少的步骤为dp[i][j] 初始化dp[i][0],dp[0][j]为空字符串和第一个字符匹配的最少步骤，即i/j，删除对应的字符个数。dp[i][0]i,dp[0][j]j; 遍历两个字符串。若word1…...

编程日记 2023/2/10 1:25:32

[多线程进阶] 常见锁策略

专栏简介: JavaEE从入门到进阶题目来源: leetcode,牛客,剑指offer. 创作目标: 记录学习JavaEE学习历程希望在提升自己的同时,帮助他人,,与大家一起共同进步,互相成长. 学历代表过去,能力代表现在,学习能力代表未来! 目录: 1. 常见的锁策略 1.1 乐观锁 vs 悲观锁 1.2 读写…...

编程日记 2023/2/10 1:24:23

Scala - Idea 项目报错 Cannot resolve symbol XXX

一.引言 Idea 编译 Scala 项目大面积报错 Cannot resolve symbol xxx。二.Cannot resolve symbol xxx 1.问题描述 Idea 内的 Scala 工程打开后显示下述异常： 即 Scala 常规语法全部失效，代码出现大面积红色报错。 2.尝试解决方法 A.设置 Main Sourc…...

编程日记 2023/2/10 1:23:16

信息化发展与应用的新特点

一、信息化发展与应用二、国家信息化发展战略三、电子政务※四、电子商务五、两化融合（工业和信息化）六、智慧城市一、信息化发展与应用我国在“十三五”规划纲要中，将培育人工智能、移动智能终端、第五代移动通信(5G)先进传感器等作为新…...

编程日记 2023/2/10 1:22:09

软件测试】测试时间不够了，我很慌？项目马上发布了......

目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜）前言常见的几种情况&…...

编程日记 2023/2/10 1:21:00

MapReduce编程规范

MapReduce编程规范 MapReduce的开发一共有八个步骤,其中Map阶段分为2个步骤，Shuffle阶段4个步骤，Reduce阶段分为2个步骤。 Map阶段2个步骤设置InputFormat类,将数据切分为Key-Value(K1和V1)对,输入到第二步。自定义Map逻辑,将第一步的结果转换成另外的…...

编程日记 2023/2/10 1:19:51

Unity 如何实现游戏Avatar角色头部跟随视角转动

文章目录功能简介实现步骤获取看向的位置获取头部的位置修改头部的朝向限制旋转角度超出限制范围时自动回正如何让指定动画不受影响功能简介如图所示，当相机的视角转动时，Avatar角色的头部会同步转动，看向视角的方向。实现步骤获取看向的…...

编程日记 2023/2/10 1:18:41

深度学习优化算法总结

深度学习的优化算法优化的目标优化提供了一种最大程度减少深度学习损失函数的方法，但本质上，优化和深度学习的目标不同。优化关注的是最小化目标；深度学习是在给定有限数据量的情况下寻找合适的模型。优化算法 gradient descent&#xf…...

编程日记 2023/2/10 1:17:30

CMake详细使用

1、CMake简介CMake是一个用于管理源代码的跨平台构建工具可以方便地根据目标平台和编译工具产生对应的编译文件主要用于C/C语言的构建，但是也可以用于其它编程语言的源代码。如同使用make命令工具解析Makefile文件一样cmake命令工具依赖于一个CMakeLists.txt的文件该…...

编程日记 2023/2/10 1:16:22

【数据结构与算法】前缀树的实现

🌠作者：阿亮joy. 🎆专栏：《数据结构与算法要啸着学》 🎇座右铭：每个优秀的人都有一段沉默的时光，那段时光是付出了很多努力却得不到结果的日子，我们把它叫做扎根目录👉…...

编程日记 2023/2/10 1:15:15

canvas 制作2048

效果展示对UI不满意可以自行调整，这里只是说一下游戏的逻辑，具体的API调用不做过多展示。玩法分析 2048 的玩法非常简单，通过键盘的按下，所有的数字都向着同一个方向移动，如果出现两个相同的数字，就将…...

编程日记 2023/2/10 1:14:09

等待超时时间默认是30s, 可以通过以下几个方法设置： browser_context.set_default_navigation_timeout()browser_context.set_default_timeout()page.set_default_navigation_timeout()page.set_default_timeout() set_default_navigation_timeout set_default_n…...

编程日记 2023/2/10 1:13:00

网站建设方案文库/网络营销的含义

这里需要说明的是，我们所讨论的接口其实包括对"接口"（interface）和"连接器"（connector）这两个方面的讨论，"连接器"我们通常也称之为"接头"或"插头"。 &…...

编程日记 2025/1/13 21:21:17

wordpress多图主题/链接提交

因工作需要配置禅道管理系统邮件发信功能注意1、邮件使用阿里云邮箱2、需在服务器开放465端口（25端口禁用）3、使用其他邮箱可能涉及到邮箱授权码问题，可自行查询。4、禅道管理系统邮件发信功能，由统一的一个邮箱给公司用户发信步…...

编程日记 2025/1/13 19:07:33

国内外十大免费crm视频软件/站长之家seo

本篇文章给大家带来的内容是关于Laravel中FormRequest中重写错误处理的介绍(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。laravel 框架中默认的validate验证，在处理错误的时候，默认是返回…...

编程日记 2025/1/13 19:01:29

wordpress添加icp/三只松鼠软文范例500字

网上查到的解决方法是添加如下代码： VTK_MODULE_INIT(vtkRenderingFreeType);但是添加后报另外一个错： 无法解析 vtkRenderingFreeType_AutoInit_Destruct 猜测可能是没有链接相关的库所以导致找不到符号。在源码中找到该源码项目输出的库是vtkRender…...

编程日记 2025/1/13 16:44:06

医疗器械网站建设/广州网站排名优化报价

一、内存JVM堆栈内存是决定应用服务器性能的关键指标，一般服务器默认的内存配置都比较小，在较大型的应用项目中，这点内存是不够的，因此需要进行查看与修改Web服务器内存大小，接下来就介绍服务器内存查看的方法以及不同…...

编程日记 2025/1/13 11:04:32

洛阳php网站开发/怎么推广一个app

JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文主要讲解下java和JSON之间的转换，特别是解决互相转换遇到日期问题的情况。一、需要相关的jar包：json-lib-xxx.jare…...

编程日记 2025/1/13 10:40:16

Element UI框架学习篇(一)

1.准备工作

1.1 下载好ElementUI所需要的文件

1.2 插件的安装

1.2.1 更改标签的时实现自动修改

1.2.2 element UI提示插件

1.3 使用ElementUI需要引入的文件

2 栅格布局

2.1 一行一格

2.1.1 示例代码

2.1.2 运行截图

2.2 一行多格

2.2.1 示例代码

2.2.2 运行截图

2.3 水平居中

2.3.1 示例代码

2.3.2 运行截图

2.4 响应式布局

2.4.1 示例代码

a 当宽度大于≥768px时

b 当宽度大于≥1200px时

相关文章：