大学学习课程后的第一个综合项目

大学学习课程后的第一个综合项目

（个人学习记录使用）

第一步、基础表单页面的制作
采用element制作样式，具体代码流程：

1. 输入值
   :model=“loginForm”
   v-model=“loginForm.username”
   //v-model双向绑定数据，
   //:model相当于v-bind:model的缩写， v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，
   loginForm:{
   username:’’,
   password:’’
   },在script中定义初始值

2. 限制输入，表单数据验证
   :rules=“loginFormrules”//指定限制规则
   prop=“username” 传递值
   prop="password"
   loginFormrules:{
   username:[
   { required: true, message: ‘请输入登录名称’, trigger: ‘blur’ },
   { min: 3, max: 5, message: ‘长度在 3 到 5 个字符’, trigger: ‘blur’ }
   ],
   password:[
   { required: true, message: ‘请输入登录密码’, trigger: ‘blur’ },
   { min: 6, max: 15, message: ‘长度在 3 到 5 个字符’, trigger: ‘blur’ }
   ]
   }

3. 重置按钮
   ref=“loginFormRef”//重置规则
   methods:{
   resetLoginForm(){
   //console.log(this)
   this.$refs.loginFormRef.resetFields()
   }
   }
   成果图