今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的）
收获：
学习Vue：
1、使用ElementUI组件库
首先安装插件，配置插件，导入方法有默认导入和按需导入
使用按需导入
生产了一个element文件
现在需要使用按钮和表单在element文件中单独引入的方式
import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'
Vue.use(Button)
Vue.use(FormItem)
Vue.use(Form)
Vue.use(Input)
2、创建一个登陆表单组件并实现表单数据绑定
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt="登录头像">
</div>
<el-form ref="loginFormRef" :rules="loginFormRules" :model='loginForm' label-width="0px" class="login_form">
<!-- 登录名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type='password'></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
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: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
}
};
},
methods: {
resetLoginForm() {
console.log(this);
this.$refs.loginFormRef.resetFields()
}
},
}
</script>
首先给el-form添加：model=“”通过属性绑定一个数据对象并在data中定义
然后为每一个表单中的项目通过v-model双向绑定到数据对象中的某个属性中
3、表单数据验证
首先通过属性绑定绑定一个校验规则：rules=""
在校验规则中定义校验规则的属性
在表单的item中添加prop=“”指定不同的校验规则
4、表单重置
element提供了一个重置方法
为表单添加一个ref引用 ref="loginFormRef" 值就是组件的实例对象
通过this.$refs.loginFormRef.resetFields()方法进行重置
返回列表
评论