前端导出Excel
前言 导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成，我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href就完事了。如果是放到服务器上,直接从服务器上下载就好了。下面我们使用另一种 H5 的新特性blob对象来实现一下导出功能。
什么是 BlobBlob
Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。
const blob = new Blob( array, options );
常见的MIME type（媒体类型）在 Blob 的构造函数中options参数的接受一个参数type,这个参数代表的是媒体类型,告诉浏览器是什么类型的文件,常见的有
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 ...
学习TypeScript
TypeScriptTypeScript 介绍
TypeScript 官方文档
TypeScript 简称：TS，是 JavaScript 的超集，简单来说就是：JavaScript 有的 TypeScript 都有
TypeScript 实际上就是 JavaScript(弱类型) + Type (类型) , 即为 JS 添加类型支持，如图
12// 为username声明明确的变量类型 字符串类型let username: string = 'John';
TypeScript 为什么要为 JS 添加类型支持
Javascript 类型系统存在先天缺陷，我们在写代码时经常遇到类型错误（Uncaught TypeError）
这类错误的出现导致项目开发完成上线之后，要投入大量的精力和时间去测试，找 bug，改 bug，对于开发效率是一种降低。
问题为什么 JS 在开发时不能提前预知，预防这些错误呢？
因为 Javascript 属于动态类型的编程语言，动态类型最大的特点就是它只能在代码执行期间做类型的相关检查，所以往往你发现问题的时候，已经晚了。
...
bug的解决
对话框清空表单信息和表单校验：bug的描述：新增和修改公用同一个dialog，先点击修改，再点击新增，此时所有的表单检验项都会飘红
解决方法： 打开对话框时清空表单的信息，使用nextTick清空表单的校验信息(调用表单实例的resetFields方法) 注意：修改时使用nextTick给表单赋值，否则会影响resetFields方法的调用！！！
表单校验失败，跳转到第一个错误的地方bug的描述：ui组件库的表单校验失败，跳转到第一个错误的地方的功能不符合开发需求，需要自己手动写一个方法；
代码：(适用于element-ui/plus)
123456789const scrollView = () => { // 校验失败的数据会有一个'is-error'的类 let dom = document.getElementsByClassName('is-error')[0]; dom.scrollIntoView({ block: 'center', behavior: ...
Vue的组件通信
整理了vue2 和 vue3的组件通信方法，vuex，pinia不作为此次重点
父子:父组件与子组件通信
子父：子组件与父组件通信
vue组件通信1、props(父子，子父)父组件传递的并非函数:父亲给儿子传递数据
父组件传递函数:实质为儿子想给爹传数据
==注意==：vue3使用defineProps来接收父组件传递的信息
vue2代码实现：12345678910111213141516171819202122232425262728293031 <!-- 父组件 --><template> <div> <h2>我是父组件</h2> <div>我有一辆车---{{ msg }}</div> <div>儿子给的{{ fromSon }}</div> <!-- 子组件 updataCar是一个函数updataCar --& ...
vue3上手指南
了解 Vue3
官方文档: https://staging-cn.vuejs.org
1. 了解相关信息
2年多开发, 100+位贡献者, 2600+次提交, 600+次PR(Pulll Request)
Vue3支持vue2的大多数特性
更好的支持Typescript
2. 性能提升
打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
重写虚拟DOM的实现和Tree-Shaking
3. Composition API
也称组合 API
setup
ref 和 reactive
computed 和 watch
新的生命周期函数
自定义hooks函数
4. 其它新增特性
Teleport - 瞬移组件的位置
Suspense - 异步加载组件的loading界面
全局API的修改
创建vue3项目1. 使用 vue-cli 创建12345678910111213## 安装或者升级npm install -g @vue/cli --- 最好是在cmd中执行---system32/cmd---开始---cmd## 保证 vue cli 版本在 4.5 ...
