自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(112)
  • 收藏
  • 关注

原创 Vue 动态路由,使用 addRoute 添加(分享)

文章目录静态路由动态路由静态路由// 最开始就把路由给配置好import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)import Login from "../page/login/Login.vue"const routes = [ { path: "/", redirect: "/login", }, { path: "/login", componen

2022-05-16 11:36:04 12987

原创 Vue2 组件通信、组件间传值的几种方式(分享)

文件间的关系App 为根组件Father 与 Brother 为兄弟组件,也同为 App 的子组件Child 是 Father 的子组件,也是 App 的孙组件2. 父子之间传值2.1 props,父传子// Father.vue 文件 import Child from "./Child.vue";export

2022-04-26 10:22:40 3336 8

原创 网络 AJAX、Fetch、WebSocket的基本认识(分享)

文章目录1. AJAX1.1 基本概念1.2 GET请求步骤1.3 POST请求步骤1.4 AJAX封装2. fetch2.1 基本概念2.2 GET请求案例2.3 POST请求案例3. WebSocket(`H5`)3.1 基本概念3.2 WebSocket的属性和方法3.2.1 属性3.2.2 事件3.2.3 方法3.3 WebSocket实现聊天室1. AJAX1.1 基本概念AJAX是一门异步的用于发送网络请求的计算允许浏览器与服务器通信,而无序刷新当前页面的技术叫做 AJAXAJAX

2022-04-05 20:23:34 2207

原创 网络 浏览器同源策略、跨域、解决跨域(分享)

文章目录1. 同源策略1. 同源策略

2022-03-31 09:47:31 1711

原创 网络 TCP/UDP协议(笔记)

文章目录1. TCP协议2. UDP协议3. TCP与UDP的区别3.1 TCP 稳定可靠3.2 UDP 速度快1. TCP协议TCP协议类似于打电话,需要建立链接,TCP协议又分为以下三个步骤三次握手,就是为了解决网络信道不可靠的问题客户端先向服务端发送一个SYN包,询问能否建立链接服务端同意链接后,向客户端发送一个SYN+ACK包客户端收到后,在向服务端发送一个ACK包,因此建立连接传输确认,会有丢包问题和乱序问题发送缓冲:把数据分成0~N个字节发送报文:TCP协议头中会附带

2022-03-26 10:05:02 693

原创 JavaScript 拦截器的简单了解(分享)

文章目录1. 闭包语法糖2. class/get/set3. 属性拦截器4. 对象代理拦截器1. 闭包语法糖// 这种set、get方法可以添加约束// set必须要有参数,get必须要有返回值function fn() { let num = 10 return { set num(value) { console.log("num被修改了"); num = value }, get num() { console.log("nu

2022-03-15 13:16:28 2636

原创 css层叠上下文,以及z-index不生效(问题)

文章目录1. 层叠上下文2. 层叠上下文与z-index的解释3. z-index不生效1. 层叠上下文创建层叠上下文的元素的背景和边框层叠级别 z-index 为负值的层叠上下文常规流非定位的块盒非定位的浮动盒子常规流非定位行盒任何 z-index 是 auto 的定位子元素,以及 z-index 是 0 的层叠上下文层叠级别 z-index 为正值的层叠上下文2. 层叠上下文与z-index的解释在层叠上下文规则中,1-5条还是很好理解的,第6条的意思是一个元素的子元素是一定

2022-02-13 17:12:06 746

原创 css行内元素设置margin和padding不生效(问题)

行内元素设置margin或padding有时候会失效其实并不是失效,给行内元素设置左右margin和padding会生效设置上下margin不会生效设置上下padding会生效,但是不会撑开父元素,相等于没有效果

2022-01-01 23:54:02 3453

原创 JavaScript 全屏方案(分享)

/ 我的电脑是16的偏差,我用我同事的电脑测试,有的是14 有的是18。// 这里我准备判断是否相等,但是不知道为什么会存在偏差。存在按键盘F11、手动点全屏后中间的×,先说说几种方案。// 监听浏览器窗口来判断是否全屏,用来管理全屏状态。// 不需要重复修改,这里也有可能是用户修改窗口尺寸。基本情况是属于只是鼠标点击全屏按钮。// 已开启全屏,需要退出。// 未开启全屏,需要开启。

2024-05-20 17:33:31 784 1

原创 python 基础(笔记)

单引号定义'hello word'双引号定义"hello word"三引号定义# 三引号的方式,如果不用变量接收那么就是多行注释,如果用变量接收就是多行字符串,*三引号定义建议使用双引号 s = """hello wordhello word"""引号之间的嵌套# \ 为转义字符,把特殊字符当做字符使用 "'hello word'" '"hello word"' "\"hello word\"" '\'hello word\''函数调用时传入的实参与形参对应。

2024-05-13 10:44:27 1175 2

原创 JavaScript 工具函数(分享)

【代码】JavaScript 工具函数(分享)

2024-05-13 10:43:20 342

原创 vue2/3 axios 请求重试、取消请求、loading 串行并行等(分享)

