使用VUE脚手架以及在项目里引入ElementUI，上一章节讲过了，本章节就不赘述了。
ElementUI官网
所有使用ElementUI的组件，在使用时，都是以el-组件名开头的
一 按钮组件
ElementUI里的组件都是类似的，这里以按钮组件来进行入门讲解
1.1 按钮基本使用
-
新建一个组件Button.vue
在自己的组件里直接使用ElementUI官网提供的按钮即可，其中<el-row>代表一行显示
-
把自己新建的组件注册到路由中
因为路由里path值是/button，所以以后访问/button时，就会找Button组件（第11行），Button组件就会找到Button.vue页面（第三行） -
在App.vue里新建一个按钮，点击这个按钮跳到Button.vue页面
注意：目前使用的vue版本为2，所以需要安装vue-reuter版本为3的，不能安装4的，不然报错
卸载vue-router命令
npm uninstall vue-router --legacy-peer-deps
安装vue-reuter版本为3的命令
npm install --save vue-router@3
查看vue-router版本
1.2 ElemrntUI按钮详解
按钮的不同样式，是通过type属性来控制的
ElemrntUI所有组件都有属性，那么按钮的属性除了type，还有下边这些
1.3 按钮组
使用<el-button-group>标签
二 Link文字链接组件
超链接下划线注意点
链接是否有下划线的属性underline前必须加冒号，因为值是boolean的，日过不加冒号，可能后边的true/false会被识别为字符串
加了冒号的话underline就相当于是变量了，可以设置值
三 Layout（栅格）布局组件
栅格：先分为多个行，每行又分为多列
在element ui中布局组件将页面划分为多个行row, 每行最多分为24栏(列)
<el-row>：一行
<el-col>：一列
span：这列占用多少格子，最大24，超出24的话，会自动换行显示
注意：span前需要加冒号，不然后边的值会被识别为字符串；
要注意哪些是行的属性，哪些是列的属性
列使用偏移offset属性：默认是靠左排列的，如果当前列想在任意位置，就需要使用偏移了，offset的值也是栅格的数量（最多24）
四 Container容器组件
以后会把Layout布局放在对应Container容器里，即先有Container容器，再在Container里写Layout布局
容器的几个子节点都有自己的属性
容器是可以嵌套使用的
五 Radio单选按钮组件
v-model和label属性必须存在
之前的组件没有事件，但是单选组件提供了事件
Radio事件
- 事件的使用也是和属性使用是一致，都是直接写在对应的组件标签上
- 事件在使用时必须使用Vue中绑定事件方式进行使用，如
@事件名=事件处理函数(绑在在vue组件中对应函数
六 Checkbox组件
默认选中
复选框组
七 input输入框组件
input事件
input失去焦点与获得焦点事件
input方法
方法：用来改变组件默认状态
ref='组件别名'：将当前组件绑定给vue实例。
- 在使用组件的方法时需要在对应的组件中加入 ref=
"组件别名 - 在调用方法时直接使用
this.srefs.组件别名.方法名()
属性、事件、方法总结
注意:在elementui中所有组件 都存在 属性 事件 和方法
- 属性:直接写在对应的组件标签上，使用方式
属性名=属性值 - 事件:直接使用vue绑定事件方式写在对应的组件标签上 使用方式:
@事件名=vue中事件处理函数 - 方法:1.在对应组件标签上使用
ref=组件别名2.通过使用thisSrefs.组件别名方法名进行调用
八 select组件
方法的使用
九 switch开关组件
方法的使用
十 DatePicker日期组件
对日期范围进行控制
事件
十一 upload文件上传组件
注意：actions属性不能省略
accept：能上传的文件类型，可以传多个值
注意:在使用upload组件时没有event事件,所有事件都是属性事件
方法
十二 Form表单组件
表单里的内容想要一行展示的话，使用inline属性（内联表单）
表单验证
需要有prop别名属性，对prop属性来进行校验；
