自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(669)
  • 资源 (3)
  • 收藏
  • 关注

原创 vue3【详解】 vue3 比 vue2 快的原因

vue3使用的 Proxy 在处理属性的读取和写入时,比vue2使用的defineProperty 有更好的性能(速度加倍的同时,内存还能减半!

2024-04-19 11:32:22 903

原创 vue3【实用教程】侦听器 watch,自动侦听 watchEffect(),$watch,手动停止侦听器

侦听明确指定的状态变化执行回调。

2024-04-18 21:21:58 1170 1

原创 vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)

以为例:自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop,用于获取自定义的修饰符 modelModifiers : {

2024-04-18 16:58:47 1580

原创 vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)

按安装导航,一直 next 即可。node -v。

2024-04-17 17:55:37 228

原创 vue3【详解】选项式 API 实现逻辑复用

逻辑封装 useMousePosition.js。页面使用 index.vue。

2024-04-17 15:31:12 369

原创 vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)

vue3 支持两种风格书写:选项式 API 和组合式 API。

2024-04-16 14:30:21 933

原创 vue 性能优化

在 beforeDestory 生命周期中执行,避免内存泄露,页面会越来越卡,最终卡死。

2024-04-15 18:11:11 667

原创 v-for 要用 key,且不能是 index和 random 随机数

v-for 要用 key 的原因可详见 vue 原理中的其核心要领在于,diff 算法中通过 tag 和 key 来判断是否是同一个节点,使用 key 能减少渲染次数,提升渲染性能。

2024-04-15 14:53:11 626

原创 vue-router 原理【详解】hash模式 vs H5 history 模式

在不刷新页面的前提下,根据 URL 中的hash值,渲染对应的页面。

2024-04-14 11:56:56 299

原创 vue 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法

vue 的更新过程,是一种异步渲染,即并不是每一点 data 的改变都会立马触发视图更新, 而是会汇总 data 的修改,再一次性更新视图,这样可以减少 DOM 的操作次数,提高性能。vue 文件中支持指令、插值、JS 表达式,还能实现判断、循环,大大便捷了开发,但无法在浏览器中渲染,需要先将其转换成 JS 代码才行,这个转换的过程,即模板编译。vue 的响应式机制是在vue 实例初始化时建立的,即 data 函数中定义的变量,在页面初始化后,都具有响应式。1000 个节点,要计算1亿次,算法不可用!

2024-04-12 16:13:44 659

原创 vue 【详解】MVVM 理解

M —— Model 模型,即数据V —— View 视图,即DOM渲染VM —— ViewModel 视图模型,用于实现Model和View的通信,即数据改变驱动视图渲染,监听视图事件修改数据

2024-03-28 20:52:16 104

原创 vue2【详解】mixins —— 抽离公共逻辑

mixins 用于在 Vue 中便捷复用变量、方法、组件引用、生命周期等。

2024-03-22 21:47:05 488

原创 vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )

插槽:用于在子组件的指定位置插入指定内容,类似在电梯里挂的若干广告显示屏,可以给指定的位置传入指定的广告。

2024-03-22 16:42:47 422

原创 vue2 自定义 v-model (model选项的使用)

父组件 father.vue。子组件 child.vue。

2024-03-22 15:51:16 713

原创 JS 自测题

即自由变量自由变量的查找,是。

2024-03-22 15:23:03 269

原创 js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)

/ 4s 把宽度从 20px 变为 620px ,即增加 600px,每次需变化 600 px / (60帧/秒 *4秒) = 15px/帧。// 60帧/s 才能确保动画流畅, 即每 1000/60 = 16.7 ms 执行一次动画。// 得出最终动画效果为 每 16.7 ms , 宽度增加15px。// 时间需要自己控制。// 时间不用自己控制。

2024-03-21 11:31:49 345

原创 js 捕获异常

可全局监听所有JS的报错。

2024-03-19 15:02:25 183

转载 手写深度比较 lodash.isEqual

【代码】手写深度比较 lodash.isEgual。

2024-03-13 20:15:31 68

原创 js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)

借助 script 标签 向目标服务器加载到 jsonp.js 文件,执行 callback 函数,因本地已定义了 callback 函数,便会触发本地 js 代码的执行,获取到 jsonp.js 文件中的数据,从而实现了跨域。服务器设置 http header,即服务器端将指定网址设置为白名单,允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程:借助 script 标签没有同源策略限制的特点,向跨域的目标服务器加载到需要的数据。所有的跨域,都必须经过 server 端允许和配合。

2024-03-13 17:28:28 1048

原创 js【详解】事件

给 DOM 节点绑定事件推荐使用 addEventListener 函数第一个参数:事件名称第二个参数:事件处理函数(第一个参数为 event)第三个参数:true 采用捕获法来处理事件false 【推荐】采用冒泡法来处理事件let div1= document.getElementById('div1');div1.addEventListener('click', function(event){ alert('div1_clicked!');}, false);

2024-03-10 23:26:59 490

原创 js【详解】BOM

浏览器对象模型 (Browser obiect Mode 简称 BOM)浏览器对象即 window,调用window对象的属性和方法时,可以省略window。

2024-03-10 21:38:24 398

原创 js 获取浏览器相关的宽高尺寸

屏幕分辨率的高: window.screen.height屏幕分辨率的宽: window.screen.width屏幕可用工作区高度: window.screen.availHeight屏幕可用工作区宽度: window.screen.availWidth。

2024-03-10 20:57:40 389

原创 js【详解】DOM

