Vue-element-ui ------登录login -ref(案例与实践)

  <!-- 第一步给el-form添加：model属性绑定指向一个数据对象，
  第二步为每一个表单项通过v-model绑定数据对象上对应的属性中-->

  <!-- :model 绑定的是表单的数据对象 -->
  <!-- :rules 是表单的验证规则对象 -->
  <!-- ref 是当前 表单组件的引用对象 -->

  <!-- 1.：model 数据绑定到loginForm，这个数据对象还没有定义，要去行为区域定义 -->
  <!-- 指定一个属性绑定 ：rules =验证规则对象，loginFormRules，这个验证规则对象还没有定义，要去行为区域定义 -->
  <el-form
    ref="loginFormRef"
    :model="loginForm"
    :rules="loginFormRules"
    label-width="0px"
    class="login_form"
  >
    <!--2. 数据属性已经有了，让表单里的每个数据项，
    第一个用户名绑定到username，第二个文本输入框绑定到password
    为每一个输入框添加一个v-model双向绑定指令-->
    <!-- 用户名 -->
    <!-- el-form-item 的 prop 属性，专门用来指定校验规则； 所有的校验规则，都在 :rules 所绑定的对象中定义 -->
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" prefix-icon=&