Element UI组件介绍

简介

element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。

1、安装Element UI，通过vue脚手架创建项

vue init webpack element(项目名)

2、在vue脚手架项目中安装elementui

# 1.下载elementui的依赖
    npm i element-ui -S
# 2.指定当前项目中使用elementui
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
  //在vue脚手架中使用elementui
    Vue.use(ElementUI);

3.按钮组件(示例)

3.1 默认样式按钮

  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

3.2 简洁按钮

  朴素按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

3.3 圆角按钮

  圆角按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

3.4 图标按钮

4.按钮组件的详细使用

总结:日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头

4.1创建按钮

默认按钮

4.2 按钮属性使用

默认按钮

4.3 按钮组使用

  上一页
  下一页

• 在element ui中所有组件都是 el-组件名称 方式进行命名
• 在element ui中组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上

5.Link 文字链接组件

5.1 文字链接组件的创建

默认链接

5.2 文字链接组件的属性的使用

默认链接
默认链接
默认链接
默认链接
默认链接
默认链接 

6.Layout (栅格)布局组件的使用

通过基础的 24 分栏，迅速简便地创建布局
在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)

6.1 使用Layout组件

    占用8份
  占用8份
  占用8份

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

6.2 属性的使用

• 行属性使用

  
占用4份
  
占用8份
  
占用3份
  
占用9份

列属性的使用

  
我是占用12分
  
我是占用6分

7.Container 布局容器组件

7.1 创建布局容器

7.2 容器中包含的子元素

：顶栏容器。
：侧边栏容器。
：主要区域容器。
：底栏容器。

7.3 容器的嵌套使用

  
  
我是标题
  
  
    
    
我是菜单
    
    
我是中心内容
  
  
我是页脚

7.4 水平容器

  
  
我是标题
  
    
    
我是菜单
    
    
我是中心内容
  
  
我是页脚

7.5 垂直容器

  
  
我是标题
  
    
    
我是菜单
    
    
我是中心内容
  
  
  
我是页脚

8.Form相关组件

8.1 Radio单选按钮

创建Radio按钮

男
女

Radio按钮属性的使用

男
女
女
女

Radio事件的使用

男
女

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

9、radio按钮组

  备选项3
  备选项6
  备选项9

10、checkbox组件

10.1、创建checkbox组件

北京
上海
天津

10.2、属性使用

北京
上海
天津

10.3、事件使用

上海
天津

10.4、复选框组的使用

11、Input 输入框组件

1.创建Input组件

2.常用属性

3.事件使用

4.方法的使用

方法的使用

focus方法
blur方法

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

注意:在elementui中所有组件 都存在 属性 事件 和方法
属性: 直接写在对应的组件标签上 使用方式:属性名=属性值`方式
事件`: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:`@事件名=vue中事件处理函数
方法: 1.在对应组件标签上使用 ref=组件别名 2. 通过使用this.$refs.组件别名.方法名()进行调用