• [学习记录]ElementUI初步与组件1


    ElementUI为饿了么团队开发的基于Vue2.0的桌面端组件库,组件丰富,看着美观。

    在vue项目中通过npm直接安装

    npm install element-ui -S

    然后再main.js中增加以下内容

     1 import Vue from 'vue';
     2 import ElementUI from 'element-ui';
     3 import 'element-ui/lib/theme-chalk/index.css';
     4 import App from './App.vue';
     5 
     6 Vue.use(ElementUI);
     7 
     8 new Vue({
     9   el: '#app',
    10   render: h => h(App)
    11 });

    对于main.js在哪,对vue目录结构不太了解的读者可以看一下我的另一篇介绍vue的博客

    本篇博客主要用来梳理elementUI框架,原文档传送门

    -----------------------------------------------------------------------------------------------------------------------------------------------------

    对于使用一个框架来说,我们最主要需要知道它有啥东西,能做啥。哪怕我们记不清怎么实现一个组件的功能,但是只要知道存在这个功能,就能去文档查找。因此这里列出组件的列表,做一个标记,方便查找。

    <el-row><el-col>网页布局,24等分

    <el-container><el-header><el-aside><el-main><el-footer>,界面容器与宏观布局,header和footer会强制container内元素纵向排列,否则横向排列

    element提供了特定的六种字体,边框可以调整圆角弧度以及投影,有大量图标,

    <el-button><el-button-group>按钮,有默认主题

    <el-link>超链接

    <el-radio-group><el-radio> <el-radio-button>单选组,可用v-model绑定数据

    <el-checkbox><el-checkbox-group><el-checkbox-button>多选组,具备不确定状态属性,

    <el-input>输入框,支持vue绑定值,不支持v-model的修饰符,可提示模板

    <el-input-number>计数器

    <el-select><el-option>选择器与选项,可多选,

    <el-cascader>无option,级联选择器

    <el-switch>二元开关,可以对两种状态分别进行不同的文字、颜色设置

    <el-slider>滑块(like音量条),可展示标记、调横纵、带输入框、可离散

    <el-time-picker>时间选择器

    <el-date-picker>日期选择器,可同时进行日期与时间设定

    <el-upload>文件上传

    <el-rate>评分

    <el-color-picker>选色

    <el-transfer>穿梭框

  • 相关阅读:
    PAT 1012 数字分类 (20)
    HDU 3903 Trigonometric Function(数学定理)
    HUST 1600 Lucky Numbers
    HUST 1599
    FZU 2092 收集水晶(记忆化搜索)
    Java实现 蓝桥杯 算法训练 字符串长度(IO无敌)
    Java实现 蓝桥杯 算法训练 字符串长度(IO无敌)
    Java实现 蓝桥杯 算法训练 Remember the A La Mode(暴力)
    Java实现 蓝桥杯 算法训练 Remember the A La Mode(暴力)
    Java实现 蓝桥杯 算法训练 Remember the A La Mode(暴力)
  • 原文地址:https://www.cnblogs.com/trickofjoker/p/11011877.html
Copyright © 2020-2023  润新知