• Element ui 快速入门（基础知识点）

    element ui官网

    前言：

            在当今时代，我们在编写计算机程序时，不仅仅是写几个增删改查的简单功能，为了满足广大用户对页面美观的需求，为了让程序员们写一些功能更简便，提高团队协作效率，所以element ui孕育而生。Element UI是一个能够显著提升开发效率、保障界面质量及促进团队协作的前端UI框架，特别适合构建现代Web应用程序。

            element ui 的作用与意义主要体现在以下几点：

            

    1. 加速开发进程：Element UI 提供了一整套预设的、可复用的 UI 组件，如按钮、表单、导航、布局等，这些组件都经过精心设计和测试，可以直接在项目中使用，极大地减少了前端开发者从零开始编写和设计界面元素的时间，从而加快了 Web 应用程序的开发速度。

    2. 保证界面一致性与美观性：Element UI 遵循统一的设计规范，其组件拥有高质量的设计和一致的视觉风格，有助于构建出既美观又具有一致用户体验的用户界面，这对于提升品牌形象和用户满意度至关重要。

    3. 提升响应式设计能力：由于 Element UI 支持响应式布局，开发人员可以轻松创建适应多种屏幕尺寸和设备类型的应用，无论是桌面还是移动设备，都能确保用户界面的良好展示效果，增强了应用的普适性和可用性。

    4. 简化维护工作：使用统一的组件库，当需要更新或修改界面时，只需调整相应的组件设置即可全局生效，大大降低了后期维护的工作量和复杂度。

    5. 提高团队协作效率：Element UI 的标准化和模块化特性使得团队成员之间可以共享和复用代码，新成员也能更快融入团队开发流程，提高了团队的整体协作效率。

    6. 增强可定制性和扩展性：Element UI 提供了丰富的插件扩展机制和主题定制功能，允许开发者根据项目需求进行灵活定制，从而满足不同场景和品牌风格的要求。

    使用npm方式安装

    推荐用npm的方式安装，因为他可以更好地和webpack打包工具配合使用

    安装命令：npm i element-ui -S

    引入element ui

    在main.js中写入以下内容：

    1. import Vue from 'vue';
    2. import ElementUI from 'element-ui';
    3. import 'element-ui/lib/theme-chalk/index.css';
    4. import App from './App.vue';
    5.  
    6. Vue.use(ElementUI);
    7.  
    8. new Vue({
    9.   el: '#app',
    10.   render: h => h(App)
    11. });

    基本组件介绍（只说明常用组件）

    1.Container 布局容器

    一般采用三块（header，aside，main），代码如下：

    2.   <el-aside width="200px">Asideel-aside>
    3.   <el-container>
    4.     <el-header>Headerel-header>
    5.     <el-main>Mainel-main>
    6.   el-container>

    ：外层容器。当子元素中包含  或  时，全部子元素会垂直上下排列，否则会水平左右排列。

    ：顶栏容器。

    ：侧边栏容器。

    ：主要区域容器。

     2.Icon 图标

    为了美观，我们引入element ui 中的图标加以修饰，最基础的就是修改图标，分享图标，删除图标和搜索图标

    直接通过设置类名为 el-icon-iconName 来使用即可。

    1. class="el-icon-edit">
    2. <i class="el-icon-share">i>
    3. <i class="el-icon-delete">i>
    4. <el-button type="primary" icon="el-icon-search">搜索el-button>

    3.Button 按钮

    有时操作需要用按钮控制，下面是一些常用按钮

    使用type、plain、round和circle属性来定义 Button 的样式。

    type就是默认按钮

    plain就是朴素按钮

    round就是圆角按钮

    circle就是原型按钮

    2.   <el-button>默认按钮el-button>
    3.   <el-button type="primary">主要按钮el-button>
    4.   <el-button type="success">成功按钮el-button>
    5.   <el-button type="warning">警告按钮el-button>
    6.   <el-button type="danger">危险按钮el-button>

    如图所示：

    4. Radio 单选框

    radio单选框一般用于添加功能时的性别选择，或者某一选项有且只能有一项

    v-model绑定我们要传递的变量，而label是显示在页面上的内容来供客户选择 ，label可以是String、Number或Boolean。

    5.Checkbox 多选框

    一般用于多项选择，例如添加一个用户，用户的爱好肯定不止一个，此时会用到多选框，我们可以给多选框加上一个value进行传递。多选框出现，v-model默认绑定布尔值false，就是默认不选中，代码如下：

    2. <script>
    3.   export default {
    4.     data() {
    5.       return {
    6.         checked: false
    7.       };
    8.     }
    9.   };
    10. script>

    6.Input 输入框

    一般用于添加修改搜索功能，v-model双向数据绑定用户输入的内容

    在定义密码输入框时，有一个属性可以控制密码是否显示：show-password

    Input 为受控组件，它总会显示 Vue 绑定值。

    通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

    不支持 v-model 修饰符。

    7.Select 选择器

    也就是下拉菜单，一般用于类型选择，当选项过多时，使用下拉菜单展示并选择内容。

    v-model的值为当前被选中的el-option的 value 属性值 

    options为我们从后端获取的数组通过v-for循环遍历

    ：key是唯一标识符，必须要有，否则报错无法渲染

    ：label就是渲染在页面上的内容，用户可以选择

    ：value就是代码间传递的内容，用户看不到

    2.  
    3. <script>
    4.   export default {
    5.     data() {
    6.       return {
    7.         options: [{
    8.           value: '选项1',
    9.           label: '黄金糕'
    10.         }, {
    11.           value: '选项2',
    12.           label: '双皮奶'
    13.         }, {
    14.           value: '选项3',
    15.           label: '蚵仔煎'
    16.         }, {
    17.           value: '选项4',
    18.           label: '龙须面'
    19.         }, {
    20.           value: '选项5',
    21.           label: '北京烤鸭'
    22.         }],
    23.         value: ''
    24.       }
    25.     }
    26.   }
    27. script>

    8.Form 表单

    由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

    我在此只解释表单验证

    首先需要绑定表单验证规则:rules="rules"，其次需要用到prop属性，表单验证才能起作用

    required是此栏不能为空，否则会提示信息message，trigger是点击提交时，input框中检测到为空或者失去焦点，就会阻止提交功能的触发

    9.Table 表格

    在此，我为大家提供一个带有全选框，有操作栏，有排序的表格

    ref是标识，：data是要展示的数据

    @selection-change="handleSelectionChange"这个方法有一个参数，参数就是被选中的当条数据

    :default-sort = "{prop: 'date', order: 'descending'}是通过prop绑定date时间这一项，descending是倒序的意思，默认倒序排序

    sortable是排序按钮

    通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

    代码如下：

    2.  
    3. <script>
    4.   export default {
    5.     data() {
    6.       return {
    7.         tableData: [],
    8.         multipleSelection: []
    9.       }
    10.     },
    11.  
    12.     methods: {
    13.       handleSelectionChange(val) {
    14.         this.multipleSelection = val;
    15.       }
    16.     }
    17.   }
    18. script>

    10.Dialog 对话框

    Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Form 组件的样例。

    如图所示：

     代码如下：

    1.  
    2. "text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog
    3.  
    4. <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    5.   <el-form :model="form">
    6.     <el-form-item label="活动名称" :label-width="formLabelWidth">
    7.       <el-input v-model="form.name" autocomplete="off">el-input>
    8.     el-form-item>
    9.     <el-form-item label="活动区域" :label-width="formLabelWidth">
    10.       <el-select v-model="form.region" placeholder="请选择活动区域">
    11.         <el-option label="区域一" value="shanghai">el-option>
    12.         <el-option label="区域二" value="beijing">el-option>
    13.       el-select>
    14.     el-form-item>
    15.   el-form>
    16.   <div slot="footer" class="dialog-footer">
    17.     <el-button @click="dialogFormVisible = false">取 消el-button>
    18.     <el-button type="primary" @click="dialogFormVisible = false">确 定el-button>
    19.   div>
    20. el-dialog>

    当dialogFormVisible设定为布尔值true时，才会打开这个对话框，相反为false时就会关闭对话框

    11.Pagination 分页

    对于分页，我在此介绍一个完整功能的分页，如图所示：

     代码如下所示：

    2.       @size-change="handleSizeChange"
    3.       @current-change="handleCurrentChange"
    4.       :current-page="currentPage4"
    5.       :page-sizes="[100, 200, 300, 400]"
    6.       :page-size="100"
    7.       layout="total, sizes, prev, pager, next, jumper"
    8.       :total="400">
    9.     
    10. <script>
    11.   export default {
    12.     methods: {
    13.       handleSizeChange(val) {
    14.         console.log(`每页 ${val} 条`);
    15.       },
    16.       handleCurrentChange(val) {
    17.         console.log(`当前页: ${val}`);
    18.       }
    19.     },
    20.     data() {
    21.       return {
    22.         
    23.       };
    24.     }
    25.   }
    26. script>

    它里面有两个方法：@size-change="handleSizeChange"：控制每页几条数据

                                    @current-change="handleCurrentChange"：控制当前所在的页码

    :current-page.sync绑定当前页码

    :page-sizes="[100, 200, 300, 400]"下拉框的选项

    :page-size="100"当前默认显示每页条数

    :total="1000"总数据条数

    总结

    通过以上几个简单组件我们可以总结出element ui为什么在当今互联网时代如此火爆，下面是我总结的一些使用element ui的好处：

    1. 高效开发：提供一系列现成的、高质量的Vue组件，加速Web应用程序的开发过程。
    2. 设计一致性：确保应用程序界面元素间的一致性与美观性，提升用户体验。
    3. 易用性：组件简单易用，文档齐全，降低了学习成本，便于开发者快速上手。
    4. 响应式布局：支持响应式设计，适应不同设备和屏幕尺寸，实现多平台兼容。
    5. 节省维护成本：通过统一的组件和样式，简化后期的维护和迭代工作。
    6. 团队协作优化：标准化的组件库促进团队成员之间的高效协作和代码复用。
    7. 高度可定制：支持主题定制和插件扩展，满足项目的个性化需求。
    8. 体积优化考量：虽然整体引入可能增加项目体积，但针对大量使用Element UI的项目，其带来的开发效率提升远超体积增加的劣势。
    9. 成熟生态：作为Vue生态系统中的成熟框架，Element UI拥有活跃的社区支持和丰富的第三方资源。
  • 相关阅读:
    【网络爬虫笔记】爬虫Robots协议语法详解
    【C++学习手札】模拟实现string
    逐字稿 | 2 MoCo 论文逐段精读【论文精读】
    文件解析工具
    MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（3）-系统数据集合设计
    .NET Core Web APi类库如何内嵌运行？
    线性代数学习笔记7-5：复习——正交、投影、行列式、特征值
    SBT 树原理和实战
    AI杀疯！2023上半年至今有趣的AI算法（内附视频）
    Linux命令200例：cu是用于设置与终端设备通信的工具
  • 原文地址：https://blog.csdn.net/m0_59365887/article/details/139330255