基础组件总结（以Element UI组件库为例）
一般对一个组件的使用方式：
每一个组件都有被绑定的数据，
（1）首先会对组件的数据初始化（a.data中赋初值 b. 在生命周期函数created或mounted中为变量赋予初值）
（2）由于不同组件的操作方式，会改变组件绑定的数据值
（3）调用接口，将数据作为参数传递给后端，以完成前后端交互。
日期组件
v-model双向绑定日期字符串
value-format限定绑定的日期字符串的格式
picker-options绑定对象，对象中是一个方法，方法返回日期组件可选择范围不可以被选择的日期范围（此处由于需要引用data选项中的变量，采用计算属性）
computed: {
pickerOptions() {
const _this = this
return {
disabledDate(time) {
//读取到data中currentYear，并定义变量设置下一年
const NextYear = Number(_this.currentYear) + 1
// 当前日期组件只可以选择今年和明年的日期范围
return (time.getTime() > new Date(NextYear + '-12-31').getTime() ||
time.getTime() < new Date(_this.currentYear + '-01-01').getTime())
}
}
}
},value-format
由于日期由一个字符串表示，我们也可以对字符串进一步操作，筛选出年，月，日
涉及到日期的有Date对象和dayjs包
Date对象
Date对象可以用于获取当前日期
let date = new Date(); //获取当前日期
console.log(date.getFullYear()); //年
console.log(date.getMonth() + 1); //由于月份是0-11计算 所以需要 +1 （获取当前日期的月份）
console.log(date.getDate()); // 日
console.log(date.getDay()); // 星期几 注意：星期日返回的是0
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
还可以通过年月日+时分秒+毫秒构造一个date。注意月份的范围是0-11。
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
（参考：JavaScript Date（日期）对象 | 菜鸟教程）
var d = new Date(2023,1,31,23,59,59,999);//Tue Jan 31 2022 23:59:59 GMT+0800
var year = d.getFullYear();//2023
var month = d.getMonth();//0
var day = d.getDate();//31
var hours = d.getHours();//23
var minutes = d.getMinutes();//59
var seconds = d.getSeconds();//59
var mills = d.getMilliseconds();//999得到number类型，我们可以将它转化成字符串
let date = new Date(); //获取当前日期
console.log(date.getFullYear().toString()); //年
console.log((date.getMonth() + 1).toString()); //由于月份是0-11计算 所以需要 +1 （获取当前日期的月份）
console.log(date.getDate().toString()); // 日
console.log(date.getDay().toString()); // 星期几 注意：星期日返回的是0
console.log(date.getHours().toString()); // 时
console.log(date.getMinutes().toString()); // 分
console.log(date.getSeconds().toString()); // 秒
我们想要把日期字符串进一步规范格式化，用填充元素填充字符串
padStart从原字符串左侧开始填充padEnd从原字符串右侧开始填充
连接成字符串输出出来
console.log(date.getFullYear().toString()+'-'+(date.getMonth() + 1).toString().padStart(2,0)+'-'+date.getDate().toString().padStart(2,0))
通过上述方法，可以将日期Date对象转化为字符串。
下面讲述将字符串转化成Date对象
const str = '2022-06-15';
const date = new Date(str);
console.log(date.getFullYear()); // 2022
console.log(date.getMonth()); // 5,这里月份范围是0-11，因此需要减一
console.log(date.getDate()); // 15
console.log(date); // 2022-06-15T00:00:00.000Z
采用dayjs对象，
（参考：dayjs-入门及常用方法 - 掘金）
dayjs对象可以转化成日期Date对象
dayjs('2019-01-25').toDate()dayjs可以方便地获取某个周期的第一天，并进行字符串的format格式化
（参考：https://www.cnblogs.com/Airon-wei/p/14362160.html）
dayjs().startOf('month').format('YYYY-MM-DD')下拉菜单Select选择器
el-select中嵌套有el-option，以v-for的形式遍历出所有选项（每个选项主要分为label显示值和value值）
el-select中v-model双向绑定的值对应el-option的value绑定值
表格table组件
el-table中的data属性绑定对象数组
每一列el-table-column采用prop属性对应数组的字段名
表单组件el-form
(例1：此处采用小兔鲜vue3电商实战里面的例子)
我已同意隐私条款和服务条款
点击登录
规则对象rules
// 2.准备规则对象
const rules = {
account: [
{required: true, message: '用户名不能为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不能为空', trigger: 'blur'},
{min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur'}
],
agree: [
{
// 当默认的配置不足以支撑需求，采用自定义校验规则
validator: (rule, value, callback) => {
// callback不论成功还是失败，都需要执行
console.log(value)
// 自定义校验逻辑
// 勾选就通过 不勾选就不通过
if(value) {
callback()
}else{
callback(new Error('请勾选协议'))
}
}
}
]
}注意：el-form-item 的prop属性值和内置组件的v-model值相同，否则校验规则会不起效。（疑问？）
例2：element UI中的活动表单组件
-
立即创建
重置
el-input输入框
v-model双向绑定输入框的值
el-button按钮
主要按钮 Layout布局组件分栏el-row el-col
注意：Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。
col组件：通过基础的 24 分栏，迅速简便地创建布局。