前端基础
开源Ruoyi：https://gitee.com/y_project/RuoYi-Vue
1. 基础用法
1.1 变量
data 中定义 data(){}
//sessionStorage 用法
//赋值(保存的是字符串)
sessionStorage.shiftOptios = JSON.stringify(this.shiftOptios);
//如果只是单页面使用，离开时需要销毁
//同methods同级别
beforeDestroy() {
sessionStorage.shiftHourOptios = null;
sessionStorage.shiftOptios = null;
},
//跨页面使用sessionStorage对象时（初始化时执行，类似data）
computed: {
shiftHourOptios() {
return JSON.parse(sessionStorage.shiftHourOptios);
},
shiftOptios() {
return JSON.parse(sessionStorage.shiftOptios);
},
},
1.2 方法
methods 中定义 test(){}
方法间相互调用 test1(){this.test()}
//自定义组件方法，为组件赋值，
//直接使用 this.items = response.data.detailList; 不能成功，需要点击两次，才能赋值成功
//先需要初始化
this.items = new Array(response.data.detailList.length);
//表示强制执行该方法绑定数据
this.$nextTick(() => {
this.items = response.data.detailList;
});
1.3 基础判断
if(…?)
var checkDetail = true;
//校验排班明细列表不为空
if (this.items?.length) {
//遍历
this.items.find((val) => {
if (val.sequence === null) {
checkDetail = false;
}
....
});
}
if (!checkDetail) {
this.$refs.tip.textContent = '顺序号/班次/班时不能为空';
} else {
...
}
1.4 赋值
// 浅复制（指向原来对象） params.isOpen =1 , 那么 this.form.isOpen 也是为1；
const params = this.form;
//表单相关数据，全部赋值给params（深复制）
const params = {
...this.form,
};
//处理明细
Object.assign(params, {
detailList: this.items,
});
1.5 循环
this.items.find((val) => {
console.log(val);
if (val.sequence === null) {
checkDetail = false;
}
....
});
// 用七种方式遍历下列数组
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
//1、for循环
console.log("for循环")
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log("----------------")
// 2、for in 和for of
// for in 只能打印index
console.log("for in")
for (const key in arr) {
console.log(arr[key]);
}
console.log("----------------")
// for of 打印值
console.log("for of")
for (const key of arr) {
console.log(key);
}
console.log("----------------")
//3、foreach
console.log("foreach");
arr.forEach((item, index) => {
console.log(index + "=>" + item);
})
console.log("----------------")
// 4、Symbol
console.log("Symbol")
let item = arr[Symbol.iterator]();
for (const key in arr) {
console.log(item.next().value)
}
console.log("----------------")
//5、map
// 数组.map()会返回一个新数组，数组的大小跟原始数组一样
// 数组元素是函数返回的结果
console.log("map")
let newArr_map = arr.map((item, key) =>{
console.log(item)
return item*2;
})
console.log("----------------")
// 6、filter
// filtet是一个过滤器，也是返回一个新数组，原数组中满足返回要求的元素就复制到新数组中，不满足就不复制
// 不会改变原数组的内容
console.log("filter")
let newArr_filter = arr.filter((item, key) =>{
console.log(item);
return item == 'a';
})
console.log("----------------")
//7、Object.entries()
// 简单说就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来
console.log("Object.entries() ")
let newArr_entries = Object.entries(arr);
newArr_entries.forEach((item, index)=>{
// item是个数组：['0','a']
console.log( item[1]);
})
版权声明：本文为CSDN博主「瓜月二十三」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_43378689/article/details/126037053
1.6 校验
<a-input placeholder="标题" maxLength="100" v-decorator="['title', {rules: [
{required: true, message: '请输入标题'},
{validator: this.titleTest}
]}]"/>
methods: {
titleTest (rule, value, callback) {
// const title= /^[\u0391-\uFFE5A-Za-z]+$/
const title= /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]\_+$/
if (!title.test(value)) {
callback(new Error('标题只能输入中文、下划线、数字和英文'))
}else{
callback()
}
},
}
1.9 事件与回调区分
<!--事件、回调区分 -->
<el-button type="button" onSave="click" onConfirm="confirm"></el-button>
// 弹框保存事件之后，关闭弹框后，触发的事件。
this.$emit('confirm');
//生命周期事件：
destroyed() {},// 销毁时操作可编辑在此处,例如：A组件跳转B组件，此时A组件会被销毁，则会调用
activated() {
//每次进入页面时执行
},