Element快速入门

news2024/10/6 18:34:55

文章目录

  • Element
    • 简介
    • 快速入门
    • 常见组件
      • 表格组件
      • Pagination分页
      • Dialog对话框
      • Form表单
    • 案例
      • 基本页面布局
      • 页面组件实现
      • axios异步加载数据
    • vue路由
    • 打包部署

本人主攻后端，前端的文章基本就用来记一下的
写的文章基本没什么内容，还望看的多包含

Element

简介

Element是一套基于Vue2.0（需要在vue工程下使用）的组件库
你可以认为就是帮我们快速搭建网页的组件库
可以直接用他定义好的按钮和表单等等，有不同的效果，可以制作出比较精美的网页
element官网

在这里插入图片描述

快速入门

在这里插入图片描述
1.集成终端打开
然后进行安装
在这里插入图片描述
在这里插入图片描述
2.在main.js中引入elementUI组件库
在原有基础上添加注释后面那两条
在这里插入图片描述
3.接下来
在views文件夹建一个element文件夹
然后再element文件夹下建一个ElementView的vue文件
写一下对应的基础格式
在这里插入图片描述

然后我们访问官网
准备cv
我们主要演示一下button组件
就里面有不同的样式，你要想用哪种你就直接点击显示代码
然后将里面的内容复制下来
在这里插入图片描述
然后把对应的代码复制到vue文件中
这里不是复杂数据，所以没有数据模型
在这里插入图片描述
然后
在App.Vue引用一下直接在div中加入

<element-view></element-view>

即可
在这里插入图片描述

常见组件

讲一下常用组件
还是cv

表格组件

很多不同类型的表格
想要什么复制什么代码
在这里插入图片描述
比如这个带边框的
你直接复制，然后可以新建一个vue文件放进去
或者在原来的文件加
它对应展现出来的效果就是你在网页上看的效果
你想更改的话就改对应的标题名什么的，或者数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Pagination分页

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Dialog对话框

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
还是如果我们想要达到我们想要显示的数据
需要更改对应的数据和名字
还有不同属性

Form表单

在这里插入图片描述

在这里插入图片描述
还需要输入对应数据
在这里插入图片描述
在这里插入图片描述

案例

基本页面布局

在这里插入图片描述
在这里插入图片描述
可以自己定义页面布局的容器
在这里插入图片描述
也可以找常用的页面布局
在这里插入图片描述
对代码进行一定的修改达到自己想要的样式
在这里插入图片描述
在这里插入图片描述

页面组件实现

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

axios异步加载数据

在这里插入图片描述
然后编写钩子方法
在这里插入图片描述
不太行

在这里插入图片描述
男女和图片进行修改
在这里插入图片描述

在这里插入图片描述

vue路由

就是点击不同的功能
对应的url发生变化，展现不同效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打包部署

先打包再部署在nginx上
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/825507.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何在保健品行业运用IPD？

如何在保健品行业运用IPD？

保健品是指能调节机体功能&#xff0c;不以治疗为目的&#xff0c;并且对人体不产生任何急性、亚急性或者慢性危害的产品。保健品是食品的一个种类&#xff0c;具有一般食品的共性&#xff0c;其含有一定量的功效成分&#xff0c;能调节人体的机能&#xff0c;具有特定的功效&a…
阅读更多...
使用Goland导出UML类图

使用Goland导出UML类图

1.安装依赖&#xff1a;goplantuml go get github.com/jfeliu007/goplantuml/parser go install github.com/jfeliu007/goplantuml/cmd/goplantumllatest 验证是否安装成功&#xff1a; 在$GOPATH的bin目录下生成.exe可执行文件&#xff1a; 2.在Goland的External Tools中添…
阅读更多...
Java课题笔记~ MyBatis的工作流程和核心对象

Java课题笔记~ MyBatis的工作流程和核心对象

一、工作流程 MyBatis的工作流程是MyBatis中重要的知识点&#xff0c;整个MyBatis工作流程分为5个步骤。 编写配置文件与映射文件&#xff1a;配置文件设置数据库连接&#xff1b;映射文件设置与SQL文件相关的操作。 MyBatis通过配置文件和映射文件生成SqlSessionFactory对象…
阅读更多...
【第四版】 信息系统项目管理高级（高项）--第五章 信息系统工程 知识点逻辑思维导图

