Element-UI 要怎么学？官方文档！

• Link 文字链接

• Layout 布局

• Container 布局容器

• Form 组件

• • Radio 单选框

• Checkbox 多选框

• Input 输入框

• Select 选择器

• Switch 开关

• DatePicker 日期选择器

• Upload 上传

• Form 表单

• Notice 组件

• • Alert 警告

• Message 消息提示

• Data 组件

• • Table 表格

Element UI 介绍

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

官网：https://element.eleme.io/#/zh-CN

官方定义：网站快速成型工具 和 桌面端组件库；

简介：Element UI 是 基于 Vue 的一个 UI框架，该框架基于 Vue 开发了很多相关组件，方便我们快速开发页面。（也就是说你必须先学习 Vue）

由 饿了么前端团队 基于 Vue 进行开发并且进行了开源；Element UI 中提供的全部都是封装好组件。

安装 Element UI

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

Element UI 的使用一切以官方文档为准，这里简单记录个人笔记。

• 首先通过 Vue脚手架 创建项目：

vue create hello-element

• 在 Vue 脚手架项目中安装 Element UI：

npm i element-ui -S

• 指定项目中使用 Element UI，在 index.js 中添加以下代码：`

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI); // 在vue脚手架中使用elementui

Element UI 组件使用

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

官方文档 是最好的参考教程！

难得有官方中文的参考文档，上面写的已经很详细了，例子也很多，基本的开发完全没有问题！

---

每个组件都有 属性、事件、方法。事件和方法的区别在于：事件是去调用自己写的函数，方法相当于它给你写好的函数，你去调用；

掌握 属性、事件、方法 的用法后，所有组件的使用基本都一样。

• 大部分组件都是以 el-组件名 开头，比如 el-button 是按钮；

默认按钮

• Element UI 中所有组件的 属性(Attributes) 全部写在组件标签上；

<el-button type=“primary” 属性名=属性值>默认按钮

• 事件(Events) 也是直接写在对应的组件标签上，使用 Vue 中绑定事件方式 @change="aa"；

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

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

• 组件的 方法(Methods)：

在对应的组件中加入 ref="组件别名"；

通过 this.$refs.组件别名.方法名() 调用方法；

方法的使用

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

<el-button @click=“blurInputs”>blur方法

Basic 组件

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

Button 按钮

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/button

• 大部分用法是设置 button 的样式，注意 按钮组 的用法；

Link 文字链接

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/link

Layout 布局

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/layout

• Element UI 中是 24 分栏，迅速简便地创建布局。

• 一个布局组件由 el-row 和 el-col 组合构成，使用属性时要区分 行属性 与 列属性；

• <el-row :gutter="20"> 指定每一栏之间的间隔，默认间隔为 0；

• <el-col :span="24"> 用来组合一栏的布局，一栏是分为 24 部分；

• <el-col :span="6" :offset="6"> 中利用 offset 指定分栏偏移的栏数；

Container 布局容器

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi

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

• 容器包含 <el-container>、<el-header>、<el-aside>、<el-main>、<el-footer>；

Form 组件

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

Radio 单选框

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/radio

• 在使用 Radio 时至少加入 v-model 和 label 两个属性；

• 注意 Radio 按钮组；

Checkbox 多选框

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/checkbox

Input 输入框

---

官方文档索引：https://element.eleme.cn/#/zh-CN/component/input

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

• autocomplete 是一个带 输入建议 的输入框组件，也可以自定义输入建议显示模板；

• 事件的使用：

<el-input v-model=“username” @blur=“aaa” @focus=“bbb”

@clear=“clears” clearable @input=“ccc”>