DOM 的本质是浏览器通过HTML代码解析出来的一棵。

2024-03-10 18:13:45 547

原创 js 类数组 转 数组

拥有数字索引和length属性的对象,但并不具备数组的方法和属性。

2024-03-10 14:09:58 371

原创 js【详解】async await

async await 实现了使用同步的语法实现异步,不再需要借助回调函数,让代码更加易于理解和维护。

2024-03-09 23:54:52 478

原创 js【深度解析】代码的执行顺序

我们将每一句要执行的 js 代码当做一个任务,则 js 代码可以按照其执行方式的不同,按下图分类微任务:被放入微任务队列(micro task queue)中等待执行的代码因为Promise、async 、await 都是 ES6 语法定义的宏任务:被放入 Web APIs 中等待执行的代码因为 setTimeout 、setInterval 都是浏览器定义的。

2024-03-09 22:59:25 542

原创 js【详解】Promise

Promise 是一种异步编程的解决方案,本身是一个构造函数自带resolve,reject,all 等方法,其原型上还有then、catch等方法。

2024-03-09 10:43:57 1006

原创 js 【详解】异步

将只能嵌套的回调函数,变成了可串联的,更易阅读和维护!为了解决回调地狱的问题,诞生了 Promise。但回调函数实现异步的方式,容易形成。

2024-03-09 08:25:13 419

原创 js【详解】event loop(事件循环/事件轮询)

event loop 是异步回调的实现原理。

2024-03-08 18:05:04 464

原创 js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )

必备知识点:js 【详解】函数中的 this 指向_js function this-CSDN博客。

2024-03-08 10:16:02 499

原创 vue2【详解】生命周期(含父子组件的生命周期顺序)

1——beforeCreate:在内存中创建出vue实例,数据观测 (data observer) 和 event/watcher 事件配置还没调用(data 和 methods 属性还没初始化)【执行数据观测 (data observer) 和 event/watcher 事件配置】2——created:实例已完成数据观测 (data observer),property 和方法的运算,watch/event 事件回调。

2024-03-08 06:57:59 1042

原创 js【详解】原型 vs 原型链

如下范例: class Student 创建了 实例 xialuo。

2024-03-07 11:55:42 821

原创 js【详解】instance of

判断某实例,是否是目标对象的构造函数构建的本质:判断实例是否属于其原型链。

2024-03-07 11:53:23 410

原创 vue 自定义事件的实现(可用于兄弟组件通信)

点击按钮后。

2024-03-06 23:32:17 496

原创 前端性能优化【前端必备】(含懒加载,手写防抖、节流等)

都可以考虑用空间换时间。

2024-03-06 13:27:14 1499

原创 linux 常用命令【编程必备】

回车后输入密码回车即可登录。

2024-03-05 15:13:53 311

原创 webpack 和 babel 实用教程【前端必备】

开发环境的前端代码重在易于阅读和编写,生产环境的前端代码追求更快地运行,所以需要通过前端构建工具将开发环境的前端代码通过混淆压缩打包构建成生产环境的前端代码。webpack 是众多前端构建工具的一种,主要实现以下功能:压缩代码将JS、CSS代码混淆压缩,让代码体积更小,加载更快编译语法将 Less、Sass、ES6、TypeScript 等浏览器可能不兼容的语法编译成浏览器支持的语法,如使用Babel编译ES6语法。

2024-03-05 14:20:26 384

原创 git 常用命令【编程必备】

若代码有改动,会列出被修改的文件,新增的文件,删除的文件等文件变动的信息。代码拉取方式有 SSH 和 https 两种。指定提交的标识符可通过 git log 查看。将另一个分支的代码,合并到当前分支。查看指定文件的代码改动的具体内容。查看所有的代码改动的具体内容。同时会创建一条代码提交的记录。会展示每次代码提交的标识符。用于识别是谁提交的代码。

2024-03-05 09:54:58 347

原创 https【详解】与http的区别,对称加密,非对称加密,证书,解析流程图

https 同时使用了对称加密和非对称加密,之所以没有全部使用非对称加密,是因为非对称加密的运算更加复杂,成本更高。在传输过程中,若有中间人攻击,伪造了 keyA 和 keyB 与客户端交互,也会变得不安全,所以又增加了证书校验。免费的证书容易被伪造,不推荐使用,建议购买使用第三方(如阿里云)的付费证书。加密用 keyA ,解密需要用另一个密钥 keyB。加密和解密都用同一个 key。

2024-03-04 16:03:13 351

原创 http【详解】状态码,方法,接口设计 —— RestfuI API,头部 —— headers,缓存

使用场景:限定客户端必须带有指定的 Headers 信息才能访问服务器,否则视为非法访问// axios 中自定义 Headers 的方法headers:{'自定义的请求头key':'自定义的请求头的值'}第一次请求时,服务器返回资源和 Last-Modified后续请求,在请求头中会带上 If-Modified-Since (值为上次服务器返回的 Last-Modified 值)服务器将对比请求头中的 If-Modified-Since 值和服务器上资源的最后修改时间。

2024-03-04 15:09:34 1202

quickcode快捷编程20210310版.zip

使用vue开发的方便快捷编程的工具(核心功能:自动生成目录,一键复制代码)

2021-03-10

pinyin_withtone.js

js 汉字转拼音

2020-12-29

dragVerifyImgChip.vue

vue 滑动拼图验证,使用方法详见https://blog.csdn.net/weixin_41192489/article/details/107029471

2020-06-30

空空如也

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

TA关注的人

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