如何使用elementui

elementui地址：https://element.eleme.cn/#/zh-CN/component/form
需要使用的时候，

• 在main.js中引入
• 在element.js中引入
• 复制需要的代码
• 在data中定义

在这里我们演示一下input/button的用法

• 在main.js中引入

  // 引入elementui的js
  import './plugins/element.js'
  

• 在element.js中引入

  import Vue from 'vue'
  // 引入elementui的组件
  import { Button, Form, FormItem, Input } from 'element-ui'
  // 注入全局
  Vue.use(Button)
  Vue.use(Form)
  Vue.use(FormItem)
  Vue.use(Input)
  

• 复制需要的代码

  <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
    <!--验证用户名-->
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon="iconfont icon-users"></el-input>
    </el-form-item>
    <!--验证密码-->
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
    </el-form-item>
    <!--提交-->
    <el-form-item class="btns">
      <el-button type="primary">登录</el-button>
      <el-button type="info">重置</el-button>
    </el-form-item>
  </el-form>
  

• 在data中定义

    data () {
      return {
        // 登录表单的数据绑定对象
        loginForm: {
          username: '',
          password: ''
        },
        // 表单验证的规则
        loginFormRules: {
          // 验证用户名
          username: [
            { required: true, message: '请输入您的用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
          ],
          // 验证密码
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度需大于6个字符', trigger: 'blur' }
          ]
        }
      }
    }
  

如何定义规则
在form上定义:rules="loginFormRules"，在data中定义规则

 loginFormRules: {
	        // 验证用户名
	        username: [
	          { required: true, message: '请输入您的用户名', trigger: 'blur' },
	          { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
	        ],
	        // 验证密码
	        password: [
	          { required: true, message: '请输入登录密码', trigger: 'blur' },
	          { min: 6, max: 20, message: '长度需大于6个字符', trigger: 'blur' }
	        ]
	      }
	    }

然后在每一个需要规定的地方使用prop="password"

如何双向绑定用户名，密码
在form上绑定:model="loginForm"，在data中定义

// 登录表单的数据绑定对象
    loginForm: {
       username: '',
       password: ''
     },

最后在每一个input上绑定v-model="loginForm.username"