本篇文章给大家带来了关于vuejs/" target="_blank">vue的相关知识，其中主要介绍了关于elementui组件库的相关问题，elementui组件库是一套基于vue2.0的桌面端组件库，提供了丰富的组件帮助开发人员快速构建页面，下面一起来看一下，希望对大家有帮助。

【相关推荐：javascript视频教程、vue.js教程】

ElementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网地址：http://element-cn.eleme.io/#/zh-CN

在页面上引入 js 和 css 文件即可开始使用，如下：

<!-- 引入ElementUI样式 --><link><ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><!-- 引入ElementUI组件库 --><ｓｃｒｉｐｔ></ｓｃｒｉｐｔ>

Container 布局容器

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

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列

：顶栏容器

：侧边栏容器

：主要区域容器

：底栏容器

  <p>    <el-container>      <el-header>Header</el-header>      <el-container>        <el-aside>Aside</el-aside>        <el-container>          <el-main>Main</el-main>          <el-footer>Footer</el-footer>        </el-container>      </el-container>    </el-container>  </p>  <style>    .el-header, .el-footer {      background-color: #B3C0D1;      color: #333;      text-align: left;      line-height: 60px;    }    .el-aside {      background-color: #D3DCE6;      color: #333;      text-align: center;      line-height: 200px;    }    .el-main {      background-color: #E9EEF3;      color: #333;      text-align: center;      line-height: 590px;    }  </style><ｓｃｒｉｐｔ>  new Vue({    el:&#39;#app&#39;  });</ｓｃｒｉｐｔ>

Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

<el-dropdown>  个人中心  <el-dropdown-menu>    <el-dropdown-item>退出系统</el-dropdown-item>    <el-dropdown-item>修改密码</el-dropdown-item>    <el-dropdown-item>联系管理员</el-dropdown-item>  </el-dropdown-menu></el-dropdown>

NavMenu 导航菜单

为网站提供导航功能的菜单。

<el-menu>  <el-submenu>    <template>      <i></i>      <span>导航一</span>    </template>    <el-menu-item>选项1</el-menu-item>    <el-menu-item>选项2</el-menu-item>    <el-menu-item>选项3</el-menu-item>  </el-submenu>  <el-submenu>    <template>      <i></i>      <span>导航二</span>    </template>    <el-menu-item>选项1</el-menu-item>    <el-menu-item>选项2</el-menu-item>    <el-menu-item>选项3</el-menu-item>  </el-submenu></el-menu>

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

<el-table>  <el-table-column></el-table-column>  <el-table-column></el-table-column>  <el-table-column></el-table-column>  <el-table-column>    <!--slot-scope：作用域插槽，可以获取表格数据    scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法    -->    <template>      <el-button>编辑</el-button>      <el-button>删除</el-button>    </template>  </el-table-column></el-table><ｓｃｒｉｐｔ>  new Vue({    el:&#39;#app&#39;,    data:{      tableData: [{        date: &#39;2016-05-02&#39;,        name: &#39;王小虎&#39;,        address: &#39;上海市普陀区金沙江路 1518 弄&#39;      }, {        date: &#39;2016-05-04&#39;,        name: &#39;王小虎&#39;,        address: &#39;上海市普陀区金沙江路 1517 弄&#39;      }, {        date: &#39;2016-05-01&#39;,        name: &#39;王小虎&#39;,        address: &#39;上海市普陀区金沙江路 1519 弄&#39;      }]    },    methods:{      handleUpdate(row){        alert(row.date);      },      handleDelete(row){        alert(row.date);      }    }  });</ｓｃｒｉｐｔ>

Pagination 分页

当数据量过多时，使用分页分解数据。

<!--current-change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码--><el-pagination></el-pagination><ｓｃｒｉｐｔ>  new Vue({    el:&#39;#app&#39;,    methods:{      handleCurrentChange(page){        alert(page);      }    }  });</ｓｃｒｉｐｔ>

Message 消息提示

常用于主动操作后的反馈提示。

<el-button>消息</el-button><el-button>成功</el-button><el-button>警告</el-button><el-button>错误</el-button><ｓｃｒｉｐｔ>  new Vue({    el: &#39;#app&#39;,    methods: {      open1() {        this.$message(&#39;这是一条消息提示&#39;);      },      open2() {        this.$message({          message: &#39;恭喜你，这是一条成功消息&#39;,          type: &#39;success&#39;        });      },      open3() {        this.$message({          message: &#39;警告哦，这是一条警告消息&#39;,          type: &#39;warning&#39;        });      },      open4() {        this.$message.error(&#39;错了哦，这是一条错误消息&#39;);      }    }  })</ｓｃｒｉｐｔ>

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

<h3>基础的、简洁的标签页</h3><!--通过value属性来指定当前选中的标签页--><el-tabs>  <el-tab-pane>用户管理</el-tab-pane>  <el-tab-pane>配置管理</el-tab-pane>  <el-tab-pane>角色管理</el-tab-pane>  <el-tab-pane>定时任务补偿</el-tab-pane></el-tabs><h3>选项卡样式的标签页</h3><el-tabs>  <el-tab-pane>用户管理</el-tab-pane>  <el-tab-pane>配置管理</el-tab-pane>  <el-tab-pane>角色管理</el-tab-pane>  <el-tab-pane>定时任务补偿</el-tab-pane></el-tabs><h3>卡片化的标签页</h3><el-tabs>  <el-tab-pane>用户管理</el-tab-pane>  <el-tab-pane>配置管理</el-tab-pane>  <el-tab-pane>角色管理</el-tab-pane>  <el-tab-pane>定时任务补偿</el-tab-pane></el-tabs><ｓｃｒｉｐｔ>  new Vue({    el: &#39;#app&#39;  })</ｓｃｒｉｐｔ>

Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、ｓｅｌｅｃｔ、Checkbox、Radio、Switch、DatePicker、TimePicker。

<!--rules：表单验证规则--><el-form>  <!--  prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的  -->  <el-form-item>    <el-input></el-input>  </el-form-item>  <el-form-item>    <el-ｓｅｌｅｃｔ>      <el-option></el-option>      <el-option></el-option>    </el-ｓｅｌｅｃｔ>  </el-form-item>  <el-form-item>    <el-col>      <el-date-picker></el-date-picker>    </el-col>    <el-col>-</el-col>    <el-col>      <el-time-picker></el-time-picker>    </el-col>  </el-form-item>  <el-form-item>    <el-switch></el-switch>  </el-form-item>  <el-form-item>    <el-checkbox-group>      <el-checkbox></el-checkbox>      <el-checkbox></el-checkbox>      <el-checkbox></el-checkbox>      <el-checkbox></el-checkbox>    </el-checkbox-group>  </el-form-item>  <el-form-item>    <el-radio-group>      <el-radio></el-radio>      <el-radio></el-radio>    </el-radio-group>  </el-form-item>  <el-form-item>    <el-input></el-input>  </el-form-item>  <el-form-item>    <el-button>立即创建</el-button>  </el-form-item></el-form><ｓｃｒｉｐｔ>  new Vue({    el: &#39;#app&#39;,    data:{      form: {        name: &#39;&#39;,        region: &#39;&#39;,        date1: &#39;&#39;,        date2: &#39;&#39;,        delivery: false,        type: [],        resource: &#39;&#39;,        desc: &#39;&#39;      },      //定义校验规则      rules: {        name: [          { required: true, message: &#39;请输入活动名称&#39;, trigger: &#39;blur&#39; },          { min: 3, max: 5, message: &#39;长度在 3 到 5 个字符&#39;, trigger: &#39;blur&#39; }        ],        region: [          { required: true, message: &#39;请选择活动区域&#39;, trigger: &#39;change&#39; }        ]      }    },    methods:{      onSubmit() {        console.log(this.form);        //validate：对整个表单进行校验的方法，参数为一个回调函数。        //该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。        this.$refs[&#39;form&#39;].validate((valid) => {          if (valid) {            alert(&#39;submit!&#39;);          } else {            console.log(&#39;error submit!!&#39;);            return false;          }        });      }    }  })</ｓｃｒｉｐｔ>

【相关推荐：javascript视频教程、vue.js教程】