element-ul 的列子使用说明

参考文档

https://element.eleme.cn/#/zh-CN/component/installation

Src目录下的login文件

form表单 el-form

整体是一个form表单，里面是每一个el-form-item

再里面的表单元素 如el-input，下面会讲到

对应的里面的属性后续会讲，先一个一个看form上面的属性

对应文档参照

https://element.eleme.cn/#/zh-CN/component/form#form-item-methods

 

先看 属性上的 ref=”loginForm”

这个不是ui框架的，是vue的绑定这个组件或者这个元素的，

通过这个可以获取到元素，可以进行 dom操作，这里用是为了后面的校对

           

this.$refs.loginForm 这个就是vue获取元素或组件的方法

再看第二个属性 :model

:model="loginForm" 

这里的是vue动态绑定 :  这个ui的属性model，这个loginForm就是值（对象），这里就是动态绑定表达数据，对应data里面的return

第三个属性 rules

:rules="loginRules"

也是动态绑定了 这个ui的属性 rules, 这里的在ui框架是定义规则

这里的属性username和 username绑定的，下面验证时候会校对

看看里面的校对规则

常用的校对属性

required是不是必要的

message提示消息

trigger失去焦点触发，这里有blur，change（每输入一个就校对）

type类型 有 date和email 和number和array等等，选填

项目中的 validator就是可以写自定义的校对规则，函数function

第四个属性 autocomplete， 提示的

auto-complete="on"

文档里面，改成文档的写法

属性 label-position

label-position="left"

文档有参考案例

Form上面的属性看完了，看看下面的每一个 el-form-item上面的

说明，每个form表单下面都是一个一个的el-form-item组成的

里面再放其他的表达元素

form下面的el-form-item

prop属性，校对是和这个值对应上的

 

下面的就是 字体图标的样式 svg-icon，这个class对应下面的文件

src目录下的 icons下面的svg文件

下面看看el-input框

要注意的就是 v-model用双向数据绑定写好就可以，其他的都可以不写

其他属性作用就和文字说明原因

https://element.eleme.cn/#/zh-CN/component/input

看下密码框的，这样用了动态绑定 显示的是密码还是不显示，通过下面的svg-icon图标的class显示

再看一个

键盘按下的事件，@keyup.enter=”事件名称”

加上 native是因为 外面是组件（el-input）

如果是 div或span这标签元素就不用加

这里的prevent是阻止冒泡

具体的都写了

点击登陆后的校对