菜鸡日记
子路由显示在父路由中，父路由 使用 router-view 加载子路由， router-view 位置可以调整
path 加斜杠，自成一派，可以 直接 /route 访问， 不加斜杠，跟随父路由，通过 /parent/route 访问
addRoute 添加路由，一个参数的时候正常添加路由，两个参数的时候，第一个参数是父路由，第二个参数是父路由下的子路由
Router.getRoutes() 获取所有路由
git log // 查询要回滚的 commit_id
// 这里的commit_id是当前提交错误的想要撤回的commit之前的那个正确的commit
// 执行前，先将本地代码切换到对应分支
git reset --hard commit_id // HEAD 就会指向这个commit_id的提交记录
git push origin HEAD --force // 强制推送到远端
使用file-saver插件下载接口返回的文件流
class(类)中被static修饰的属性和方法，只能被类名调用,不能被实例化对象调用. 同时也不能被子类继承,
class A {
// 静态属性
static info = '见过你的美,还能爱上谁?';
// 静态方法
static love() {
console.log('小姐姐,看见你就犯困,为情所困,为你所困!');
}
}
// 直接使用类名调用
console.log(A.info);
A.love();
screenfull 全屏插件
display: flex 子元素撑开父元素高度，（加上 align-items 属性后，无法撑开）
可用于处理flex布局分布子元素时，最后一行两个元素靠两端分布的问题
在子元素最后一个宽度30%，不设高度的元素
<body>
<div class="box">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
<style>
.box{
display: flex;
justify-content: space-between;
/* align-items: center; */
}
.son1{
width: 30%;
height: 200px;
background-color: aquamarine;
}
.son2{
width: 30%;
}
代码标签格式
<p>时间：<span>{{ meetingInfo.startTime }}</span></p>
<p>地点：<span>{{ meetingInfo.roomName }}</span></p>
<a v-for="file in item.materials" :key="file.id" class="active">
<img src="https://xxx.com/Meeting/api/img/PDF.png" />
<h6>
{{ file.fileName }}
<small> 总共{{file.pageCount}}页 </small>
</h6>
</a>
变量定义在获取数据的方法上面
/**
- 获取会议详情
*/
const meetingInfo = ref(null);
const getDetail = () => {
let { id } = query;
request({
method: "get",
url: `/meetings/${id}`,
base: "/api"
})
.then(({ body }) => {
meetingInfo.value = body;
})
.catch(() => {})
.finally(() => {});
};
Img srcset
img 标签的 srcset 属性是一种用于响应式网页设计的属性，它允许开发者为图像提供不同大小和分辨率的版本，以便根据设备的屏幕大小和像素密度自动选择最合适的图像进行显示。
函数传参
对象参数中结构赋值 id: userId
设置默认值 isClick = false
const setSpeaker = ({ username, id: userId, isClick = false }) => {
};
防止重复赋值
if (auth.length && !item.meta[field]) {
item.meta[field] = auth.includes(item.name);
}
v-bind

