张滚滚QAQ-CSDN博客

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const { VueLoaderPlugin } = require('vue-loader')const Dotenv = require('dotenv-webpack');const webpack = require('webpack');const ZipPlugin = require('zip-webpack-pl

2024-01-31 16:45:41 199

原创 CSS的transition：

属性用于在元素发生指定的样式变化时添加过渡效果，使元素的变化更加平滑。它可以应用于大多数CSS属性，包括颜色、大小、位置等。属性可以创建各种各样的过渡效果，使元素的样式更加生动和有趣。元素上时，背景颜色会逐渐从红色过渡到蓝色。属性需要设置过渡属性、过渡时间和过渡效果。属性，可以控制过渡效果的时间、速度和延迟等参数。在上面的示例中，当鼠标悬停在。

2024-01-31 15:05:44 440

原创如何发布自己的npm包：

安装weback：打开项目：创建webpack.config.js,创建src目录打包好了后发现两个js文件都被压缩了，我们想开发使用未压缩，生产使用压缩文件。erserPlugin：（推荐使用的原因是支持es6的语法）webpack4默认使用的压缩插件，当mode是production的时候，会自动去使用的一个插件。如果mode不是，可以自己配置，让他去使用。

2024-01-31 14:21:34 1238 1

原创 java跟javscript的区别：

当谈到 Java 和 JavaScript 时，虽然它们在名称上有相似之处，但实际上它们是两种完全不同的编程语言，具有不同的用途和特点。

2024-01-31 14:14:12 543

原创 java的抽象方法，java的抽象类，java的接口

在Java中，抽象方法是指只有方法声明而没有方法实现的方法。抽象方法是使用abstract关键字进行声明的，并且只能出现在抽象类或接口中。抽象类是一种不能被实例化的类，它只能作为其他类的父类，用于定义通用的属性和方法。抽象类可以包含抽象方法，这些方法在抽象类中没有具体的实现，而是由子类来实现。接口是一种完全抽象的类，其中的所有方法都是抽象的。接口定义了一组规范，子类可以实现多个接口来获得这些规范并实现接口中的所有抽象方法。在上面的例子中，Animal类是一个抽象类，其中包含一个抽象方法。

2024-01-30 17:07:57 470

原创 react的withRouter高阶组件：

//所以withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.// 在 React Router 中，withRouter 是一个函数，用于与路由相关的组件。它接受一个组件作为参数，并返回一个新的增强过的组件。// 这个增强过的组件可以访问到 React Router 提供的路由对象的属性和方法。//// 通常，当一个组件位于路由体系之外，例如在嵌套组件中或作为子组

2024-01-26 16:45:52 583

原创 react的简单版redux：

// 导入必要的依赖import React from 'react';import { createStore } from 'redux';import { Provider, useSelector, useDispatch } from 'react-redux';// 定义初始状态const initialState = { count: 0};// 定义 reducer 函数const countReducer = (state = initialState, ac

2024-01-26 16:44:55 42

原创 react hooks 的useState：

import React, { useState } from 'react';// useState Hook：用于在函数组件中添加状态。它返回一个包含当前状态和更新状态的数组// function Example() {// // 声明一个名为count的状态变量，初始值为0// const [count, setCount] = useState(0);//// return (// <div>// <

2024-01-26 16:44:15 586

原创 react的高阶函数HOC：

// React 中的高阶函数（Higher-Order Functions，HOC）是一个返回组件的函数，用于向组件注入额外的功能和行为。// HOC 的主要作用是对组件进行复用和组合。通过将常用逻辑抽离出来封装成 HOC，可以让业务组件更加简洁，减少代码冗余。// 另外，通过组合多个 HOC，也可以方便地实现复杂的功能组合和逻辑复用。// React 中的 HOC 主要有以下作用：// 对组件进行复用和组合。// 向组件注入额外的功能和行为。// 对组件进行条件渲染。// 将常用的逻辑

2024-01-26 16:43:31 554

原创 react hooks 的useMemo：

React 的 useMemo Hook 用于在函数组件中进行记忆化计算，它可以缓存一些需要耗时计算的值，以避免无谓的重复计算。useMemo 接收一个回调函数和一个依赖数组作为参数。回调函数用于进行一些复杂或耗时的计算，计算结果将被缓存起来。如果依赖数组发生变化，将重新执行回调函数并更新缓存的值。缓存的值可以在组件的渲染周期内被多次使用，而不需要每次重新计算。在这个例子中，当a或b发生变化时，sum将被重新计算。否则，它将从缓存中读取上一次计算的结果。在这个例子中，当list发生变化时，

2024-01-26 16:39:43 503

原创 react hooks的useEffect：

依赖数组是一个可选的参数，在数组中指定的依赖发生变化时， useEffect 将重新执行回调函数。React 的 useEffect Hook 用于在函数组件中执行副作用操作（例如数据获取、订阅事件等），它类似于类组件中的生命周期方法。通过使用 useEffect Hook，我们可以将副作用操作集成到函数组件中，并根据需要进行清理操作，使组件更加灵活和可维护。返回的清除函数（可选）将在组件销毁之前执行，用于清理副作用操作，比如取消订阅、清除定时器等。

2024-01-26 16:38:38 370

原创 react hooks的useContext

React 的 useContext Hook 用于在函数组件中获取上下文（Context）的值。它允许我们在组件中订阅并访问由 React 的 Context API 提供的值。首先，我们需要创建一个上下文对象。上下文对象被创建时，它包含一个 Provider 和一个 Consumer。在创建上下文对象后，我们可以使用useContextHook 在函数组件中订阅上下文的值。ProvideruseContext在上面的示例中，我们首先创建了一个名为MyContext。

2024-01-26 16:37:43 732

原创 react的hooks的useCallback：

回调函数即要缓存的函数，依赖数组用于指定哪些变量的变化会导致回调函数重新创建。只有当依赖数组中的值发生改变时，才会重新创建并返回新的函数引用。useCallback 是 React 提供的一个钩子函数，用于在函数组件中进行性能优化。它的作用是缓存函数的引用，避免不必要的函数重创建。在某些情况下，当一个函数作为 prop 传递给子组件时，每次父组件重新渲染时，这个函数也会被重新创建，导致子组件的不必要的重新渲染。为了避免这种情况，可以使用 useCallback 来缓存函数的引用。

2024-01-26 16:35:18 583

原创 vue3子组件获取父组件的属性方法：

子组件： // 子组件直接获取父组件里面的属性值 getCurrentInstance const stateParent = (getCurrentInstance()?.parent as any)?.devtoolsRawSetupState // 子组件获取父组件porps上面的属性 // const type = getCurrentInstance()?.parent?.props.type;

2024-01-26 16:31:42 1263

原创 vue3子组件触发父组件给他绑定的事件：

父组件：子组件：

2024-01-26 16:28:14 175

原创 vue3子组件获取父组件传递属性的方式：

子组件：

2024-01-26 16:26:20 271

原创 vue3使用watch进行数据监听：

<template> <div> <button @click='changeName'>修改name</button> </div></template><script setup lang="ts">import {watch} from 'vue'const myName = ref<string>('张三')// watch 数据监听watch(myName,

2024-01-26 16:22:27 122

原创 vue3父组件通过ref获取子组件的属性方法的步骤：

2.子组件需要将自己可以被父组件访问到的属性方法暴露出去

2024-01-26 16:18:35 1559

原创 java接口跟抽象类的区别：

Java中的接口和抽象类都可以用于实现类之间的解耦和代码复用，但它们有一些重要的区别。实现方式：接口是一种完全抽象的类，它只能定义方法和常量，不能包含字段和方法实现。抽象类是一个可以包含抽象方法和具体方法实现的类，它可以拥有字段和构造器。继承关系：类只能继承一个抽象类，但可以实现多个接口。这意味着一个类可以通过实现多个接口获得更多的灵活性。使用场景：接口主要用于定义类的契约，规定了类应该实现的方法。它们通常用于实现多继承和实现类之间的解耦。抽象类则更适用于提供类的基本实现和提供通用的方法。

2024-01-05 14:43:41 479

原创 elementui动态rules：

可以在change事件里面当发现下拉选中的某个值的时候需要更改rules 可以在data声明“isNoNeed” （我的代码是这个字段）通过三元对rules进行判断。一开始思路是给这个下拉的选项绑定change事件，当下拉的值为某个特定值的时候，动态的push规则到rules里面去，这种写法发现，必填的星星。并不会动态的根据你新生成的rules进行加载。

2024-01-05 11:22:01 873

原创 java构造器：

在 Java 中，构造器（Constructor）是一种特殊的方法，用于创建和初始化对象。构造器的名称与类名相同，它没有返回类型（包括void），也不需要使用return命令来返回值。在创建对象时，new关键字会自动调用对应类的构造器来创建对象并执行初始化操作。在上面的示例中，ClassName类有一个私有成员变量num，并定义了一个构造器，它接受一个整数参数，并在对象创建时将其赋值给成员变量num。voidthis()如果一个类需要进行特殊处理的初始化操作，就需要定义相应的构造器来完成这些操作。

2024-01-02 10:30:28 1093 1

原创 java的静态方法和静态属性：

如果在静态方法中需要访问非静态属性和方法，必须将其作为参数传递给静态方法或者在静态方法中创建一个对象实例。，而静态方法是与类相关联的，没有对象实例。因此，静态方法只能访问静态变量和静态方法。静态方法可以调用静态属性和静态方法，但是不能直接调用非静态属性和非静态方法，在这个示例中，静态方法。可以直接访问非静态变量。则需要通过对象实例参数。可以直接访问静态变量。

2024-01-02 09:53:46 603 1

原创前端通过iframe进行传值的方式：

iframe项目里面的代码：接收：

2023-12-29 16:06:33 439 1

原创 keep-alive包裹路由router-link（vue2 vue3）

一些状态会随着时间的推移而改变，或者页面中包含了一些需要即时更新的内容，则不适合通过缓存来实现。组件来缓存某些页面，那么这些页面在被切出去后不会经历重新渲染，它们的状态会被保存在内存中。但是，当您再次切换回这些页面时，如果缓存没有更新，页面仍然需要从头开始重新渲染。当一个带有缓存的组件被切换出去，它的状态会被保存在内存中，而不是被销毁。需要注意的是，缓存的更新是指在页面从缓存中被取出时，重新调用组件的。是的，如果缓存不更新，并且页面被重新加载，那么页面需要从头开始渲染。，这意味着您希望该组件进行缓存。

2023-12-21 16:48:54 608

空空如也

空空如也