mayaairi-优快云博客

原创 Vue2 实战：BugList待办事项管理系统 & 代理服务器配置

新增Bug：添加新的待办事项展示Bug列表：以列表形式展示所有待办事项编辑Bug：双击进入编辑模式，修改Bug内容删除Bug：单个删除或批量删除已解决的Bug状态切换：标记Bug为已解决/未解决全选/全不选：一键切换所有Bug的状态数据持久化：使用localStorage保存数据，刷新不丢失技术点在本项目中的应用组件化开发拆分为Header/Main/Footer/Item四个组件Props向下传递App向Main和Footer传递bugList$emit向上传递。

2026-09-08 19:30:00 201

原创 Vue2 组件通讯（四）：v-model、scoped样式、mixins与plugins

mixins（混合）是一种分发Vue组件中可复用功能的方式。当多个组件有相同的配置项（如data、methods、生命周期等）时，可以将这些公共部分提取出来，通过mixins混入到各个组件中。data() {return {num: 123,commonData: '公共数据'},methods: {getMsg() {console.log('来自mixins的方法');},alert('这是公共方法');},console.log('mixins的mounted执行了')

2026-09-08 19:15:00 155

原创 Vue2 组件通讯（三）：全局事件总线、PubSub、插槽与组件实例属性

给项目中所有的组件找一个共享的vc对象，所有的事件都绑定到这个共享对象上，所有组件都通过这个共享对象来传递数据。共享对象必须具备两个特征能够让所有的vc共享访问拥有$on$off$emit等方法PubSub是一种跨框架通用的消息机制，通过发布/订阅模式实现组件间的通信。它不仅限于Vue，在任何前端框架甚至原生JS中都可以使用。安装插槽类型用途子组件定义父组件使用默认插槽单一内容分发<slot>直接写内容具名插槽多内容分发#xxx或v-slot:xxx作用域插槽子传数据给父组件渲染。

2026-09-08 19:00:00 352

原创 Vue2 组件通讯（二）：ref、自定义事件与provide/inject实战

自定义事件是Vue实现子传父的标准方式。实现步骤父组件中：在子组件标签上绑定自定义事件子组件中：通过$emit触发自定义事件并传递数据父组件中：编写事件回调处理数据除了在模板中绑定，还可以通过JS代码动态绑定自定义事件。这种方式更加灵活。// 通过代码给子组件绑定自定义事件},methods: {对应模板<template><div></div>自定义事件也支持一些修饰符，用于控制事件的行为。-- .native修饰符：绑定原生事件 -->-- .once修饰符：只触发一次 -->

2026-09-08 18:45:00 205

原创 Vue2 组件通讯（一）：Props传值完全指南

在Vue应用中，组件是独立的存在。为了让组件之间能够协同工作，我们需要一套完善的数据通信机制。常见的组件关系父子关系：最常见的组件关系兄弟关系：同属于一个父组件的两个子组件跨级关系：祖孙组件之间的通信本文重点：使用Props 实现父子组件和跨级组件的通信。父组件中：定义一个方法，用于接收数据和处理逻辑父组件中：将这个方法通过props传递给子组件子组件中：通过props接收父组件传过来的函数，在需要传递数据时调用该函数并将数据作为参数传入通信方式方向核心API适用场景Props。

2026-09-08 18:30:00 242

原创 Vue2 组件化（二）：单文件组件与Vue脚手架完全指南

单文件组件：一个文件对应一个组件，文件后缀名为.vue。与之相对的是非单文件组件：在一个HTML文件中定义了多个组件。特点.vue文件是Vue框架规定的，只有Vue框架能够识别浏览器无法直接打开运行.vue文件需要通过Vue框架编译，最终生成浏览器能识别的HTML、JS、CSSVue CLI（Command Line Interface）是Vue官方提供的标准化开发平台。它能做什么将.vue代码编译生成HTML、CSS、JS代码自动将代码发布到内置的服务器上为Vue开发提供一条龙服务。

2026-09-07 19:00:00 278

原创 Vue2 组件化（一）：从模块到组件，彻底搞懂组件化开发

在传统的网页开发中，一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）。维护困难：所有的JS和CSS都在全局作用域中，容易出现命名冲突，代码错综复杂复用性差：想要复用一段代码，往往需要复制粘贴，难以维护组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。模块：一个大的JS文件按照模块化拆分规则进行拆分，生成多个JS文件，每一个JS文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。💡关系说明。

2026-09-07 18:45:00 499

原创 Vue2 生命周期完全指南：从创建到销毁的8个钩子函数

生命周期：一个事物从出生到最终的死亡，整个经历的过程叫做生命周期。阶段钩子函数特点适合做什么初始阶段无法访问data和methods添加loading、全局事件总线created可访问data和methods请求数据、结束loading、添加定时器挂载阶段页面未渲染最后的DOM操作准备mounted页面已渲染操作DOM、请求数据更新阶段数据已变，页面未更新访问旧DOM、移除事件监听updated页面已更新数据统一处理销毁阶段实例仍在，但功能即将失效。

2026-09-07 18:30:00 781

原创 Vue2 响应式原理深度解析：数据劫持、数组响应式与$set方法

响应式：修改data后，页面自动改变/刷新。这就像在使用Excel的时候，修改一个单元格中的数据，其他单元格的数据会联动更新——这就是响应式。在Vue中，当我们修改data中的某个属性时，页面上所有使用该属性的地方都会自动更新，无需手动操作DOM。data对象↓Object.defineProperty 遍历所有属性↓为每个属性添加 getter / setter↓getter：收集依赖（谁在用这个数据）setter：通知依赖更新（数据变了，快更新视图）↓视图自动更新。

2026-09-07 18:15:00 320

原创 Vue2 实战进阶：表单数据收集、指令系统与自定义指令全解析

当Vue内置指令无法满足需求时，我们可以创建自定义指令。在组件的directives选项中定义，仅在该组件中可用。// 简写形式（在bind和update时触发）},// 完整写法focus: {// 指令第一次绑定到元素时调用// 初始化工作},// 元素插入父节点时调用el.focus();},// 所在组件更新时调用// 更新处理通过注册，在整个应用中都可使用。// 全局注册// 指令绑定到元素时},// 元素插入父节点时});

2026-09-07 18:00:00 286

原创 Vue2 核心实战：样式绑定、条件与循环渲染、虚拟DOM及列表操作

虚拟DOM：在内存中模拟真实DOM的一种JavaScript对象结构。diff算法：一种能够快速比较两个事物不同之处的算法。Vue用它来比较新旧虚拟DOM树，找出最小差异并进行高效的DOM更新。功能推荐方案说明Class动态绑定字符串/数组/对象根据场景灵活选择Style动态绑定对象形式最常用，可读性好条件渲染（少切换）v-if初始渲染效率高条件渲染（频繁切换）v-show切换开销小列表渲染v-for+ 唯一key提高diff效率列表过滤计算属性有缓存，性能好列表排序。

2026-09-02 19:00:00 233

原创 Vue2 进阶必备：事件修饰符、计算属性与侦听器全攻略

/ 全局自定义按键修饰符// 将 'huiche' 定义为回车键计算属性：使用Vue的原有属性，经过一系列的运算/计算，最终得到的一个全新的属性。原有属性data对象中的属性全新属性：生成了一个新属性，有自己的属性名和属性值完整写法（支持读取和设置）get() {},// 修改依赖数据（避免直接修改计算属性自身）简写写法（只读情况，最常用）

2026-09-02 18:45:00 243

原创 Vue2 事件绑定完全指南：从入门到原理

指令的语法格式<标签 v-指令名:参数名="表达式">{{插值语法}}</标签>“表达式”位置可以写：常量、JS表达式、Vue实例所管理的XXX事件绑定指令v-onv-on:事件名="表达式"v-on:click="表达式"表示鼠标单击事件v-on:keydown="表达式"表示键盘按下事件配置项methods所有事件所关联的回调函数，需要在Vue实例的配置项methods中进行定义。methods是一个对象，可以定义多个回调函数。v-on简写形式v-on:click→@click。

2026-09-02 18:30:00 232

原创 Vue2 核心进阶：指令语法与数据代理完全解析

当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。MVVM是一种前端架构模式，包含三个核心部分：组成部分英文含义MModel数据模型VView视图界面VMViewModel视图模型，负责M和V之间的通信概念说明示例插值语法{{ }}用于标签体内动态内容指令语法v-开头的属性，用于标签属性动态绑定v-bind单向数据绑定（数据→视图）v-model双向数据绑定（数据↔视图），仅限表单元素MVVMModel-View-ViewModel 架构模式vm。

2026-09-02 18:15:00 170

原创 Vue2 初相识：从零开始搭建你的第一个应用

概念说明示例Vue实例通过new Vue()创建的对象，是所有功能的起点。挂载将Vue实例与一个DOM元素关联起来，让Vue管理这个区域。或el: "#app"data定义响应式数据的配置项。数据变化，视图自动更新。template定义页面的HTML结构。可以写在实例内，也可以直接写在挂载点中。插值语法用双花括号{{ }}将数据绑定到模板中。响应式数据变化自动更新视图的核心机制。修改，页面立刻变为World希望这篇入门指南能帮助你顺利开启Vue的学习之旅！

2026-09-02 18:00:00 218

原创 ES12~ES14新特性完全指南：逻辑赋值、私有属性、replaceAll与更多实用特性

JavaScript每年都在进化，ES12到ES14带来了许多提升开发效率和代码可读性的新特性。本文系统讲解逻辑赋值操作符||=&&=??）、数字分隔符Promise.race()竞速类的公有/私有/静态私有属性at()方法等核心知识点。掌握这些内容，让你的代码更简洁、更安全、更现代化。// 公有属性name;age;// 静态属性// 构造方法// 静态方法（只有类本身能调用）// 实例化const girl = new Person("晓红", 18, "45kg");

2026-09-01 20:15:00 194

原创从Promise到ES11：JavaScript异步编程与现代特性完全指南

从ES6到ES11，JavaScript不断演进，带来了众多强大的新特性。本文系统讲解Promise异步编程Async/Await语法糖ES7~ES11核心新特性（包括可选链、空值合并、动态导入、BigInt等），并附上基于Promise的AJAX封装实战代码。掌握这些内容，你将能够写出更优雅、更健壮的现代JavaScript代码。Promise是JavaScript中异步编程的解决方案，用于解决传统回调函数带来的回调地狱问题。特性说明三种状态。

2026-09-01 20:00:00 371

原创 ES6模块化完全指南：export/import三种暴露与三种引入方式详解

模块化是现代前端开发的基石。ES6模块化使用import和export关键字，让JavaScript代码的组织更加清晰、高效。本文将系统讲解ES6模块化的三种暴露方式（分别暴露、统一暴露、默认暴露）和三种引入方式（通用导入、解构赋值导入、简便导入），帮助你在项目中灵活运用模块化开发。模块化是将复杂的程序拆分成多个独立的模块文件，每个模块负责特定的功能。优势说明提高复用性相同的功能模块可以在多个地方重复使用提高可维护性代码按功能拆分，修改和维护更加方便避免命名冲突。

2026-09-01 19:45:00 236

原创 ES6核心特性完全指南：let/const、解构赋值、箭头函数与数据结构

ECMAScript 6（简称ES6）是JavaScript的一次重大升级，引入了众多新特性和语法糖，极大地提升了开发效率和代码可读性。本文系统讲解ES6的15个核心知识点，涵盖变量声明解构赋值模板字符串箭头函数Symbol迭代器与生成器Set与Map等。掌握这些内容，你将能够写出更优雅、更高效的现代JavaScript代码。本文系统梳理了ES6的15个核心知识点：主题核心要点let/const块级作用域、无变量提升、不与window挂钩解构赋值数组/对象/字符串解构，变量交换，函数参数。

2026-09-01 19:30:00 245

原创 JavaScript高级核心知识完全指南（二）：深浅拷贝、防抖节流、懒加载与预加载

在日常开发中，深浅拷贝、防抖节流、图片懒加载和预加载是前端工程师必须掌握的进阶技能。它们不仅关系到代码质量，更是性能优化的关键手段。本文将从原理到实现，系统讲解这六大核心知识点，并附上可直接复用的代码。防抖：触发高频事件后，n秒内函数只会执行一次。如果n秒内高频事件再次被触发，则重新计算时间。本质：将多次执行变为最后一次执行。生活类比：电梯关门——如果有人进来，就重新等待几秒再关门。节流：高频事件触发，但在n秒内只会执行一次。节流会稀释函数的执行频率。本质：将多次执行变成每隔一段时间执行一次。生活类比。

2026-08-31 19:00:00 463

原创 JavaScript高级核心知识完全指南（一）：原型链、闭包、this指向与经典面试题

JavaScript高级部分是前端面试的重中之重，也是从初级开发者迈向中高级的关键门槛。本文系统讲解数据类型检测原型与原型链闭包机制this指向问题以及经典面试题解析。掌握这些内容，你将真正理解JavaScript语言的底层运行机制。调用方式this指向普通函数调用window（严格模式下为undefined对象方法调用该对象构造函数调用新建的实例对象指定的对象事件回调事件源元素定时器回调window箭头函数继承外层作用域的this。

2026-08-31 18:30:00 508

原创 JS AJAX完全指南（二）：Axios五种请求方法、跨域解决方案与列表管理系统实战

本文是AJAX系列的第二篇，深入讲解Axios的五种请求方法全局配置跨域解决方案（JSONP与CORS），并通过一个完整的列表管理系统实战案例串联所有知识点。掌握这些内容，你将能够独立完成前后端数据交互的增删改查操作。本文系统梳理了AJAX第二部分的完整知识体系：主题核心要点Axios五种方法GET查询、POST新增、PUT完整更新、PATCH部分更新、DELETE删除全局配置baseURL统一管理、timeout超时控制跨域解决方案。

2026-08-31 18:00:00 426

原创 JS AJAX完全指南（一）：从原生XHR到axios，再到JSON Server模拟数据

AJAX是现代前端开发中与服务器交互的核心技术。本文将从AJAX基础概念讲起，系统讲解HTTP协议原生XMLHttpRequest发送GET请求axios库的使用GET请求参数传递数据渲染实战以及JSON Server搭建模拟接口。掌握这些内容，你将具备完整的前后端数据交互能力。AJAX全称为（异步的JS和XML）。无刷新获取数据，按需请求，提高网站性能。特性说明本质不是新的编程语言，而是将现有标准组合使用的新方式核心能力在浏览器中向服务器发送异步请求最大优势无需刷新页面即可与服务器通信。

2026-08-31 17:30:00 634

原创从零封装一个Swiper轮播图组件：面向对象+无缝滚动+缓动动画

轮播图是前端开发中最常见的组件之一。本文将带你从零开始，使用面向对象的方式封装一个功能完整的轮播图组件，涵盖无缝轮播缓动动画事件绑定this指向处理等核心知识点。最终你将得到一个可直接复用的Swiper类。本文从零封装了一个功能完整的轮播图组件，涉及的核心知识点：知识点具体应用面向对象Swiper类封装，方法模块化无缝轮播复制首图 + 边界跳转缓动动画速度递减，平滑过渡事件绑定鼠标悬停、点击、导航点切换this指向箭头函数、bind、that备份三种方案。

2026-08-28 19:30:00 185

原创 JS动画封装完全指南：从原理到实战，打造高性能动画库

动画是前端开发中提升用户体验的重要手段。本文将从零开始，一步步带你掌握JavaScript动画的实现原理、函数封装、性能优化以及回调函数的使用。最终你将能够封装出一个功能完善的通用动画函数，可直接应用于实际项目中。技术点说明定时器控制启动动画，停止动画位置属性offsetLeft获取元素当前位置缓动算法速度 = (目标值 - 当前位置) / 系数，速度随距离减小而降低函数封装参数化设计，提高代码复用性和可维护性回调函数动画完成后执行额外逻辑。

2026-08-28 19:15:00 313

原创 JS JSON与本地存储完全指南：数据交互与持久化存储

在前端开发中，数据的交互和存储是两个核心需求。本文将系统讲解JSON数据格式的定义与转换、XML与JSON的对比sessionStorage和localStorage两种浏览器存储方式，并通过一个完整的“记住用户名”案例串联所有知识点。掌握这些内容，你将能够熟练处理前后端数据交互和浏览器本地存储。即JS对象表示法，是一种轻量级的数据交换格式。为什么要用JSON？问题解决方案JS对象只有JS自己能识别JSON是字符串格式，所有语言都能识别不同语言间数据交互困难。

2026-08-28 19:00:00 165

原创 JS BOM完全指南（二）：事件轮询、三大尺寸家族与浏览器对象详解

本文是BOM系列的第二篇，深入讲解JavaScript的事件轮询机制（同步与异步的执行原理）、Location/Navigator/History三大浏览器对象的详细用法，以及Offset、Client、Scroll三大尺寸家族的完整对比与应用。掌握这些内容，你将彻底理解JS的异步执行机制和页面尺寸测量的核心技术。使用offset系列相关属性可以动态地得到该元素的位置（偏移）和大小。特点获得元素距离带有定位祖先元素的位置获得元素自身的大小（宽度和高度）返回的数值都不带单位使用client。

2026-08-28 18:00:00 358

原创 JS BOM完全指南（一）：核心对象、页面事件与定时器详解

BOM（浏览器对象模型）是JavaScript与浏览器交互的核心接口。本文系统讲解BOM的五大核心对象页面加载事件（三种写法对比）、窗口大小改变事件以及定时器（setInterval与setTimeout）。掌握这些内容，你就能熟练操控浏览器窗口和行为。即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列的对象构成，并且每个对象都提供了很多方法与属性。调用方式this指向直接调用window对象的方法调用该对象构造函数中的this。

2026-08-28 17:30:00 161

原创 JS DOM事件高级完全指南：绑定、事件流、委托与兼容处理

事件处理是JavaScript与用户交互的核心机制。本文系统讲解三种事件绑定方式事件解绑方法DOM事件流（捕获与冒泡）、事件对象的属性和方法、事件委托的实现原理以及键盘事件处理。掌握这些内容，你就能写出高效、健壮的前端交互代码。事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就叫事件流。本文系统梳理了JavaScript DOM事件高级的完整知识体系：主题核心要点事件绑定。

2026-08-27 19:30:00 328

原创 JS DOM节点操作完全指南：增删改查与性能优化

DOM节点操作是JavaScript动态操作网页的核心技术。本文系统讲解节点的创建与添加替换与删除克隆复制以及多种创建方式的对比，最后给出性能优化的建议。掌握这些内容，你就能轻松实现页面的动态内容管理。本文系统梳理了JavaScript DOM节点操作的完整知识体系：主题核心要点创建节点创建元素，创建文本添加节点末尾追加，指定位置插入替换删除替换，删除克隆节点浅拷贝，深拷贝其他方式innerHTMLinnerText各有优劣性能优化。

2026-08-27 19:00:00 393

原创 JS DOM属性操作完全指南：内容、样式与自定义属性

DOM操作的核心在于操作元素的内容、属性和样式。本文系统讲解如何使用JavaScript修改网页元素的文本内容HTML内容标准属性样式属性以及自定义属性，并介绍经典的排他思想算法。掌握这些内容，你就能灵活操控网页的方方面面。方法功能适用场景element.getAttribute('属性')获取属性值自定义属性和标准属性element.setAttribute('属性', '值')设置属性值自定义属性和标准属性element.removeAttribute('属性')移除属性自定义属性和标准属性。

2026-08-27 18:30:00 511

空空如也

空空如也