cursor 改变鼠标指针样式
cursor: url("@/assets/ico/left.ico"), nw-resize;
true/false 改为 1/0
var boolValue = true;
var numValue = +boolValue;
console.log(numValue);
是否xx ——> xx状态
mobile-detect 查询移动设备信息插件
if(os == "iOS"){
osSYSTEM = md.os() + md.version("iPhone");
}else if(os == "AndroidOS"){
osSYSTEM = md.os() + md.version("Android");
}
terminalType":osSYSTEM,"
terminalNo":md.versionStr('Build')
DOMPurify
/**
- 过滤关键词变色
*/
const filterAndColor = (text, keyWord) => {
if (!keyWord) {
return text;
}
let reg = new RegExp(keyWord, "gi");
return DOMPurify.sanitize(text.replace(reg, "<b style='color: #474AA0;'>$&</b>"));
};
Git 回滚
git reset --hard 7d3734ad377dff5d6d079beb09980f1ef8c
git push origin develop --force
路由切换动画
<router-view v-slot="{ Component }">
<transition name="slide-right">
<component :is="Component" />
</transition>
</router-view>
/**
路由切换动画
*/
.slide-right-enter-active,
.slide-right-leave-active {
transition: transform 0.3s;
}
.slide-right-enter-from {
transform: translateX(0);
}
.slide-right-enter-to {
transform: translateX(-100%);
}
.slide-right-leave-from {
transform: translateX(0);
}
.slide-right-leave-to {
transform: translateX(-100%);
}
压缩tgz文件
tar zcvf FileName.tgz DirName
如何用 scp 上传文件到服务器
scp <本地文件路径> <用户名>@<服务器IP地址或主机名>:<远程文件路径>
ssh 连上去做文件解压
ssh 用户名@服务器地址，例如ssh username@example.com。
cd 到指定目录下
解压
tar -zxvf xxx.tgz
移动某一个文件夹里的内容到当前文件夹下
mv folder_name/* .
前端监听网络状态
// 网络由异常到正常时触发
window.addEventListener('online', this.updateOnlineStatus)
// 网络由正常到异常触发
window.addEventListener('offline', this.updateOfflineStatus)
dll 文件为动态链接库文件
封装a-input ，父组件直接使用 v-model:value 即可实现双向绑定，子组件不用做任何手动双向绑定逻辑

slot插槽
2.6以前
父组件
<div slot="edit" slot-scope="{ data }">
<el-button
type="text"
@click="onInspectRecord(data)"
>
检查记录
</el-button>
</div>
子组件
<slot
:data="scope.row"
:index="scope.$index"
:scope="scope"
name="edit"
/>
slot插槽 ，父组件传组件给子组件(2.6以后)
父组件定义插槽内容
<template v-slot:one>
<p>one插槽</p>
</template>
v-slot: 缩写 #
<template #one>
<p>one插槽</p>
</template>
子组件使用插槽
<slot name=‘one’></slot> 子组件使用插槽
子组件使用插槽的时候，给父组件传参
父组件
<template #one=’scoped’>
<p>{{ scoped.a }}</p>
</template>
子组件
<slot :obj="obj" name="one"></slot>


tabs 实现原理
header 高度固定 比如60px
content height: calc(-163px + 100vh); overflow-y: auto
let a = ’123’
let b = +a
b是数字类型的123
将一个数字的字符串转化为数字很简单的一种做法就是在前面加+号。
用??代替||，用于判断运算符左侧的值为null或undefined时，才返回右侧的值。
??运算符是 ES2020 引入，也被称为null判断运算符( Nullish coalescing operator)，
它的行为类似||但是更严,||运算符是左边是空字符串或false或0等false值，都会返回后侧的值。
而??必须运算符左侧的值为null或undefined时，才会返回右侧的值。因此0||1的结果为1，0??1的结果为0
Vue2 当你需要为data里的某一个对象添加一个新属性时
this.$set(obj, key, value)- Object.assign(target, sources)
eg:
this.student.age = 15
this.student = Object.assign({}, this.student)
Promise.all 多个接口请求结束后再进行后面的操作
async getTypes() {
try {
const rets = await Promise.all([
getSelectTroubleClasses(),
getSelectTroubleLevel(),
getSelectPlans(),
getSelectFindMode(),
getSelectContractorsNames()
]);
console.log("rets", rets);
this.levelTypes = rets[1];
this.classesTypes = rets[0];
this.inspectPlanTypes = rets[2];
this.findMode = rets[3];
this.contractorsTypes = rets[4];
} catch (e) {
console.log("getTypes -> e", e);
}
},
Promise.race 赛跑
Promise.race([p1, p2, p3])里面的结果哪个获取的快，就返回哪个结果，
不管结果本身是成功还是失败
Vue 父子组件传参
众所周知，vue中是单向数据流，
我们想要修改父组件传递过来的数据也只能是调用父组件中的方法进行修改，或者在父组件中进行修改
在子组件中直接修改父组件传递的数据呢？此时我们就需要用到修饰符.sync
父组件：
<template>
<div>
// 子组件中需要传递的数据添加.sync修饰符
<siteDetail
:dialogVisible.sync="dialogVisible"
></siteDetail>
</div>
</template>
子组件：
export default {
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
methods(){
changeState(){
// 此时会直接改变父组件中dialogVisible的value
this.$emit('update:dialogVisible', false)
}
}
}

Vue 子组件可以直接修改父组件通过props传过来的参数，但不建议这么做
vue-router 同一个页面地址栏参数改变，不会触发vue的created或者mounted钩子，所以数据不会重新渲染。
Vue 路由传参 , 通过 name params传参，params里的参数可以传到 :id(\d+) 里
{
path: "/work-problems/:id(\\d+)/question",
name: "QuestionDetail",
props: true,
component: () => import(`@/views/workProblemHanding/QuestionDetail`)
},
this.$router.push({
name: "QuestionDetail",
params: { id },
query: { isListPage: "list" }
});
for in 和 for of 的区别
- for in 遍历键， for of 遍历值
- for in 遍历对象， for of 遍历数组、字符串等
- for in 遍历原型对象上的属性(Object.keys 只遍历本身的属性)， for of 不遍历
使用 $attrs 对象传递所有未被 props 所接收的特性
在 Vue2 中，可以通过 $attrs 对象获取父组件传递给子组件但未被 props 所接收的特性，从而实现组件复用和扩展的目的。
console.log 加样式 %c
console.log(%c${text}, ‘color: #fc4d50’)
||=、&&=、??=、?.、??
通过样式限制按钮点击事件？
pointer-events: none;
多层对象需要深度合并
lodash的merge()方法
import merge from "lodash/merge";
const obj1 = {
name: 'John',
age: 25,
address: {
city: 'New York',
country: 'USA'
}
};
const obj2 = {
age: 30,
address: {
city: 'San Francisco'
}
};
const mergedObj = lodashMerge({}, obj1, obj2);
console.log(mergedObj);
判断是否等于多个值
a == 1 || a == 2 || a == 3
[1,2,3].includes(a)
signatureSwitch() {
return [1, 2, 3, 24].includes(this.formBase.status);
},
String
布尔值转字符串
let flag = true;
let str = String(flag)
正则匹配汉字
function matchChineseCharacters(str) {
const regex = /[\u4e00-\u9fff]+/g;
return str.match(regex);
}
// 示例
const text = 'Hello, 你好，世界！';
const chineseCharacters = matchChineseCharacters(text);
if (chineseCharacters) {
console.log('找到汉字:', chineseCharacters);
} else {
console.log('没有找到汉字');
}
Element-ui
table内嵌套form-item
el-table-column 里面嵌套 el-form-item
row col 内嵌套form-item
<el-form ref="formBase" :model="formBase" label-width="158px">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="预约类型" :rules="{ required: true }">
<template >
<el-radio-group
:disabled="!editable"
v-model="formBase.reservationType"
@input="reservationTypeChange"
>
<el-radio :label="0">预约（至少提前1天申请）</el-radio>
<el-radio :label="1">临时（可申请当天的作业）</el-radio>
</el-radio-group>
</template>
</el-form-item>
</el-col>
</el-row>
Form-Item 的 prop 属性
在使用表单校验时必填，不用校验时可以不填
使用row col 生成table,
第一行是表头 （实现必填项加星号）
第二行及以后，遍历数据展示
在 Vue 3 中，render 函数被用来代替 Vue 2 中的模板语法。
它接收一个 h 函数（或者是 createElement 函数的别名），并且返回一个虚拟 DOM
render(h) {
return h('div', { class: 'container' }, 'Hello, World!')
}
h(tag, data, children)
- tag：表示要创建的元素的标签名，可以是字符串或者是组件选项对象。
- data：表示要添加到元素的属性、事件等。
- children：表示要作为子节点添加到元素中的内容。
引用文件
Vue3
const modules = import.meta.glob("../views/**/*.vue");
Vue2
const webpackContext = require.context("../modules/", true, /\w+(Router\.js)$/);
vue3 + antd-v框架
table组件：
表头可配置
表内容自定义项： 业务组件使用字段id判断和slot插槽渲染表格项，通过公用组件（子组件）的插槽给业务组件（父组件）传参，把表格数据传到业务组件
vue2 + element ui框架
table组件：
表头和表内容都是可配置，内容自定义展示需要给公用组件传一个回调函数，函数返回自定义的数据格式，进而在公用组件中展示
使用labelClassName修改表头颜色，比如红色+星号
使用row 和col 模拟实现 table (带星号，eg:作业任务里的作业类别)
先遍历表头数据实现第一行（必填项带星号）
再遍历实际数据，展示表内容 （col里嵌套el-form-item，给el-form-item设置required必填，提交的时候校验）
通过a 标签下载文件流
async exportExcel() {
console.log(this.searchParams());
const data = await this.$api.order.exportFix(getParams(this.searchParams()))
const blob = new Blob([data], { type: 'application/octet-stream,charset=UTF-8' })
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = `报修单.xls`
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
},
keepAlive
使用keepAlive后，
页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。
当再次进入（前进或者后退）时，只触发activated
详情页返回后，不重新请求数据的方法：

详情页返回后，重新请求数据，但是筛选项和页码等信息部不变：
在 mounted 和 activated 里都添加请求列表的方法， 在请求方法里根据loading判断是否进行接口请求
-
vue2: 使用 ::v-deep .el-form-item{}
-
vue3: 使用 ::deep(.ant-menu-item){}
扫一扫
60
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
