自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(58)
  • 收藏
  • 关注

原创 react多级权限路由

技术栈:react-router-dom、react18、antd、vite-plugin-mock。

2024-08-13 22:27:09 486

原创 封装加载(raect18+antd)

该组件主要是anted的组件中自带的loading属性,并非提供的loading加载方式,注意跟其他组件库的区别。注意跟antd组件的Spin组件的区别。

2024-08-09 17:01:39 179

原创 全屏组件封装(react18+antd)

基于react+ts封装的公用全屏组件。

2024-08-09 11:50:35 475

原创 svg封装使用

在react封装svg组件

2024-08-08 16:47:22 352

原创 react的路由实战使用

路由的基本使用

2024-08-06 15:36:01 814

原创 vite项目构建配置

使用npm create vite@latest构建项目,配置项选项react->ts+SWC即可。让后打开项目npm i。

2024-07-30 18:10:39 791

原创 Redux +Toolkit 工具包快速入门

以上是关于如何设置和使用 Redux Toolkit 与 React 的简要概述。回顾一下细节:概括使用以下方法创建 Redux 存储configureStore -- 创建公共存储接受reducer函数作为命名参数自动使用良好的默认设置来设置商店为 React 应用程序组件提供 Redux 存储 -- 挂载store存储,存储传递到Provider将 React-Redux组件放在你的将 Redux 存储传递为。

2024-07-26 17:55:44 1228

原创 React Router-v6.25.1

以下例子是根据vite+react+ts构建的,使用路由前先安装好这些环境!!!!

2024-07-26 11:44:09 1045

原创 react组件通信方式

【代码】react组件通信方式。

2024-07-24 18:28:01 425

原创 react18+

React 有一些内置 Hook,例如useStateuseContext和useEffect。有时需要用途更特殊的 Hook:例如获取数据,记录用户是否在线或者连接聊天室。为了实现效果,可以根据应用需求创建自己的 Hook。这个示例中,自定义 Hook追踪当前指针位置,而自定义 Hook返回一个“滞后”传递的值一定毫秒数的值。

2024-07-24 17:29:00 903

原创 react.16+

在vite脚手架中执行:注意:1、这里没有this,因为babel编译后开启了模式2、渲染的组件必须要大写开头(虚拟dom转为真实的dom)

2024-07-24 13:49:09 992

原创 vue2组件通信方式

适用场景:子组件传递数据给父组件子组件通过$emit触发自定义事件,$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数Father.vue。

2024-07-03 21:27:41 614

原创 vite配置

主要配置有:root(源文件路径)、define(全局常量)、resolve(模块解析)、base(静态文件路径)等。以下也是常用的配置(实际根据具体项目而定)

2024-07-03 16:34:00 2539 2

原创 vue3中的自定义指令

自定义指令使用

2024-06-28 19:05:42 482

原创 vue3插槽的使用

作用域插槽可以接收来自子组件的数据,使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式,用于插入任何未明确命名的内容。通过合理使用插槽,你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。

2024-06-28 18:39:53 662

原创 ES6的代理模式-Proxy

在日常编写代码的过程中,我们想定义一些私有属性,通常是在团队中进行约定,大家按照约定在变量名之前添加下划线 _ 或者其它格式来表明这是一个私有属性,但我们不能保证他能真私‘私有化’,下面使用Proxy轻松实现私有属性拦截。使用场景还有很多很多,不再一一列举,如果你需要在某一个动作的生命周期内做一些特定的处理,那么。上面的代码表示在读取代理目标的值时,如果有值则直接返回,没有值就抛出一个自定义的错误。我们在上面例子已经体验过了,现在详细介绍一下,用于代理目标对象的属性读取操作。需要注意的是,代理只会对。

2024-06-27 17:51:01 1727 2

原创 ECMScripts6(下篇)

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。上面代码通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。上面代码中,例一和例二都是Set函数接受数组作为参数,例三是接受类似数组的对象作为参数。

2024-06-01 11:26:02 1006

原创 es6中的方法(字符串、数值、数组、对象)

用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符。上面代码中,不能识别大于0xFFFF的码点,所以0x20BB7就发生了溢出,最高位2被舍弃了,最后返回码点U+0BB7对应的字符,而不是码点U+20BB7对应的字符。

2024-05-19 21:12:51 833

原创 ECMScripts6(上篇)

解构赋值可以方便地将一组参数与变量名对应起来。

2024-05-17 19:05:53 611

原创 浅拷贝与深拷贝

浅拷贝是对对象或数组进行浅层复制,只复制对象的一层属性,当复制的对象中有引用类型的属性时,复制出来的对象和原对象会共享引用类型的属性。这意味着,如果原对象中的引用类型属性被修改,复制出来的对象也会受到影响。因此,浅拷贝只适用于一些简单的数据类型的对象。Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。返回目标对象。Object.assign() 会覆盖目标对象中与源对象属性名相同的属性值。通过传入一个空对象,可以很容易地实现浅拷贝。

2024-05-17 18:49:17 488