【第四版】 信息系统项目管理高级（高项）--第五章 信息系统工程 知识点逻辑思维导图

第五章 信息系统工程 Part1 软件工程 一、架构设计 1.软件架构目的&#xff1a;解决好软件的复用、质量、维护问题2.软件架构风格 数据流风格&#xff1a;批处理序列、管道/过滤器调用/返回风格&#xff1a;主程序/子程序独立构建风格&#xff1a;通信工程、事件驱动虚拟机风格…
阅读更多...
年龄大了转嵌入式有机会吗？

年龄大了转嵌入式有机会吗？

首先&#xff0c;说下结论&#xff1a;年龄并不是限制转行嵌入式软件开发的因素&#xff0c;只要具备一定的编程和电子基础知识&#xff0c;认真学习和实践&#xff0c;是可以成为优秀的嵌入式软件开发工程师的。 1、转行建议 在转行的初期阶段&#xff0c;需要耐心学习嵌入式…
阅读更多...
测试|LoadRunner安装及介绍

测试|LoadRunner安装及介绍

测试|LoadRunner安装及介绍 文章目录 测试|LoadRunner安装及介绍1.什么是LoadRunner2.LoadRunner特点3.LoadRunner基本概念4.LoadRunner三大组件之间关系LoadRunner安装1.安装包2.安装loadrunner 1.什么是LoadRunner LoadRunner是用来模拟用户负载完成性能测试的工具。 它适用…
阅读更多...
Ubuntu安装Anaconda并配置Python虚拟环境

Ubuntu安装Anaconda并配置Python虚拟环境

目录 1、Anaconda 1.1、下载Anaconda安装包 1.2、安装Anaconda 2、Python虚拟环境 1、Anaconda 1.1、下载Anaconda安装包 这是清华的下载镜像列表&#xff1a; Index of /https://repo.anaconda.com/archive/我们下载的是Anaconda3-2023.07-1-Linux-x86_64.sh版本。 ht…
阅读更多...
【深度学习】Transformer，Self-Attention，Multi-Head Attention

【深度学习】Transformer，Self-Attention，Multi-Head Attention

必读文章&#xff1a; https://blog.csdn.net/qq_37541097/article/details/117691873 论文名&#xff1a;Attention Is All You Need 文章目录 1、Self-Attention 自注意力机制2、Multi-Head Attention 1、Self-Attention 自注意力机制 Query&#xff08;Q&#xff09;表示当…
阅读更多...
【秋招】算法岗的八股文之机器学习

【秋招】算法岗的八股文之机器学习

目录 机器学习特征工程常见的计算模型总览线性回归模型与逻辑回归模型线性回归模型逻辑回归模型区别 朴素贝叶斯分类器模型 (Naive Bayes)决策树模型随机森林模型支持向量机模型 (Support Vector Machine)K近邻模型神经网络模型卷积神经网络&#xff08;CNN&#xff09;循环神经…
阅读更多...
MPLS虚拟专用网跨域--OptionB方案

MPLS虚拟专用网跨域--OptionB方案

OptionB方案 跨域VPN-OptionB中，两个ASBR通过MP-EBGP交换它们从各自AS的PE设备接收的标签VPN-IPv4路由。图中，VPN LSP表示私网隧道，LSP表示公网隧道。 跨域VPN-OptionB方案中，ASBR接收本域内和域外传过来的所有跨域VPN-IPv4路由，再把VPN-IPv4路由发布出去。但MPLS VPN的…
阅读更多...
item_get-小红薯-商品详情

item_get-小红薯-商品详情

一、接口参数说明&#xff1a; item_get-获得小红薯商品详情&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 名称类型必须描述keyString是调用key&#xff08;http://o0b.cn/iimiya&#xff09;secretString是调用密钥api_nameS…
阅读更多...
JVM之内存结构

JVM之内存结构

