Element-UI 要怎么学？官方文档，最新整理_elementui的官方文档

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



1
2
3
4
5
6
7

npm i element-ui -S

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



1
2
3
4
5
6
7

import ElementUI from ‘element-ui’;

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

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

[](

)Element UI 组件使用

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



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



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



* * *



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



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



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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

默认按钮

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



1
2
3
4
5
6
7

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

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



1
2
3
4
5
6
7

<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.组件别名.方法名()` 调用方法；



1
2
3
4
5
6
7
8
9
10
11

方法的使用

<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 是一个带 **输入建议** 的输入框组件，也可以自定义输入建议显示模板；

    

*   事件的使用：

    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

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

		@clear="clears" clearable @input="ccc">
1

*   方法的使用：



1
2
3
4
5
6
7

方法的使用

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

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