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

无需构建工具，快速上手Vue2 + ElementUI

news 2026/2/8 16:16:59

无需构建工具，快速上手Vue2 + ElementUI

在前端开发的世界中，Vue.js以其轻量级和易用性赢得了开发者的青睐。而Element UI，作为一个基于Vue 2.0的桌面端组件库，提供了丰富的界面组件，使得构建美观且功能丰富的应用变得更加简单。本文将带你了解如何在不使用任何构建工具的情况下，通过直接在HTML页面中引入Vue和Element UI的脚本，快速实现一个具有权限设置功能的界面。

效果展示

image-20240711092723499

案例概述

HTML结构

首先，我们需要在HTML页面中引入Vue和Element UI的CDN链接。这样，我们就可以在不下载任何文件的情况下，直接使用它们提供的功能。

<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>

Vue实例

创建一个Vue实例，并指定其挂载点。通过定义data属性，我们可以存储界面所需的数据，如权限选项和用户的选择。

<div id="radio"><!-- Vue实例内容 -->
</div>

Element UI组件

Element UI的组件，如按钮和复选框组，可以通过简单的HTML标签引入到页面中。

<el-button id="setPermissions" class="InsideBt" type="info" plain>设置权限</el-button>
<el-checkbox-group v-model="checkboxGroup1" size="mini"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>

Vue实例详解

  • el: '#radio'：Vue实例挂载到id为radio的DOM元素上。
  • data()：返回一个对象，包含Vue实例的数据。在这个案例中，定义了三个复选框组checkboxGroup1、checkboxGroup2和checkboxGroup3，以及一个包含权限选项cities的数组。

权限设置逻辑

点击“设置权限”按钮后，将调用setPermissions()函数。虽然这个函数在案例中没有具体实现，但它的目的是处理用户选择的权限，并可能与后端进行交互以更新权限设置。

原理解析

  • Vue的响应式系统：Vue通过数据绑定和虚拟DOM，实现了视图与数据的双向绑定。当数据变化时，视图会自动更新。
  • 组件化：Vue和Element UI都支持组件化开发，可以复用代码，提高开发效率。
  • 指令系统：Vue的指令（如v-model、v-for）提供了声明式的操作DOM的能力。

完整代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Vue2+ElementUI Demo</title><link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head><body>
<div id="radio"><div><el-button id="setPermissions" class="InsideBt" onclick="setPermissions()" type="info" plain>设置权限</el-button></div><div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup1" size="mini" ><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup2" size="mini" ><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="checkboxGroup3" size="mini" ><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div></div></div><script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script><script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script><script>const cityOptions = ['读', '写', '执行'];new Vue({el: '#radio',data () {return {checkboxGroup1: ['读'],checkboxGroup2: ['读'],checkboxGroup3: ['读'],cities: cityOptions};}})</script>
</body>
</html>

相关文章：

无需构建工具，快速上手Vue2 + ElementUI

无需构建工具&#xff0c;快速上手Vue2 ElementUI 在前端开发的世界中&#xff0c;Vue.js以其轻量级和易用性赢得了开发者的青睐。而Element UI&#xff0c;作为一个基于Vue 2.0的桌面端组件库&#xff0c;提供了丰富的界面组件&#xff0c;使得构建美观且功能丰富的应用变得…...

编程日记 2024/7/11 19:23:00

通信协议_Modbus协议简介

概念介绍 Modbus协议&#xff1a;一种串行通信协议&#xff0c;是Modicon公司&#xff08;现在的施耐德电气Schneider Electric&#xff09;于1979年为使用可编程逻辑控制器&#xff08;PLC&#xff09;通信而发表。Modbus已经成为工业领域通信协议的业界标准&#xff08;De f…...

编程日记 2024/7/11 19:21:59

LabVIEW优化氢燃料电池

