无需构建工具,快速上手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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

禁止使用存储过程

优质博文&#xff1a;IT-BLOG-CN 灵感来源 什么是存储过程 存储过程Stored Procedure是指为了完成特定功能的SQL语句集&#xff0c;经编译后存储在数据库中&#xff0c;用户可通过指定存储过程的名字并给定参数&#xff08;如果该存储过程带有参数&#xff09;来调用执行。 …

AndroidStudio2023.3版本avd manager模拟器无法创建

创建到最后一步的时候提示WARN - #com.android.sdklib.internal.avd.AvdManager - com.android.prefs.AndroidLocationsException: Can’t locate Android SDK installation directory for the AVD .ini file. 前提&#xff1a; 1.sdk路径没问题 2.安装了下图内容 那是什么原因…

Linux /etc/profile 详解

概述 Linux是一个多用户的操作系统。每个用户登录系统后&#xff0c;都会有一个专用的运行环境。通常每个用户默认的环境都是相同的&#xff0c;这个默认环境实际上就是一组环境变量的定义。用户可以对自己的运行环境进行定制&#xff0c;其方法就是修改相应的系统环境变量&…

原生小程序生成二维码并保存到本地

需求&#xff1a;我要在一个页面中生成一个二维码&#xff0c;并且这个二维码可以长按保存到本地或者发送给好友&#xff1b; 我这里是将生成的canvas二维码转换成图片&#xff0c;利用长按图片进行保存或转发 效果图&#xff1a; 第一步先下载对应的包&#xff1a; npm instal…

C语言笔记31 •单链表经典算法OJ题-3.反转链表•

反转链表 1.问题 给你单链表的头节点 head&#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 2.代码实现&#xff1a; //3.反转链表 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <stdlib.h> #include <assert.h>typedef int …

LLM——langchain 与阿里 DashScop (通义千问大模型) 和 DashVector(向量数据库) 结合使用总结

文章目录 前言预览直接调用大模型使用 prompt template格式化输出使用上下文 RAG 增强检索 自定义 langchain AgentPromptTemplate 和 ChatPromptTemplate使用少量示例创建ChatPromptTemplate 前言 langchain 是一个面向大模型开发的框架&#xff0c;其中封装了很多核心组件&a…

设计模式之外观模式(Facade)

Facade设计模式&#xff0c;也称为外观模式&#xff0c;是一种结构型设计模式&#xff0c;它主要用于为子系统中的一组接口提供一个统一的高层接口&#xff0c;从而使得子系统更加容易使用。以下是关于Facade设计模式的详细介绍&#xff1a; 一、定义 Facade模式为多个复杂的…

期权专题12:期权保证金和期权盈亏

目录 1. 期权保证金 1.1 计算逻辑 1.2 代码复现 1.3 实际案例 2. 期权盈亏 2.1 价格走势 2.2 计算公式 2.2.1 卖出期权 2.2.2 买入期权 免责声明&#xff1a;本文由作者参考相关资料&#xff0c;并结合自身实践和思考独立完成&#xff0c;对全文内容的准确性、完整性或…

【Linux】管道命令

命令执行的时候有时会输出数据&#xff0c;有的命令输出的数据太繁杂了。 那么我们怎么去筛选这些信息来得到我们所想要的格式&#xff1f; 这就牵涉到管道命令的问题了&#xff08;pipe&#xff09;&#xff0c;管道命令使用的是【|】这个界定符号。另外&#xff0c;管道命令与…

Mongodb单字段索引详解

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第89篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

概率论期末速成(知识点+例题)

考试范围 一&#xff1a; 事件关系运算性质全概率公式、贝叶斯公式古典概型 二&#xff1a; 离散分布律连续密度函数性质 -> 解决三个问题&#xff08;求待定系数、求概率、求密度函数&#xff09;分布函数 -> 解决三个问题常用分布&#xff08;最后一节课的那几个分…

Linux 调试命令记录

查看CPU信息 cat /proc/cpuinfo 显示当前电源功耗 top 命令能够清晰的展现出系统的状态&#xff0c;而且它是实时的监控&#xff0c;按 q 退出。 uptime 与 w 这两个命令只是单纯的反映出负载&#xff0c;所表示的是过去的1分钟、5分钟和15分钟内进程队列中的平均进程数量。…

【机器学习】机器学习详解-小白入门(随记)

&#x1f388;边走、边悟&#x1f388;迟早会好 机器学习&#xff08;Machine Learning&#xff09;是一种人工智能技术&#xff0c;通过让计算机系统从数据中学习并改进其性能&#xff0c;而不是通过显式编程来完成特定任务。其核心概念是利用算法和统计模型对大量数据进行分…

「解析」Cosine-Warmup 学习率策略

参考论文&#xff1a;SGDR: Stochastic Gradient Descent with Warm Restarts Bag of Tricks for Image Classification with Convolutional Neural Networks 梯度下降算法需要我们设置一个值&#xff0c;用来控制权重更新幅度&#xff0c;我们将其称之为学习率。它是控制模型学…

统信UOS桌面操作系统上删除系统升级后GRUB中的回滚条目与备份

原文链接&#xff1a;统信UOS删除升级后GRUB中的回滚条目与备份 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于在统信UOS桌面操作系统上删除系统升级后GRUB中的回滚条目与备份的文章。在进行系统升级后&#xff0c;GRUB引导菜单中可能会出现多个回滚条目和备份…

maven高级1——一个项目拆成多个

把原来一个项目&#xff0c;拆成多个项目。 &#xff01;&#xff01;他们之间&#xff0c;靠接口通信。 以ssm整合好的项目为例&#xff1a; 如何看拆的ok不ok 只要compile通过就ok。 拆分pojo 先新建一个项目模块&#xff0c;再把内容复制进去。 拆分dao 1.和上面一样…

Python爬虫速成之路(1):获取网页源代码

hello hello~ &#xff0c;这里是绝命Coding——老白~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;绝命Coding-CSDN博客 &a…

暴雨、高温等极端天气频发,农险业务迎大考

近期&#xff0c;湖北地区暴雨如注&#xff0c;持续的强降水使得地势低洼的农田面临严重的渍涝风险&#xff0c;早稻、再生稻等作物或将遭受“雨洗禾花”的威胁。 山东的农田却饱受高温干旱的煎熬&#xff0c;南四湖下级湖水位持续降低&#xff0c;农作物受旱面积不断扩大&…

grep对文件内容搜索(附重要拓展-正则表达式)

文件搜索是搜索查找符合条件的某文件的目录&#xff0c;若要编辑文件或对文件的某配置进行修改&#xff0c;就需要对文件内容进行搜索。 grep 命令是 Linux 及类 Unix 操作系统中的一个强大的文本搜索工具&#xff0c;用于搜索一个或多个文件中匹配给定模式的行。grep 代表“Gl…

请跳至打印机属性的“Adobe PDF设置”页面,取消选择“仅停靠系统字体;不使用文档字体”

场景&#xff1a; 当使用adobe pdf打印时&#xff0c;出现如下提示“请跳至打印机属性的“Adobe PDF设置”页面&#xff0c;取消选择“仅停靠系统字体&#xff1b;不使用文档字体””&#xff0c;该如何解决。 描述 □“仅停靠系统字体&#xff1b;不使用文档字体” 复选本框…