- 博客(60)
- 收藏
- 关注
RSS订阅原创 Vue3 watchEffect 简单实用总结
是 Vue3 里自动盯数据的副作用工具，不用手动指定要监听的变量，它会自己找回调里用到的响应式数据，数据一变就重新执行回调，而且组件一挂载就会先跑一次，专门用来处理请求、DOM 操作这类副作用逻辑。
2025-11-21 09:10:01
325
原创 Vue3 watch 核心总结
watch是 Vue3 组合式 API 提供的，作用是，当数据发生变化时，自动执行预设的回调逻辑（如异步请求、数据联动、副作用处理等）。vuewatch。
2025-11-20 14:50:15
592
原创 Vue3 setup 语法糖 和 响应式处理
setup 语法糖是 Vue3 组合式 API 的简化写法，通过<script setup>标签省略重复代码，直接在脚本内编写组合式 API 逻辑，大幅提升开发效率。
2025-11-20 11:17:31
218
原创 Vue2 Vuex 核心总结
Vuex 是 “全局数据仓库”：State 存数据，Getter 加工数据，Mutation 同步改数据，Action 异步做操作，Module 拆分大仓库，所有操作按规则来，让数据管理清晰可追踪。
2025-10-09 12:01:06
655
原创 Vue2 插槽（Slot）核心总结
默认插槽：简单的单位置内容定制（如弹窗内容）。具名插槽：多位置内容定制（如卡片的头部、内容、底部）。作用域插槽：子组件数据需要父组件自定义渲染（如同一组数据，有时用列表、有时用表格展示）。一句话概括：插槽是组件的 “内容接口”，让组件在复用的同时，保持内容的灵活性和定制化。
2025-09-28 11:33:55
643
原创 Vue 配置代理
Vue 代理就像 “前端和后端之间的快递员”：前端把包裹（请求）交给快递员（代理），快递员帮你送到后端，再把后端的回信（响应）带给前端，避开了浏览器这个 “保安” 的拦截。
2025-09-25 14:30:23
829
原创 Vue2 $nextTick
nextTick是 Vue 里一个 “等 DOM 更新完再做事” 的工具 —— 就像你煮面条，得等水开了（DOM 更完新）再下面，不能水还没热就倒面条（操作没更新的 DOM）。
2025-09-25 08:30:00
424
原创 Vue2 全局事件总线：通俗易懂 + 简单案例
全局事件总线就像一个 “全校通知群”—— 不管是一年级（子组件）、二年级（父组件）还是教务处（隔代组件），只要进了这个群，就能给群里任何人发消息（传数据），不用管彼此是什么关系。
2025-09-24 14:16:54
370
原创 Web 本地存储
两者均以键值对形式存储字符串数据，存储容量通常为 5-10MB，适合保存非敏感的用户偏好、临时状态等信息。：持久存储，关闭浏览器后数据不丢失，同一域名下共享。：会话级存储，关闭浏览器窗口后数据消失。
2025-09-19 09:19:30
133
原创 Vue2 父子组件传值（简化版示例）
父用:xxx.sync="父数据"，子用$emit('update:xxx', 新值)，父子数据就同步了！Vue2 父子通信的本质是 “props 向下传值，$emit 向上触发事件”，所有双向绑定方案（v-model.sync通信方向核心技术关键操作父 → 子props父绑自定义属性，子用props接收子 → 父$emit子触发自定义事件，父监听事件并处理双向同步v-model.sync语法糖，简化 “props + $emit” 代码掌握以上方案，就能解决 Vue2 中父子组件的所有通信需求。
2025-09-17 17:32:10
469
原创 Vue的常用修饰符
在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示，也就是在 change 事件之后再进行信息同步。自动将用户的输入值转为数值类型，但如果这个值无法被 parseFloat 解析，则会返回原来的值。阻止事件的默认行为，相当于调用 event.preventDefault()。阻止事件冒泡，相当于调用 event.stopPropagation()。过滤表单输入时两边的空格，而中间的空格不会过滤。使用事件捕获模式，即从最外层开始触发事件。只有事件是由当前元素触发时才触发事件。
2024-12-16 15:27:36
398
原创 elementUI修改table样式
在Vue项目中，如果使用的是单文件组件（.vue），并且样式是通过<style>标签定义的，vue2可以使用/deep/，vue3可以使用::v-deep选择器来修改ElementUI组件的样式。
2024-12-10 14:11:10
1603
原创 切换Node版本具体流程操作
nvm-windows是一个用于Windows系统的Node.js版本管理器，它允许你在同一台机器上安装和切换不同版本的Node.js。
2024-12-04 15:14:24
740
原创 vue初始化脚手架
Vue CLI允许你通过vue.config.js文件对项目进行自定义配置。你可以在这个文件中修改Webpack配置、添加插件、配置开发服务器等。3.1 修改服务器端口打开vue.config.js，通过port修改端口号port: 3000, // 开发服务器端口})
2024-12-03 16:20:06
620
原创 Three.js 补间动画Tween
在Three.js中，补间动画（Tween Animation）是一种常用的动画效果实现方法，用于在两个或多个状态之间平滑过渡。补间动画通过定义起始状态和目标状态，并指定过渡时间和缓动函数，在指定的时间内自动计算并更新中间状态，从而实现平滑的动画效果。这种动画可以应用于对象的属性，如位置、旋转、缩放等。
2024-11-21 15:19:34
769
原创 Three.js 加载GLTF模型
要在three.js中正确加载和显示GLTF模型，需要遵循一系列步骤来确保模型的纹理和材质被正确应用。为了确保模型的材质能够正确显示，您需要在场景中添加至少一个光源。设置相机的参数，创建一个渲染器实例，并将其添加到DOM中。方法接受一个回调函数，该函数在模型加载完成时被调用。模块，因为它是用来加载GLTF格式模型的类。在加载回调函数中，将模型（通常是。来更新渲染器，并连续渲染场景。方法，并传入模型的URL。创建一个新的加载器实例。设置一个动画循环，使用。您需要确保已经引入了。
2024-11-19 11:02:26
855
原创 Three.js中实现雾效的方法
在Three.js中，可以使用Fog或FogExp2类来实现场景中的雾效。Fog类创建的是线性雾效，而FogExp2类创建的是指数雾效。两者都会根据物体与相机的距离来增加雾的密度，从而实现不同的视觉效果。
2024-11-18 16:02:44
922
原创 Threejs 材质贴图、光照和投影详解
1. 材质和贴图材质（Material）定义了物体表面的外观，包括颜色、光泽度、透明度等。贴图（Textures）是应用于材质的图像，它们可以增加物体表面的细节和真实感。1.1材质类型不受光照影响的基础材质。考虑漫反射的材质，适合简单的光照场景。考虑镜面高光的材质，适合光滑表面的物体。基于物理的材质，支持金属度和粗糙度贴图，适用于现代渲染管线。类似MeshStandardMaterial，但提供更高级的基于物理的渲染特性。1.2 贴图的作用：定义物体的基本颜色。
2024-11-13 16:44:07
1261
原创 ThreeJS设置响应式画布
为了使Three.js创建的画布响应式，需要在窗口大小变化时更新相机的宽高比和渲染器的大小。这通常涉及到添加一个事件监听器来监听resize事件，并在事件触发时执行相应的更新函数。
2024-11-06 16:20:20
499
2
原创 ThreeJs父子元素与物体的位移、旋转或缩放
在Three.js中，可以使用Object3D类的实例来控制3D物体的位移、旋转和缩放。这些变换可以通过直接设置对象的属性来实现，也可以通过应用变换矩阵来动态改变物体的状态。
2024-11-05 15:15:07
718
原创 ThreeJS添加辅助坐标器和轨道控制器
类来添加坐标轴辅助器，辅助器简单模拟3个坐标轴的对象。红色代表X轴，绿色代表Y轴，蓝色代表Z轴。类来添加控制器，为了方便旋转、缩放和平移相机视角。
2024-11-01 14:33:06
786
原创 ThreeJS创建一个3D物体的基本流程
使用document.body.appendChild(renderer.domElement)将渲染器的DOM元素添加到HTML页面中。创建一个相机对象，通常是THREE.PerspectiveCamera，用于定义观察场景的视角和位置。创建一个THREE.Material实例来定义物体的外观，包括颜色、纹理等。创建一个THREE.Scene实例，它将作为所有3D对象的容器。将几何体和材质结合起来创建一个实例，这是一个实际的3D物体。使用scene.add(cube)将创建的网格添加到场景中。
2024-11-01 13:45:42
808
原创 如何在本地搭建一个three.js的开发环境
创建src文件夹，并且创建一个main.js文件来编写three.js代码，可以创建场景、相机、渲染器以及添加3D模型和动画等。通过在浏览器中打开index.html文件，可以看到three.js应用运行的效果。安装 Node 和 npm，并创建一个ThreeJs的项目文件。在项目文件夹中打开命令行界面，并运行以下命令来初始化项目。通过npm run dev启动服务。通过npm安装three.js库。
2024-10-31 15:10:12
1182
原创 WebGL 基础知识点
是从顶点着色器传递到片元着色器的纹理坐标。来指定取样器应该引用哪个纹理单元。关键字来声明变量的默认精度。纹理取样器变量通常声明为。在着色器中，纹理采样函数。用于从纹理中获取颜色值。在WebGL中，可以通过。在片源着色器中，可以通过。
2024-10-24 14:54:46
1342
原创 WebGL 添加背景图
ST纹理坐标（也称为UV坐标）是一种二维坐标系统，用于在三维模型的表面上精确地定位二维纹理图像。这种坐标系统通常将纹理的左下角映射到(0,0)，而右上角映射到(1,1)。S坐标（U坐标）：通常对应纹理图像的水平方向，即纹理的宽度。T坐标（V坐标）：通常对应纹理图像的垂直方向，即纹理的高度。
2024-10-23 16:37:37
1080
原创 VSCode中WebGL编程的代码提示方法
由于在VSCode中编写WebGL代码时没有提示，需要手敲，很容易出错，所以可以通过JSDoc注释的方法来获得代码提示。
2024-10-23 09:41:55
456
原创 WebGl 旋转矩阵
旋转矩阵是一个正交矩阵，用于在二维或三维空间中描述一个坐标系绕原点的旋转。在三维空间中，旋转矩阵通常用于沿x轴、y轴或z轴进行旋转，或者沿任意给定轴线进行旋转。旋转矩阵具有一些重要性质，例如它们是正交的，即它们的共轭转置等于其逆矩阵，而且它们保持向量的长度和夹角不变。
2024-10-22 16:26:38
554
原创 WebGl 缩放矩阵
缩放矩阵是线性代数中的一种矩阵，用于描述图形在空间中沿着各个坐标轴进行均匀缩放的变换。在3D图形编程中，缩放矩阵通常用于调整物体的大小，而不改变其形状。其中，(x, y, z)是缩放向量，表示沿着x、y、z轴的缩放比例。如果x、y、z都等于1，则矩阵表示不进行缩放；如果小于1，则表示缩小；如果大于1，则表示放大。
2024-10-22 15:49:43
634
原创 WebGl 使用平行矩阵实现图像平移
用于设置着色器程序中的统一矩阵（uniform matrix）变量。这个函数允许开发者将一个4x4的浮点矩阵传递给顶点着色器或片段着色器中的矩阵属性。这个矩阵可以用于多种变换，包括平移、旋转和缩放。平行矩阵，也称为平移矩阵，是一种在二维或三维空间中应用平移变换的矩阵。平移矩阵的作用是将空间中的每个点沿着一定的方向移动固定的距离，而不改变点之间的相对位置和距离。在顶点着色器中，我们定义了一个uniform变量mat，用来接收平移矩阵。在三维空间中，平移矩阵的形式为。
2024-10-22 14:57:47
721
原创 WebGl 实现图片平移、缩放和旋转
在WebGL中实现图片平移，可以通过修改顶点着色器中的顶点位置来实现。在顶点着色器中，可以通过添加或减去一个统一的偏移量（uniform variable）来实现这一点。图片的旋转可以通过在顶点着色器中应用旋转矩阵来实现。在二维空间中，通常围绕原点旋转，可以使用欧拉公式来计算旋转后的顶点位置。实现图片缩放，可以通过在顶点着色器中对顶点位置进行缩放来完成。在JavaScript中，可以通过设置u_Translation的值来控制平移的距离和方向。在JavaScript中，可以通过设置。的值来控制旋转的角度。
2024-10-22 10:32:49
657
原创 WebGl 实现多种图形的绘制
gl.drawArrays函数是WebGL中用于绘制图形的核心函数之一。它根据指定的模式（mode）从当前激活的顶点缓冲区（VBO）中提取顶点数据，并将它们绘制成图形。
2024-10-21 15:45:57
423
原创 WebGl 使用缓冲区对象绘制多个点
缓冲区对象是WebGL系统中为一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。
2024-10-17 14:52:16
2303
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人