太阳能和风能的发展引入了许多新的能量储存方法。随着科技的发展&#xff0c;能源储存和需求平衡的方法也需要不断创新。智慧城市倡导放弃石化化合物&#xff0c;采用环境友好的发电和储能技术。氢气系统和储存链在绿色能源倡议中起着关键作用。然而&#xff0c;氢气密度低&…...

编程日记 2024/7/11 19:20:58

SpringCloudGateway

作用 统一管理&#xff0c;易于监控安全&#xff0c;限流&#xff1a;在网关层就过滤掉非法信息nginx外部网关&#xff0c;gateway内网nginx可以使用Lua或Kong来增强 概念 id:名称随意uri: 被代理的服务地址。id和uri必填&#xff0c;谓词和过滤器非必填谓词&#xff1a;可以…...

编程日记 2024/7/11 19:15:54

Wireshark 对 https 请求抓包并展示为明文

文章目录 1、目标2、环境准备3、Wireshark 基本使用4、操作步骤4.1、彻底关闭 Chrome 进程4.2、配置 SSLKEYLOGFILE [核心步骤]4.3、把文件路径配置到 Wireshark 指定位置4.4、在浏览器发起请求4.5、抓包配置4.6、过滤4.6.1、过滤域名 http.host contains "baidu.com4.6.2…...

编程日记 2024/7/11 19:13:52

如何在Ubuntu环境下使用加速器配置Docker环境

一、安装并打开加速器 这个要根据每个加速器的情况来安装并打开&#xff0c;一般是会开放一个代理端口&#xff0c;比如1087 二、安装Docker https://docs.docker.com/engine/install/debian/#install-using-the-convenience-script 三、配置Docker使用加速器 3.1 修改配置…...

编程日记 2024/7/11 19:12:51

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片 1 目标效果视频 CamManager 2 CamManager读取本地文件时序 3 BD_Vision_Utility添加代码 3.0 导入链接库 BD_OperatorSets.dllSystem.Windows.Forms.dllOpencvSharp 3.1 导入VisionParam中创建的文件Util_FileO…...

编程日记 2024/7/11 19:11:50

算法简介：什么是算法？——定义、历史与应用详解

引言 在现代计算机科学中&#xff0c;算法是一个核心概念。无论是编程还是数据分析&#xff0c;算法都扮演着至关重要的角色。在这篇博客中&#xff0c;我们将深入探讨算法的定义、历史背景以及它在计算机科学中的地位和实际应用。 什么是算法&#xff1f; 算法是解决特定问题…...

编程日记 2024/7/11 19:10:49

xss攻击

一、xss攻击简介 1、OWASP TOP 10之一,XSS被称为跨站脚本攻击(Cross-site-scripting)2、主要基于java script(JS)完成恶意攻击行为。JS可以非常灵活的操作html、css和浏览器,这使得XSS攻击的“想象”空间特别大。3、XSS通过将精心构造代码(JS)代码注入到网页中&#xff0c;并由…...

编程日记 2024/7/11 19:09:48

Android 性能优化之布局优化

文章目录 Android 性能优化之布局优化绘制原理双缓冲机制布局加载原理检测耗时常规方式AOP方式获取控件加载耗时 布局优化AsyncLayoutInflater方案Compose方案减少布局层级和复杂度避免过度绘制 Android 性能优化之布局优化 绘制原理 CPU&#xff1a;负责执行应用层的measure…...

编程日记 2024/7/11 19:08:47

TCP 握手数据流

这张图详细描述了 TCP 握手过程中&#xff0c;从客户端发送 SYN 包到服务器最终建立连接的整个数据流转过程&#xff0c;包括网卡、内核、进程中的各个环节。下面对每个步骤进行详细解释&#xff1a; 客户端到服务器的初始连接请求 客户端发送 SYN 包&#xff1a; 客户端发起…...

编程日记 2024/7/11 19:07:46

MDA协议

MDA协议通常指消息摘要算法&#xff08;Message Digest Algorithm&#xff09;&#xff0c;在计算机安全和密码学中被广泛用于数据完整性验证和认证。以下是对MDA协议的详细介绍&#xff1a; 1. 概述 MDA协议是一类哈希函数&#xff0c;用于生成固定长度的消息摘要或哈希值。…...

