01star️-优快云博客

原创小兔鲜电商项目（一）：项目准备、Layout模块、Home模块

在main.js中定义全局指令。

2025-12-23 20:55:27 916

原创 Vue3：组合式API、Vue3.3新特性、Pinia

本质：在原有传入数据的基础上，外层包了一层对象，包成复杂类型。底层包成复杂类型之后，再借助reactive实现的响应式。create-vue是Vue官方新的脚手架工具，底层切换到了vite，为开发提供快速响应。作用和场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信。3、数据和函数需要在setup最后return中写，才能在模板中应用。props传递的数据，模板中可以直接使用，脚本中。使用前需要从pinia中导入，可以解构且不会使数据丢失响应式。修改数据：谁的数据，由谁维护。

2025-12-16 15:00:48 735

原创 Vue2（四）：自定义创建项目、ESlink语法规范、vuex（state、mutations、actions、getters）、模块module、组件库vant

本文摘要：文章介绍了Vue项目开发中的关键技术要点。首先讲解了基于VueCli创建项目时的代码规范配置，包括ESLint自动修复和JavaScript Standard Style规范。重点阐述了Vuex状态管理的核心概念（state、mutations、actions、getters、modules）及其应用场景。在智慧商城项目部分，详细说明了组件库Vant的使用、vw适配方案、路由配置（包括一级/二级路由）以及常用功能实现（如图形验证码和Toast提示）。文章涵盖了Vue项目从基础配置到状态管理、UI组

2025-12-08 16:04:56 965

原创 Vue2(三)：自定义指令、插槽、路由、组件缓存

本文摘要： Vue.js开发指南包含三部分核心内容：1.自定义指令，介绍了基本语法、传值机制及v-loading指令封装；2.插槽使用，包括默认插槽、具名插槽和作用域插槽；3.路由管理，涵盖SPA特性、VueRouter基本使用（5+2步骤）、声明式导航（router-link）、传参方式（查询参数和动态路由）以及编程式导航。重点讲解了路由模块封装、重定向、404处理和模式设置等进阶功能，为Vue项目开发提供了完整的导航解决方案。

2025-12-01 20:49:46 1026

原创 Vue2（二）：生命周期、案例、工程化开发入门、组件（scoped，data函数）、组件通信（props）、v-model详解、.sync修饰符、ref和$refs、Vue异步更新和nextTick

本文系统梳理了Vue.js核心知识点，主要内容包括：1）生命周期钩子函数应用场景，如created阶段初始化数据、mounted阶段操作DOM；2）工程化开发流程，包括脚手架结构、组件化开发和注册方式；3）组件通信方案，涵盖父子组件props/$emit、非父子组件eventbus和provide/inject；4）v-model双向绑定原理及其在表单组件封装中的应用；5）特殊指令如.sync修饰符和$nextTick的使用场景。通过"小黑记账清单"案例演示了数据获取、图表渲染等综合应用

2025-11-28 15:35:54 778

原创 Node.js(了解)：fs、path模块、url端口号、模块化、包、npm

前端工程化：开发项目直到上线，过程中集成的所有工具和技术。模块：类似插件，封装了方法/属性fs模块：封装了与本机文件系统进行交互的方法/属性写入过程中有错误，err参数就有值，否则，err参数就为空3、path模块 - 路径处理建议：在Node.js代码中，使用绝对路径补充：__dirname（注意：前面是两个下划线）内置变量（获取当前模块目录 - 绝对路径）注意：Windows：路径是\ Mac：路径是/注意：path.join()会使用特定于平台的分隔符，作为界定符，将所有给定的

2025-11-18 14:18:07 522

原创 Ajax（二）：Bootstrap、XHR、Promise、同步、异步代码、回调函数地狱、事件循环、宏任务微任务、Promise.all方法、token、axios请求拦截器和响应拦截器

然后执行下一段，控制台打印，然后出栈；执行下一段，发现是异步，然后放入宿主环境；，浏览器倒计时发现是0s，然后将这个回调函数放入宏任务队列中排队，然后js引擎继续执行代码，然后放入调用栈进行调用，代码运行时，读到第一句会把它放进调用栈，调用执行，在控制台打印，执行后出栈；，将它推入调用栈，控制台打印，出栈，2s的倒计时结束后，会推入任务队列中，然后调用栈调用......，调用栈是空闲的，然后立即执行第一句代码，控制台打印1；执行，然后浏览器开始倒计时，发现是0s，然后会立即把要执行的。

2025-10-22 09:09:26 853

