- 博客(43)
- 收藏
- 关注
RSS订阅原创 VuePress学习
clientSecret: 'YOUR_CLIENT_SECRET', //OAuth App 的 client secret。clientId: 'YOUR_CLIENT_ID', //OAuth App 的 client id。owner: 'OWNER_OF_REPO', //对应 repository 的拥有者帐号或者团队。repo: 'NAME_OF_REPO', //用来存储评论的 repository。4.配置 .vuepress/config.js。// 其他vssue配置。
2024-12-05 17:31:36
832
原创 react-路由
4.创建页面组件 pages/home/index.js。2.配置文件 router/index.js。3.创建文件 pages/mian.js。5.在入口文件App.js导入router。
2024-10-31 13:56:14
456
2
原创 threejs-法线向量
1.在3D计算机图形中，‘法向量’是一个向量，表示3d模型表面在某一点的方向。在每个顶点上，都会有一个关联的法向量，这个向量通常被归一化,也就是说它的长度为1。2.使用:定点的法向属性在很多计算图形的领域都有应用，通常用于光照计算，它们决定了光线照射到模型表面时的反射和折射特性。在Three.js中，如果不指定法向量，几何体的面会使用默认的法向量来推断出光照效果，这可能导致不理想的视觉效果。
2024-10-14 20:59:51
378
原创 threejs-UV
1.什么是UV映射？UV映射是一种将二维纹理映射到三维模型表面的技术。在这个过程中，3D模型上的每个顶点都会被赋予一个二维坐标（U, V）。U和V分别表示纹理坐标的水平和垂直方向。这些坐标用于将纹理图像上的像素与模型表面上的点进行对应。通过UV映射，我们可以在模型上精确地控制纹理的位置和方向。2.UV坐标与顶点位置的关系和区别顶点位置（Position）表示3D模型中每个顶点的空间坐标（x, y, z）。UV坐标则表示该顶点在纹理上的二维坐标（U, V）。
2024-10-14 18:08:40
676
原创 threejs-补间动画Tween应用
补间动画是一个概念，允许你以平滑的方式更改对象的属性。更改某些属性，在补间结束运行时当前对象最终的值就是修改后的值。以及需要多长时间完成这个操作。
2024-10-12 19:27:16
335
原创 threejs-光线投射实现3d场景交互事件
/ 创建射线// 创建鼠标向量(保存鼠标点击位置)// 创建点击事件// 获取鼠标点击位置// 创建射线并检测点击物体// 计算物体和射线的焦点//检测是否点击到物体 值scene.children或[sphere1,sphere2,sphere3]// intersects 中值 face:面信息 normal:象限向量 object:选中的物体})
2024-10-12 16:20:32
348
原创 threejs-加载gltf模型
glTF（gl传输格式）是一种开放格式的规范 （open format specification）， 用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。
2024-10-11 20:32:05
729
原创 threejs-基础材质设置
主要内容：基础材质(贴图、高光、透明、环境、光照、环境遮蔽贴图)主要属性：side: three.DoubleSide, //设置双面color: 0xffffff, //颜色map: texture, //纹理transparent: true, // 透明度aoMap: aoTexture, //ao贴图aoMapIntensity: 1, //ao贴图强调alphaMap:alphaMap, //透明度贴图lightMap:lightMap,//光照贴图。
2024-10-10 20:37:26
789
原创 VUE3 + Pinia
介绍Pinia是vue的状态管理库，是Vuex状态管理库的替代优势1.提供更加简单的API(去掉了mutation)2.提供符合组合式风格的API3.去掉了modules的概念，每个store都是一个独立的模块4.搭配TypeScript一起使用提供可靠的类型推断//在Stores文件夹下创建counter.js文件// 导入一个方法 defineStore//定义数据(state)// 定义修改数据的方法(action 同步和异步)// getter定义。
2024-08-21 20:48:35
449
原创 vue3-基础
/script>接收一个对象类型数据的参数传入并返回一个响应式的对象接收简单类型或者对象类型的数据传入并返回一个响应式对象介绍watch是用来监听一个或多个数据变化的。数据变化时执行回调函数定义watch(值, (newv, oldv) => {},{deep:true})参数属性immediate 立即执行deep 深度监听介绍。
2024-08-21 20:42:05
367
原创 vsode插件使用介绍
Vue - Official //vue3智能提示 需要禁用Vetur。error lens //是一个实时提供错误警告信息的插件。
2024-08-21 18:28:36
165
原创 TS学习-面向对象
要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象。定义class 类名 extends 类名 {属性名: 类型;constructor(参数: 类型){this.属性名 = 参数;方法名(){....属性readonly表示只读属性static 在属性前使用static关键字可以定义类属性(静态属性)，直接使用类去访问constructor 构造函数。
2024-08-20 15:55:44
201
原创 使用webpack + TS + Babel
webpack //构建工具webpackwebpack-cli //webpack的命令行工具webpack-dev-server //webpack的开发服务器typescript //ts编译器ts-loader //ts加载器，用于在webpack中编译ts文件html-webpack-plugin //webpack中html插件，用来自动创建html文件。
2024-08-20 15:46:41
361
原创 TS学习笔记
ts是以JavaScript为基础构建的语言类型声明是TS非常重要的一个特点通过类型声明可以指定TS中变量（参数、形参）的类型指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
2024-08-20 15:33:59
502
原创 uni-app开发小程序
地址uni-app官方推荐使用HBuilderX来开发uni-app类型的项目,主要好处：模板丰富、完善的智能提示、一键运行分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载在项目根目录的 components 目录上，鼠标右键，选择 新建组件，填写组件信息，最后点击 创建 按钮。
2024-07-30 15:50:36
8251
3
原创 小程序使用Vant组件库及小程序API的Promise化
目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率1.vant是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 5 年时间。Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一2.采用MIT开源许可协议，对商业使用比较友好API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Promise的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题。
2024-07-22 18:39:43
241
原创 小程序开发-组件使用
1.介绍全局引入(在app.json全局配置文件中引入组件)局部引入(在页面.json配置文件中引入组件)2.使用全局引入在app.json文件中配置在.wxml中使用局部引入在页面.json中配置在.wxml中使用。
2024-07-22 12:30:28
1241
2
原创 小程序组件介绍及使用
介绍1.小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行2.作用：允许程序员在特定的生命周期时间点上，执行某些特定的操作3.注意：生命周期强调的是时间段，生命周期函数强调的是时间点。小程序中生命周期函数的分类应用生命周期函数:小程序从启动 --> 运行 --> 销毁期间依次调用的那些函数页面生命周期函数:每个页面从 加载 --> 渲染 --> 销毁期间依次调用的那些函数介绍wxs是小程序的一套脚本语言，可以构建出页面结构应用场景。
2024-07-19 18:49:10
336
原创 小程序介绍
1.配置 "entryPagePath": "pages/index/index",2.不配entryPagePath,"pages"中第一和就是初始页面wxml是框架设计的一套标签语言(组件)，用来构建小程序页面的结构，其作用类似于网页开发中的htmlwxss是一套样式语言，用于描述wxml的组件样式，类似于css。
2024-07-19 17:57:50
180
原创 下拉框+树形结构
一、代码<template> <div> <el-select ref="selectTree" v-model="form.Id" filterable placeholder="请选择" > <el-option :key="form.Id" :value="form.Id" :label="form.label"
2022-01-08 17:59:26
876
原创 字符串方法
1.indexOf( ) 从左往右获取字符串的对应的索引号(并获取第一个字符的索引值)let a = 'abcdefgc'a.indexOf('c') // 22.lastIndexOf( ) 从右往左获取字符串的对应的索引号(并获取第一个找到的字符的索引值)let a = 'abcdefgc'console.log(a.lastIndexOf('c')) // 73.split("根据分割的字符") 分割字符串 let a = 'abcdefgc'...
2021-12-12 19:28:31
452
1
原创 elementUI日期组件弹出错位
elementUI日期组件弹出错位方法1.使用v-if的地方改为v-show，如果解决不了可以改为方法二方法2.可以使用key：给每一个 el-date-picker 标签 添加一个 key 值<template> <div> <el-date-picker v-model="value1" :type="typelist" key="1" placeholder="选择日期时间" />
2021-12-12 18:28:00
1577
原创 vue+antv实现雷达图
一、下载依赖npm install @antv/data-setnpm install @antv/g2二、代码实现<template> <div ref="container" /></template><script>import DataSet from '@antv/data-set'import { Chart } from '@antv/g2'export default {// 创建雷达图 mounted(
2021-12-05 20:49:11
1718
原创 element ui的table表单
1.动态获取表头<template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column :label="header[0]" :key="index"> <template scope="scope"> {{ scope.row.date }} </template&g
2021-11-28 21:12:03
395
原创 css样式
一、字体1.文本样式1.字体大小 font-size:20px 2.文字加粗 font-weight:normal; normal正常 bold 粗 bolder 特粗 lighter 细 400=normal 700=bold （100-900） （数字后不加单位，此方法使用的多） 3.文字样式 font-style:normal; ...
2021-11-27 22:40:11
299
原创 用canvas画布实现验证码
一、代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2021-11-21 20:27:49
286
原创 Vue中获取当前时间组件
<template> <div>{{ nowDate }}</div></template><script>export default { data() { return { nowDate: "", // 当前日期 }; }, methods: { currentTime() { setInterval(this.formatDate, 0); }, fo.
2021-11-14 15:22:57
1171
原创 封装自动获取焦点插件
封装插件import Vue from 'vue'// 聚焦指令Vue.directive('focus', { // 第一次 inserted (e) { focus(e) }, // 除第一次以外 update (e) { focus(e) }})function focus (e) { if (['INPUT', 'TEXTAREA'].indexOf(e.tagName) !== -1) { e.focus() } else
2021-11-14 12:43:21
545
原创 Vue.use( ) 和 install方法使用
一.使用 1.在组件my.js创建组件//在组件my.js组件//引入全局组件import HButton from '../components/button.vue'import Hinput from '../components/input.vue'//存储组件的名const components = [ HButton, Hinput,]const My = { install(Vue) { //1.注册全局组件 compon...
2021-11-14 12:36:42
962
原创 canvas画布
一、语法 //获取dom元素 let cas = document.querySelector('选择器') // 获取上下文对象 let ctx = vas.getContext('2d') // 设置初始坐标 ctx.moveTo(100,100) // 设置终止位置 ctx.lineTo(300,100) // 指定线条的颜色 ctx.strokeStyle='green' //缩放 ctx.scale(x,y); //旋转
2021-11-13 20:34:28
299
原创 数组类型数据转换成树形结构数据
一、核心思路1. 先遍历原数组 以原数组中的每一项的id作为对象的key, 每一项本身作为对象的value形成一个对象结构(map) 2. 遍历原数组 使用数组中的每一项的pid 去第一步形成的map结构去匹配key(id) 如果匹配上就把当前项放入找到节点的children属性中去 如果无法完成匹配 代表当前项就是最根上的父节点那就把当前项直接放到最终产出的targetData中去...
2021-11-09 19:43:41
444
原创 git常用命令
一、git --version ------------------------查看版本git config --global user.name "xxx" 创建名字git config --global user.email "邮箱名" 创建邮箱git config --global --list 查看名字,邮箱git init ----------------...
2021-11-08 13:06:52
96
原创 防抖和节流
一、防抖1.概念：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)2.使用场景：3.实现防抖<body> <input id="input" type="text"></body><script> //获取事件源 let inp = document.getElementById('input') inp.addEventLis
2021-11-05 19:21:28
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人