ElementUI中＜el-form＞标签中 ref、:model、:rules 的作用

首先看一下代码

<el-form
      ref="loginForm":model="loginInfo":rules="loginRules"class="login-form"
      auto-complete="on"
      label-position="left">

**

ref

属性涉及Dom 元素的获取(el-form表单对象)。**
javaSrcipt 获取Dom 元素是通过：

document.querySelector（".input"）

获取dom元素节点 。
Vue 为简化DOM获取方法提出了

ref

属性和

$refs

对象。一般的操作流程是:

ref 

绑定控件，

$refs

获取控件。

Element官方文档中写到：

model

是表单数据对象，

rules

是表单验证规则。

Form 组件提供了表单验证的功能，只需要通过

rules

属性传入约定的验证规则，并将 Form-Item 的

prop

属性设置为需校验的字段名即可。

里面的逻辑大概是，在el-form-item上写一个

prop

，这个

prop

左手对应着数据源（即用

model.prop

找到对应的数据源），右手对应着验证规则（即用

rules.prop

找到对应的规则），然后进行验证。