1.程序计数器 定义&#xff1a;程序计数器&#xff08;Program Counter Register&#xff09;是JVM中一块较小的内存空间。解释器在解释JVM指令为机器码以供CPU执行时&#xff0c;会去程序计数器当中找到jvm指令的执行地址。 作用&#xff1a;记住下一条jvm指令的执行地址 特…
阅读更多...
机器学习-特征选择：如何使用Lassco回归精确选择最佳特征？

机器学习-特征选择：如何使用Lassco回归精确选择最佳特征？

一、引言 特征选择在机器学习领域中扮演着至关重要的角色&#xff0c;它能够从原始数据中选择最具信息量的特征&#xff0c;提高模型性能、减少过拟合&#xff0c;并加快模型训练和预测的速度。在大规模数据集和高维数据中&#xff0c;特征选择尤为重要&#xff0c;因为不必要的…
阅读更多...
vue2 el-carousel轮播图和文字一起改变

vue2 el-carousel轮播图和文字一起改变

vue项目的话 安装一下element依赖 npm i element-ui -S在main入口文件引入element包 我在app文件里边去写的 <template><div class"w"><el-carousel height"460px"><el-carousel-item v-for"item in items" :key"i…
阅读更多...
如何高效进行多项目管理？揭秘成功的多项目管理技巧

如何高效进行多项目管理？揭秘成功的多项目管理技巧

在激烈的商业环境下&#xff0c;为了充分利用项目资源&#xff0c;提高竞争力&#xff0c;多项目管理在各个行业中都十分常见。然而&#xff0c;想要做好多项目管理并不容易。那么&#xff0c;企业该如何做好多项目管理呢&#xff1f; 首先&#xff0c;多项目管理需要一个明确…
阅读更多...
【Ubuntu 18.04 搭建 DHCP 服务】

【Ubuntu 18.04 搭建 DHCP 服务】

参考Ubuntu官方文档&#xff1a;https://ubuntu.com/server/docs/how-to-install-and-configure-isc-dhcp-server dhcpd.conf 手册页 配置&#xff1a;https://maas.io/docs/about-dhcp 实验环境规划 Ubuntu 18.04&#xff08;172.16.65.128/24&#xff09;dhcp服务端Ubuntu…
阅读更多...
自监督去噪：Noise2Void原理和调用（Tensorflow）

自监督去噪：Noise2Void原理和调用（Tensorflow）

文章原文: https://arxiv.org/abs/1811.10980 N2V源代码: https://github.com/juglab/n2v 参考博客&#xff1a; https://zhuanlan.zhihu.com/p/445840211https://zhuanlan.zhihu.com/p/133961768https://zhuanlan.zhihu.com/p/563746026 文章目录 1. 方法原理1.1 Noise2Noise回…
阅读更多...
Scratch Blocks自定义组件之「旋律播放」

Scratch Blocks自定义组件之「旋律播放」

一、背景 看到microbit edit有旋律编辑器&#xff0c;就在scratch块中也写了一个&#xff0c;如下图所示 这是我写的 这是Micro:bit的 二、功能配置说明 支持8个音符8拍旋律控制 三、使用说明 &#xff08;1&#xff09;引入添加field_tone.js到core文件夹中&#xff0c;代码在…
阅读更多...
【PPT密码】PPT编辑限制的设置与取消

【PPT密码】PPT编辑限制的设置与取消

PPT文件可以设置编辑限制吗&#xff1f;其实是可以的&#xff0c;只不过ppt文件不像word、excel一样有一个明确的设置按钮。今天我们一起来看一下&#xff0c;如何给PPT设置修改限制。 将PPT文件另存为操作&#xff0c;在设置保存路径时点击工具 – 常规选项功能&#xff0c;然…
阅读更多...
【云原生】Kubernetes中deployment是什么？

【云原生】Kubernetes中deployment是什么？

目录 Deployments 更新 Deployment 回滚 Deployment 缩放 Deployment Deployment 状态 清理策略 金丝雀部署 编写 Deployment 规约 Deployments 一个 Deployment 为 Pod 和 ReplicaSet 提供声明式的更新能力。 你负责描述 Deployment 中的 目标状态&#xff0c;而 De…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023