1.表单数据绑定的两个步骤

<el-form ref="form" :model="form" label-width="80px">

第一步：为el-form添加:model数据绑定
model="form" 代表数据绑定，也就是说在el-form表单上填写的所有数据都会同步到form数据对象上，定义在下方位置
图片说明
第二步：为每个表单项的文本输入框以v-model="form.name"的形式用v-model的方式绑定到数据对象上具体的属性中
图片说明

2.表单文本框的图标

<el-form-item prop="username">
    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>

prefix-icon代表在输入框的头部添加图标
图片说明

3.表单的验证规则

<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">

这个:rules绑定的就是一个表单的验证规则对象，也在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: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }

这些规则一般都是数组，数组中的每个对象都是一个验证规则，比如required: true代表了这个是一个必填项，message就代表了错误的消息，如果不符合这个规则就会显示这个消息。用trigger指定在何种情况下触发这个事件，trigger: 'blur'就代表了再鼠标失去焦点的时候触发这个规则的验证行为。
那么如何在表单的每一个el-form-item项做绑定呢，我们可以为el-form-item项指定一个prop属性等于一个具体的验证规则就行了

<el-form-item prop="username">
    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>

比如这里的prop="username"就代表了我们希望用username这个验证规则验证下面的el-input这个表单数据项目。

总的来说为表单绑定验证规则分为3步
第一步是在el-form中通过属性绑定指定一个rules校验对象
第二步是在data数据中定义这个校验对象，这个对象的每个属性都是一个验证规则
第三步就是为不同的表单el-form-item项通过prop指定不同的验证规则进行表单的验证

4.拿到表单的实例对象

<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">

要拿到某个ElementUI表单组件的实例对象，name只需要给这个组件增加一个ref的引用，比如ref="loginFormRef"
就可以在该表单实例上看到$refs对象,里面有该实例的引用
我们可以使用 this.&refs.loginFormRef这个表单引用对象来引用表单
图片说明
接着就可以对表单实例进行操作

  methods: {
    //   点击重置按钮，重置登录表单
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      // 对表单进行验证 
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return false
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功')
        // 1. 将登录成功之后的 token ，保存到客户端的sessionStorage中
        //  1.1 项目中除了登录之外的其他API接口，必须在登录只有才能访问
        //  1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    }
  }

5.Message组件的特殊

import { MenuItem } from 'element-ui'
// Message需要进行全局挂载，这样每个vue组件都可以通过this来访问到$message,进行弹框提示
Vue.prototype.$message = Message

接着就可以像下面这样使用Message组件了

this.$message.error('登录失败')