这些代码都是 vue2 项目的,vue3 也通用,改一下 loading 和 message 就好了(主要是 element 的区别)我这里的应用场景是 token,当我发现当前请求没有 token 时,先挂起当前请求然后获取 token,在添加上。在请求响应拦截器里面添加 loading,这样就不需要给每一个请求添加 loading 了。重复请求需要取消,取消请求会走响应拦截器的 error,会和请求重试有冲突。响应状态码配置,更好的给用户提示,这里只设计到响应,就只写了响应拦截。

2023-06-20 10:25:31 1191 2

原创 前端文件流相关概念、技术、转换、读取(分享)

通过 input:file 获取的 file 文件。File 和 Blob 可以通过构造函数互转。

2023-06-16 17:16:50 2156

原创 关于 nuxtjs 项目开发的简单说明(分享)

【代码】关于 nuxtjs 项目开发的简单说明(分享)

2023-06-04 15:53:27 319

原创 vue2、3 开发项目前的准备,可直接拷贝(分享)

因为最近都是做的 pc 端的项目,所以就按 pc 端常用的来配,都是架子可以直接拷贝。

2023-05-18 17:12:13 1409

原创 Web Component 技术(笔记)

/ 在 observedAttributes 数组中的值,可以监听标签上的属性,当对应的属性值发生改变时调用。// 当继承指定 HTML 元素时,该元素需要继承使用(is="自定义元素名")// 在元素被移动到新的文档时调用,比如 document.adoptNode。// 当继承任意 HTML 元素时,该元素可以当做组件使用。// 影子模式,与主文档分开呈现,保持元素的私有功能。// 在元素被添加到文档之后调用,会调用多次。// 在元素被移除文档之后调用,会调用多次。// *自定义内置元素。

2023-03-24 10:53:33 363 2

原创 vue 配置不同打包环境(分享)

标注:需要通过 --mode 去匹配对应的环境文件,而开发环境不需要配置。测试环境不会生成 css 文件,而是每个组件生成对应的 js 文件。

2023-03-23 10:45:51 666

原创 关于 flex 布局时,子元素宽度超出父元素问题及解决方案(问题)

这个是我在项目中遇到的一个bug,使用的 flex 布局,由于我动态的修改绿色盒子的显示与隐藏,导致两边盒子的挤压。先看效果图,大家可以看一下下面的样式,很明显左边和右边的盒子我是给的定宽,但是被挤压了。很明显,红色的盒子没有300px。

2023-03-20 10:27:33 7635 3

原创 pinia 的使用(笔记)

/ 可以直接通过 store. 去获取 state、getters、actions 中的属性和方法了。// 替换状态(不是覆盖状态),需要新的状态去替换旧的,如果 key 值不相同就是添加新状态。// 修改状态3,这种方式和 React 中的 setState 很像。// 当函数中存在失败状态的 Promise,或函数抛出异常时执行。// 这个 store 的 Id,这里是 count。// action 中的函数每次调用,都会触发一次。// store 中的值,每修改一次就会触发。

2023-03-08 14:36:11 650

原创 Vue3 组件通信、组件间传值的几种方式(分享)

define 开头的都是使用的宏编译,不需要导入。后面的列子都是使用 setup 语法糖的写法。

2023-03-03 17:11:48 758

原创 iframe 页面间的通信(分享)

在许多老的项目中使用的都是 iframe 进行的页面嵌套,我这里写了三个页面进行演示红色的页面为最外层,本地开的服务,端口为 5500,而黄色和蓝色的页面分别为第二层和第三层,端口为 5501专门做的不是一个端口,后面会有作用。

2023-01-10 15:43:39 3237

原创 vue中子组件中直接修改父组件的值(分享)

在vue2和vue3中使用的方式基本一致,这个在官网上都有描述,因为之前没有去封装过公共组件也就没有去留意过,这个是在vue2.3.0的时候新增的一种双向绑定。

2022-12-19 15:35:02 820

原创 关于使用 element-plus 时,出现 Maximum recursive updates exceeded in component <ElFormItem> 的问题(分享)

在使用 element-plus 时,遇到了以下问题这个问题我在查阅相关资料后并没有找到想到的答案,由于没有找到问题的所在而且又只是警告我就没太在意,但是到了项目打包后出现了死循环的问题,经过我反复的查找最终锁定的问题的所在先说一下项目需求吧,有三个字段,这三个字段相互关联 duration、startTime、endTime,然后我给这三个字段都加了change事件,这三个字段有一定的关联关系,互相改变,我最开始一直以为是这个问题,结果排查发现并不是这个问题最终把问题锁定了这个计算属性,这个属性是计算

2022-12-07 09:04:30 7070 2

原创 TypeScript文件操作(笔记)

这里先新增一个同级 index1.ts 和 index2.ts 文件。

2022-11-14 15:21:27 728

原创 三方库关于项目中 pdf、word、html转换的不同方案(分享)

该应用场景是,是使用luckysheet生成PDF,一共分了四种情况,传值的时候只需要判断,生成html的宽度(需要乘0.75,因为是pt单位做对比)只要大于a4的宽度就需要纵向打印。

