提示:原网页已由神马搜索转码, 内容由developer.aliyun.com提供.

正文

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

2024-07-11342

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

实时数仓Hologres，5000CU*H 100GB 3个月

推荐场景：

轻松玩转一站式实时仓库

实时计算 Flink 版，5000CU*H 3个月

推荐场景：

实时发现最热Github项目

智能开放搜索 OpenSearch行业算法版，1GB 20LCU 1个月

推荐场景：

搭建高质量商品搜索服务

简介：在不使用构建工具的情况下，快速搭建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>

文章标签：

5月前

API开发工具Python

阿里云PAI部署DeepSeek及调用

本文介绍如何在阿里云PAI EAS上部署DeepSeek模型，涵盖7B模型的部署、SDK和API调用。7B模型只需一张A10显卡，部署时间约10分钟。文章详细展示了模型信息查看、在线调试及通过OpenAI SDK和Python Requests进行调用的步骤，并附有测试结果和参考文档链接。

taro_秋刀鱼

32041125

祈澈菇凉

开发框架JavaScript前端开发

vue2.0 + element-ui 实战项目- 搭建环境(一）

祈澈菇凉

45200

一颗小谷粒

12月前

JavaScript前端开发数据安全/隐私保护

ElementUI框架搭建及组件使用+登录界面精美模版分享

一颗小谷粒

97211

蓝易云

12月前

SQL关系型数据库MySQL

MySQL模糊查询二三事

在实际应用中，根据需求和实际数据情况，选择合适的模糊查询方法并优化查询模式，是确保查询效率和准确性的关键。复杂的查询模式往往需要详细的测试和调优，以达到最佳的性能与响应时效。

蓝易云

43844

弹性计算小冉

存储弹性计算固态存储

阿里云服务器租用价格参考，云服务器收费标准与实时活动价格整理

阿里云服务器租用价格参考，本文更新了阿里云服务器最新的租赁费用，包括云服务器实时的活动价格与云服务器收费标准。经济型e实例云服务器4核16G10M带宽配置30.00元/1个月、90.00元/3个月，独享型通用算力型u1实例2核4G服务器仅需199元1年，轻量云服务器2核2G新用户专享价格61元/1年，计算型c7a实例2核4G配置特惠价625.68元/1年。更多阿里云服务器热门配置活动价格及云服务器租赁费用及活动价格见下文。

弹性计算小冉

66333