- 博客(52)
- 收藏
- 关注
RSS订阅原创 Vue3 把实现双向数据绑定的 API Object.defineProperty 换成了 Proxy，出于什么考虑？
1. 两者对比，不难看出，两者的数据劫持都用到了set和get的方法，但是明显可以看出来，Proxy中的数据劫持，并没有用到循环，也就是性能上面的一个提升。2. Proxy中他劫持的是整个对象，包含了后面新增的一些属性，也能够实现数据的响应式变化，而Object.defineProperty是通过循环遍历的原来对象的键，因此后面加进来的属性，无法实现响应式的变化。...
2022-06-06 22:26:29
1437
1
原创 HTTP Cache（缓存）
当浏览器要请求资源时，会依次查看 Service Worker、memory cache、disk cache，如果有强制缓存且未失效，则使用强制缓存，这时的状态码是 200；强制缓存失效则使用对比缓存，服务端比较后返回 304 或者 200（并携带资源）
2022-05-28 16:11:43
1876
原创 未给默认值，报错 type check failed for prop “total“. Expected Number with value ‘ ’
未给默认值，报错 type check failed for prop "total". Expected Number with value ‘ ’
2022-05-25 15:19:33
1047
原创 使用git提交代码到仓库报错 failed to push some refs to XXXXXX
开发中遇到bug是在正常不过了，而程序也基本都是bug堆里爬出来的。对于程序员来说bug调试也是自己工作的重要组成部分。现把自己在开发过程中已经遇到并解决的bug展示如下。其中有些bug原因进行了简单说明，有些只是知道出现这种问题这样解决，背后原因也是不明觉厉。
2022-05-08 10:05:12
1293
2
原创 数组变成树状结构封装
对数组变成树状结构一般的应用场景非常的广泛，有后台权限的管理，侧边栏的渲染等，相信大家对数组变成树状结构一定不陌生，大家一般工作中经常会遇到，运气好点的，后台已经帮你处理好了数据，得到的就是帮你处理好了的数据，不好的，那就需要自己手动处理下数据了。今天就和大家详细解析下如何高效的把数组变成树状结构。
2022-05-04 22:18:57
1198
2
原创 创建Vue项目把报错Error: command failed: yarn
开发中遇到bug是在正常不过了，而程序也基本都是bug堆里爬出来的。对于程序员来说bug调试也是自己工作的重要组成部分。现把自己在开发过程中已经遇到并解决的bug展示如下。其中有些bug原因进行了简单说明，有些只是知道出现这种问题这样解决，背后原因也是不明觉厉。
2022-04-30 23:14:36
4803
5
原创 跨域深入了解
跨域深入了解什么是跨域跨域指的是浏览器在`一个网站中不能执行其他网站的脚本`，是浏览器的`同源策略`引起的，是浏览器带有的安全限制同源策略同源策略指发起ajax请求的时候，==协议、域名、端口号== 必须和服务器一致，三者任意一个不一致都会产生跨域。 ## 为什么要有跨域> 因为为了浏览器的安全考虑，如果没有跨域，那就会出现浏览器页面套浏览器页面，表面上访问的是支付宝页面，实际是别人做的网页，一样都能够实现功能，但是账号密码却被 实时监控，这样会浏览器造成很大的安全
2022-04-29 22:57:57
1186
原创 LESS 和 SCSS 的区别
LESS 和 SCSS 的区别相同点：1. LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。2. 都可以通过自带的插件，转成相对应的css文件。3. 都可以参数混入，可以传递参数的class，就像函数一样4. 嵌套的规则相同，都是class嵌套class
2022-04-28 21:24:57
19159
6
原创 你居然不知道前端常用的这6种编辑器
每个软件都有每个软件的特色，代码编辑器只是辅助工具，提高工作的效率，也使得代码的可读性变的更高，不能一味的最求人用的最多的编辑器，选择一款适合自己的编辑器，显得更加的重要。
2022-04-28 16:18:15
7230
原创 常见的vue安装失败问题
开发中遇到bug是在正常不过了，而程序也基本都是bug堆里爬出来的。对于程序员来说bug调试也是自己工作的重要组成部分。现把自己在开发过程中已经遇到并解决的bug展示如下。其中有些bug原因进行了简单说明，有些只是知道出现这种问题这样解决，背后原因也是不明觉厉。
2022-04-26 20:46:30
3355
原创 Vuex带你深度了解
## Vuex介绍1. 作用：能够`方便、高效地`实现组件之间的`数据共享2. Vuex是什么？ Vuex是vue项目中实现`大范围数据共享`的技术方案3. 优势： 1. 数据的`存取一步到位`，不需要层层传递 2. 数据的`流动`非常清晰 3. 存储在Vuex中的数据都是`响应式`的4. 场景： 1. 适合频繁、大范围的数据共享
2022-04-26 01:39:21
910
原创 手把手教你如何使用Vuex
Vuex介绍1. 作用：能够`方便、高效地`实现组件之间的`数据共享2. Vue是什么？ Vuex是vue项目中实现`大范围数据共享`的技术方案3. 优势： 1. 数据的`存取一步到位`，不需要层层传递 2. 数据的`流动`非常清晰 3. 存储在Vuex中的数据都是`响应式`的4. 场景： 1. 适合频繁、大范围的数据共享
2022-04-20 01:05:29
1691
原创 深度畅游Vue中的路由
Vue路由-全局前置守卫1. 作用：路由跳转之前，会触发一个函数。2. 场景：检验是否登录，没登录就跳转到登录页，主要用于权限控制。3. 语法： `router.beforeEach((to,form,next)=>{})`（在main.js中） 参数一（to）：到哪里去 参数二（from）：从哪里来 参数三（next）：是否放行，也可以控制跳转的路径 `next(false)` 拦截,不允许跳转 `next()`不拦截，跳转 `next
2022-04-18 00:56:01
1223
原创 带你浅谈Vue路由
路由嵌套之后，他的class有两种，可以分为- 精确匹配 router-link-exact-active url中hash值路径。与href属性值完全相同，设置此类名。- 模糊匹配 router-link-active url中hash值 包括href属性值这个路径
2022-04-16 23:27:49
1475
原创 你真的了解Vue中的路由吗？
路由1. 路由含义：路径和组件的映射关系2. 前端路由作用：实现业务场景切换 ，所有的业务都在一个HTML中实现1. 优点： - 整体`不刷新页面`用户体验更好
2022-04-16 02:16:05
1146
原创 手把手教你Vue中的插槽使用
作用域插槽0. 作用：使用组件时，可以访问组件内部的数据0. 语法： - 子组件插槽slot上绑定一个数据 - 父组件插槽接收，scope是自定义变量名 - 父组件会将插槽上绑
2022-04-15 01:13:18
1403
原创 Vue插槽v-slot的详细教学大全（Ι）
组件-插槽 插槽 作用：通过slot标签，让组件可以接收不同的标签结构显示语法 组件内用<slot></slot>占位 使用组件时<Pannel></Pannel>夹着的地方，传入标签替换slot## 插槽-默认内容0. 作用： 如果外面没有传值，可以给个默认显示内容0. 语法：<slot>放置内容，作为默认显示内容0. 效果： - 不给组件传标签，slot内容原地显示 - 给组件内传标
2022-04-14 02:33:32
1165
原创 Vue生命周期详解
## 生命周期1. 含义：组件从`创建`到`销毁`的整个过程，这个过程就是声明周期2. 如何知道组件到了什么阶段？（钩子函数）## 钩子函数1. Vue框架`内置`函数，随着组件的声明周期阶段，`自动执行`2. 作用：在特定的时间点，执行特定的操作3. 分类4大阶段8个方法| **阶段** | **方法名** | **方法名** || -------- | ------------------------- | ----------
2022-04-13 01:16:49
781
原创 Vue组件看这篇就够了
侦听器-watch1. 作用：可以侦听data/compute属性值的变化，只要修改了就会触发函数执行,可以侦听Vue的变量2. 语法：watch:{}和data(){并齐同级3. 事例： ```vue watch:{ "要侦听的属性名"（newval，oldval）{//newval是现在的值 oldval是之前的值 } } ```4. ==侦听器深度侦听（侦听对象）== 事例： ```vue wat
2022-04-11 21:34:25
1006
原创 带你详细了解Vue中的v-for
## v-for0. 作用： 列表渲染，所在标签结构，按照数据数量，循环生成。指令写在谁身上，就循环创建谁0. 语法： `v-for = "(值变量，索引变量) in 目标结构" ：key = 索引变量` `v-for = "值变量 in 目标结构 ：key = 索引变量"` 目标结构：可以是数组，对象，字符串0. 数组方法如果修改了原数据就会更新 页面，如果没有修改，则不会，但可以重新赋值给变量让你页面更新0. v-for中的key作用：在更新的时候
2022-04-11 00:48:48
13750
原创 带你详细了解Vue中的指令
v-model和修饰符1. 作用：value属性和vue数据变量，双向绑定到一起2. `双向绑定：` - 变量变化-->视图自动同步 - 视图变化-->变量自动同步3. 主要用途：表单中4. 应用场景： - 全选反选功能（非数组） - 考试系统（数组） - 手机用户信息：爱好 是否有以下XXX （数组）5. select标签上：需要将v-model写在select上，里面的option里的value中需要设置 复选框（checkbox）
2022-04-09 23:38:06
244
原创 Vue.js带你入门
Vue含义：Vue是一个渐进式（按需，逐渐集成功能）Javascript框架框架：拥有自己的语法规则库：是方法和集合的集合Vue脚手架脚手架启动：打开cmd运行yarn，下载全局安装@vue/cli模块包yarn global add @vue/cli查看Vue命令版本vue -V出现版本号，则代表安装成功创建项目：vue create vuecli-deno注意：项目名不能带大写字母，中文和特殊符号选择模板，使用上下箭头选择，回车确认，弄错了ctrl+c退出重来[外链图片
2022-04-08 22:25:57
60
原创 webpack开发服务器
作用：代码发生变化，只重新打包变化的代码，自动更新到页面，存放到内存中，自动刷新浏览器。步骤：1. 下载模块包：`yarn add webpack-dev-server -D`2. 自定义webpack开发服务器启动命令serve-在package.json里
2022-04-07 22:58:03
419
原创 带你了解webpack
webpack作用：是一个`静态模块打包工具，分析、压缩、打包`代码。- 支持所有类型文件的打包- 支持less/sass=>css- 支持ES6/7/8=>ES5(降级兼容性)- 压缩代码，提高加载速度webpack安装1. 初始化包环境`yarn init -y`2. 安装依赖包`yarn add webpack webpack-cli -D`开发依赖3. 配置script（自定义命令） 项目名不能有中文/大写/空格等特殊字符 文件夹不要和webpac
2022-04-07 00:57:01
551
原创 跨域和同源详解
跨域同源策略开发过程中主要遇到的同源问题，主要是比较两个url是否同源。判断条件协议是否相同（http、https、file）主机地址是否相同（www.xxx.com 127.0.0.1）端口（0~65535）http默认的电动车需按扣是80（可以不写），https默认端口是443 ， MySQL默认的端口是3306如果两个url协议、主机地址、端口都相同，那么这两个url是同源，否则就是非同源非同源受到限制：Cookie无法操作DOM无法操作Ajax请求无效（请求
2022-04-05 11:42:21
2392
原创 使用Express构造一个web服务器
Express 是一个第三方模块，用于快速搭建服务器（替代http模块）Express 是一个基于 Node.js 平台，快速、开放、极简的 **web 开发框架**。Express保留了http模块的基本API，使用express的时候，也能使用http的API使用express的时候，仍然可以使用http模块的方法，比如 res.end()、req.url作用：可以快速方便的搭建服务器
2022-04-02 22:08:22
852
原创 node.js带你解决异步困扰
Promise回调地狱：嵌套层数比较多，部分元素是异步的，不是同步的，获取没有内层快，因此内层函数比外层的异步元素加载快，因此称为回调地狱1. promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。1. 使用步骤： - promise是一个构造函数，需要new进行创建实例 - promise构造函数形参接收的是一个函数，函数里面一定要放入异步代码1. then一般用链式调用里面的函数就相当于
2022-03-31 22:40:33
378
原创 node.js第三方模块详解
第三方模块含义：第三方模块（其他人、阻止、公司开发的模块）1. 需要下载第三方### 本地模块- 一定要初始化- 安装：npm install 模块名 ...- 卸载：npm uninstall 模块名....- 安装本地模块，只能在当前文件夹及后代文件夹中使用- 需要通过require（）加载### 全局模块- 全局模块，安装之前，不需要初始化- 全局模块，不能通过require（）加载- 全局模块，一般都是命令或者工具- 安装卸载，只需要多家一个 -g
2022-03-30 22:30:17
1018
原创 node.js带你入门
作用：1. 开发后端2. 读写数据库，创建使用命令行工具辅助前端开发3. 基于Express框架，可以快速构建web应用4. 基于Electron框架，可以构建跨平台的桌面应用5. 基于restify框架可以快速构建API接口项目## 运行环境注意：- 浏览器是 JavaScript 的`前端`运行环境。（浏览器是客户端安装的软件）- Node.js 是 JavaScript 的`后端`运行环境。（正常情况下，Nodejs要安装到服务器上）- Node.js 中无法调用 D
2022-03-28 20:52:25
1532
原创 JWT身份验证
JWF身份验证- 基于token的鉴权机制，可以验证是否用户具有权限访问或者是否登录，如果没有登录或者权限，可以通过跳转形式，返回某个页面。## 流程：1. 在登录后，服务器会响应给用户一个 令牌 （token）2. 令牌中会包括该用户的id等唯一标识3. 浏览器收到令牌后，自己保存4. 下次请求其他接口时，（在请求头中）携带这个令牌去请求5. 这样服务器就知道来访者的身份了，服务器就会为该用户开发接口的访问权限，并处理该用户的数据
2022-03-25 21:06:26
197
原创 git基本使用及常用命令
---theme: channing-cyan---## git - Git是一个开源的分布式版本控制系统。 版本控制 - 控制版本，存储、追踪目录和文件的修改历史。市面上有各式各样的版本控
2022-03-23 20:31:01
148
原创 你不知道的网页执行的过程
网页从输入url到呈现页面的过程1. DNS解析：把域名解析成IP地址2. TCP连接三次握手：建立安全可靠的传输协议 - TCP：是一种传输控制协议 - TCP作用：保证HTTP网络传输是安全+可靠的（检测客户端与服务器的网卡是不是通的） - TCP三次握手： 1. 第一次：浏览器->服务器（检测浏览器发送功能） 2. 第二次：服务器->浏览器（检测服务器：接收+发送功能） 3. 第三次：浏览器->服务器（检测浏览器接收功能）
2022-03-19 23:45:00
301
原创 axios常见的一些报错
小编是一名前端程序猿，说起报错，相信大家都不陌生，最近有些小伙伴经常被一些报错所所困扰，所以，这边我把我经常遇到的一些报错统计下来，给大家分享下，希望对大家有所帮助！有任何问题都可以第一时间联系我。
2022-03-18 22:12:08
2820
原创 AJAX复习~（2）
含义：*Axios* 是一个基于XMLHTTPrequest,可以用在浏览器和 node.js 中。- axios语法 ```html // axios语法 axios .get('url') .then(res=>{'请求成功'}) .catch = (err=>{'请求错误'}) .then(()=>{请求完成}) ```- 链式语法底层原理：`在对象的方法中返回自身`- 对
2022-03-17 23:18:10
819
原创 AJAX复习~（1）
## ajax1. 作用：在网页中不跳转的情况下，向服务器请求数据2. 应用：局部刷新3. 交互三个流程： - 请求（浏览器） - 处理（服务器） - 相应（服务器） ## ajax的工作流程1. 创建XMLHttpRequest对象（俗称小黄人） - `let xhr = new XMLHttpRequest `2. 设置请求： - `xhr.open('get', 'https://autumnfish.cn/api/joke');`3. 发送请求：
2022-03-16 02:09:51
80
原创 js高级~复习（4）
预解析- 含义：变量的声明会提升到当前作用域最顶端- ES5中的var是具有预解析的弊端的，ES6中let直接代替var，let没有预解析## 箭头函数this指向1. 箭头函数没有this2. 本质是： 访问上级作用域中的this3. 由于箭头函数没有this，所以箭头函数不能作为构造函数（new会修改this指向，而箭头没有this4. 箭头函数也无法修改this（call apply bind）对箭头函数是无效的## 展开运算符1. 展开运算符：... 相当于对象
2022-03-14 22:24:54
54
原创 js高级~复习（3）
函数的三种调用方式（this指向）1. 环境对象（this)：谁调用我，我就指向谁2. 指向： - 普通函数----->window （函数名() 指向window） - 构造函数----->new 创建实例对象 （new 函数名） this指向new创建的实例对象） - 对象方法----->obj对象 （对象名.方法名（ ） this指向对象） 技巧：`没点没new就是window，有new是实例，有点是点左边的对象`
2022-03-12 22:25:58
873
原创 JS高级复习-（2）
## 面向对象的三大特征：（满足两个）1. 封装：把代码放入对象的方法中2. 继承：`一个对象 拥有 另一个对象 所有的成员`3. 多态： 一个对象 在不同情况下的不同状态 js中一般不涉及多态，主要是继承## 原型链（继承）1. 原型对象：存储具有共同特征的数据2. 原型继承：把父对象 作为子对象构造函数的原型 3. 终点：null4. 对象访问原型链的规则： - 对象先访问自己的，自己没有就找原型的，原型没有就找原型的原型的原型，一值到原型终点null，如
2022-03-10 00:20:49
46
原创 JS高级复习-（1）
本文主要介绍javaScript的高级内容，作者之前工作后发现很多之前不常用的知识都在慢慢忘记，然后我现在决定从新学习一遍，顺带带着刚入门的javaScrip小伙伴一些学习方向，希望可以给刚入门javaScrip的小伙伴一些帮助，内容比较多，每天下班后都会帮大家整理一下，我会根据简单到难，分好几次来讲，我自己也做了张思维导图，让知识更体系，帮助加深印象。
2022-03-08 21:56:31
61
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人