- 博客(745)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 VUE3——5. vue3的响应式原理
Vue3 的响应式系统通过Proxy和Reflect的配合使用，实现了更强大、更高效的响应式机制。Proxy提供了更全面的拦截能力，可以捕获对象的各种操作，而Reflect则提供了一种方便的方式来操作对象的属性。这种实现方式解决了 Vue2 中存在的一些问题，如无法检测对象属性的新增和删除、数组操作的支持有限等。同时，Vue3 的响应式系统还引入了依赖收集和触发更新的机制，使得系统能够自动追踪依赖关系并在数据变化时及时通知相关的依赖进行更新。
2025-06-27 10:28:00
590
原创 VUE3——Vue3中ref和reactive的区别详解
ref：适用于基本数据类型或需要解构赋值的情况，在模板中使用时无需.value，但在 JavaScript 中访问需要.value。示例代码如下：// 访问响应式数据的值需要使用.valuereactive：适用于对象和数组，能自动追踪对象内部的属性变化，无需额外配置。示例代码如下：综上所述，ref更适合基本数据类型，reactive更适合对象和数组。在模板中使用ref时无需.value，但在 JavaScript 中访问需要.value；reactive。
2025-06-27 09:15:25
293
原创 VUE3——2. setup函数
Vue 3的setup函数和Composition API为开发者提供了更灵活、高效的代码组织和逻辑复用方式，尤其适合处理复杂组件的开发。而Vue 2的Options API结构简单，易于上手，对于简单的组件开发仍然是一个不错的选择。在实际项目中，可以根据组件的复杂度和需求来选择合适的API。
2025-06-27 09:11:20
201
原创 Uniapp——7.标签 ＜text＞【selectable，space ，decode】
📌 简介：< text > 是文本组件，用于显示文字内容。与 HTML 的 span 类似，是内联元素。✅ 效果：用户可以在真机上选中文本并复制。使用场景：1. 显示需要复制的内容（如邀请码、链接）2. 提高用户体验✅ 效果：会显示为“hello world”（多个空格正常显示）不同 space 值的区别：使用场景：✅ 效果：显示为 < b>加粗文本< /b>（但不是真的加粗，只是显示了标签）⚠️ 注意：decode 只是将 HTML 实体转义成字符，并不会真正解析 HTML 内容。使用场
2025-06-24 17:28:38
181
原创 Uniapp——6. 标签＜view＞【 hover-class，hover-start-time，hover-stay-time，disable-scroll】
一、< view> 标签📌 简介：< view> 是页面结构中的基础容器标签，类似于 HTML 中的 div，用于布局和包裹其他组件。
2025-06-24 17:07:28
144
原创 VUE——Vue.config.js配置
这段配置的意思是：在开发环境下，所有以 /api 开头的请求都会被代理到 http://vueshop.glbuys.com/，并且去掉 /api 前缀后再发送请求。
2025-06-24 10:23:59
47
原创 vue2——创建项目【cil 并配置项目启动前准备】
vue create Vue 2 项目名。找到你的项目用Code打开。全局安装 Vue CLI。
2025-06-23 17:18:39
136
原创 uniapp——5底部导航开发
关于底部导航栏tabBar的相关内容：https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar。不管是什么资源，都是以模块区分的，是tabber下的静态资源就放入static / tabber里。这里有多少个tabber就有多少个页面，4个tabber对应4个页面。将下载好要使用的图标放在项目的静态文件目录下即“static”底部导航栏，有2种样式，一个是选中的样式，一个是未选中的样式。这些图标可以来自图标库下载，下载前也可以设置图标大小。
2025-06-23 15:38:36
149
原创 uniapp——4.设置全局globalStyle【pages.json文件】
创建一个项目的目录结构：第一步：打开项目文件的pages.json文件，
2025-06-23 14:51:10
183
原创 uniapp——3. 引入CSS动画库
hover-class是微信小程序中用于定义组件在点击或悬停时的样式类名的属性。：去CSS动画库官网下载动画样式“animate.css”，然后将animate.css文件放到项目common目录下，最后在App.vue中使用@import 引入动画库。当用户点击或触碰组件时，微信小程序会自动为该组件添加由 hover-class 指定的样式类。在用户松开手指或离开组件时，样式类会被移除。hover-class 主要适用于 < view>、< button>、< image> 等可交互的组件。
2025-06-23 14:21:11
197
原创 Uniapp——2. 引入自定义图标库
把iconfont.css文件内容全选出来，在common目录下建一个新的文件夹，名称叫 icon.css,然后将全选的iconfont.css文件内容粘贴到 icon.css文件里，第二步：添加好了所需图标后在右上角的购物车中查看，已入库的图标，然后在所选图标添加项目，然后再将你添加的项目下载到本地，然后就会得到一个一下载好的图标压缩文件。第一步：打开阿里巴巴矢量图标库：https://www.iconfont.cn/，并登录自己的账号，第五步：使用图标，打开我们本地解压好的图标文件，
2025-06-23 01:35:19
257
原创 Uniapp——1.引入官方CSS样式
将官方提供的UI库导入自己的项目中，若自己的项目里没有common目录，那就建一个common目录，并把官方提供的UI库粘贴进来。第四步：将UI库用@import引入App.vue中的样式中，用于适用于整个项目。：新建项目，选择官方提供的演示的项目，同时这个官方提供的新建项目也。打开官方提供的演示的项目文件中的common文件夹，这里面的。，我们复制这个UI库到我们自己的项目中。
2025-06-23 00:37:09
125
原创 TypeScript——14.泛型类
TypeScript 中的泛型类（Generic Classes）是一种允许你在类中使用类型参数的类。这意味着你可以在定义类时不确定某些类型，而是在实例化类时才指定具体的类型。这样可以使类更加灵活和可重用。基本概念泛型类在类名后面使用尖括号 < T> 声明类型参数（T 是约定俗成的占位符，可以自定义名称）。这个类型参数可在类内部作为具体类型使用。
2025-06-21 10:53:46
145
原创 1. 区块链技术引发的社会变动梳理总结
区块链是一种记录电子信息的新机制，具有两个要点：一：是不仰仗管理者，依靠计算机集群自主运营可信赖的业务；二：是保护数据不被随意篡改。它能实现“trustless system”（去信任系统），即不仰仗个人和组织的信任也能安心交易的系统。
2025-06-21 10:12:29
293
原创 TypeScript——13. 泛型接口
泛型接口在函数中的使用：通过定义泛型函数接口，可以让函数支持多种类型的输入和输出，同时保持类型安全。泛型接口在类中的使用：通过定义泛型类接口，可以让类处理多种类型的数据，同时提供清晰的类型约束。private storage: Map<K, V> ：声明一个私有属性，用于存储键值对。Map<K, V> ：提供高效的键值存取，支持任意类型的键。泛型 <K, V> ：让这个存储类可以灵活处理不同类型的键和值。
2025-06-21 07:19:31
741
原创 TypeScript——12. 多个泛型参数的函数
T, K> ：这是两个泛型参数，表示该函数可以接受两种不同类型的值。T 表示第一个参数 name 的类型。K 表示第二个参数 age 的类型。name: T 和 age: K ：分别表示 name 和 age 的类型由调用时传入的具体类型决定。[T, K] ：表示返回值是一个包含两个元素的元组，元组的第一个元素类型为 T，第二个元素类型为 K。
2025-06-20 11:18:13
282
原创 TypeScript——11. 泛型
用于在定义函数、接口或类时，不指定具体的类型，而在使用时再指定具体类型。它可以让我们编写更通用的代码。TypeScript 编译器会根据传入的参数类型自动推断出泛型参数为 number。：泛型可以让同一个函数或类适用于多种类型，而不需要为每种类型单独编写代码。strArray: string[] ：表示返回的数组是一个字符串数组。createArray2 < string> ：在调用函数时。：通过泛型，我们可以确保函数或类中使用的类型是一致的。灵活性：泛型允许我们在运行时动态指定类型。
2025-06-20 11:03:40
254
原创 TypeScript——10. 接口约束类
在接口中定义方法时，有多种形式可以使用：在这里插入代interface ISuperMan {fly();// 第一种：只定义方法名// 第二种：定义为 Function 类型// 第三种：定义为箭头函数类型// 第四种：定义为 Object 类型（不推荐）}码片接口约束类接口定义了类的结构，类必须实现接口中定义的所有属性和方法。fly()：普通方法签名。eat: Function：宽松的函数类型。run: () => void：严格的箭头函数类型。
2025-06-20 10:26:46
242
原创 TypeScript——8. 枚举
枚举是 TypeScript 中一种非常有用的工具，可以帮助我们定义一组命名的常量，提高代码的可读性和可维护性。通过结合正向映射和反向映射，枚举还可以实现灵活的值与名称之间的转换。枚举（enum）是 TypeScript 中的一种特殊类型，用于定义一组命名的常量。通过枚举，可以为一组相关值提供清晰的语义化名称，从而提高代码的可读性和可维护性。如果知道枚举值（如 0），可以通过索引访问对应的枚举名（如 “Sun”）。这种特性使得枚举既可以按名称访问值，也可以按值访问名称。对应的枚举名 “Sat”。
2025-06-20 08:35:06
185
原创 TypeScript——7.类型别名
在 TypeScript 中使用 联合类型（Union Type）来约束变量的类型。下面我将逐步解析这段代码，并帮助你理解其含义。类型别名可以用来给一个类型起一个新名字，采用关键字type定义，可以设置字符串和数值类型。
2025-06-19 17:09:17
182
原创 TypeScript——6. 类型断言
..getAssert 是一个函数，接受一个参数 name。参数 name 的类型是联合类型 string | number，表示它可以是字符串或数字。
2025-06-19 16:23:28
236
原创 VUE——滚动条的功能【iScroll 插件】
iScroll 是一个轻量级的 JavaScript 插件，专门用于在移动设备上实现平滑滚动效果。
2025-06-18 11:13:40
364
原创 VUE——图片懒加载
将 echo.js懒加载第三方库，放入libs 文件夹第二步utils 文件夹的主要作用是存放那些可以在项目中复用的工具函数或方法，从而避免重复代码并提高开发效率。在utils 文件夹中建立一个JS文件并定义一个。
2025-06-17 13:25:40
384
原创 VUE—— 2. Swiper商城轮播图实现
建立一个文件夹，libs文件夹，专门存放要使用的第三方库如这里的Swiper第三方库，将第三方库的JS文件放到libs文件夹中，第三方库的CSS文件可以放在公共样式文件夹中，或者也放在libs中也行。去第三方库官网下载Swiper.3的压缩包，这个版本最稳定，在Swiper.3的压缩包中将Swiper.js和Swiper.css 这2个文件放入项目中。应人而异自己在package.json中查看，有的人是serve,也有的是dev,看自己设置的。2. 分页器点击切换效果，1. 添加轮播图分页器，
2025-06-12 03:38:16
20
原创 VUE——＜ keep-alive＞缓存
用途：缓存组件实例，避免重复渲染，提升性能。场景：标签页切换、路由懒加载但希望保持滚动位置等。钩子：activated() 和 deactivated() 用于处理组件激活和停用时的逻辑。注意：避免内存泄漏，合理管理组件状态。通过合理使用 < keep-alive>，可以显著提升应用的性能和用户体验。
2025-06-12 01:42:35
816
原创 VUE——1. 商城：导航栏样式滚动控制解析
当一个被 < keep-alive> 缓存的组件被激活（即从缓存中取出并显示）时调用。可以在这个钩子中执行一些初始化操作，比如重新获取数据、重置状态等。当一个被 < keep-alive> 缓存的组件被停用（即被缓存起来，不再显示）时调用。可以在这个钩子中执行一些清理操作，比如保存状态、取消定时器、移除事件监听器等。
2025-06-11 16:52:58
34
原创 Vue——搭建项目架构【开发项目用，环境变量，跨域】
首先，需要为不同的环境创建相应的.env文件，并在文件中定义环境变量。开发环境：创建.env.development文件，内容如下：生产环境：创建.env.production文件，内容如下确保变量名以VUE_APP_开头，这样Vue CLI才能识别并将其嵌入到构建中。
2025-06-06 23:49:21
542
1
原创 Javascript——map
map 方法会遍历数组中的每个元素，并对每个元素执行一个指定的函数（回调函数）。, 新数组中的每个元素是原数组元素经过回调函数处理后的结果。
2025-06-06 09:26:47
174
原创 Vue——移动端UI库之cube-ui
Toast 是一种轻量级的提示组件，通常用于向用户展示简短的信息（如操作成功或失败的提示）。它会自动消失，不会阻塞用户的操作。Switch 是一种开关组件，通常用于在两种状态之间切换（如开启或关闭某种功能）。它的特点是操作直观，用户只需点击即可完成状态切换。（1）引入 Switch 组件如果你只在某个页面中使用 Switch，可以直接通过 标签使用，而无需注册为全局组件。
2025-06-05 10:25:15
695
原创 VUE——移动端UI库之mint-ui
Switch 是一种开关组件，通常用于在两种状态之间切换（如开启或关闭某种功能）。它的特点是操作直观，用户只需点击即可完成状态切换。以下是核心要点：引入和注册：通过 import { Actionsheet } from ‘mint-ui’ 引入，并通过 Vue.component(Actionsheet.name, Actionsheet) 注册为全局组件。定义选项：通过 actions 属性定义操作表中的选项。控制显示与隐藏：通过 v-model 属性控制操作表的显示与隐藏。
2025-06-03 20:48:04
855
原创 VUE——Elemment-ui开发PC端后台管理系统必备
rules 是一个对象，用于定义每个表单项的校验规则。规则可以通过数组的形式指定多个条件。校验规则的常用选项示例规则注意事项1. this.checkCallphone 是一个方法名，必须在 methods 中定义。2. trigger: "blur" 表示在校验时触发的事件（失去焦点时）。（1）自定义校验规则未生效原因：validator 方法未正确绑定到 rules 中。解决：确保 validator 指向的是 methods 中定义的方法，例如 this.checkCallphone。
2025-06-03 06:25:55
826
原创 VUE——BetterScroll实现下拉刷新上拉加载
BetterScroll是一款重点解决移动端（已支持PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些特性以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。BetterScroll官网：https://better-scroll.github.io/docs-v1/doc/zh-hans/特点：安装better-scroll有两种方式：
2025-06-02 03:56:06
1067
原创 Vue——promise异步机制【promise的链式调用】
Promise 是 JavaScript 中用于处理异步操作的一种机制。它表示一个异步操作的最终完成（或失败）及其结果。Promise 提供了一种更清晰和更易于管理的异步编程方式，避免了传统的回调地狱（callback hell）。
2025-06-02 00:47:40
272
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人