- 博客(57)
- 收藏
- 关注
RSS订阅原创 【Vue2手录14】导航守卫
摘要 Vue Router导航守卫是实现路由拦截与控制的核心机制，分为全局守卫、路由独享守卫和组件内守卫三类。全局守卫（beforeEach/beforeResolve/afterEach）影响所有路由跳转，常用于登录验证、权限控制等场景；路由独享守卫（beforeEnter）仅作用于特定路由，适合敏感页面保护；组件内守卫（beforeRouteEnter/Update/Leave）则针对组件级控制。关键在于合理使用next()函数控制导航流程，并注意避免死循环等问题。不同类型的守卫在作用范围、执行时机和控
2025-09-14 12:20:31
823
原创 【Vue2手录13】路由Vue Router
摘要： Vue Router 是 Vue 生态的核心路由工具，通过 URL 路径与组件的映射实现单页应用的无刷新切换。核心三要素包括 router-link（导航）、router-view（视图出口）和路由实例。支持 hash（默认）和 history（需后端配置）两种模式，后者更美观但对 SEO 友好。路由配置需遵循模块化原则，通过 routes 数组定义路径与组件的映射关系，支持动态路由、嵌套路由（children 配置）和懒加载优化。进阶特性包括命名路由、重定向、别名等，适合构建复杂的前端路由系统。
2025-09-14 12:11:43
1112
原创 【Vue2手录10】组件生命周期详解
Vue 生命周期详解：Vue 组件的生命周期分为创建、挂载、更新和销毁四个阶段，共包含 8 个核心钩子函数。创建阶段（beforeCreate、created）初始化数据和方法；挂载阶段（beforeMount、mounted）完成 DOM 渲染；更新阶段（beforeUpdate、updated）处理数据变化后的 DOM 更新；销毁阶段（beforeDestroy、destroyed）清理资源。父子组件生命周期遵循「父始父终，子在中」的顺序，理解这些阶段和钩子函数有助于更高效地开发 Vue 应用。
2025-09-13 08:00:00
815
原创 【Vue2手录12】单文件组件SFC
本教程介绍了Vue2项目的基础操作与核心概念。主要内容包括：项目启动方式（npm run serve）、淘宝镜像配置、文件结构解析（node_modules、public、src等目录）、SPA与MPA的对比。重点讲解了入口文件main.js的作用和静态文件index.html的结构，详细说明了单文件组件(.vue)的基本结构，包含template、script、style三部分，并强调template必须只有一个根元素，script必须导出组件配置对象，data必须是函数形式。
2025-09-12 22:50:15
1052
原创 【Vue2手录11】Vue脚手架（@vue_cli）详解（环境搭建+项目开发示例）
Vue 脚手架环境搭建指南 核心需求：Vue 脚手架（@vue/cli）解决手动搭建项目的痛点，包括依赖管理复杂、配置繁琐、开发体验差等问题，提供一键初始化能力。 环境准备： 安装 Node.js（LTS 版本）并配置环境变量 验证安装：node -v 和 npm -v 显示版本号 关键工具： npm：用于安装管理前端依赖 package.json：项目说明书，记录依赖和脚本 package-lock.json：锁定依赖版本保证一致性 脚手架安装使用： 全局安装：npm install -g @vue/cl
2025-09-12 22:08:52
1278
原创 【Vue2手录09】购物车实战
Vue购物车实现案例解析 该案例展示了如何使用Vue实现一个完整的购物车功能，主要包含以下核心内容： 基础结构：采用表格布局展示商品列表，包含选择状态、商品信息、单价、数量和操作按钮。 核心功能： 商品数量加减操作（边界处理确保数量≥1） 单个商品选中/取消功能 全选/取消全选批量操作 自动计算选中商品总价和数量 结算按钮状态控制（无选中商品时禁用） 数据驱动：通过Vue的响应式机制，所有功能都通过修改数据自动更新视图，无需手动操作DOM。 实现方式：使用计算属性动态生成统计数据（总价、已选数量等），避免数
2025-09-12 17:36:56
1434
原创 【Vue2手录08】组件化开发Component
本文介绍了Vue组件化开发的核心概念、注册方式和数据通信机制。主要内容包括： 组件定义与价值：组件是可复用的代码块，具有独立作用域，能提高复用性和可维护性。 组件注册方式：分全局注册（所有实例可用）和局部注册（仅父组件可用），局部注册更符合现代项目需求。 数据隔离原理：子组件data必须是函数，确保实例数据独立。 组件通信：父传子通过Props机制，子传父通过$emit事件机制，多级组件通过链式传递实现。 文章还详细说明了命名规范、模板规范和组件配置项等开发要点。
2025-09-12 15:03:16
1028
原创 【Vue2手录07】监听器Watch
本文系统梳理了Vue.js的核心概念与应用技巧，主要包括四个部分：1）计算属性与方法的区别，强调计算属性的缓存机制；2）表单绑定的实现原理与修饰符使用；3）列表渲染中v-for指令的正确用法与数据响应式处理方法；4）样式动态绑定的实现方式。文章还详细介绍了Vue监听器(watch)的两种写法（简写与完整形式）及其配置项，通过典型应用场景说明如何实现数据变化的响应处理。内容涵盖Vue开发中的关键知识点，配有清晰的语法示例和对比表格，具有实用参考价值。
2025-09-12 14:39:25
1204
原创 【Vue2手录06】计算属性Computed
摘要：本文详细介绍了Vue中表单元素v-model绑定的核心规则与用法，包括单选框、多选框、下拉框等不同表单元素的绑定方式及注意事项。同时讲解了v-model修饰符(.trim、.number、.lazy)的实用场景和效果，最后深入解析了计算属性(computed)的缓存机制和优势，通过对比methods展示了计算属性在性能优化和代码可维护性方面的价值。
2025-09-12 14:24:39
1587
原创 【Vue2手录05】响应式原理与双向绑定 v-model
Vue2响应式原理与v-model双向绑定摘要： Vue2通过Object.defineProperty实现响应式，但存在数组索引修改和对象新增属性等限制。数组需使用变异方法或Vue.set触发更新，对象需通过Vue.set或整体重赋值。v-model是表单双向绑定的语法糖，根据输入框（text/textarea）、单选框（radio）、复选框（checkbox）和下拉框（select）等不同元素类型，自动处理值和状态的同步。实际开发中应优先使用整体重赋值方式更新数据，避免直接修改索引或属性。(149字)
2025-09-11 14:16:32
1257
原创 【Vue2手录04】列表渲染 v-for
Vue的列表渲染通过v-for指令实现，支持数组、对象和整数三种数据类型的循环，能够动态生成重复DOM元素。其核心优势在于替代原生JS的循环操作，实现响应式更新和高效DOM管理。v-for语法为(循环变量) in 数据源，循环变量作用域仅限于当前标签及其子元素。数组循环最常用，对象循环遍历键值对，整数循环从1开始递增。嵌套循环需注意变量名冲突问题。Vue默认采用"就地更新"策略，可能导致元素复用错误，需通过key属性解决。key必须是唯一且稳定的基本类型值，推荐使用数据项的唯一标识而非索
2025-09-11 10:00:00
1814
原创 Vue2手录03-条件渲染 v-if & v-show
本文系统介绍了Vue环境搭建与条件渲染的核心知识点。第一部分对比了本地下载和CDN两种引入方式，并区分了开发与生产环境的差异。第二部分详细讲解了Vue模板语法，包括内容渲染指令、属性绑定和事件绑定。第三部分介绍了事件修饰符和按键修饰符的优化使用方法。第四部分重点剖析了条件渲染的两种实现方式：v-if系列指令（真正控制DOM渲染）和v-show（通过CSS切换显示），强调了它们的性能差异和使用场景。全文内容详实，层次分明，为Vue开发者提供了全面的技术参考。
2025-09-11 09:00:00
912
原创 Vue2手录02-指令
Vue2指令是带有v-前缀的特殊HTML属性，用于实现数据与视图的动态绑定。主要内容包括：1)内容渲染指令(v-text、v-html、插值表达式)，用于将数据渲染到页面；2)v-bind指令，用于动态绑定HTML属性；3)特殊属性绑定，包括class和style的动态控制。Vue指令采用数据驱动思想，通过修改变量自动更新视图，相比jQuery更简洁高效。使用时需注意v-html的XSS风险，以及不同指令的适用场景。
2025-09-10 11:07:46
678
原创 Vue2手录01-Vue2简介
本文介绍了Vue框架的基础知识和核心特性。主要内容包括：Vue的两种引入方式（CDN和本地引入）；Vue作为渐进式框架的优势及其与React、Angular的对比；Vue作者尤雨溪的背景和Vue生态体系；Vue2/Vue3版本的维护情况。重点阐述了Vue的核心特性：数据与视图分离、虚拟DOM和Diff算法带来的性能优势、数据驱动视图原理、组件化开发模式等，并与传统jQuery开发方式进行了对比分析。文章还详细说明了组件化开发的优点和应用场景，以及Vue如何通过虚拟DOM技术解决DOM操作性能瓶颈问题。
2025-09-10 10:03:14
859
原创 JavaScript手录进阶01-跨域问题
AJAX无刷新交互与跨域解决方案 AJAX通过XHR或fetch实现无刷新数据交互，核心价值在于提升用户体验。跨域问题由浏览器同源策略引发，主要解决方案包括： CORS：后端设置Access-Control-Allow-Origin响应头，支持所有HTTP方法，生产环境首选； JSONP：利用script标签跨域特性，仅支持GET请求，适合老项目兼容； 代理服务器：通过Nginx或webpack-dev-server转发请求，开发调试常用； WebSocket：全双工通信协议，适合实时场景如聊天室。 关键注
2025-09-03 15:09:52
808
原创 ES6手录02-字符串与函数的扩展
ES6 字符串与函数扩展摘要 字符串扩展：ES6引入模板字符串（反引号包裹），支持多行文本直接换行和${}嵌入变量/表达式，极大简化字符串拼接。适用于动态HTML构建、日志输出等场景，提升代码可读性。需注意反引号转义和嵌套规则。 函数扩展：ES6函数支持形参默认值（精确判断未传参），解决ES5逻辑或运算符的"假值"误判问题。默认值可为表达式，建议放参数末尾。与箭头函数等特性共同增强函数表达力，优化代码逻辑清晰度。
2025-09-01 18:53:11
1047
原创 ES6手录01-let与const
ES6核心特性与变量声明解析 ES6（ECMAScript 2015）是JavaScript的重大升级，旨在解决早期语言缺陷并支持企业级开发。其核心特点包括： 版本演进：完全兼容ES5，新增箭头函数、类等语法特性，后续每年发布小版本更新 变量声明优化： let解决var的重复声明、变量提升等问题，具有块级作用域和暂时性死区特性 const用于声明不可变常量，必须立即初始化，但对对象/数组属性可修改 开发工具：Babel转码器实现ES6到ES5的转换，保证浏览器兼容性 推荐使用let/const替代var，这
2025-09-01 15:45:58
1071
原创 JQuery手录02-基础核心
jQuery核心指南摘要 jQuery通过$(document).ready()确保DOM加载后执行代码，支持简写$(function(){})，比window.onload更高效。jQuery对象与DOM对象需相互转换（$()[0]或$(domElem)）。选择器兼容CSS语法并扩展了特殊筛选器（如:eq()、:hidden）和表单专用选择器（如:checked）。事件系统提供click()等快捷方法，推荐使用on()支持多事件绑定和委托处理动态元素，one()实现单次触发，off()解绑事件。注意选择器
2025-08-25 16:03:06
1015
原创 JQuery手录01-基本概念与基础使用
jQuery是一个轻量级JavaScript库，简化了DOM操作、事件处理和AJAX交互。它提供丰富的选择器语法，支持ID、类、标签等多种查询方式，并包含过滤、层级等高级选择功能。jQuery通过封装原生JS代码，解决了浏览器兼容性问题，提升了开发效率。虽然现代框架逐渐取代其地位，但在小型项目和快速开发中仍有应用价值。开发时可通过本地引入或CDN加载jQuery，使用$(document).ready()确保DOM加载完成后执行代码。其核心优势在于语法简洁、链式调用和跨浏览器支持。
2025-08-25 15:53:43
654
原创 HTML+CSS：浮动详解
摘要： 浮动（float）是CSS中实现元素脱离文档流排列的经典技术，常用于文字环绕图片和多栏布局。其核心特性包括元素脱离文档流但保留文本环绕、自动收缩宽度及并排排列。但浮动会导致父元素高度坍塌，需通过清除浮动（如伪元素法、overflow法）解决。虽然Flexbox/Grid逐渐替代浮动布局，但掌握浮动仍是前端基础，尤其适用于简单横向排列和传统布局场景。使用时需注意高度坍塌问题并及时清除浮动。
2025-08-20 16:20:23
637
原创 JavaScript手录18-ajax：异步请求与项目上线部署
本文系统介绍了Web开发中的前后端协作流程与AJAX技术。主要内容包括： 开发流程与分工：详细说明产品、UI、前后端、测试、运维的协作流程，明确前后端职责边界。 服务器基础：分析物理服务器、云服务器和虚拟主机的特点，对比主流云服务商，介绍域名注册与解析流程。 AJAX技术：重点讲解异步交互原理，通过代码示例演示XMLHttpRequest的使用步骤，包括请求创建、发送、状态监听和响应处理。 数据流转：完整描述用户操作触发的前后端数据交互链路，从前端请求到数据库查询再返回渲染的全过程。 文章采用技术对比表格、
2025-08-20 15:09:39
1388
原创 JavaScript手录17-原型
本文深入解析JavaScript中的原型与继承机制。原型是JS实现继承的核心，作为共享属性的存储空间，所有实例通过[[prototype]]属性访问原型。构造函数通过new关键字创建实例，其底层原理包括：1)创建空对象；2)建立原型链；3)添加属性；4)返回对象。文章还区分了自有属性和共有属性的特点，阐述了原型链的查找规则。在继承方面，通过原型链实现子类复用父类属性和方法的能力，并提供了具体实现示例。理解这些概念对掌握JavaScript面向对象编程至关重要。
2025-08-16 15:14:48
744
原创 JavaScript手录16-定时器
防抖像“电梯”：按下按钮后，电梯会等10秒关门；如果有人再按，重新等10秒，直到没人按才关门。节流像“红绿灯”：红灯亮起后，无论多少车来，都要等30秒绿灯才放行，固定间隔执行。根据场景选择：需要“等待操作结束”用防抖，需要“控制执行频率”用节流。
2025-08-13 15:34:33
1192
原创 JavaScript手录15-【this】
本文探讨了JavaScript中this关键字的特性与不同场景下的指向规则。核心原则是this由函数调用方式决定，而非定义位置。在DOM事件中指向触发元素，对象方法中指向调用对象，全局作用域中指向window。文章通过案例分析了常见错误（如循环事件绑定）及正确使用this的解决方案，并对比了箭头函数与传统函数的this差异。最后介绍了三种改变this指向的方法：call()、apply()和bind()，分别用于强制指定this并传递参数。掌握this的动态特性对编写健壮的JavaScript代码至关重要。
2025-08-13 10:10:40
1093
原创 实现文字在块元素中水平/垂直居中详解
本文总结了四种CSS文字居中方案：1. 单行文字用line-height匹配高度；2. 多行/弹性布局推荐Flexbox，通过justify-content和align-items实现；3. 兼容旧浏览器用table-cell模拟表格；4. 通用方案采用定位+transform微调。对比显示Flexbox最灵活，定位方案兼容性好，line-height仅限单行，table-cell适合多行旧浏览器场景。建议优先使用Flexbox或定位方案。
2025-08-12 21:52:02
936
原创 JavaScript手录14-DOM事件
本文介绍了DOM事件的基础概念、绑定方式和常见事件类型。DOM事件是HTML文档与用户交互的机制，包括点击、键盘输入等操作通知。事件绑定方式有三种：HTML内联事件（不推荐）、DOM0级属性绑定和DOM2级addEventListener方法（推荐）。常见事件类型包括鼠标事件（click、mouseover等）和键盘事件。文章通过示例代码展示了如何实现鼠标悬停效果和跟踪鼠标位置，帮助读者理解DOM事件的实际应用。
2025-08-09 09:50:16
1027
原创 JavaScript手录13-DOM
DOM（文档对象模型）是前端开发的核心概念，它将HTML/XML文档转换为树形结构对象，使JavaScript能够动态操作网页内容、结构和样式。DOM提供API让开发者可通过代码查找、修改、添加或删除页面元素，并绑定交互事件。DOM树由文档节点、元素节点、文本节点等组成，形成父子关系的层级结构。主要操作包括：元素选择（如getElementById）、创建插入（createElement/appendChild）、内容修改（textContent/innerHTML）、样式调整（style/classLis
2025-08-04 15:34:11
523
原创 JavaScript手录12-内置对象【Date对象】
JavaScript中的Date对象是处理日期和时间的核心工具，它提供了创建、获取、设置和计算日期时间的方法。摘要要点包括：1) 通过new Date()创建实例，支持时间戳、字符串或参数形式；2) 提供getFullYear()、getMonth()等方法获取时间各部分；3) 使用set系列方法修改日期；4) 可通过拼接实现自定义格式化；5) 通过比较时间戳进行日期计算。特别注意月份从0开始计数，星期从0（周日）开始等易错点。Date对象适用于倒计时、日历等时间相关功能的开发。
2025-08-04 15:28:41
769
原创 JavaScript手录11-内置对象【Number&Math】
本文介绍了JavaScript中处理数值的两个核心对象：Number和Math。Number对象既可作为构造函数创建数值对象，也可提供静态方法和属性进行数值检查与转换（如isNaN()、parseInt()等），同时包含实例方法（如toFixed()、toString()）用于数值格式化。Math对象则是纯静态工具对象，提供数学常数（如PI）和计算方法（如取整、随机数、三角函数等）。两者的核心区别在于：Number侧重数值处理与转换，Math专注数学运算功能，且Math不能实例化。掌握这两个对象能有效提升J
2025-07-31 15:29:13
558
原创 JavaScript手录10-内置对象【正则表达式 RegExp】
正则表达式（RegExp）是JavaScript中用于字符串匹配的强大工具，支持两种创建方式：字面量形式（/pattern/flags）和构造函数形式（new RegExp()）。它由模式和标志位组成，支持基础元字符、字符集、预定义字符集、分组、选择匹配等功能。常用方法包括test()、exec()和字符串的match()、replace()等。广泛应用于表单验证、信息提取和字符串格式化，但需注意转义字符和性能问题。
2025-07-29 09:30:00
916
原创 JavaScript手录09-内置对象【String对象】
本文介绍了JavaScript中的内置对象和面向对象编程概念。主要内容包括： JavaScript内置对象是由ECMAScript标准定义的26个可直接使用的对象，提供数据处理、DOM操作等功能。 对比了面向对象编程(OOP)和面向过程编程(POP)的特点，OOP通过封装、继承和多态实现代码复用，而POP注重步骤化的函数实现。 解释了JavaScript中的基本包装类型机制，当基本类型(string/number/boolean)调用方法时，JS引擎会自动创建临时包装对象并销毁，使得基本类型也能使用对象方法
2025-07-28 20:29:11
767
原创 JavaScript手录08-对象
JavaScript 数据类型的核心差异与应用 JavaScript 数据类型分为基本类型和引用类型。基本类型（Number、String、Boolean等）存储在栈内存，具有不可变性，赋值时传递值副本；引用类型（Object、Array等）存储在堆内存，变量保存引用地址，赋值时传递引用，具有可变性。类型判断可使用 typeof（基本类型）、instanceof（引用类型）或 Object.prototype.toString.call()。对象作为核心引用类型，可通过字面量、构造函数或 Object.cr
2025-07-28 19:51:57
952
原创 JavaScript手录07-数组
JavaScript数组核心知识摘要： 数组是有序元素集合，支持多种数据类型，长度动态可变。创建方式包括字面量、构造函数和Array.of()。常用方法分为两类：修改原数组的方法（push/pop/unshift/shift/splice/reverse/sort）和不修改原数组的方法（concat/slice/join等）。数组操作涉及索引访问、长度控制及多种遍历方法，具有灵活的数据处理能力，是JavaScript中最基础且实用的数据结构之一。（150字）
2025-07-27 22:36:28
835
原创 JavaScript手录06-函数
JavaScript函数是封装可复用代码块的核心机制，支持多种定义方式（函数声明、表达式、箭头函数等），具有参数传递、作用域控制、返回值等特性。函数声明存在提升，而表达式和箭头函数则需先定义后调用。参数支持默认值和剩余参数语法，调用方式（普通调用、方法调用、构造函数调用等）会影响this指向。作用域分为全局、函数和块级作用域，其中var变量存在提升，let/const具有块级作用域。函数通过模块化逻辑实现代码复用和抽象，是JavaScript编程的基础构建块。
2025-07-26 17:40:15
717
原创 JavaScript手录04-【if-else&switch】语句
本文介绍了JavaScript中的基本语法结构，包括表达式、语句、函数以及流程控制语句。主要内容涵盖： 表达式与语句：表达式可计算得出值（如算术运算、函数调用等），语句是执行操作的基本单位（如if、for等），函数是封装的可重用代码块。 条件控制语句： if-else语句：根据条件执行不同代码分支 switch语句：多条件匹配结构，使用严格相等比较，需注意break的穿透效应 函数定义与调用： 三种定义方式：函数声明（存在提升）、函数表达式、箭头函数 函数调用通过函数名+参数列表实现 箭头函数具有简写语法和
2025-07-24 17:30:10
1050
原创 JavaScript手录05-循环语句
摘要：JavaScript提供了多种循环结构来实现代码的重复执行，包括for、while、do-while等基本循环，以及for...in（遍历对象属性）和for...of（遍历可迭代对象）等高级循环方式。每种循环适用于不同场景，如for适合已知循环次数，while适合不确定次数但已知终止条件的情况。循环控制语句break和continue可分别用于终止循环或跳过当前迭代。此外，嵌套循环中可使用标签实现特定层的跳出。通过示例和练习，可以掌握各类循环的特性和应用场景。
2025-07-24 17:09:53
881
原创 JavaScript手录03-运算符
JavaScript运算符详解：包括算术、赋值、比较、逻辑等运算符，重点讲解==与===区别，++/--的前后置差异，以及三元运算符和短路求值特性。涵盖运算符优先级及常见使用场景，附带类型检测和实例判断方法，适合快速查阅核心语法要点。
2025-07-15 20:48:57
689
原创 JavaScript手录02-变量与数据类型
本文介绍了JavaScript中的内存机制、变量和数据类型三个核心概念。在内存部分，解释了RAM的特性及变量与内存地址的关系，展示了变量声明和函数调用时的内存操作。变量部分详细说明了var、let、const三种声明方式的区别，并提供了变量命名规则与最佳实践。数据类型部分区分了7种基本数据类型和引用数据类型，介绍了typeof、instanceof和Object.prototype.toString.call()三种类型检测方法。文章通过代码示例直观展示了各知识点的实际应用，帮助读者理解JavaScript
2025-06-25 21:25:57
734
原创 JavaScript手录01-概念篇
摘要 计算机语言是人机交互的核心工具，JavaScript作为浏览器唯一原生语言，在网页开发中占据关键地位。本文系统阐述了计算机语言基础概念、软硬件区别及程序本质，重点介绍了JavaScript的特性、发展历程和四种引入方式（行内事件、内部脚本、外部引入和动态加载），并对比了各方式的适用场景。同时提供了常见编程语言应用领域表，以及脚本加载顺序控制技巧（defer/async属性），为开发者提供了全面的技术参考。
2025-06-23 13:48:00
635
原创 HTML+CSS：如何解决margin塌陷问题
摘要：margin塌陷指相邻元素或父子元素的垂直外边距合并现象。5种解决方案：1) 触发BFC（推荐display: flow-root或overflow: hidden）；2) 添加透明边框/内边距；3) 改用Flex/Grid布局；4) 伪元素隔离法；5) 首尾子元素改用padding。建议优先使用BFC或现代布局方案，既无副作用又能保持代码整洁。特殊场景需注意兼容性，如旧浏览器可用边框/内边距替代。
2025-06-12 15:53:03
240
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人