无需构建工具,快速上手Vue2 + ElementUI
2024-07-1126
版权
版权声明:
本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
实时数仓Hologres,5000CU*H 100GB 3个月
推荐场景:
轻松玩转一站式实时仓库
大数据开发治理平台 DataWorks,不限时长
推荐场景:
Github实时数据分析与可视化
实时计算 Flink 版,5000CU*H 3个月
推荐场景:
实时发现最热Github项目
简介:在不使用构建工具的情况下,快速搭建Vue2+ElementUI应用:直接在HTML中引入Vue和Element UI的CDN,创建Vue实例,绑定数据和组件。示例展示了如何使用Element UI的按钮和复选框组创建权限设置界面。通过Vue的响应式系统和组件化实现数据绑定和界面更新。完整代码包括设置权限按钮和三个复选框组,预设了城市权限选项。
无需构建工具,快速上手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 脚手架模块化开发 -快速入门
1.搭建 Vue 脚手架工程,需要使用到 NPM(node package manager), npm 是随 nodejs 安装 的一款包管理工具 , 类似 Maven 。所以我们需要先安装 Nodejs 2. 为了 更好兼容 ,这里我们安装 node.js10.16.3 , 要求同学们也使用这个版本 ( 因为这里 只是演示 Vue 脚手架工程 ), 后面我们还会讲解 Vue3 的脚手架工程搭建 , 再对 Node 升级 .
如何用vite+vue-next快速开发chrome插件
之前写过一篇文章《从开发chrome插件到插件系统设计》,主要讲述了如何开发一个chrome插件和chrome插件设计,感兴趣的同学可以再去看看。
热门文章
最新文章
1
基于PSO粒子群优化的车间调度问题求解matlab仿真,输出甘特图
10
2
首届中国Scrum大会-共同探讨AI时代下的敏捷(Agile in the AI Age),共同探讨Scrum框架在中国市场的应用与发展
8
3
使用Python实现深度学习模型:智能文化遗产保护与传承
13
4
多元时间序列分析统计学基础:基本概念、VMA、VAR和VARMA
12
5
使用PHP进行面向对象网站开发的最佳实践
14
6
面向对象设计在网站项目中的应用
17
7
chatgpt这么火,现在AI搜索引擎有哪些呢?
30
8
Elasticsearch 8 RAG 技术分享
22
9
基于RAG搭建企业级知识库在线问答
64
10
推荐2款免费开源的标注工具,支持大模型对话标注
25
相关课程
更多下一篇