zoukankan      html  css  js  c++  java
  • VUE学习笔记--了解element-ui组件库

       饿了么推出了基于 Vue2.0 的组件库,它的名称叫做 element-ui,提供了丰富的 PC 端组件。 
          ElementUI 官网:http://element-cn.eleme.io/#/zh-CN。
           element-ui 组件库有以下四大优势:
    丰富的 feature:丰富的组件,自定义主题,国际化。  
    文档 & demo:提供友好的文档和 demo,维护成本小,支持多语言 
    安装 & 引入:支持 npm 方式和 cdn 方式,并支持按需引入。 
    工程化:开发,测试,构建,部署,持续集成。
    Vue 项目中引入 Element-ui 组件库有两种方式:
    
    1. CDN:在线方式直接在页面上引入 Element-ui 的 JS 和 CSS 文件,代码如下:
    
    <!-- 引入样式 --> 
    <link rel="stylesheet" 
    href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
    <!-- 引入组件库 --> 
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    2. npm 安element-ui
    
    npm install element-ui -S
    Vue 项目中集成 Element-ui 的步骤:
    
    (1) 在控制台输入命令进行安装

    (2) 查看配置文件 package.json,是否有 element-ui 组件的版本号

    (3) 在 main.js 文件中完整引入 Element-ui 组件库

    <template>
      <div id="app">
        <h1>{{msg}}</h1>
        <!--1.常用按钮-->
        <el-button type="primary">主要按钮</el-button>
        <el-button plain type="warning">警告按钮</el-button>
        <!--2.下拉列表-->
        <el-dropdown split-button size="small" trigger="click">
          个人中心
          <el-dropdown-menu>
            <el-dropdown-item >退出系统</el-dropdown-item>
            <el-dropdown-item divided>修改密码</el-dropdown-item>
            <el-dropdown-item divided>联系管理员</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <br>
        <!--3.Table 表格-->
        <el-table :data="tableData" stripe>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column label="操作" align="center">
            <!--
                slot-scope:作用域插槽,可以获取表格数据
                scope:代表表格数据,可以通过scope.row来获取表格当前行数据,scope不是固定写法
            -->
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <script>
    export default {
      name: 'HelloWorld',
      //在Vue组件中data只能为函数,这是Vue的特性。必须有return返回数据,否则页面模板接收不到值。
      data () {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }
      },
      methods:{
        handleUpdate(row){
          alert(row.date);
        },
        handleDelete(row){
          alert(row.date);
        }
      }
    }
    </script>
    <style scoped>
    </style>
    import Vue from 'vue'
    import App from './App.vue'
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

  • 相关阅读:
    阅读代码
    openSips
    rc.local 问题
    MyBatis框架使用(一)
    【数据结构杂谈】
    【AGC052A】
    【杜教筛学习笔记】
    CF618F Double Knapsack
    [NOI2016] 循环之美
    【BZOJ 4668 冷战】
  • 原文地址:https://www.cnblogs.com/tszr/p/15417467.html
Copyright © 2011-2022 走看看