原创 git的命令操作

通过在执行推送时省略分支名称,Git 将默认假定您正在尝试将当前更改推送到与本地分支同名的远程分支。选项,则本地存储库中存在的所有标签都将被推送到远程存储库中,并与您指定的任何符号引用一起在远程存储库中创。选项就像一个快捷方式,可以检测更改的文件 (新添加的文件除外),将它们添加到索引, 并提交它们。pull 命令将从远程存储库中检索最新更改的内容,并将其直接合并到您的本地存储库中。Git revert 命令将一个提交作为参数,并创建一个新的提交来撤消该提交所做的更改。您下次运行推送时,可以省略分支名称。

2023-11-03 11:29:28 470 1

原创 echarts封装使用

【代码】echarts封装使用。

2023-09-19 18:54:48 57

原创 常用请求状态码反馈

【代码】常用请求状态码反馈。

2023-09-13 15:37:31 194

原创 时间方法--根据不同时间段展示

【代码】时间方法--根据不同时间段展示。

2023-09-12 14:18:22 39

原创 TS使用教程

1.1在本地运行ts代码需要先编译,可以通过命令安装tsc,tsc 的作用就是把.ts脚本转变成.js脚本(先安装npm)1.2.通过tsc -v查询版本。

2023-09-03 15:36:35 5749 7

原创 vue3+ts的权限路由配置

5.4并在router的index路由权限中使用构建的过滤方法以及store和路由权限。3.构建公共组件 (主要是home页面的头部和路由栏,以及出口路由栏main)1、构建项目,配置vite和tsconfig.json---主要是@的配置。4.构建路由组件以及403组件和home父组件(路由组件都在父组件中实现)2.配置入口函数--main.ts--主要是配置UI框架和pinia。5.2 配置utils中的方法(用来过滤权限和使用)5.权限路由方法(最重要的步骤)5.1 配置sotre。

2023-07-03 23:20:48 1789

原创 mock模拟数据+axios二次封装

npm i axios ---axios是项目中都会用到,不能安装在开发模式中。在mock文件夹下创建所需请求文件---index.ts。

2023-06-17 15:14:51 527 3

原创 vue3组合式组件通信方式总结

父组件:子组件:父组件: 子组件:安装mitt(npm网站中可查询---https://www.npmjs.com/package/mitt)组件传值:emit组件接收值:on配置bus:父组件:自定义事件+props=v-model使用 多个v-model:子组件:父组件:子组件: 父组件:(要使用子组件) 子组件: 祖先组件: 后代组件:

2023-06-03 16:33:29 147

原创 js中常见操作对象和数组的方法

13.Object spread----扩展对象允许为一个没有更改的对象添加新的属性和方法(换句话说,创建了一个新对象)。对象扩展符也可以把多个对象合并在一起。6.some()方法---判断数组中的某些元素是否通过由提供的函数实现的测试。9.Objects.values()---返回一个由定对象自己的所有可枚举属性值的数组。11.Object.enntries()--返回一个由一个给定对象的键值对组成的数组。10.Objects.keys()---返回一个由定对象的自身可枚举属性组成的数组。

2023-05-14 16:12:38 362

原创 vue3.0

vue3.0

2022-08-28 18:04:48 378

原创 vue跨域代理

跨域

2022-08-28 18:03:39 191

原创 vue2.0拦截器

拦截器

2022-08-28 17:53:38 310

原创 async/await

2022-08-03 17:28:16 93

原创 Promise

2022-07-31 22:25:27 86

原创 ES6模块化

2022-07-31 21:23:56 71

原创 vue2.0-2

目录1、动态组件1.1动态渲染​编辑​编辑1.2keep-alive对应的生命周期函数​编辑1.2.1生命周期和组件激活、缓存​编辑1.2.2keep-alive的include和exclude属性 2、插槽2.1slot和v-slot(#)指令的使用 2.1.1后备内容2.2具名插槽 2.3作用域插槽3、自定义指令3.1私有自定义指令 3.2全局自定义指令4、把axios挂载原型链上并配置请求根路径5.路由 5.1vue-router的基本使用5.1.1、创建路由模块:vue.use就是安装插件5.1.2

2022-06-19 22:38:09 166

原创 vue2.0-1

目录1、vue简介1.1vue特性1.1.1数据驱动视图1.1.2双向数据绑定1、vue简介1.1vue特性1.1.1数据驱动视图1.1.2双向数据绑定1.2数据驱动视图和双向数据绑定的核心原理原理-MVVM2、vue的基础语法.........

2022-05-11 22:42:36 863 2

原创 webpack

目录vue21、webpackvue2前端工程化1、webpack-S:核心依赖包 (开发和上线会用到)-D:开发依赖包(只在开发中用到)第一个插件:第二个插件: ...

2022-04-27 15:47:08 83

原创 node基础

1模块系统

2022-04-20 16:49:25 524

原创 git项目管理+github使用

2配置用户信息23查看全局配置文件4 检查配置信息1、git基本操作

2022-04-05 23:29:31 926

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除