工作+学习 常用的一些东西

136 阅读4分钟

请求excel

前端直接请求excel文件,可以直接返回文件内容,但是请求的Content-Type需要为text/plain或设置responseTypetext!

eg:

企业微信截图_17332790048231.png

企业微信截图_17332791727948.png

对于简单的表格(复杂的还是得后端处理成json数据,前端处理展示),可以很方便的实现table展示!

监听深层的某个属性

在这里插入图片描述

需要把其变成函数

? 可选链操作符 和 ?? 双问号表达式

在这里插入图片描述

在这里插入图片描述

只操作undefined和null

v-slot 语法糖

v-slot 语法糖 # ,取消使用 slot="name"

默认插槽用 #default 表示,具名插槽用 #name,都需要放在template标签上了!

vue2的 this.$slots 可以获取传过来的全部 slot

vue3使用 useSlots

作用域插槽

在这里插入图片描述

在这里插入图片描述

动态插槽

在这里插入图片描述

新奇的原型链 object.create

在这里插入图片描述

console.log 是异步?

我们一直以来的理解是,console.log会输出当前输出结果的一个快照,这个理解确实也没错,但出于性能方面的考虑,浏览器在输出结果时,对于比较复杂的数据结构,并不会把这些数据全部展开,直到你手动戳开这些数据时,才会去获取里面的值,但是很明显,这个时候,数据已经被我们后续for循环中的操作给修改了,这就造成了一种“异步”的感觉,而事实上,整个操作其实都是同步的。

感谢:同步还是异步?console.log的怪异现象解析

浏览器打印信息和自己写的console的位置不一样,一直显示 transform.js

今天菜鸟正好无事,记起来自己最近用浏览器调试真的很难受,老是打印的信息显示在 transform.js 里面,然后一点开就跑到很复杂的打包后的代码里面去了,菜鸟是百思不得其解,代码不管怎么改都是这样!

具体提示行数为:

transform.js?unpluginname=unplugin-vue-components!./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginname=unplugin-auto-import!./node_modules/babel-loader/lib/index.js??clonedruleset-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleset[0].use[0]!./src/views/services/services.vue?vue&type=script&setup=true&lang=js:194

菜鸟之前的做法都是在打印前面加一些字符串,让我知道是哪里打印的!

但是菜鸟感觉这可不是长久之计,但是怎么改代码都没效果,那估计就是浏览器的原因了,果然我把代码放到 Edeg 上,打印的信息就是对的,我是万万没想到!

所以对照着 Edeg 的设置一行一行的对比,总算发现了问题所在,具体步骤:

在这里插入图片描述

在这里插入图片描述

然后把自定义排除规则给删除了就行,菜鸟这是已经删除后的截图!

菜鸟也不知道啥时候点错了,加了一个规则进去了!!!

已熟悉

之前不会vue3记录了,但是现在熟悉了,就放到后面了!

style妙招

vue3 css可以绑定js

在这里插入图片描述

ref获取dom元素

直接给dom元素加一个ref

<div ref="xxx">xxx</div>

定义一个变量名,和dom上的ref一致

const xxx = ref()
console.log(xxx.value)

B站笔记链接

up们很良心,我的笔记也是!

JS相关

JavaScript基础教程【晓舟报告】

JavaScript进阶教程【晓舟报告】

千锋教育最新版Web前端ES6-ES13教程,JavaScript高级进阶视频教

设计模式

千锋教育web前端进阶JS内功修炼之JavaScript设计模式

ajax

千锋教育JavaScript全套视频教程(10天学会Js,前端javascript入门必备)

svg

千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频

vue3+scss

Vue3 + vite + Ts + pinia + 实战 + 源码 + electron

尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程

webpack+vite

黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端学习核

Vite世界指南(带你从0到1深入学习 vite)

微前端 -- 无界

微前端

前端网络课

前端网络课

java -- 没学了

黑马程序员SSM框架教程_Spring+SpringMVC+Maven高级+SpringBoot+MyBatisPlus企业实用开发技术

千锋教育2024趣味版Java基础全套视频教程上部(Java 0基础,java入门必备)