- 博客(52)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 邂逅Vue3源码-2.reactivity(上)
首先你需要先了解一下vue3响应式的核心api，和他们的用法。你可以去官方查看。这里我就简单的介绍一下用法和特性vue3响应式核心api有4个。
2023-06-21 15:56:27
414
原创 邂逅Vu3源码--1.开工准备
因为我们是解析vue3源码，所以用到的尽可能的和vue3的编写保持一致使用的语言是TypeScript，放心这里都是很基础的ts语法，即使你不会ts语法也不用担心，只需要跟着写就行。使用的打包工具是rollup，因为rollup更专注于纯粹的js打包代码管理方式使用的是monorepo使用的模块管理器是yarn，因为yarn支持monorepo。
2023-06-20 15:20:01
800
原创 关于使用proxy解决跨域可能会遇到的坑
今天在给新项目配置proxy代理解决跨域的时候遇到了一个奇怪的问题，是这样的 我先给axios设置了baserurl是一个绝对地址https://www.xxx.com,因为这个网站的接口没有设置跨域，所以我在项目的配置文件中用了proxy，做了代理，但是我怎么设置都不对，我真的是一个大无语，我和官网的设置比对了一遍又一遍，还是不对，然后，我就突然在网上看到axios不要设置绝对路径，然后我就开悟了，原因写在下面了.
2023-06-16 13:34:15
157
原创 【git规范--husky的使用】
在团队开发中，或者自己的项目中，我们都会用到git来管理我们的代码，但是当我们commit(git commit)的时候，是没有规范的，有的时我们偷懒甚至`git commit -m'..'`，这种提交虽然当时爽，但如果有一天我们需要回滚版本的时候，`git relog`，妈耶，这都是啥啊，如果在团队开发中这种情况更让人绝望。这时候，指定制定一套commit规范显得格外重要，我们可以借助`husky`和`Commitizen`这两个工具帮助我们来管理commit
2023-05-22 15:45:10
2330
原创 关于scroll-viwe使用align-items:center的问题
今天遇到了一个很奇怪的问题，找了好久终于找出来问题了在使用scroll-view组件的时候，给组件设置flex布局，但是B往上移动，明显看到内容被覆盖了
2022-12-08 21:59:15
314
原创 关于小程序swiper图片不能撑满解决方案
最近在写小程序的时候使用了swiper组件，但是发现一个很奇怪的现象，如果给image组件设置的话，那么图片的高度是不够撑满的这样就会导致swiper的指示器（其实没有偏移，只是图片没有撑满swiper-item的高度罢了）效果如下：这个方案我自己想出来的，但是会有一个缺点，如果图片过小的话，强行拉伸会导致图片变样，但是这种情况一般不会存在，ui在设计banner图的时候肯定不会给你那么小的，但是万一呢，哈哈哈，所以如果方案二看不懂的铁铁们，也可以使用这个，如果ui给你的图很小直接拉出出打死哈哈哈哈~~
2022-12-08 10:24:42
3214
原创 是js高级啊~
1.2.this绑定之外的情况非严格模式下，显示的将this绑定成null或undefined，this的指向是默认绑定（window）严格模式下，显示的将this指向null或undefined，this指向就是null或者undefined非严格模式下，创建一个函数的间接调用，this的指向是默认指向由以下案列可知，赋值语句的返回值是要赋的值1.3.箭头函数箭头函数箭头函数箭头函数不能用作构造函数(因为没有显示原型)如果函数体只有一行代码，默认值返回的是一个对象，必须用括号将
2022-11-22 10:46:22
281
原创 记录一下布局--宽度溢出导致的问题
box（.box表示）盒子,里面有10个li元素，每个li的宽度是110px，一共是1100px，.box的宽度默认是父元素的100%，.box的父元素是.header元素，默认也是父元素的100%，.header的宽度是body，body默认是视口的宽度，我们把浏览器缩小，此时浏览器视口的宽度是800px，然后body的宽度也是800px。但是10li元素的的宽度是1100px，溢出了，由于我们设置的颜色在.box上，所以溢出的部分没有显示背景。...
2022-07-23 16:52:56
94
原创 详解vertical-align
以下案列中在div.box盒子中，每行文本都隐士的有个盒子，官方给的定义是行盒，行盒的作用是包裹每行的行内级元素，因为span.small设置了属于行内级元素，所以行盒会将其包裹进去，然后div.box就被撑高了。（为啥span元素下下面会有一点像素，往下看）行盒会想办法包裹当前行的所有行内级的元素（文本也是）案列...
2022-07-15 00:07:03
434
原创 元素的水平和垂直居中解决方案
设置父元素的设置当前块级元素（宽度）元素有宽度的情况下，设置left:0,right:0,margin:0 autoflexjustify-content:center元素有宽度的情况下，设置top:0,bottom:0,margin: auto 0align-items:center
2022-07-13 13:57:39
91
原创 解决flex布局justify-content导致的多于元素对不齐问题
效果如下这样的样子很丑可以使用计算宽度来解决：假设容器的宽度是600px,每个项目的宽度是110px,每行可以显示5个，剩余宽度= 600px-110x50px = 50,因为每行最多可以显示5个，50/5 = 10,给每个项目的margin-right设置10px，最后一个不设置即可原理因为一个元素设置里flex，里面的元素就不严格区分块级或行内及了，所以可以设置宽高。我们未每个i元素设置和item一样的宽度，但是，所以我们看不见，也，当第二行只有1个的时候，不会影响，默认靠边界，当第二行有2、3
2022-07-07 23:35:35
1065
原创 margin负值的妙用
假设有一下场景（这里只考虑用float布局）：有一个.wrapper的宽度是1200px,里面有5个小的div，每个宽度是232px，margin-right:q10p效果图如下。因为.wrapper的宽度是1200px，5个div的宽度+mr是1210，又因为每个盒子都浮动，所以当一行放不下会折行。解决方法也有很多，(因为这里用到浮动，本来就是为了兼容低版本的浏览器，如果用:nth-child选择器，那么就不兼容低版本浏览器了)，这里说一个巧妙的方法。将5个div用一个，设置这个.box的...
2022-07-06 09:51:46
83
原创 20有效的小括号
给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。来源：力扣（LeetCode）链接：https://leetcode.cn/problems/valid-parentheses...
2022-06-26 19:24:34
88
原创 关于element组件事件如何自定义传参
假设有下图这个场景，el-picker这个组件有个chang事件，它的形参已经是固定的了，那么我们如何加上自己想要的形参呢,直接加？那么原来的形参就会被替换，我以前的思路是，在标签中加一个data-xx然后在拿到该标签的实例，从而获取data-xx的内容，虽然可以实现目的，但是也忒麻烦了吧······船新版本，当当当当~~解释一下@change后面跟的是个函数体，当触发这个事件的时候，就会调用自定义的函数,val是chang事件的形参，这时候我们就可以将原来的形参和自定义的形参一起传进去了，这个果然妙
2022-06-12 17:08:54
1051
原创 Dom API
整理一下常用的DOM API目录整理一下常用的DOM API查找父子关系兄弟元素按照HTML特征查找查找父子关系el.parentElement/el.parentNode 获取el的父元素parent.children 获取当前父元素下的所有子元素的集合返回的是类数组对象parent.firstElementChild 获取当前父元素下的第一个直接子元素parent.lastElementChild 获取当前父元素下的最有一个直接子元素兄弟元素el.previousEle
2022-05-29 23:20:32
62
原创 深度拷贝~~~
// source是什么类型 // target就传入相同类型 const obj = { name: 'jack', age: 18, hobbies: ['唱', '跳', 'rap'] } const arr = [2, [23]] function deepCopy(source, target) { for (let k in source) { ...
2022-05-25 16:31:53
49
原创 JS处理两个超大的数相加
一道鄙视题：let a = '99999999999999'; let b = '9999'; console.log(bigAdd(a,b)); // 100000000009998function bigAdd(str1, str2) { let res = ''; let temp = 0; str1 = str1.split('') str2 = str2.split('') while (str1.length
2022-02-19 14:34:59
742
原创 浅谈JS的微任务和宏任务(附加面试题)
Event Loop因为JS是单线程，就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。掌握知识点JS分为同步任务和异步任务同步任务都在主线程上执行，形成一个执行栈主线程外，事件触发线程管理者异步任务一旦执行栈中的所有同步任务执行完毕（此时JS处于空闲），系统就会读取异步任务，将异步任务添加到执行栈中，开始执行宏任务（macrotask）这里我们需要记住，浏览器为了能够使得JS内部(macr
2022-02-18 23:13:32
1054
原创 v-model双向绑定原理
v-model双向数据绑定原理话不多说直接上代码我是看了 黑马的彬哥讲解的 超级详细 保姆级别教学 记录下来 方便自己查阅视频地址：https://www.bilibili.com/video/BV1Dr4y1c7xS?p=24&t=473.1这是封装的jsclass Vue { constructor(options) { this.$data = options.data // 数据劫持 Observer(this.$data) // 属性代理
2022-02-13 14:33:59
628
原创 es6 class类
class类(es6)定义集中定义一种类型的所有对象，统一属性结构和方法的程序结构组成部分构造函数(constructor)和原型对象(prototype)构造函数： 负责定义所有子对象统一的属性和结构，并负责创建子对象原型对象：负责保存所有子对象共有的属性和方法原因在ES5中构造函数和原型对象是分开定义的，不符合面向对象的**‘封装’**使用方法用class{} 包裹构造函数和原型对象构造函数名提升为class名，所有构造函数从此统一更名为constructor所有放在class
2022-02-11 13:56:57
309
原创 MySQL server 安装教程
MySQL server 和MySQL workbench这两个软件 是在一起的进入网站下载，选择红框的下载https://dev.mysql.com/downloads/installer/然后点击安装第二项 直接点击next 会弹出一个警告框 选择yes表示 去检查 查看哪些依赖需要安装 点击execute 然后就会自动安装了 然后点击next...
2021-10-14 17:40:08
3535
1
原创 es6补充(array&string)
ES6数组&String API数组类数组转换为数组Array.find()Array.findIndex()Array.includes()String相关startsWith()endsWith()repeat()set数据结构set常用API数组记录一下es6得数组方法，方便自己查阅！类数组转换为数组Array.from()// 说白了这个函数就是遍历传入得类数组然后返回一个新得数组var oDivs = document.querySelectorAll('div') c
2021-09-25 11:07:02
177
原创 CSS继承之行高
记个笔记，css继承的行高继承行高可以带单位，也可以不带单位，1.5表示，作用于继承的子元素的字体大小的1.5倍，此时div的行高就是1.5*16=24<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
2021-07-29 18:00:43
499
原创 Vue3高阶
Vue3高阶文章目录Vue3高阶前言Mixinmixin细节点mixin-自定义属性自定义指令teleport 传送门组合式API (composition API)setuprefreactivereadonlytoRefstoRefcontext前言啦啦啦，新的篇章，本期也是Vue3工程化的最后一篇了，一个人的旅程好难，什么都要靠自己去摸索，遇到问题需要好久好久才搞懂，苦逼~~~~Mixin在Vue3x版本中用的不多了 mixin指Vue中可重复使用的部分，比如说，在一个实例中的data
2021-07-07 23:01:15
681
2
原创 css定位新发现
en~~~~~~新发现，发现一种写法，有两个div，是父子关系，父元素设置了宽高，以及绝对定位，子元素如何撑满父元素，不用宽高的情况下，就是让子元素，也绝对定位，top/left/right/bottom都设置为0就好了，发现新大陆，哦吼吼~~<style> .box { width: 500px; height: 500px; background-color: #f00; position: absolute;
2021-07-06 20:45:41
42
原创 Vue3动画相关知识点
今天学习的是Vue3动画文章目录今天学习的是Vue3动画前言自定义动画Vue内部封装好的动画动画/过渡动画进场动画类离场动画类动画和过渡结合使用第三方动画库的使用js的方法实现动画/过渡前言啦啦啦，又是新的篇章，加油吧，这一章节吃的不是很透啊，脑子蒙蒙的哈哈哈，硬着头皮吃吧。哈哈哈嗝~自定义动画 vue中使用自定义动画和过渡的使用跟css中差不多，也是在style中定义动画或过渡，然后通过动态绑定class的方式调用<div id="app"> <div>
2021-07-05 22:54:25
235
1
原创 Vue-组件相关的知识点
Vue组件相关的知识点Vue组件相关Vue组件相关的知识点学习内容：说点啥：学习产出：组件间传参父→子子→父组件间的访问父组件访问子组件子组件访问父组件插槽匿名插槽具名插槽学习内容： Vue组件相关的知识点1、 全局组件2、 局部组件3、 组件间相互传参4、 组件相互访问5、插槽说点啥：嗯~~又是充实的一天，今天学习了组件相关的知识点，记录下来，方便以后自己查阅，努力，加油，欧里给学习产出：组件分类： 页面级组件、业务上可重复的基础组件、与业务无关的独立组件全局组件的创建简洁
2021-07-03 23:44:22
169
3
原创 Vue面试题--为什么data必须是函数
今天懂了一个东西，就是Vue3中创建Vue实例的时候保存数据的data为什么一定是函数，Vue2的时候可以是对象，但是创建子组件的时候里面的data也是函数（不管是Vue3还是Vue2），那我们就不纠结这个了，说一下为什么吧！首先我们创建组件的时候（这里以子组件为例子），数据是需要独立的，不可能子组件只用一次吧，但是数据的改动可谓是牵一发而动全身啊！所以data必须是函数，因为每当用一次所创建的子组件，就会调用一次data函数，从而return 一个新的对象，这些对象的地址不同，所以避免了牵一发而动全身
2021-07-02 20:22:11
401
原创 关于引用类型数据赋值的问题
今天发现一个bug 因该是自己孤陋寡闻，学识浅薄，记录下来只是为了以后不再犯这个错误，都知道引用数据类型，赋值一份，两个变量指向的地址是一样的，但是当其中一个变量重新赋值，那么两个变量再无瓜葛let a={a:9,b:[1,2]}let b=a.b//此时b和a.b引用的地址一样b=[3,4]//此时b和a.b地址不一样，因为b重新赋值了//如何让两个地址一样呢 就是不重新赋值，而是直接修改b.push(3)//这样就一样了...
2021-07-02 10:55:25
141
空空如也
关于#typescript#的问题，请各位专家解！
2021-07-27
这个啥原因呀，求解！！！！！！
2021-07-02
TA创建的收藏夹 TA关注的收藏夹
TA关注的人