Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
-> Element UI是基于Vue 2.0的
-> Element UI 提供一组组件
-> Element UI 提供组件的参考实例, 直接复制
安装Element
开发时依赖 : 开发环境所需要的依赖 -> devDependencies
运行时依赖: 项目上线依然需要的依赖 -> dependencies
$ npm i element-ui
实现表单基本结构
在main.js中对ElementUI进行注册
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Element组件完成登录页面效果
<template>
<div id="app">
<!-- 卡片组件 -->
<el-card class='login-card'>
<!-- 登录表单 -->
<el-form style="margin-top: 50px">
<el-form-item>
<el-input placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%">登录</el-button>
</el-form-item></el-form>
</el-card>
</div>
</template>
表单校验的先决条件
-> el-from : 绑定model属性 / rules规则
-> el-from-item :设置prop属性
-> el-input :v-model绑定属性
model属性(表单数据对象)
data () {
// 定义表单数据对象
return {
loginForm: {
mobile: '',
password: ''
}
}
}
绑定model
<el-form style="margin-top:40px" :model="loginForm" >
rules规则 先定义空规则,后续再详解
loginRules: {}
<el-form style="margin-top: 50px" model="loginForm" :rules="loginRules">
设置prop属性 校验谁写谁的字段
<el-form-item prop="mobile">
...
<el-form-item prop="password">
...
给input绑定字段属性
<el-input v-model="loginForm.mobile"></el-input>
<el-input v-model="loginForm.password"></el-input>
表单校验规则
ElementUI的表单校验规则来自第三方校验规则参见 [async-validator]
规则 | 说明 |
---|---|
required | 如果为true,表示该字段为必填 |
message | 当不满足设置的规则时的提示信息 |
pattern | 正则表达式,通过正则验证值 |
min | 当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值 |
max | 当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值 |
trigger | 校验的触发方式,change(值改变) / blur (失去焦点)两种, |
validator | 如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验 |
校验规则的格式
***{ key(字段名): value(校验规则) => [{}] }***
根据以上的规则,针对当前表单完成如下要求
**手机号** 1.必填 2.手机号格式校验 3. 失去焦点校验
**密码** 1.必填 2.6-16位长度 3. 失去焦点校验
**规则如下**
loginRules: {
mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {
min: 6, max: 16, message: '密码应为6-16位的长度', trigger: 'blur'
}]
}
自定义校验规则
**`validator`**是一个函数, 其中有三个参数 (**`rule`**(当前规则),`value`(当前值),**`callback`**(回调函数))
var func = function (rule, value, callback) {
// 根据value进行进行校验
// 如果一切ok
// 直接执行callback
callback() // 一切ok 请继续
// 如果不ok
callback(new Error("错误信息"))
}
根据以上要求,增加手机号第三位必须是9的校验规则
// 自定义校验函数
const checkMobile = function (rule, value, callback) {
value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
}
mobile: [
{ required: true, message: '手机号不能为空', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
trigger: 'blur',
validator: checkMobile
}],
Async 和 Await
针对异步编程,我们学习过Ajax的回调形式,promise的链式调用形式
**ajax回调模式**回调地狱
// 回调形式调用
$.ajax({
url,
data,
success:function(result){
$.ajax({
data:result,
success: function(result1){
$.ajax({
url,
data: result1
})
}
})
}
})
**promise的链式回调函数**
// 链式调用 没有嵌套
axios({ url, data}).then(result => {
return axios({ data:result })
}).then(result1 => {
return axios({ data:result1 })
}).then(result2 => {
return axios({ data: result2 })
}).then(result3 => {
return axios({ data: result3 })
})
关于Promise必须知道的几件事
如何声明一个Promise
new Promise(function(resolve, reject){ })
如果想让Promise成功执行下去,需要执行resolve,如果让它失败执行下去,需要执行reject
new Promise(function(resolve, reject) {
resolve('success') // 成功执行
}).then(result => {
alert(result)
})
new Promise(function(resolve, reject) {
reject('fail') // 成功执行
}).then(result => {
alert(result)
}).catch(error => {
alert(error)
})
如果想终止在某个执行链的位置,可以用**Promise.reject(new Error())**
new Promise(function(resolve, reject) {
resolve(1)
}).then(result => {
return result + 1
}).then(result => {
return result + 1
}).then(result => {
return Promise.reject(new Error(result + '失败'))
// return result + 1
}).then(result => {
return result + 1
}).catch(error => {
alert(error)
})
异步编程的终极方案 **async /await**
async 和 await实际上就是让我们像写同步代码那样去完成异步操作
**await** 表示强制等待的意思,**await**关键字的后面要跟一个promise对象,它总是等到该promise对象resolve成功之后执行,并且会返回resolve的结果
async test () {
// await总是会等到 后面的promise执行完resolve
// async /await就是让我们 用同步的方法去写异步
const result = await new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(5)
}, 5000)
})
alert(result)
}
**async 和 await必须成对出现**
由于await的强制等待,所以必须要求使用**await**的函数必须使用**async**标记, async表示该函数就是一个异步函数,不会阻塞其他执行逻辑的执行
async test () {
const result = await new Promise(function(resolve){
setTimeout(function(){
resolve(5)
},5000)
})
alert(result)
},
test1(){
this.test()
alert(1)
}
promise可以通过catch捕获异常,async/ await捕获异常要通过 try/catch
async getCatch () {
try {
await new Promise(function (resolve, reject) {
reject(new Error('fail'))
})
alert(123)
} catch (error) {
alert(error)
}
}
async / await 用同步的方式 去写异步