Vue整合ElementUI，组件使用教程，适合新手，知识点详解

最新推荐文章于 2024-10-06 20:22:50 发布

2401_84094029

最新推荐文章于 2024-10-06 20:22:50 发布

阅读量1.7k

点赞数 22

分类专栏：程序员文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/2401_84094029/article/details/137380042

版权

程序员专栏收录该内容

264 篇文章 0 订阅

订阅专栏

el-row代表一行，行里面放的自然就是列el-col，span代表栅格占据的列数，是el-col的一个属性由于它是我们elementui中的一个属性这个属性必须要求我们写数字所以赋值的时候需要带上：。如果span等于8表示一列占用8份如果超过8份则会换行显示。

占用8份

占用6份

在这里插入图片描述

注意：

在一个布局组件好是由row和col组合而成
在使用时要区分 row属性和col属性

行属性的使用

在这里插入图片描述

占用6份

:gutter=“10”:表示格栅间隔

在这里插入图片描述

:tag=“span”：表示当前行使用哪种标签去构建

在这里插入图片描述

列属性的使用

在这里插入图片描述

偏移属性offset

我是占用12份

在这里插入图片描述

向右移动push

我是占用12份

在这里插入图片描述

注意以上两者的区别

四. Container 布局容器

====================================================================================

用于布局的容器组件，方便快速搭建页面的基本结构。

创建一个布局容器

容器中包含的子元素

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

嵌套容器

我是标题

我是菜单

我是内容

我是底部

在这里插入图片描述

容器的属性

注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平

在这里插入图片描述

五. Radio 单选框

===============================================================================

在一组备选项中进行单选

创建一个单选按钮

男

女

在这里插入图片描述

此时虽然创建出来两个单选按钮但是不能进行选中和取消，这里必须配合我们的value / v-model和label属性进行使用。

radio组件的使用

男

女

在这里插入图片描述

Radio按钮属性的使用

在这里插入图片描述

男

女

总结：属性的使用还是直接写在对应的组件标签上以 属性名 = 属性值 的方式使用。

Radio事件的使用

在这里插入图片描述

事件的使用也和属性的使用是一致的都是写在对应的组件标签上
事件在使用时必须使用vue中绑定事件方式进行使用如@事件名=事件处理函数(绑定在vue组组件中对应函数)

<el-radio v-model=“label” @change=“aa” name=“sex” label=“男”>男

<el-radio v-model=“label” @change=“aa” name=“sex” label=“女”>女

在这里插入图片描述

Radio单选按钮组的使用

在这里插入图片描述

备选项3

备选项6

备选项9

在这里插入图片描述

六. Checkbox 多选框

==================================================================================

一组备选项中进行多选

创建Checkbox

北京

使用<el-checkbox>标签去构建我们的checkbox日后我们checkbox的值可以通过v-model进行绑定(true|false)。

属性和事件的使用

<el-checkbox v-model=“checked” @change=“aa” :true-label=1>北京

<el-checkbox v-model=“checked” @change=“aa” :true-label=2>洛阳

<el-checkbox v-model=“checked” @change=“aa” :true-label=3>上海

<el-checkbox v-model=“checked” @change=“aa” :true-label=4>曹县

在这里插入图片描述

复选框组的使用

适用于多个复选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

<el-checkbox-group v-model=“checkList” @change=“aa” :max=“2”>

北京

洛阳

上海

曹县

在这里插入图片描述

七. Input 输入框

===============================================================================

通过鼠标或键盘输入字符

创建

Input属性的使用

在这里插入图片描述

事件的使用

在这里插入图片描述

<el-input v-model=“userSex” @input=“ccc”>

在这里插入图片描述

方法的使用

在这里插入图片描述

<el-button @click=“focusInputs”>focus方法

在这里插入图片描述

总结：

在使用组件的方法时需要在对应的组件中加入 ref="组件别名"
在调用方法时直接使用 this.$refs.组件别名.方法名()

注意：在elementui中所有组件都存在属性和方法

属性：直接写在对应的组件标签上使用方式：属性名=属性值方式

事件：直接使用vue绑定事件方式写在对应的组件标签上使用方式：@事件名=vue中事件处理函数

方法：1.在对应组件标签上使用 ref=组件别名 2.通过使用this.$refs.组件别名.方法名() 进行调用。

八. Select选择器组件

=================================================================================

当选项过多时，使用下拉菜单展示并选择内容。

选择器组件的使用

数据写死在页面上

北京

上海

澳门

曹县

注意：要求下拉列表中必须存在option的value属性值，select中必须使用v-modek进行数据绑定

在这里插入图片描述

如何动态获取数据

在这里插入图片描述

事件与属性的使用

<el-select v-model=“cityId” @change=“aa” multiple clearable>
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

color_FFFFFF,t_70)

事件与属性的使用

[外链图片转存中…(img-kbkOHTUu-1712228142174)]

[外链图片转存中…(img-vhlNxem2-1712228142174)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-9aeW4GEx-1712228142175)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

[外链图片转存中…(img-QX2PxnB1-1712228142175)]

[外链图片转存中…(img-TfUDTTie-1712228142175)]