编程日记 2024/7/11 19:06:45

always块敏感列表的相关报错，

在综合的时候&#xff0c;报错如下 Synthesis synth_1 [Synth 8-91] ambiguous clock in event control ["E:/FPGA/FPGA_project/handwrite_fft/handwrite_fft.srcs/sources_1/new/reg_s2p.v":140] 猜测报错原因&#xff08;暂时没有时间寻找原因&#xff0c;后续在…...

编程日记 2024/7/11 19:05:44

STM32空闲中断处理串口接受数据

1、检测到空闲线路中断也叫做空闲中断&#xff0c;意思是串口接收完1字节数据后&#xff0c;数据先保持高电平&#xff08;空闲&#xff09;的时间超过1字节数据所用的时间&#xff0c;则被判定为空闲中断。 2、HAL库中操作空闲中断的宏是 &#xff08;1&#xff09;_HAL_UAR…...

编程日记 2024/7/11 19:03:42

oak相机使用oak官网方式标定

目录 一、depthai ROS驱动 一、depthai ROS驱动 &#xff08;1&#xff09;驱动下载地址&#xff1a;2. C 开发快速上手 — DepthAI Docs 0.3.0.0 documentation sudo apt install ./depthai_2.17.1_arm64.deb //运行 Python3 utilities/cam_test.py -mres 400 -cams rgb,m …...

编程日记 2024/7/11 19:02:41

打造高效能“园区企业服务平台”，让企业更好更快发展！

​近年来&#xff0c;随着我国经济的快速发展&#xff0c;各地产业园区建设如火如荼&#xff0c;成为区域经济的支柱&#xff0c;如果说园区是区域经济的支柱&#xff0c;企业则是园区的血液&#xff0c;给园区带来生命力&#xff0c;为园区发展提供着动力&#xff0c;各地政府…...

编程日记 2024/7/11 19:01:39

【常见开源库的二次开发】基于openssl的加密与解密——openssl认识与配置（一）

目录&#xff1a; 目录&#xff1a; 一、什么是openssl&#xff1f; 二、所需要具备的开发工具 三、Windows上编译OpenSSL3.0 四、Linux编译openssl3.0 一、什么是openssl&#xff1f; OpenSSL 是一个开源的软件库&#xff0c;它提供了一系列加密工具和协议&#xff0c;主要用…...

编程日记 2024/7/11 18:59:37

前端时间格式传入后端负载里面没有东西

我是因为没有将时间值格式化&#xff0c;所有负载没有东西 <el-col :md"6"><el-form-item label"创建时间" prop"createTime"><el-date-picker v-model"queryParams.createTime" type"date" change"ha…...

编程日记 2024/7/11 18:58:35

BUCK电源芯片，电气参数，极限参数，工作特性，引脚功能

概述 在应用DC-DC开关电源芯片时&#xff0c;通常需要关注以下参数&#xff0c;同步与非同步&#xff0c;输入电压&#xff0c;输入电流&#xff0c;输出电压&#xff0c;输出电流&#xff0c;输入输出电容的选择&#xff1b;mosfet选型&#xff0c;电感选型&#xff0c;功耗&a…...

编程日记 2024/7/11 18:57:34

学习小记-使用Redis的令牌桶算法实现分布式限流

在介绍令牌桶算法前先介绍一下漏桶算法&#xff08;Leaky Bucket&#xff09; 漏桶算法&#xff08;Leaky Bucket&#xff09; 漏桶算法是一种固定容量的容器模型&#xff0c;它通过控制数据流入和流出的速度来限制数据的传输速率。漏桶算法的主要特点包括&#xff1a; 固定…...

编程日记 2024/7/11 18:56:33

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/31 15:00:15

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/1/24 20:09:04

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2026/1/30 6:20:08

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/11/4 17:30:04