2022-10-27 09:07:32 1482

原创 css3 函数汇总(笔记)

使 css 中也可以像 js 一样声明变量,但是在使用之前应该要知道一些东西。使用方式和线形渐变一样,不过当渐变内容不足以撑满时会重复渐变。使用方式和径向渐变一样,不过当渐变内容不足以撑满时会重复渐变。它们都是 background-image 的属性。使 css 的属性值可以进行四则运算。var(--变量名)

2022-10-19 16:49:10 1151

原创 JavaScript 关于async、await怎样合理的使用try、catch去处理(分享)

【代码】JavaScript 关于async、await怎样合理的使用try、catch去处理(分享)

2022-09-21 10:41:27 3333

原创 Vue 通过 原生 js(Hash、Histroy) 实现一个SPA、VueRouter 的简单实现(分享)

3. 通过 history 实现3.1 实现思路在 window 上有一个 history 对象,使用该对象的 pushState、replaceState方法时,对浏览器的历史记录进行操作,页面并不会进行刷新而使用 ,,时会触发 window 上的 popstate 方法,页面也不会进行刷新3.2 代码实现4. 效果图

2022-08-24 15:09:30 333

原创 css3 布局、flex布局、grid布局的常用属性(笔记)

grid-column: grid-column-start / grid-column-end,简写方式。如果当前有三列,start 所对应的就是1、2、3,而end 所对应的就是2、3、4,写其中一个就可以。当前网格的开始与结束位置,一个单元格表示 1,两个单元格表示 2。注意:如果 n 大于当前总列数,并不会到第二行去,而是会添加列。row-reverse:水平摆放,相反(123 变 321)column-reverse:垂直摆放,相反。row:水平摆放(默认)column:垂直摆放。......

2022-08-16 14:16:29 955

原创 Vue3 vue-cli、create-react-app、vite 创建vue/react项目(笔记)

/ 可以直接通过 store. 去获取 state、getters、actions 中的属性和方法了。// 替换状态(不是覆盖状态),需要新的状态去替换旧的,如果 key 值不相同就是添加新状态。// 修改状态3,这种方式和 React 中的 setState 很像。// 当函数中存在失败状态的 Promise,或函数抛出异常时执行。// 这个 store 的 Id,这里是 count。// action 中的函数每次调用,都会触发一次。// store 中的值,每修改一次就会触发。...

2022-08-12 15:43:18 1677

原创 React ReactRouter6、组件的调整、hooks(笔记)

ReactReactRouter6、组件的调整、hooks(笔记)

2022-08-02 09:12:30 351

原创 React 扩展、hooks的使用、路由懒加载、组件优化/传值(笔记)

只有当前组件的state或props修改时,才会render。

2022-08-01 16:02:52 506

原创 React redux、react-redux的基本使用(笔记)

引入容器组件,连接容器组件和store。容器组件,连接容器组件和UI组件。组件中使用store。

2022-07-26 17:07:34 441

原创 React ReactRouter、路由的使用、路由的相关组件(笔记)

一个路由就是一组映射关系(key-value)key为路径,value可能是function或component。

2022-07-22 17:17:25 653

原创 React 使用axios发送网络请求、配置代理的两种方式(笔记)

react全家桶中没有封装请求的库,可以引用jquery或者axios库使用jquery太重了,所以用axios比较好。

2022-07-20 17:41:02 632 2

原创 React 生命周期,16、17(笔记)

在初始化时,constructor→getDerivedStateFromProps→render。由ReactDOM.unmountComponentAtNode()触发。由ReactDOM.unmountComponentAtNode()触发。这两个钩子并不常用,但是需要的时候也是会用到的。由ReactDOM.render()触发。由ReactDOM.render()触发。当然之前的生命周期也还在。//组件渲染到页面。......

2022-07-19 08:28:52 302

原创 React 不能动态修改checked状态(问题)

代码】React不能动态修改checked状态(问题)

2022-07-18 12:33:09 684

原创 React 基础、jsx语法、组件的基本使用、事件处理(笔记)

PropTypes中的类型,这点需要注意。//渲染虚拟dom到页面上。//渲染虚拟dom到页面上。CDN引入需要三个文件。//创建虚拟dom。//创建虚拟dom。回调函数形式的ref。字符串形式的ref。

2022-07-15 10:43:14 334

原创 网络 常见的http状态码(分享)

状态码的五大类与常见的状态码

2022-07-11 16:44:34 231

原创 Git 的基本使用、指令大全(笔记)

Git 基本介绍- Git 是一个免费的、开源的分布式版本控制系统,可以快速高效的处理小型到大型的各种项目- Git 易于学习,占地面积小,性能极快。它具有廉价的本地库,方便的暂存区域和多个工作流分支等特性。其性能优于 Subversion、CVS、Perforce 和 ClearCase 等版本控制工具- 集中式管理:有CVS、SVN等,都有一个单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人们都通过客户端连接到这台服务器,取出最新的文件或者提交更新,这种方式每一......

2022-07-04 14:10:07 193

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除