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

element-ui的组件使用

news 来源：原创 2025/9/16 10:34:23

1. 安装 Element UI（在文件夹最上面输入cmd进入dos窗口，然后输入安装指令 npm install element-ui --save）

2.在main.js文件全局引入(main.js文件负责 全局注册 )，在该文件注册的所有组件在其他文件都能直接调用，一般不需再次引入（对于自定义的组件，不论在main.js文件里是否全局引入，在router文件夹的index文件里面好像必须要重新写一遍组件导入，才能用）

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

3.在views文件夹下创建文件index.vue(没有views文件夹就自己建一个)

<template><el-input  v-model="input" placeholder="请输入内容"></el-input></template><script>
export default {name: 'BookInfo', data() {return {input: '' // 用于绑定输入框的值};} 
}
</script><style scoped></style>

4.在App.vue文件引入该组件（App.vue是程序入口界面，程序在执行时先执行main.js和App.vue文件）

<template><div id="app"><BookInfo></BookInfo></div>
</template><script>
import BookInfo from './views/index'export default {name: 'App',components: {BookInfo}}
</script><style>#app{font-size:80px;color:red;text-align: center;}
</style>

5.执行结果

如果想让输入框小一些，就加个 style样式

<el-input style="width: 200px;" v-model="input" placeholder="请输入内容"></el-input>

6.注意：

正常情况下不会在App.vue文件直接引入某个组件，而是把动态路由引入，因为现在只写一个界面，就没有使用动态路由，实际生产必须改成动态路由。

只把第4步的第3行改成<router-view/>，就能用路由的方式（路径）引入很多界面

<template><div id="app"><router-view/></div>
</template>

element-ui的组件使用

1. 安装 Element UI（在文件夹最上面输入cmd进入dos窗口，然后输入安装指令 npm install element-ui --save） 2.在main.js文件全局引入(main.js文件负责全局注册 )，在该文件注册的所有组件在其他文件都能直接调用，一般…...

编程日记 2025/9/16 10:34:23

Starlink卫星动力学系统仿真建模第九讲-滑模（SMC）控制算法原理简介及卫星控制应用

滑模控制（Sliding Mode Control）算法详解一、基本原理滑模控制（Sliding Mode Control, SMC）是一种变结构控制方法，通过设计一个滑模面（Sliding Surface），迫使系统状态在有限时间内…...

编程日记 2025/9/9 17:09:49

《深度剖析Linux 系统 Shell 核心用法与原理_666》

1. 管道符的用法查找当前目录下所有txt文件并统计行数 # 使用管道符将ls命令的结果传递给wc命令进行行数统计 ls *.txt | wc -l 在/etc目录下查找包含"network"的文件并统计数量 # 使用find命令查找文件，并通过grep查找包含特定字符串的文件&#xf…...

编程日记 2025/9/10 19:57:12

51单片机学习之旅——定时器

打开软件 1与其它等于其它，0与其它等于0 1或其它等于1，0或其它等于其它 TMODTMOD&0xF0;//0xF01111 0000进行与操作，高四位保持，低四位清零，高四位定时器1，低四位定时器0 TMODTMOD|0x01;//0x010000 0…...

编程日记 2025/9/8 18:52:00

超详细介绍map（multimap）的使用

map类的介绍 map的声明如下，Key是map底层关键字的类型，T是map底层value的类型。set默认要求Key支持小于比较，如果不支持或者需要的情况下我们可以自行传入仿函数，map底层存储数据的内存是从空间申请来的。一般情况下，我…...

编程日记 2025/9/11 13:08:42

原生稀疏注意力NSA 替换transformer 注意力进行文本生成训练

DeepSeek-R1这篇文章，聚焦范围更加小，R1的重点在于提出了一个文本生成的训练策略和蒸馏策略，这篇文章则是提出了一个注意力机制NSA，主要解决的是长序列做注意力时带来的效率问题。通篇文章看下来，它的实际意义可能比较…...

编程日记 2025/9/16 9:03:50

读书笔记：《百年孤独》

《百年孤独》加西亚.马尔克斯著范晔译读出了阅读障碍。记不得书中的人，记不得书中的事，更不知何为孤独，只记得马孔多，这个陌生的地方，还有那个猪尾巴婴儿。百年：故事跨越了百年孤独&#…...

编程日记 2025/9/16 5:09:55

TVS管学习记录

文章目录前言一、TVS是什么？二、TVS关键参数1.反向截至电压**实际意义** 2.钳位电压**定义与作用****选择依据** **4. 实际应用示例****场景：通信端口的ESD保护** 3.反向截至电压和钳位电压的关联和区别**. 小结** 三、实际应用电路举例总结前言 TVS管…...

编程日记 2025/9/11 22:01:53

网络安全系统概述网络安全系统分为几级

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快 5级网络信息系统安全等级保护分为五级，一级防护水平最低，最高等保为五级。分别是用户自主保护级、系统审计保护级、安全标记保护级、结构…...

编程日记 2025/9/14 20:24:21

基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

写在前面博文内容涉及基于 Deepseek LLM 的本地知识库搭建使用 ollama 部署 Deepseek-R1 LLM知识库能力通过 Ragflow、Dify 、AnythingLLM、Cherry 提供理解不足小伙伴帮忙指正 😃,生活加油我站在人潮中央，思考这日日重复的生活。我突然想&#xff0c…...

编程日记 2025/9/14 21:51:53

Apache Flink架构深度解析：任务调度、算子数据同步与TaskSlot资源管理机制

Apache Flink是一个分布式流处理框架，其核心架构设计围绕有界与无界数据流的统一处理能力展开。以下从任务分配、算子数据同步、TaskManager与JobManager的TaskSlot机制三个维度展开详细分析： 一、任务分配机制 Flink的任务分配基于并行度（P…...

编程日记 2025/9/14 9:51:21

Linux 常见命令全解析

一、文件操作命令 1. ls ls是列出目录内容的命令。简单输入ls，会展示当前目录下的文件和目录列表。想要获取更详细的信息，比如文件权限、所有者、大小、修改时间等，使用ls -l。若要显示所有文件，包括以点（.&#xff…...

编程日记 2025/9/14 11:51:49

集群结构角色IPmaster192.168.35.135node1192.168.35.136node2192.168.35.137 部署 #需在三台主机上操作 //关闭防火墙 [rootmaster ~]# systemctl disable --now firewalld//关闭selinux [rootmaster ~]# sed -i s/enforcing/disabled/ /etc/selinux/config//关闭swap分区…...

编程日记 2025/9/14 18:01:48

springboot005学生心理咨询评估系统(源码+数据库+文档)

源码地址：学生心理咨询评估系统文章目录 1.项目简介2.部分数据库结构与测试用例3.系统功能结构4.包含的文件列表（含论文）后台运行截图 1.项目简介使用旧方法对学生心理咨询评估信息进行系统化管理已经不再让人们信赖了，把现…...

编程日记 2025/9/11 22:54:11

LeetCode37

LeetCode37 目录题目描述示例思路分析代码段代码逐行讲解复杂度分析总结的知识点整合总结...

编程日记 2025/8/16 11:11:18

2025年02月24日Github流行趋势

项目名称：mastra 项目地址url：https://github.com/mastra-ai/mastra 项目语言：TypeScript 历史star数：5735 今日star数：1140 项目维护者：adeleke5140, abhiaiyer91, TheIsrael1, adeniyii, Joshuafolorunsh…...

编程日记 2025/9/13 4:01:36

Spring Boot 中的日志管理

一、日志框架选择 1. 主流框架对比框架特点Spring Boot 默认支持Logback- 性能优异，Spring Boot 默认集成- 支持自动热更新配置文件✅ (默认)Log4j2- 异步日志性能更强- 支持插件扩展- 防范漏洞能力更好❌ (需手动配置)JUL (JDK自带)- 无需额外依赖- 功能简单&am…...

编程日记 2025/9/14 22:27:28

后端之JPA（EntityGraph+JsonView）

不同表之间的级联操作或者说关联查询是很多业务场景都会用到的。对于这种需求最朴素的方法自然是手动写关联表，然后对被关联的表也是手动插入数据。但是手写容易最后写成一堆shit代码，而且修改起来也是非常麻烦的。学会使用现成的工具还是非常有利的…...

编程日记 2025/9/15 22:21:15

点击修改按钮图片显示有问题

问题可能出在表单数据的初始化上。在 ave-form.vue 中，我们需要处理一下从后端返回的图片数据，因为它们可能是 JSON 字符串格式。 vue:src/views/tools/fake-strategy/components/ave-form.vue// ... existing code ...Watch(value)watchValue(v: any) …...

编程日记 2025/9/15 5:03:47

Linux第一个小程序－进度条 (linux第七课)

目录知识补充: 随机数的使用,先用srand(time(NULL))种时间种子函数指针模拟进度条代码知识补充: \r只是回车 \r\n是回车加换行,其中\n带有强制换行的功能如果只使用\r ,还需要刷新缓冲区(fflush(stdout)) %2d是左对齐 %-2d是右对齐 %.1lf是小数点后保留一位随机数的使…...

编程日记 2025/9/15 10:33:29

iOS指纹归因详解

iOS 指纹归因（Fingerprint Attribution）详解 1. 指纹归因的概念指纹归因（Fingerprint Attribution）是一种无 ID 归因（ID-less Attribution）技术，主要用于广告跟踪、用户识别或流量分析。它基…...

编程日记 2025/9/15 20:09:12

【Erdas实验教程】009：非监督分类及分类后评价

文章目录一、分类过程二、分类评价ERDAS 的 ISODATA 算法是基于最小光谱距离来进行的非监督分类，聚类过程始于任意聚类平均值或一个已有分类模板的平均值；聚类每重复一次，聚类的平均值就更新一次，新聚类的均值再用于下次聚类循环。这个过程不断重复，直到最大的循环次数已…...

编程日记 2025/9/10 22:29:46

DeepSeek＋Kimi生成高质量PPT

DeepSeek与Kimi生成PPT全流程解析一、工具分工原理 DeepSeek核心作用：生成结构化PPT大纲（擅长逻辑构建与内容优化）Kimi核心作用：将文本转换为视觉化PPT（提供模板库与排版引擎） 二、操作步骤详解 1. 通…...

编程日记 2025/9/10 0:26:04

conda 基本命令

1、查询当前所有的环境 conda env list 2、创建虚拟环境 conda create -n 环境名 [pythonpython版本号] 其中[pythonpython版本号]可以不写 conda create -n test python3.12 我们输入conda env list看到我们的环境创建成功了，但是发现他是创建在我们默认的C盘的…...

编程日记 2025/9/14 6:00:04

网站搭建wp

前置准备工作需要下载Git，note.js，在官网上可以搜索并安装搭建过程这里借助hexo工具 1. 本地博客搭建首先创建本地文件夹，并在该文件夹里面创建一个叫做hexo的文件夹在该文件夹中选择Git Bash 进入hexo官网将五条指令用bash运行运行…...

编程日记 2025/9/11 20:17:49

什么是图传技术？

1.什么是图传技术？ 图传技术（图像传输技术）是指将摄像头或其他图像采集设备捕获的实时画面，通过无线通信方式传输到接收端（如遥控器、显示屏、云端服务器等）的技术。它广泛应用于无人机、安防监控、直播设…...

编程日记 2025/9/15 21:47:05

Python数据结构高级：图的表示与遍历

Python数据结构高级：图的表示与遍历一、图的基本概念 1.1 图的定义与分类图（Graph）是由顶点（Vertex）集合和边（Edge）集合组成的数据结构，形式化表示为 G (V, E) 主要分类&…...

编程日记 2025/9/12 1:52:51

登录-10.Filter-登录校验过滤器

一.登录校验过滤器的实现思路我们要实现登录校验过滤器，就要首先明白登录校验过滤器的实现思路。登录校验过滤器是用来实现登录校验的。那么首先思考第一个问题，所有的请求都需要校验吗？ 答案是否定的，因为login请求就不需要过滤…...

编程日记 2025/9/15 3:45:23

《Keras 3 ：使用迁移学习进行关键点检测》：此文为AI自动翻译

《Keras 3 ：使用迁移学习进行关键点检测》作者：Sayak Paul，由 Muhammad Anas Raza 转换为 Keras 3 创建日期：2021/05/02 最后修改时间：2023/07/19 描述：使用数据增强和迁移学习训练关键点检测器。（i）此示例使用 Keras 3 在 Colab 中查看 GitHub 源关键点检测包…...

编程日记 2025/9/14 10:31:44

【Deepseek】AnythingLLM + Ollama

1. 下载安装 anythingllm 下载地址：https://anythingllm.com/desktop 2. 启动anything 点击 Get started 3.创建工作空间 4.选择Ollama大语言模型聊天设置当前只有一个1.5b的模型下载完成7b模型后选择后记得点击更新到工作空间！&…...

编程日记 2025/9/14 3:47:03

VMware17下Ubuntu22.04设置本地共享文件夹

VMware17下使用Ubuntu22.04设置共享文件夹在日常的开发与学习中，我们常常需要在主机（通常是Windows系统）和虚拟机（如Ubuntu 22.04）之间进行文件交换。为了简化这一过程，VMware提供了共享文件夹的功能&…...

编程日记 2025/9/15 7:19:47

【GreenHills】GHS合并库文件

1、文档目标解决Green Hills对于多个库文件合并问题 2、问题场景客户具有多个工程库文件。但是，客户想要在项目最终交付的时候，通过将多个库文件打包成一个库文件，进行交付。 3、软硬件环境 1）、软件版本：MULTI…...

编程日记 2025/9/14 1:47:34

mysql-统计表占内存大小

在 MySQL 中，统计表占用的内存大小（或者更准确地说，是表占用的磁盘空间大小）并非一个简单的任务，因为MySQL的数据存储涉及多种文件，包括数据文件、索引文件等。不过，有几种方法可以帮助你估算一…...

编程日记 2025/9/15 17:27:32

基于SpringBoot和Leaflet的邻省GDP可视化实战

目录前言一、技术实现路径 1、空间数据检索 2、数据展示检索流程二、SpringBoot后台实现 1、模型层实现 2、控制层实现三、WebGIS前端实现 1、控制面展示 2、成果展示四、总结前言在数字化浪潮席卷全球的今天，数据已成为驱动社会经济发展、指导政策…...

编程日记 2025/9/12 6:18:04

DeepSeek-R1本地部署保姆级教程

一、DeepSeek-R1本地部署配置要求 （一）轻量级模型 ▌DeepSeek-R1-1.5B 内存容量：≥8GB 显卡需求：支持CPU推理（无需独立GPU） 适用场景：本地环境验证测试/Ollama集成调试 （二&a…...

编程日记 2025/9/9 1:50:34

DeepSeek + Mermaid编辑器——常规绘图

下面这张图出自：由清华大学出品的《DeepSeek：从入门到精通》。作为纯文本生成模型，DeepSeek虽不具备多媒体内容生成接口，但其开放式架构允许通过API接口与图像合成引擎、数据可视化工具等第三方系统进行协同工作，最终…...

编程日记 2025/9/12 3:47:41

推送项目之解决冲突

文章目录为什么会发生冲突？如何解决这些冲突？1. **查看冲突文件**2. **解决二进制文件冲突**3. **解决文本文件冲突**4. **标记冲突已解决**5. **完成合并**6. **推送更改** 注意事项总结问题：我们在git pusll拉取远程仓库的代码到本地对比…...

编程日记 2025/9/16 2:17:17

蓝桥杯——lcd显示

一：复制文件从官方参考文件中复制相关文件，Src中的lcd.c，Inc中的lcd.h，fonts.h复制到自己创建的文件中二：lcd初始化在lcd.h中找到四个初始化函数，将其写到main文件中三：写lcd显示函数在…...

编程日记 2025/9/14 2:48:59

1_安装JDK和Hadoop

一、解压jdk和hadoop安装包下载通过百度网盘分享的文件：jdk-8u172-linux-x64.tar.gz 链接：https://pan.baidu.com/s/1VjhdpfyqdC7ivEBIjTn8tA 提取码：iz25 二、配置环境变量 vi /root/.bashrc添加 #set java environment export JAVA_H…...

编程日记 2025/8/16 13:05:11

angular简易计算器

说明： 用angular实现计算器效果，ui风格为暗黑效果图： step1: C:\Users\Administrator\WebstormProjects\untitled4\src\app\calnum\calnum.component.ts import { Component } from angular/core;Component({selector: app-calnum,import…...

编程日记 2025/9/14 7:11:56

python 程序

gif调整尺寸.py import sys from PIL import Image,ImageSequence import os ##print(sys.argv[0]) ##print(sys.argv[1]) def gifresize(file_name): gf Image.open(file_name) ## lifetime gf.info[duration] imglist [] imgnew [] for i in ImageSequence.…...

编程日记 2025/9/10 0:53:27

vue3响应式数据原理

Vue 3 的响应式系统与 Vue 2 有显著不同，Vue 3 使用了 Proxy 替代了 Vue 2 中的 Object.defineProperty，这使得 Vue 3 的响应式系统更加灵活和强大 Vue 3 响应式原理的核心 Proxy： Vue 3 使用 Proxy 来拦截对象的操作（如读取、赋值…...

编程日记 2025/9/15 22:33:22

【Godot4.3】自定义圆角容器

概述 Godot控件想要完全实现现代UI风格，需要进行大量的自定义组件设计。本篇就依托于笔者自己对现代UI设计中的圆角面板元素模仿来制作圆角容器组件。圆角容器圆角元素在现代的扁平UI设计中非常常见，在Godot中可以通过改进PanelContainer来或者自定…...

编程日记 2025/9/13 23:00:52

远程部署 Qt 应用程序套件错误原因

构建套件报红色警告错误： 图一： 改图二：...

编程日记 2025/8/16 11:54:48

vue3学习4-pinia+组件通信

集中式状态管理，vue2用vuex，vue3用pinia，相当于react中的redux 引入pinia pinia的具体存储都放到src/store目录下，每个store.js具体存储实现如下： 修改pinia中的数据 3种方式： 1、可以直接修改从pinia中读…...

编程日记 2025/9/12 6:01:57

GEE中的Map对象

在Google Earth Engine (GEE) 中，Map 是一个非常重要的对象，它用于显示地理数据和控制地图的交互。Map 对象提供了一系列函数，允许你操作和控制地图显示。以下是一些常用的 Map 函数及其使用方法： 1. Map.addLayer() 功能&#x…...

编程日记 2025/9/2 13:33:44

【AI学习笔记】2月10日李飞飞巴黎AI峰会演讲：探索 AI 的历史、现状与未来

【AIGC学习笔记】2月10日李飞飞巴黎AI峰会演讲：探索 AI 的历史、现状与未来 AI 的历史根基与发展历程生命起源与智能诞生：5 亿年前视觉概念的出现推动了智能的诞生。最初的感知仅仅是被动的体验，只是但随着神经系统的活跃，视觉…...

编程日记 2025/9/12 8:24:50

Vue.js组件开发：从基础到进阶

在现代前端开发中，Vue.js因其简洁、灵活和易上手的特点，成为了众多开发者首选的框架之一。组件化是Vue.js的核心思想之一，它让我们能够更高效、模块化地开发应用。在本文中，我们将从Vue.js的组件开发的基础知识开始，逐…...

编程日记 2025/9/13 19:09:36

Elasticsearch索引设计与分片策略深度优化-手记

一、索引设计的黄金法则（从踩坑到精通的必经之路） 1. 字段类型显式声明原则动态映射是新手最易踩的坑，某金融平台曾因金额字段被自动识别为text类型，导致聚合查询时触发OOM。正确做法应显式声明核心字段： PUT /fin…...

编程日记 2025/9/15 8:42:16

嵌入式学习|C语言篇进程间通信（IPC）全面解析与示例

一、进程通信基础概念 1.1 进程隔离原理现代操作系统通过虚拟内存技术为每个进程创建独立的地址空间，这种隔离机制保障了系统的安全性，但也导致进程无法直接访问彼此的内存数据。进程间通信（IPC）正是为解决这一矛盾而设计的核心…...

编程日记 2025/9/11 11:20:31

相关文章：