无需构建工具，快速上手Vue2 + ElementUI
无需构建工具，快速上手Vue2 + ElementUI
在前端开发的世界中，Vue.js以其轻量级和易用性赢得了开发者的青睐。而Element UI，作为一个基于Vue 2.0的桌面端组件库，提供了丰富的界面组件，使得构建美观且功能丰富的应用变得更加简单。本文将带你了解如何在不使用任何构建工具的情况下，通过直接在HTML页面中引入Vue和Element UI的脚本，快速实现一个具有权限设置功能的界面。
效果展示
案例概述
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
无需构建工具，快速上手Vue2 ElementUI 在前端开发的世界中，Vue.js以其轻量级和易用性赢得了开发者的青睐。而Element UI，作为一个基于Vue 2.0的桌面端组件库，提供了丰富的界面组件，使得构建美观且功能丰富的应用变得…...
通信协议_Modbus协议简介
概念介绍 Modbus协议：一种串行通信协议，是Modicon公司（现在的施耐德电气Schneider Electric）于1979年为使用可编程逻辑控制器（PLC）通信而发表。Modbus已经成为工业领域通信协议的业界标准（De f…...
LabVIEW优化氢燃料电池
太阳能和风能的发展引入了许多新的能量储存方法。随着科技的发展，能源储存和需求平衡的方法也需要不断创新。智慧城市倡导放弃石化化合物，采用环境友好的发电和储能技术。氢气系统和储存链在绿色能源倡议中起着关键作用。然而，氢气密度低&…...
SpringCloudGateway
作用 统一管理，易于监控安全，限流：在网关层就过滤掉非法信息nginx外部网关，gateway内网nginx可以使用Lua或Kong来增强 概念 id:名称随意uri: 被代理的服务地址。id和uri必填，谓词和过滤器非必填谓词：可以…...
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…...
如何在Ubuntu环境下使用加速器配置Docker环境
一、安装并打开加速器 这个要根据每个加速器的情况来安装并打开，一般是会开放一个代理端口，比如1087 二、安装Docker https://docs.docker.com/engine/install/debian/#install-using-the-convenience-script 三、配置Docker使用加速器 3.1 修改配置…...
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…...
算法简介：什么是算法？——定义、历史与应用详解
引言 在现代计算机科学中，算法是一个核心概念。无论是编程还是数据分析，算法都扮演着至关重要的角色。在这篇博客中，我们将深入探讨算法的定义、历史背景以及它在计算机科学中的地位和实际应用。 什么是算法？ 算法是解决特定问题…...
xss攻击
一、xss攻击简介 1、OWASP TOP 10之一,XSS被称为跨站脚本攻击(Cross-site-scripting)2、主要基于java script(JS)完成恶意攻击行为。JS可以非常灵活的操作html、css和浏览器,这使得XSS攻击的“想象”空间特别大。3、XSS通过将精心构造代码(JS)代码注入到网页中，并由…...
Android 性能优化之布局优化
文章目录 Android 性能优化之布局优化绘制原理双缓冲机制布局加载原理检测耗时常规方式AOP方式获取控件加载耗时 布局优化AsyncLayoutInflater方案Compose方案减少布局层级和复杂度避免过度绘制 Android 性能优化之布局优化 绘制原理 CPU：负责执行应用层的measure…...
TCP 握手数据流
这张图详细描述了 TCP 握手过程中，从客户端发送 SYN 包到服务器最终建立连接的整个数据流转过程，包括网卡、内核、进程中的各个环节。下面对每个步骤进行详细解释： 客户端到服务器的初始连接请求 客户端发送 SYN 包： 客户端发起…...
MDA协议
MDA协议通常指消息摘要算法（Message Digest Algorithm），在计算机安全和密码学中被广泛用于数据完整性验证和认证。以下是对MDA协议的详细介绍： 1. 概述 MDA协议是一类哈希函数，用于生成固定长度的消息摘要或哈希值。…...
always块敏感列表的相关报错，
在综合的时候，报错如下 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] 猜测报错原因（暂时没有时间寻找原因，后续在…...
STM32空闲中断处理串口接受数据
1、检测到空闲线路中断也叫做空闲中断，意思是串口接收完1字节数据后，数据先保持高电平（空闲）的时间超过1字节数据所用的时间，则被判定为空闲中断。 2、HAL库中操作空闲中断的宏是 （1）_HAL_UAR…...
oak相机使用oak官网方式标定
目录 一、depthai ROS驱动 一、depthai ROS驱动 （1）驱动下载地址：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 …...
打造高效能“园区企业服务平台”，让企业更好更快发展！
近年来，随着我国经济的快速发展，各地产业园区建设如火如荼，成为区域经济的支柱，如果说园区是区域经济的支柱，企业则是园区的血液，给园区带来生命力，为园区发展提供着动力，各地政府…...
【常见开源库的二次开发】基于openssl的加密与解密——openssl认识与配置（一）
目录： 目录： 一、什么是openssl？ 二、所需要具备的开发工具 三、Windows上编译OpenSSL3.0 四、Linux编译openssl3.0 一、什么是openssl？ OpenSSL 是一个开源的软件库，它提供了一系列加密工具和协议，主要用…...
前端时间格式传入后端负载里面没有东西
我是因为没有将时间值格式化，所有负载没有东西 <el-col :md"6"><el-form-item label"创建时间" prop"createTime"><el-date-picker v-model"queryParams.createTime" type"date" change"ha…...
BUCK电源芯片，电气参数，极限参数，工作特性，引脚功能
概述 在应用DC-DC开关电源芯片时，通常需要关注以下参数，同步与非同步，输入电压，输入电流，输出电压，输出电流，输入输出电容的选择；mosfet选型，电感选型，功耗&a…...
学习小记-使用Redis的令牌桶算法实现分布式限流
在介绍令牌桶算法前先介绍一下漏桶算法（Leaky Bucket） 漏桶算法（Leaky Bucket） 漏桶算法是一种固定容量的容器模型，它通过控制数据流入和流出的速度来限制数据的传输速率。漏桶算法的主要特点包括： 固定…...
3大核心价值助力自媒体高效采集：抖音无水印下载工具全解析
3大核心价值助力自媒体高效采集：抖音无水印下载工具全解析 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback s…...
开箱即用：基于Qwen3-Embedding-4B的智能文档检索系统搭建实录
开箱即用：基于Qwen3-Embedding-4B的智能文档检索系统搭建实录 1. 引言：为什么选择Qwen3-Embedding-4B 想象一下，你手头有成千上万份技术文档、合同或学术论文，每次查找相关内容都要靠关键词匹配，结果要么漏掉重要信息…...
03 AI编程工具基础配置：一键上手，零基础也能快速启用
AI编程工具基础配置：一键上手，零基础也能快速启用 摘要 本文为《30天掌控AI编程：从指令到落地，手把手教你指挥AI写代码》系列第三篇，聚焦上一篇推荐的3款主流AI编程工具（GitHub Copilot、文心快码、CodeLlama）的基础配置流程，以通用、简洁的实操步骤展开，全程无复杂…...
LeetCode：726. Number of Atoms - Python
问题描述： 给定一个化学式formula（作为字符串），返回每种原子的数量。 原子总是以一个大写字母开始，接着跟随0个或任意个小写字母，表示原子的名字。 如果数量大于 1，原子后会跟着数字表示原子的…...
# 系列文10：突破Activiti限制！政务工作流任意流转，支持跳退
系列文10：突破Activiti限制！政务工作流任意流转，支持跳退回退 非科班野生程序员，深耕政务信息化20年，这套自研Java Web框架支撑过省级新农保、全国首例跨省医保结算等核心民生系统，18年稳定运行至今。本系…...
Keil MDK-ARM高效开发：快捷键与代码完形实战配置
1. Keil配置详解：快捷键与代码完形功能实战指南作为一名嵌入式开发老手，我深知Keil MDK-ARM开发环境的高效配置对工作效率的影响。今天我将分享Configuration配置中Shortcut Keys（快捷键）和Text Completion（代码完形&a…...
剪映自动化工具来了：AI帮你自动剪辑成片
文章目录 📖 介绍 📖 🏡 演示环境 🏡 📒 AI赋能剪映自动化剪辑 📒 🎯 设计理念 🔧 核心功能 📦 安装与使用 ⚓️ 相关链接 ⚓️ 📖 介绍 📖 在视频创作中，剪辑工作往往耗时耗力。从素材导入、字幕匹配、BGM选择到最终导出，每一个环节都需要创作者投入大…...
企业 Agent 流程上线后，如何实现持续优化与迭代？——2026年企业级智能体长效运营全景指南
进入2026年，企业级智能体（Enterprise AI Agent）已从早期的“实验性POC”全面转向“大规模生产部署”。然而，行业调研显示，超过60%的Agent流程在上线初期表现惊艳，却在运行3-6个月后因业务环境变化、知识库过…...
STM32开发基础与高级应用全解析
1. STM32入门基础概念解析对于刚接触STM32的开发者来说，首先需要理解一些基础概念和架构特点。STM32是基于ARM Cortex-M内核的32位微控制器，与传统的51单片机相比，在性能、外设丰富度和开发方式上都有显著差异。1.1 时钟系统架构STM32的时钟树…...
千问3.5-9B模型蒸馏：轻量化OpenClaw移动端部署
千问3.5-9B模型蒸馏：轻量化OpenClaw移动端部署 1. 为什么需要端侧轻量化 去年夏天，我在树莓派上尝试部署OpenClaw时遇到了一个尴尬的问题——原版Qwen-14B模型需要至少32GB内存才能流畅运行，而我的树莓派4B仅有8GB。每次启动不到5分钟就会因…...