原创 Ajax（一）：axios、URL（查询参数）、请求方法和数据提交（axios请求配置、axios）、HTTP协议（请求报文、错误排查、HTTP响应状态码）、接口文档、form-serialize插件

URL：统一资源定位符，俗称网页地址，简称网址。用于访问网络上的资源。http协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式。定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。注意：axios在运行时把参数名和值，会拼接到url?Ajax是浏览器与服务器进行数据通信的技术。语法：使用axios提供的params选项。协议范围：http、https...组成：协议://域名/资源路径。作用：能够快速收集表单元素的值。标记资源在服务器下的具体位置。标记服务器在互联网中的方位。

2025-10-19 21:31:29 335

原创 Vue2（一）：创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性

Vue：一个构建用户界面的渐进式框架。

2025-10-18 14:08:30 840

原创 JS进阶（四）：深浅拷贝、异常处理（throw、try/catch捕获异常、debugger）、处理this、改变this（call、apply、bind）、性能优化（防抖、节流）

.box {<script>let i = 0 // 让这个变量++// 鼠标移动函数// 如果里面存在大量操作 dom 的情况，可能会卡顿</script>综合案例

2025-10-13 21:44:43 283

原创 JS进阶（三）：面向对象、面向过程、原型、constructor属性、对象原型、原型链

面向过程，就是按照我们分析好的步骤，按照步骤解决问题。作用：该属性指向该原型对象的构造函数。每个原型对象里面都有个constructor属性。__proto__串起来的链。面向对象是以功能来划分问题，而不是步骤。（constructor构造函数）

2025-10-13 15:28:29 305

原创 JS进阶（二）：创建对象的方式、构造函数、实例成员&静态成员、内置构造函数（Object、Array、String、Number）

本文介绍了JavaScript中对象的创建与操作方法，主要包括三种创建方式（对象字面量、new Object、构造函数）及实例化过程。详细讲解了实例成员和静态成员的区别与用法，并介绍了内置构造函数Object、Array、String、Number的常用方法，如Object.keys()、reduce()、split()等。最后通过一个购物车案例，综合运用数组方法map()、reduce()和字符串处理技巧，实现商品列表渲染和总价计算功能，展示了实际开发中如何操作对象数据。文章中包含了大量代码示例，帮助理解

2025-10-10 20:40:52 417

原创 JS进阶（一）：作用域（局部全局、作用域链、垃圾回收机制、闭包、变量提升）、函数（动态参数、剩余参数）、解构（数组对象）、箭头函数（参数、this）遍历数组forEach方法、筛选数组filter方法

如上图，数组属于复杂数据类型，放在堆中，在栈中存放找到数组的地址，此时arr可以通过地址找到数组，同时，有地址指向数组，因此数组的被引用次数为1；然后从上往下依次执行，arr = null ，null属于简单数据类型，放在栈中，如下图所示，此时内存中没有地址，不再指向[ 1, 2, 3, 4 ]，说明没有被引用，因此-1，引用次数为0，释放内存。但是，o1.a = o2说明o2被引用一次，使用次数+1，同理，o1也被引用一次，使用次数+1，这就是嵌套引用（循环引用），那么o1，o2就不会被回收。

2025-10-09 09:36:17 573

原创正则表达式（语法、元字符（边界符、量词、字符类）、修饰符）、PC端网页特效（offset、client、scroll、动画系列）、案例：放大镜效果

script>// true</script>指的是某些常见模式的简写方式。

2025-10-05 14:30:03 157

原创 BOM：延时函数、JS执行机制、location对象、navigator对象、history对象、本地存储（存储、获取、删除、修改）、字符串拼接、map方法、join方法、综合案例

<button>后退</button><button>前进</button>// 获取元素})})

2025-10-04 09:09:43 1044

原创 DOM（四）：日期对象、节点操作（查找子、父、兄弟节点；增加节点；删除节点）、M端事件、插件、学生信息案例

本文摘要主要涵盖JavaScript核心知识点：1. 日期对象操作：包括实例化、获取年月日时分秒、格式化日期显示、时间戳获取与转换，以及实现倒计时案例。2. DOM节点操作：详细讲解父节点/子节点/兄弟节点查找方法，节点创建、追加、克隆和删除操作，并通过学成在线案例展示动态内容生成。3. 移动端触摸事件处理。4. 综合案例：学生信息管理系统，完整实现数据录入、存储、渲染和删除功能，重点包括表单验证、数组操作与DOM动态更新，以及事件委托优化删除操作性能。所有案例均配有完整代码实现和详细注释。

2025-09-30 14:47:52 414

原创 DOM（三）：事件捕获、冒泡、阻止冒泡、事件委托、页面加载事件、页面滚动事件、页面尺寸事件

该文档主要介绍了JavaScript事件处理相关知识点，包括：1）表单全选/反选功能实现，通过监听复选框事件实现联动效果；2）事件流机制，包含捕获和冒泡阶段及阻止冒泡方法；3）事件委托技术，利用事件冒泡原理提高性能；4）鼠标事件区别（mouseover/mouseout与mouseenter/mouseleave）；5）页面加载、滚动、尺寸等常用事件；6）两个实战案例：仿京东导航栏和电梯导航实现，展示如何结合滚动事件和DOM操作实现交互效果。文中通过完整代码示例演示了各知识点的具体应用。

2025-09-28 08:55:02 327

原创 DOM（二）：事件监听、事件类型、事件对象、环境对象、回调函数、Tab栏切换

本文介绍了JavaScript事件处理的基础知识和实际应用案例。主要内容包括：1）事件监听基础，通过按钮点击、广告关闭等案例展示事件绑定方法；2）多种事件类型应用，如轮播图控制、搜索框交互、评论发布等；3）事件对象获取与使用，实现回车发布评论功能；4）环境对象this的指向规则；5）回调函数概念；6）Tab栏切换案例。通过多个完整的代码示例，展示了如何利用事件处理实现页面交互功能，包括DOM操作、样式修改、定时器控制等常见需求。

2025-09-26 16:51:39 369

原创 DOM（一）：DOM树、DOM对象、innerText属性、innerHTML属性、、操作元素属性、间歇函数、轮播图

本文介绍了DOM操作的基础知识和常用方法。主要内容包括：1）DOM基础概念及DOM树结构；2）使用querySelector和querySelectorAll获取DOM元素；3）通过innerText和innerHTML修改元素内容；4）操作元素样式属性（style、className、classList）；5）表单元素属性和自定义属性操作；6）定时器setInterval的使用；7）通过轮播图案例综合应用DOM操作技术。文章提供了大量代码示例，涵盖DOM操作的核心知识点，适合前端开发者学习参考。

2025-09-25 16:38:58 366

原创 JavaScript基础---基本语法

JavaScript：一种运行在浏览器的编程语言组成：此前学过几种编程语言，故相通的不再记录。

2025-09-24 10:48:55 689

原创 flex布局

数值越小，排列越靠前，默认为0。

2025-09-21 10:18:43 149

原创浏览器私有前缀、CSS3：2D转换、动画、3D转换

注：倒数第三行是scale。

2025-09-20 15:24:02 958

原创 HTML5和CSS3新增的一些属性

如果盒子模型改为box-sizing：border-box;nth-of-type则是把指定的孩子排列序号，执行时先看标签，然后再回去看nth-of-type是第几个孩子，下面这样就可以选出来。nth-child会把所有的孩子排序号，执行时先看nth-child（1）然后再往前看找标签，下面这种情况就是选不出来的。n也可以是公式，同时，n从0开始计算，注意nth-child(0)这里面必须是n，不能是其他的字母。原则：谁动给谁加，也就是谁要过渡，就把transition放在谁里面。

2025-09-14 21:19:24 1137

原创 CSS高级技巧---精灵图、字体图标、布局技巧

由此，我们发现第四个盒子的右边框被压到了，此时只需要当前的盒子添加position: relative;多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。字体图标展示的是图标，但是本质上是字体，具有字体的属性。6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

2025-09-13 21:37:11 1189

原创 CSS基础（四）---定位、叠放次序、元素的显示与隐藏

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）。语法：选择器{ z-index: 1;1.数值可以是正整数、负整数或0，默认是auto，数值越大，越靠上（数值大的盒子会压住数值小的盒子）。2.如果属性相同，则按书写顺序，后来者居上。3.数字后面不能加单位。4.只有定位的盒子才有z-index属性。1）标准流：可以让盒子上下排列或者左右排列，垂直的块级只显示就用标准流布局。2）浮动：可以让多个块级元素一行显示或者左右对齐盒子，

2025-09-12 20:14:27 985

原创 CSS基础（三）---盒子模型、盒子阴影、圆角边框、浮动、清除浮动

2、一个元素浮动了，理论上其余的兄弟元素也要浮动：一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。如果不给父盒子高度，由于子盒子浮动不占位置，最后父盒子高度会变成0，会影响后面的标准流的盒子。左盒子加了浮动，此时左盒子不再保留原先的位置，蓝色盒子迎面扑来，粉色盒子就在蓝色盒子下面，如上图的效果。浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

2025-09-09 20:55:29 907

空空如也

空空如也