安装

1.确保电脑上面安装有vue环境

npm i element-ui -S 

 

组件

图标

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>

换图标，换class里面的即可

 

按钮

 <el-button>默认按钮</el-button>
 <el-button type="primary">主要按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button round>圆角按钮</el-button>
 <el-button icon="el-icon-search" circle></el-button>

第一个，是最普通的按钮

第二个，type类型，是指颜色

第三个，plain，是减轻颜色

第四个，round，方变圆

第五个，circle，是圆形，icon，是可以在里面加图标样式

size属性，可以设置大小

 

超链接

略

 

Radio单选框

使用el-radio标签即可，通过v-model进行对象数据的绑定，label表示该单选框的值，文本直接写入到标签内部即可。

 <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>

单击选项，其实就是给label赋值

<el-radio-button label="上海"></el-radio-button>

将单选圆圈变成框

 

Input输入框

<el-input v-model="input" placeholder="请输入内容" show-password></el-input>
​
<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>
​

show-password 加上就是黑点，提高安全性。

 

select选择器（下拉框）

el-select/el-option标签进行操作，v-model进行数据的绑定

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
​
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

 

switch开关

switch组件表示两种相互对立状态之间的切换，开关，el-switch标签完成，v-model进行数据的绑定，boolean，表示开/关的状态，active-color属性与inactive-color属性来设置开关的背景色。

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
​
<script>
  export default {
    data() {
      return {
        value: true   //开，只认true
      }
    }
  };
</script>

 

upload上传文件

使用el-upload组件完成，action属性为后端请求的接口。

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

 

form表单

form组件，每一个表单域由一个form-item组件构成的，表单域中可以放置各种类型的表单控件，input、select、CheckBox、radio，Switch，表单域的值直接跟vue对象进行绑定。

 

 

<div style ="margin: 15px 0"></div>

margin:一般在几个输入框换行，上下间隔15像素，左右0像素

size属性这里可以修改输入框的尺寸，large/medium/small/mini

只有这几个大小可选，在其他里面也如此。这里不可以修改长度，只可以修改宽度。

修改宽度，可以在外层嵌套一个div，通过修改div的宽度来实现输入框宽度的修改，如

<div style="width:300px">
    .......
</div>

style="padding:30px" //间距，内边距

 

v-model和:model的区别？

:是v-bind的缩写

 

前后端数据交互：安装axios插件

 

vscode 运行 在终端写:npm run dev

或者 npm run serve

看你的运行在哪里，package.json 里面

 

并排布局

在外层加一个div，flex布局

<div style="display: flex">
    ...
    ...
</div>

 

标签：选项,知识点,elementui,value,label,item,el,相关,model
来源： https://www.cnblogs.com/shiyi1/p/16538888.html