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

无需构建工具,快速上手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实例的数据。在这个案例中,定义了三个复选框组checkboxGroup1checkboxGroup2checkboxGroup3,以及一个包含权限选项cities的数组。

权限设置逻辑

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

原理解析

  • Vue的响应式系统:Vue通过数据绑定和虚拟DOM,实现了视图与数据的双向绑定。当数据变化时,视图会自动更新。
  • 组件化:Vue和Element UI都支持组件化开发,可以复用代码,提高开发效率。
  • 指令系统:Vue的指令(如v-modelv-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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端JS特效第30集:jQuery焦点图插件edslider

jQuery焦点图插件edslider&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatib…

Vmware_Mysql8.0.31_安装部署

创建mysql目录&#xff0c;将资料上传到该目录 卸载MySQL依赖&#xff0c;虽然机器上没有装MySQL&#xff0c;但是这一步不可少 sudo yum remove mysql-libs 下载依赖并安装 sudo yum install libaio udo yum -y install autoconf 切换到hadoop102的root用户 su root 执…

C-MAPSS数据集-RUL剩余寿命预测

RUL剩余寿命预测 1. C-MAPSS数据集简介1.1 数据特点1.2 数据划分2. Pytorch 寿命预测简单测试2.1 数据可视化2.2 训练数据和测试数据结构分析2.3 训练数据的参数(工况参数+传感监测参数)2.4 剩余寿命预测问题2.5 简单预测测试2.6 方法局限性总结参考资料1. C-MAPSS数据集简介…

大模型【Qwen2-7B本地部署(WEB版)】(windows)

大模型系列文章目录 Qwen2-7B本地部署&#xff08;WEB版&#xff09; 前言 大模型是截止2024年上半年最强的AI&#xff0c;Qwen2是刚出来的号称国内最强开源大模型。这是大模型系列的第一篇文章&#xff0c;旨在快速部署看看最近出来的大模型效果怎么样&#xff0c;效果ok的话…

Maven 项目编译提示 unparseable pom 的解决方法

【问题描述】 手动下载了个项Java Web 项目&#xff0c;导入在 eclipse 开发工具里。然后一股脑地右键 “maven clean” 。然后发现操作 maven 什么东西都提示 "unparseable POM"字眼。结果就是根本更新不了本地的 maven 仓库。 【答案】 找到 eclipse 的 “windo…

算法学习day11

一、用最少数量的箭引爆气球() 一支弓箭可以沿着 x 轴从不同点 完全垂直 地射出。在坐标 x 处射出一支箭&#xff0c;若有一个气球的直径的开始和结束坐标为 xstart&#xff0c;xend&#xff0c; 且满足 xstart ≤ x ≤ xend&#xff0c;则该气球会被 引爆 。 输入&#xff…

Xcode持续集成之道:自动化构建与部署的精粹

标题&#xff1a;Xcode持续集成之道&#xff1a;自动化构建与部署的精粹 在快节奏的软件开发中&#xff0c;持续集成&#xff08;Continuous Integration, CI&#xff09;是提升开发效率和软件质量的关键实践。Xcode作为苹果生态中的核心开发工具&#xff0c;提供了与多种持续…

上机算法刷题暑期篇(一) —— AcWing 3692. 最长连续公共子序列(西电)

题目链接 AcWing 3692. 最长连续公共子序列 题目详情 题目解析 我们一看到题目,最长和连续子串&#xff0c;我们第一反应应该是什么?没错,就是dp,一般来说&#xff0c;子串问题常见的解法有两种&#xff1a; 双指针 dp 这道题无疑就是一道最常见的dp问题&#xff0c;而dp问…

昇思25天学习打卡营第11天 | FCN图像语义分割

昇思25天学习打卡营第11天 | FCN图像语义分割 文章目录 昇思25天学习打卡营第11天 | FCN图像语义分割FCN模型数据处理下载数据集创建训练集可视化训练集 网络构建网络结构张量操作 训练准备导入VGG-16部分预训练权重&#xff1a;损失函数模型评估指标 模型训练模型评估模型推理…

练习:随机点名器5

题目&#xff1a; TxT文件中事先准备好一些学生信息&#xff0c;每个学生的信息独占一行。,要求1&#xff1a;每次被点到的学生&#xff0c;再次被点到的概率在原先的基础上降低一半。 举例&#xff1a;80个学生&#xff0c;点名5次&#xff0c;每次都点到小A&#xff0c;概率…

网络规划设计师考试大纲

网络规划设计师考试大纲 网络规划设计师一年考一次&#xff0c;下半年开考&#xff0c;共有三个科目&#xff1a;综合知识、案例分析、论文。 科目包括&#xff1a; (1)网络规划与设计综合知识&#xff0c;考试时间为150分钟&#xff0c;笔试&#xff0c;选择题; (2)网络规划与…

常见 Web漏洞分析与防范研究

前言&#xff1a; 在当今数字化时代&#xff0c;Web应用程序扮演着重要的角色&#xff0c;为我们提供了各种在线服务和功能。然而&#xff0c;这些应用程序往往面临着各种潜在的安全威胁&#xff0c;这些威胁可能会导致敏感信息泄露、系统瘫痪以及其他不良后果。 SQL注入漏洞 …

《昇思25天学习打卡营第16天|基于MindNLP+MusicGen生成自己的个性化音乐》

MindNLP 原理 MindNLP 是一个自然语言处理&#xff08;NLP&#xff09;框架&#xff0c;用于处理和分析文本数据。 文本预处理&#xff1a;包括去除噪声、分词、词性标注、命名实体识别等步骤&#xff0c;使文本数据格式化并准备好进行进一步分析。 特征提取&#xff1a;将文…

【C++】CMake入门

CMake 是一个跨平台的构建系统生成工具&#xff0c;可以生成用于编译和链接应用程序的构建文件&#xff08;如 Makefile 或 Visual Studio 工程文件&#xff09;。 安装 CMake Windows 可以从 CMake官网 下载并安装 Windows 版本的 CMake。安装完成后&#xff0c;确保将 CMak…

5 MySql

5 MySql 一、简介二、SQL语言2.1 导入外部SQL文件2.2 显示表结构2.3 与创建数据库相关的语句2.4 与表相关的语句2.5 操作表中的数据2.6 7种基本的sql查询 三、SQL的注意点3.1 与集合函数相关3.2 SQL语句的书写与执行过程 四、约束 constraint4.1 作用4.2 功能分类4.3 自增 五、…

【web、DNS综合实验】

题目&#xff1a; 创建两个用户www.zhangsan.com 加密&#xff0c;www.lisi.com 目录&#xff1a;/www/zahngsan /www/lisi 主服务器做 dns web 从服务器做dns 在从服务器上能实现curl -k https://www.zhangsan.com ok&#xff0c;curl http://www.lisi.com ok 思路&#…

python爬虫学习(三十三天)---多线程上篇

hello&#xff0c;小伙伴们&#xff01;我是喔的嘛呀。今天我们来学习多线程方面的知识。 目录 一、了解多线程 &#xff08;1&#xff09;大概描述 &#xff08;2&#xff09;多线程爬虫的优势 &#xff08;3&#xff09;多线程爬虫的实现方式 &#xff08;4&#xff09…

头歌资源库(25)地图着色

一、 问题描述 任何平面区域图都可以用四种颜色着色&#xff0c;使相邻区域颜色互异。这就是四色定理。要求给定区域图&#xff0c;排出全部可能的着色方案。例如&#xff0c;区域图如下图所示&#xff1a; 要求用四种颜色着色。 则输入&#xff1a; 10 4 &#xff08;分别表示…

【ZhangQian AI模型部署】目标检测、SAM、3D目标检测、旋转目标检测、人脸检测、检测分割、关键点、分割、深度估计、车牌识别、车道线识别

在模型部署落地&#xff08;主要部署到rk3588&#xff09;折腾了这么多年&#xff0c;把这些年折腾过的模型整理了一下&#xff0c;所有的流程说明、代码模型都完全开放的&#xff0c;欢迎交流学习。有的是为了项目、有的是为了学习、还有的是为了找点事做、有的完全是为了安抚…

字节码编程bytebuddy之实现抽象类并并添加自定义注解

写在前面 本文看下使用bytebuddy如何实现抽象类&#xff0c;并在子类中添加自定义注解。 1&#xff1a;代码 1.1&#xff1a;准备基础代码 类和方法注解 package com.dahuyou.bytebuddy.cc.mine;import java.lang.annotation.ElementType; import java.lang.annotation.Re…