- 博客(48)
- 收藏
- 关注
原创 Vue3组件通信方法清单
注意,只有同源的页面才能共享localstorage的数据。祖先组件向后代组件传递数据,避免逐层传递 props。非父子组件间的通信,如兄弟组件或跨多层级组件。父组件传递数据给子组件,子组件通知父组件。父组件直接调用子组件的方法或访问其数据。多个组件共享复杂状态(如用户登录信息)。类型安全、DevTools 支持。简化父子组件的双向数据绑定。父组件向子组件传递模板片段。持久化存储数据,跨页面共享。持久化数据(如用户偏好)直观、Vue 官方推荐。父组件定制子组件 UI。父组件调用子组件方法。
2025-07-26 11:50:31
362
原创 JS原型相关知识
在JS中,每个构造函数都有一个prototype属性,这个属性的值是一个对象,这个对象包含了构造函数所有实例共享的属性和方法,这个属性就是原型。下面的图片深层剖析了当你new一个对象时所发生的4个步骤图中的[[ProtoType]]这里加双括号是EMA262规范里面规定的,用来表示特性的一种方法,这里就是指,对象实例具有原型这个特性在调用时,我们一般把他写作__proto__了解完原型,我们来了解原型链。
2025-07-19 13:16:37
757
原创 快速上手UniApp(适用于有Vue3基础的)
一次开发,多端发布(iOS/Android/H5/微信小程序/支付宝小程序等)使用Vue语法,学习成本低丰富的组件和API良好的社区支持和文档。
2025-07-12 11:22:23
625
原创 前端常见 HTTP 状态码
作为前端开发者,与后端 API 交互时,HTTP 状态码是判断请求成败的关键信号。理解常见状态码的含义、责任归属及应对策略,能极大提升调试效率和团队协作。以下是关键状态码的详细解析:首先说一下如何查看状态码:如上图项目运行之后,打开浏览器开发者工具(F12),查看查看状态码。
2025-07-06 18:07:44
949
原创 前端新手看这篇就够了:各种接口请求方式全解析!
参数格式适用请求说明params(Query)GETDELETE放在 URL 后面,key=valuedata(JSON)POSTPUTPATCH放在请求体中,格式是 JSONform-dataPOST适合上传文件,或表单提交POST类似 HTML 表单提交的格式,传统后端常用GET 用 params,POST 用 body;JSON 最通用,form-data 用于上传;Content-Type 决定格式。如果你是初学者,希望这篇文章能帮你彻底理清前端接口请求的套路和姿势!axiosfetch。
2025-06-22 15:13:26
556
原创 前端的跨域问题
跨域浏览器因为安全限制,阻止了网页对不同源(域名/IP/端口号不同)的请求。所谓“源协议(http/https)域名(或IP)端口号只要其中任意一项不同,就叫做“不同源地址和比较是否同源完全相同同源端口不同跨域协议不同跨域IP不同跨域域名不同跨域跨域问题是浏览器安全机制限制的结果,我们可以通过配置 CORS 或使用代理来解决。
2025-06-22 14:54:13
447
原创 一文搞懂强缓存与协商缓存
缓存是一种用于存储之前请求过的数据或资源的技术,目的是减少重复的网络请求,提高页面加载速度,降低服务器压力,并优化用户体验。可以理解为,你之前已经请求过这些数据了,这些数据存在缓存中,用时取即可,而不是每次都要重新请求这些数据。
2025-06-01 14:43:16
1330
原创 前端垫片chimp
Chimp 垫片是一种前端开发工具,主要用于解决浏览器兼容性和样式调整的问题。它通过在页面中插入一些特殊的代码,帮助我们更好地控制页面的布局和样式,让页面在不同的浏览器和设备上都能呈现出一致的效果。Chimp 垫片的核心功能是“兼容性增强”。它能够自动检测浏览器的版本和特性,然后根据这些信息,调整页面的样式和行为。比如,在一些老旧的浏览器中,某些 CSS 属性可能无法正常工作,Chimp 垫片就可以通过一些兼容性代码来解决这个问题,让页面在这些浏览器中也能正常显示。
2025-05-25 14:36:27
900
原创 常见的实时通信技术(轮询、sse、websocket、webhooks)
实时通信技术在现代应用中扮演着至关重要的角色,从即时通讯到在线游戏,其应用广泛。本文探讨了几种常见的实时通信方案:HTTP轮询、长轮询、SSE(Server-Sent Events)、WebSocket和Webhooks。HTTP轮询包括短轮询和长轮询,前者简单但效率低,后者减少了请求次数但服务器压力大。SSE允许服务器主动向客户端推送数据,适合实时通知场景。WebSocket提供真正的双向通信,适合高频交互应用。Webhooks则是服务器主动调用客户端接口,适用于事件驱动的通知。每种技术都有其优缺点和适用
2025-05-17 16:29:54
916
原创 Web 实时通信技术:WebSocket 与 Server-Sent Events (SSE) 深入解析
WebSocket 是一种网络通信协议,它提供了一种在单个 TCP 连接上进行全双工通信的方式。与传统的 HTTP 请求 - 响应模型不同,WebSocket 允许服务器和客户端在连接建立后随时互相发送数据,而无需重新建立连接。这种特性使得它在实时交互场景中具有得天独厚的优势。
2025-05-11 10:25:19
1426
原创 vue3学习之防抖和节流
就像我们按电梯按钮,不管你按多少次,电梯只会在你松手一段时间后才会启动。当事件触发时,不立即执行处理函数,而是等待一段时间(比如300ms)。如果在这段时间内事件再次触发,则重新计时。只有在指定时间内事件不再触发,才会真正执行处理函数。当我们滚动页面时,可能需要执行某些操作,比如懒加载图片、检测滚动位置等。如果不加限制,滚动事件会非常频繁地触发,导致性能问题。在固定的时间间隔内(比如300ms),无论事件触发多少次,处理函数只会执行一次。1、用户停止输入后再搜索(搜索框)
2025-04-26 15:16:40
1204
原创 ts与面向对象
通过这些例子可以看出,面向对象编程能把复杂的代码拆分成一个个独立的对象,每个对象负责自己的事情,就像分工明确的团队。它的好处有:代码复用:一个对象的方法和属性可以在其他地方重复使用,不用重复写代码。结构清晰:对象之间职责分明,改代码或者加功能时,很容易找到对应的地方。可维护性强:出了问题可以快速定位到某个对象,修改也不会影响其他部分。类型安全(TypeScript 特有的优势):提前发现很多类型错误,让代码更健壮。。
2025-04-20 10:40:03
326
原创 TypeScript变量类型
JavaScript (JS) 和 :从 ES6 开始引入。 声明的变量具有块级作用域(),并且不会被提升。 声明的变量也是块级作用域,但必须初始化且不能重新赋值。TypeScript (TS)2. 类型推断JavaScriptTypeScript3. 变量提升(Hoisting)JavaScriptTypeScript4. 总的来说JavaScript 的变量声明方式较为灵活,但缺乏类型检查,容易导致运行时错误。TypeSc
2025-04-13 09:16:30
803
原创 深入理解请求头---基础入门
简单来说,请求头是客户端向服务器发送HTTP请求时附带的额外信息。这些信息以键值对的形式呈现,就像是一份详细的清单,告诉服务器关于请求的各种细节。例如,它可以表明客户端的类型(是浏览器、移动应用还是其他程序)、支持的数据格式、使用的语言偏好等。请求头就像是一封邮件的信封,除了收件人地址(URL)外,还包含了发件人信息、邮件优先级等其他重要内容。
2025-03-30 09:18:49
1046
原创 Git入门到精通
Git 分支管理是 Git 强大功能之一,能够让多个开发人员并行工作,开发新功能、修复 bug 或进行实验,而不会影响主代码库。分支在实际中有什么用呢?假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不能干活了。如果等代码全部写完再一次提交,又存在丢失每天进度的巨大风险。现在有了分支,就不用怕了。各分支之间相互隔离,不影响。
2025-03-22 09:04:10
1015
1
原创 前端组件、组件库使用指南
<button @click="changeMessage">改变消息</button></div>const message = ref('初始消息');message.value = '新的消息';</script>/* 样式 */</style><template><div>
2025-03-16 10:07:22
1806
原创 Vue 3 新手必看:轻松上手 Pinia 状态管理
在 Vue 3 的世界里,状态管理是一个绕不开的话题。如果你正在寻找一个简单、高效且易于上手的状态管理库,那么 Pinia 绝对是你的不二之选。今天,我们就来一起探索 Pinia 的魅力,让你在 Vue 3 开发中如鱼得水。
2025-03-09 08:53:00
845
原创 Vue2 组件通信全解析:8种场景与实战指南
在 Vue 开发中,组件化是核心思想之一,而组件之间的通信则是构建复杂应用的关键方式适用场景优点注意事项props$emit父子组件简单通信官方推荐,直观易用多层传递会导致冗余事件总线兄弟/跨级组件通信灵活,无需依赖层级关系需手动销毁监听,避免内存泄漏Vuex大型应用全局状态管理集中管理,适合复杂交互小型项目可能过于重型provideinject跨层级注入数据避免逐层传递非响应式,需配合其他技术$refs父调子方法快速直接破坏封装性,慎用。
2025-03-02 09:22:39
896
原创 Git入门
Git 是一个开源的分布式版本控制系统,最初由 Linus Torvalds 在 2005 年开发,用于管理 Linux 内核的开发。与传统的集中式版本控制系统(如 SVN)不同,Git 的每个开发者都拥有完整的代码仓库副本,这意味着即使在离线状态下也能进行完整的版本控制操作,极大地提高了开发的灵活性和效率。
2025-02-23 09:25:46
1004
原创 Vue 2 路由指南:从基础到高级
Vue Router 是 Vue.js 官方的路由管理器,它允许你在单页面应用中通过不同的 URL 显示不同的组件。Vue Router 与 Vue.js 核心深度集成,提供了声明式的路由定义、嵌套路由、动态路由、导航守卫等功能,帮助开发者构建复杂的单页面应用。
2025-02-14 16:54:32
746
原创 Vue2常用指令
在 Vue2 里,指令是带有v-前缀的特殊属性。它的主要作用是当表达式的值发生变化时,会相应地将某些特殊的行为应用到 DOM 上。简单来说,指令就是 Vue 提供的一种便捷语法,让我们可以更轻松地操作 DOM 和实现业务逻辑。
2025-02-09 18:05:50
493
原创 js小游戏---2048(附源代码)
开始游戏:游戏结束:通过监听键盘的操作,进行移动变化键盘上下左右键控制页面中所有模块同时向键入的方向移动,如果有两块一样的方块,就进行合并,并且在键盘每操作一次的同时,会随机位置出现新的方块。当所有的格子都有方块,并且没有可以合并的方块时,游戏结束游戏开始,启动计时器,创建棋盘数组,用于存放棋子,监听键盘操作,合并棋子的同时,随机生成新的棋子,将棋子的状态事实更新在数组中,当棋盘占满并且无棋子可以合并,游戏结束,将本局得分和游戏时间显示在排行榜中,点击按钮可以再来一局。我们主要研究js部分,所以html和c
2025-01-24 14:17:10
600
原创 es6基础知识点(持续更新中)
var可以重复声明变量,var声明的变量的作用域是函数域,也就是不管在哪定义他,都能访问到,有预解析,变量提升(调用在前,定义在后时,不会报错undefined)如果想要设置不能重复声明的变量:用let或constlet和const都不能重复声明let的值可以修改,cons的值不能修改但是const定义的引用类型值内容可以修改对于const,如果存储的是一个数值,那么存的就是一个值,如果存储的是一个对象,那么存的就是一个内存地址,不能修改就是针对他实际上存储的东西来说的。
2025-01-18 21:56:59
916
原创 DOM(文档对象模型)中常见的API方法
若要将新 h1 元素插入到现有 p 元素之前,可以通过获取<body>节点作为父节点,然后使用。依据元素的名称获取一组元素节点。给元素添加一个新的 CSS 类名,使该类名所定义的样式规则应用到元素上,例如。设置元素的内部文本内容,它只会处理纯文本,不会解析 HTML 代码。会创建一个新的 div 元素节点,可后续用于添加到文档的合适位置。把新节点插入到父节点中,位于参考节点之前的位置。删除元素现有的一个 CSS 类名,去除该类名所对应的样式效果,如。会将 div 元素内部的内容替换为一个新的段落元素。
2024-11-21 13:22:51
666
原创 如果js和css都能实现某一种效果,用js写更好还是用css写更好
例如,如果一个网页应用的登录功能是通过 JS 实现的,包括验证用户输入、发送请求到服务器等一系列操作,那么当登录流程需要调整(如增加新的验证条件)时,就需要对相关的 JS 代码进行仔细的分析和修改,这比单纯修改 CSS 样式要复杂得多。例如,要实现一个图片的滑动展示效果,通过 JS 可以根据用户的点击操作或者定时设置来控制图片的滑动方向和速度等参数,这需要编写一系列的函数和逻辑代码来实现,而 CSS 本身很难直接实现这样复杂的动态效果。例如,要实现一个元素的隐藏效果,若使用 JS 通过修改元素的。
2024-11-17 15:47:49
739
原创 javascript基础
我们在js0基础部分了解到了什么是js,但是我们还不知道js是怎么在浏览器中执行的,接下来我们来展开说一下。浏览器分为两个部分:渲染引擎和js引擎渲染引擎:用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink,老版本的webkitjs引擎:也称为js解释器。用来读取网页中的js代码,对其处理后运行,比如 chrome浏览器的v8。
2024-11-16 21:42:59
297
原创 HTML中js代码应该写在哪里
async属性表示脚本可以在加载时立即执行,不会阻塞页面的渲染,defer属性表示脚本可以在文档解析完后执行,不会阻塞页面的渲染。这是一种常见的优化方式,它常用于加速页面加载,将脚本放在body底部可以使页面内容先加载,然后再加载js代码,从而加快页面的渲染速度,还可以避免阻塞页面的渲染。这是最常见的用法之一,在head标签中添加script标签会在页面加载的时候立即执行,如果脚本比较大或者需要执行的时间比较长,会阻塞页面的渲染。
2024-11-11 21:01:09
1323
原创 前端开发常用快捷键
多掌握一些快捷键可以帮我们提高编程的效率,快捷键要经常使用才会熟练掌握,最牛的状态是用键盘代替鼠标,希望大家都能早日掌握。同时要注意多回顾一下,可能会有一些以前不知道干嘛用的快捷键,但是现在工作或者学习中能用到的。
2024-11-02 20:49:54
440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人