- 博客(42)
- 收藏
- 关注
RSS订阅原创 局部路由守卫
局部路由守卫为我们提供了更细粒度的路由控制，允许我们在特定的路由或组件级别添加鉴权和逻辑处理。局部路由守卫分为path守卫和component守卫，它们分别适用于不同的场景。path。
2025-04-13 13:53:03
218
原创 全局后置守卫与标题栏切换
在单页面应用（SPA）中，用户在不同页面间切换时，页面标题的动态更新能显著提升用户体验。全局后置守卫是实现这一功能的理想选择，它不仅能确保标题与当前页面内容相符，还能用于记录用户行为，为后续的用户画像构建提供数据支持。
2025-04-13 13:52:12
185
原创 全局前置守卫与购物车页面鉴权
是全局前置守卫，每次路由切换前都会执行。若要访问购物车页面且用户未登录，就会跳转到登录页面；若已登录或者访问的不是购物车页面，就正常放行。在很多应用里，并非所有页面都能随意访问。例如购物车页面，用户需先登录才能查看。这时可以利用全局前置守卫来实现这一鉴权功能。全局前置守卫的书写位置在。对象之前添加鉴权代码。
2025-04-13 13:50:34
246
原创 深挖 TypeScript 基础数据类型：应用与陷阱
在 TypeScript 的学习与实践过程中，对基础数据类型的深入理解和正确运用，是写出高质量代码的关键。本篇文章会通过探讨数据类型在实际场景中的应用，分析常见错误，帮助大家提升运用 TypeScript 基础数据类型的能力。通过留意函数参数、返回值以及对象属性的类型，规避常见错误，开发者能更高效地使用 TypeScript 开发高质量应用。若尝试传入非number类型的参数，TypeScript 编译器会报错，防止运行时错误的出现。// 错误使用，字符串类型不匹配。// 正确做法，进行null检查。
2025-04-06 20:05:07
252
原创 TypeScript 类型系统详解
TypeScript 支持丰富的基础数据类型，涵盖number、string、boolean、null、undefined、symbol以及bigint。这些类型为构建可靠的代码提供了基石。在实际编码中，正确使用基础数据类型不仅能增强代码的可读性，还能借助 TypeScript 的类型检查机制，提前发现潜在错误，提升代码质量。
2025-04-06 20:03:16
457
原创 初见TypeScript
TypeScript 由微软开发，它本质上是 JavaScript 的超集，为 JavaScript 添加了静态类型系统，让开发者在编码阶段就能发现潜在类型错误，提升代码质量，使代码更具可维护性。以变量声明为例，JavaScript 中声明变量无需指定类型，而 TypeScript 能让开发者为变量、函数参数和返回值指定类型。上述代码中，let message: string声明了一个类型为string的变量message，避免给message赋值非字符串类型数据，降低运行时错误风险。定义数组有两种方式。
2025-04-06 20:02:07
603
原创 vue3 响应式系统指南
通过合理运用这些响应式 API，可以在保证数据正确性的同时显著提升应用性能。建议根据具体场景选择合适的响应式方案，在深度响应与性能开销之间找到平衡点。用于创建仅跟踪顶层值变化的响应式引用。当需要处理大型对象但只关心顶层属性变化时，可显著提升性能。创建仅第一层属性响应式的对象。
2025-03-29 14:19:25
779
原创 下载和初步上手Vue3路由
只作用于当前路由，用于该路由的特定权限验证。组件内守卫用于在组件内部处理路由相关的逻辑，如在进入、更新、离开组件时执行特定操作。当哈希值发生变化时，会触发回调函数，我们可以在回调函数中获取当前的哈希值并进行相应的操作。在路由守卫中可以根据这些元信息进行相应的验证，确保用户有足够的权限访问目标路由。路由守卫用于在路由切换的不同阶段执行特定的逻辑。则是路由出口，它会根据当前的路由匹配情况显示对应的组件。组件来生成路由链接，用户点击链接时会跳转到指定的路由。获取目标路由的哈希值，并进行相应的处理。
2025-03-29 14:04:14
903
原创 Vue3 基础语法指南：响应式系统与 Ref 应用
功能点Setup 函数ReactiveRef作用组件逻辑入口深度响应式对象灵活响应式变量适用场景所有组合式 API 使用复杂对象状态管理基础类型 / 简单对象管理性能考量优先使用组合式 API对象层级越深越推荐基本类型优先特殊能力访问 props/context自动依赖收集模板引用通过合理运用这些特性，可以构建出更高效、更易维护的 Vue3 应用。
2025-03-21 19:39:48
260
原创 下载与快速上手 NVM：Node.js 版本管理工具
graph TDA[执行where node] --> B{输出NVM路径?B -->|是| C[验证成功]B -->|否| D[检查旧版Node.js残留]E[执行nvm version] --> F{显示版本号?F -->|是| G[版本验证通过]F -->|否| H[修复环境变量]I[执行node -v] --> J{版本正确?J -->|是| K[完整验证通过]J -->|否| L[重新执行nvm use]截至2025年3月21日本方法仍然可用。
2025-03-21 19:33:17
622
原创 Vuex 基础概念与环境搭建
Vuex 是实现数据集中式状态管理的插件。所有组件共享 Vuex 中的数据，当任意组件修改数据时，其他组件会同步更新。
2025-03-15 21:12:51
307
原创 认识vue2脚手架
package.json：包的说明书（包的名字，包的版本，依赖哪些库）。所以main.js文件的名字不要随便修改，main.js文件的位置不要随便动。第二种：在vue.config.js文件中进行脚手架的默认配置。-- 当浏览器不支持JS语言的时候，显示如下的提示信息。如果用单字母表示组件的名字，会报错，名字应该由多单词组成。脚手架默认配置在vue.config.js文件中进行。main.js、index.html等都是可以配置的。-- 开启移动端虚拟窗口（理想视口） -->-- 设置页签图标 -->
2025-03-09 13:07:24
538
原创 VUE2脚手架的下载与安装
Vue的脚手架（Vue CLI: Command Line Interface）是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html css js代码，并且可以将这些代码自动发布到它自带的服务器上，为我们Vue的开发提供了一条龙服务。Vue CLI注意：Vue CLI 4.x需要Node.js v8.9及以上版本，推荐v10以上。
2025-03-09 13:04:01
960
原创 Vue程序下载
Vue是一个基于JavaScript（JS）实现的框架，想要使用它，就得先拿到Vue的js文件Vue官网Vue2：Vue.jsVue3：Vue.js - 渐进式 JavaScript 框架 | Vue.js下载并安装vue.js第一步：打开Vue2官网，点击下图所示的“起步”：第二步：继续点击下图所示的“安装”第三步：在“安装”页面向下滚动，直到看到下图所示位置：第四步：点击开发版本，并下载第五步：安装Vue使用script标签引入vue.js文件。就像这样：<script src=”xx/vu
2025-02-28 16:31:24
941
原创 Vue中的数据代理与数据劫持
创建Vue实例vm，vm身上会有_data属性，_data通过劫持data配置项，再通过defineProperty的getter和setter，得到的响应式的数据。把vue中的data数据拦截改写成具有getter和setter形式的_data,就是数据劫持。数据代理vm中_data中的数据又通过数据代理（也是通过defineProperty的getter和setter实现），放置到vm身上，vm可以通过getter方法，setter方法直接使用_data中的数据，方便书写数据。
2025-02-28 16:27:34
487
原创 js的数据代理机制
vm这个Vue实例上可能会出现_xxx或$xxx属性， 而这个属性名可能会和Vue框架自身的属性名冲突。通过访问 代理对象的属性 来间接访问 目标对象的属性。注意：代理对象新增的这个属性的名字 和 目标对象的属性名要一致，这样我们访问代理对象属性，就像在访问目标对象的属性一样。// 实现数据代理,目的是读取 myvm.name == options.data.name。// 如果要实现数据代理机制的话，就需要给proxy新增一个name属性。// 读取对象的属性值 对象[变量]-- vue程序 -->
2025-02-28 16:26:24
480
原创 object.defineProperty()方法
Object.defineProperty(给哪个对象新增属性, '新增的这个属性名叫啥', {给新增的属性设置相关的配置项key:value对})// true表示该属性是可以遍历的。//return this.name //递归，死循环。//this.name = val //递归，死循环。// 给上面的phone对象新增一个color属性。// false表示该属性是不可以被删除的。// false表示该属性是不可遍历的。// true表示该属性是可以被删除的。// 这是一个普通的对象。
2025-02-28 16:22:21
231
原创 HTTP简介
HTTP 即 “hypertext transport protocol”，也就是超文本传输协议。该协议详细定义了浏览器与万维网服务器之间进行通信的规则，就像是双方交流时遵循的一种约定。
2025-02-15 18:03:42
386
原创 原生 AJAX
AJAX 是 “Asynchronous JavaScript And XML” 的缩写，即异步的 JavaScript 和 XML 技术。借助 AJAX，我们能在浏览器里向服务器发送异步请求。它最大的优势在于可以不刷新整个页面就能获取数据，实现按需请求，进而提升网站性能。需要注意的是，AJAX 并非一种新的编程语言，而是把现有的一些标准组合起来使用的新方法。注册账号时：在注册页面输入信息，系统会发送 AJAX 请求来检查输入内容是否符合预设要求，然后返回相关提示信息。电商网站数据加载。
2025-02-15 18:00:50
393
原创 在 Windows 系统上下载和安装 Node.js
在该页面上，你会看到两个版本可供选择：LTS（长期支持版）和 Current（最新版）。一般来说，推荐选择 LTS 版本，因为它更加稳定，相对于最新版不容易出现问题。点击对应 Windows 系统的安装包链接（.msi 格式），根据你的系统是 32 位还是 64 位来选择合适的版本。下载完成后，找到下载的安装包文件并双击运行。如果分别输出版本号，则表示安装成功。安装完成后，打开命令提示符（按下。安装完成后，同样可以使用。
2025-02-15 17:56:05
325
原创 ES6购物车示例（静态
<input type="checkbox" name="" value="" id="selectAll" /> 全选按钮1</span>件商品,共计 <span id="amount">100
2025-02-08 14:09:17
530
原创 js购物车（移动端
合计：<i class="total" id="AllTotal">00.00</i>去结算</a> -->" class="settlement">去结算
2025-02-08 13:53:22
889
原创 const 关键字和其与let的区别
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。const实际上保存的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。const声明的常量不可以改变，这意味着，const一旦声明，就必须立即初始化，不能以后再赋值，当然数组和对象等复合类型的变量，变量名不指向数据，而是指向数据所在的地址。3) 不允许重复声明。
2025-02-02 11:46:38
303
原创 let关键字
/ 报错，初始化前不能访问a,也就是在同一个作用域中，不可以访问，再定义。//在fn作用域没有，还是会向上寻找。// if else while for 这些语句里，都是有块级作用域的。//作用域链：内层作用域 ——> 外层作用域 ——> 全局作用域。//2. 块儿级作用域 避免暴露成全程作用域，影响别人。// let star = '余老师';//1. 变量不能重复声明，防止变量被污染。// let song = '恋爱达人';// let star = '王老师';// 5、let暂时性死区。
2025-02-02 11:45:28
243
原创 js常用事件表
某个键盘按键被按下时触发，通常不会触发事件冒泡，除非特别处理。某个键盘按键被松开时触发（document，window）当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。当鼠标指针移出元素时运行脚本，不可以阻止冒泡。当鼠标指针移出元素时运行脚本，可以阻止冒泡。某个键盘按键被按下时触发，会触发事件冒泡。当滚动元素的滚动条时运行脚本。当按下鼠标按钮时运行脚本。当松开鼠标按钮时运行脚本。当鼠标指针移动时运行脚本。当转动鼠标滚轮时运行脚本。当单击鼠标时运行脚本。
2025-02-02 11:40:11
170
原创 用js制作鼠标移入指定元素后产生下拉框的效果
我的淘宝</p>，根据需要可以在js代码中添加过度效果让成品效果更好。<p class="mybao">我的淘宝</p><p>已买宝贝</p><p>我的足迹
2025-01-25 19:06:10
251
原创 用js实现a标签的hover属性效果
家具</a>/ <a href="#">家装</a>/<a href="#">家居</a>/ <a href="#">家具</a>/ <a href="#">家装</a>/<a href="#">手机</a>/ <a href="#">运营商</a>/<a href="#">电脑</a>/ <a href="#">办公</a>/<li><a href="#">家用电器</a></li><a href="#">厨具
2025-01-25 19:03:47
445
原创 简单的网页背景切换
点击列表中四个图片切换为对应的背景图，图片放在同一文件夹下的img文件夹，四张图片对应的背景图片分别是1.jpg和与其对应的1-1.jpg形式，按钮的背景图是upseek.png，这里因为图片有后来补充所以地址全部为./img/img/，使用时根据情况对地址进行修改即可。//1、点击右上角 将btn以及小图隐藏。// 2、点击小图，页面换成对应的大图。
2025-01-25 19:01:48
228
原创 ES5轮播图
*添加过渡效果*//*每张图片宽度设为600px*///如果索引小于0，设置为图片数组的最后一个索引。//给当前显示图片对应的小圆点添加激活状态。//当鼠标移出轮播图外层容器时的事件处理。//如果索引超出图片数组的长度，重置为0。//执行点击小圆点的切换逻辑。//判断点击的是否是小圆点元素。//给被点击的小圆点添加激活状态。//当点击小圆点时的事件处理。//移除所有小圆点的激活状态。//移除所有小圆点的激活状态。//更新小圆点的激活状态。//更新小圆点的激活状态。
2025-01-19 15:53:21
259
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人