自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 create-react-app中配置less与别名alias(使用craco)

create-react-app中配置less和别名alias(craco方案)

2022-07-21 21:34:02 1150 1

原创 Next.js中使用Tailwind CSS

Next.js中使用Tailwind CSS

2021-12-23 15:30:11 2901 2

原创 sourceTree中的rebase操作

sourceTree中rebase操作

2021-12-06 11:41:03 2455 1

原创 MongoDB使用$sort与$project排序字段bugfix

项目场景:场景:数据按mtime或ctime排序查询,返回前端数据过滤status, mtime, ctime问题描述:$sort写在$project后,可能会出现$sort指定字段被$project过滤,导致排序结果出错const PROJ: any = { status: 0, ctime: 0, mtime: 0 }/** * 未指定任何查询参数 * @param offset 偏移量 * @param limit 返回的rows.length * @returns tota

2021-11-24 11:43:01 855

原创 Next.js中引入Standard JS eslint

文章目录前言一、安装依赖1.安装2.参考配置二、使用步骤1.修改.eslintrc.json2.重启vscode总结前言Next.js中引入Standard JS eslint一、安装依赖1.安装# typescript eslintyarn add -D @typescript-eslint/parser# standard js eslintyarn add -D eslint-config-standardyarn add -D eslint-plugin-nodeyarn .

2021-11-16 10:24:39 930

原创 next.js中设置别名@

文章目录前言一、安装插件二、使用步骤1.修改.babelrc2.新建tsconfig-base.json2.tsconfig.json继承tsconfig-base.json三、效果展示总结前言Next.js中设置别名@项目目录结构一、安装插件使用babel-plugin-module-resolver# 安装插件yarn add -D babel-plugin-module-resolver或# 安装插件npm install --save-dev babel-plugi

2021-11-16 10:10:15 2364

原创 React笔记:类似生命周期函数componentDidMount、componentWillUnmount、componentDidUpdate在useEffect中的使用

文章目录前言一、类似于componentDidMount的useEffect1.对应代码2.使用示例二、类似于componentWillUnmount的useEffect1.对应代码2.使用示例三、类似于componentDidUpdate的useEffect1.对应代码总结前言本文为React中useEffect的使用笔记一、类似于componentDidMount的useEffect1.对应代码import { useEffect } from 'react'const Demo

2021-07-30 10:59:20 2559

原创 Vue-router笔记:路由的传参

文章目录前言一、使用动态路由二、使用query三、使用步骤1.配置路由2.传参3.演示效果总结前言Vue-router笔记:路由的传参(两种方法)一、使用动态路由// 配置动态路由path: '/路径:参数',component: 组件二、使用querythis.$router.push({ path: '/me', query: { name: 'Anna', age: 17 }})三、使用步骤1.配置路由router/index

2021-04-01 22:58:42 180

原创 Vue-router笔记:访问根路由重定向至首页,修改默认路由值为history模式

文章目录前言一、新建组件1.首页组件Home.vue2.关于组件About.vue3.App.vue二、使用步骤1.配置路由2.导入组件3.效果图总结前言Vue-router笔记:访问根路由重定向至首页,修改默认路由值为history模式一、新建组件1.首页组件Home.vue<template> <div> <h2>首页组件</h2> </div></template><script>

2021-04-01 18:55:20 4270

原创 Vue-router笔记:vue-router的安装与导入

文章目录前言一、vue-router安装1.自定义安装2.vue-cli安装二、导入1.自定义安装的导入2.读入数据总结前言Vue-router笔记:vue-router的安装与导入一、vue-router安装1.自定义安装在项目路径下安装npm install vue-router --save2.vue-cli安装使用vue-cli初始化项目时,安装vue-router时选择y二、导入1.自定义安装的导入/src下新建文件夹router,/src/router下新建inde

2021-04-01 18:34:40 314

原创 Vue笔记- “v-model“的原理

文章目录前言一、代码二、演示效果总结前言Vue笔记- "v-model"的原理一、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>-----------------------

2021-03-31 21:36:00 80

原创 Vuex笔记-state与mutations的使用

文章目录前言一、state二、mutations二、实际使用1.新建mutations.js2.store/index.js中导入mutations3.App.vue总结前言Vuex笔记-state与mutations的使用一、state1、Vuex使用单一状态树,即每个项目仅包含一个store实例2、子模块将放置在store实例的modules中3、state的使用方式类似vue实例中的data,例如:// store/index.jsconst state = { counter

2021-03-29 09:10:30 572

原创 Vuex笔记-Vuex的安装与导入

文章目录前言一、安装流程1.安装vuex2.导入vuex二、使用步骤1.引入库2.读入数据总结前言Vuex的使用一、安装流程1.安装vuexnpm install vuex --save以learn_vuex项目为例2.导入vuex在/src下新建文件夹store,在store文件夹下新建index.js在/store/index.js中import Vue from 'vue'import Vuex from 'vuex'// 1.安装插件Vue.use(Vuex)

2021-03-28 22:28:52 430

原创 CSS笔记-2D转换-分页按钮缩放

文章目录前言一、演示二、代码总结前言CSS笔记-2D转换-分页按钮缩放一、演示二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ display: flex; flex-direction: row; }

2021-03-23 17:08:31 95

原创 CSS笔记-2D转换:移动、旋转、缩放

文章目录前言一、演示二、代码总结前言CSS笔记-2D转换:移动、旋转、缩放一、演示二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .rotate{ transition: all .4s; } .rotate:hover

2021-03-23 17:02:46 70

原创 CSS3笔记-传统盒子模型与CSS3盒子模型

文章目录前言一、效果图二、代码总结前言传统盒子模型与CSS3盒子模型的区别一、效果图二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div:nth-child(1){ /* 传统盒子模型宽度 = width + padding +

2021-03-23 16:49:07 474

转载 CSS笔记-文字溢出省略号显示

文章目录前言一、代码二、演示效果总结前言CSS学习笔记-文字溢出div部分,使用省略号进行显示一、代码HTML代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字溢出省略号显示</title> <style> .row { width: 100px; backgrou

2021-03-13 22:15:35 107

原创 CSS笔记-三角制作

文章目录前言一、代码二、效果图总结前言CSS笔记-使用CSS制作三角形希望获得下图这种三角形:一、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS三角的制作</title> <style> .box { width: 0; height: 0; bord

2021-03-13 20:40:05 61

原创 CSS笔记-元素的隐藏(display与visibility)

文章目录前言一、原状态的CSS1. 原状态的CSS代码:2. 原状态的效果:二、display: none;的CSS1. display: none;的CSS代码:2.display: none;的效果(.vis盒子覆盖了.dis盒子的位置):二、visibility: hidden;的CSS1. visibility: hidden;的CSS代码:2.visibility: hidden;的效果(.dis盒子隐藏了,但位置保留了):总结前言CSS学习笔记-元素的隐藏(display与visibili

2021-03-13 19:14:18 163

原创 CSS笔记-选择器的权重

文章目录前言一、选择器的权重二、权重的叠加1.复合选择器有权重叠加的问题2.运行结果总结前言CSS学习笔记-选择器的权重一、选择器的权重选择器选择器权重继承 或 *0,0,0,0元素选择器0,0,0,1类选择器,伪类选择器0,0,1,0id选择器0,1,0,0行内样式style=" "1,0,0,0!important∞无穷大二、权重的叠加1.复合选择器有权重叠加的问题HTML代码如下:<!DOCTYPE html&

2021-03-13 18:11:35 90

原创 算法-有效的括号(JavaScript实现)

文章目录前言一、代码实现二、实机演示总结前言算法题练习记录题目来源:LeetCode链接:https://leetcode-cn.com/problems/valid-parentheses一、代码实现使用“栈”实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>有效的括号</title></head>&

2021-03-13 12:00:53 113

原创 JavaScript笔记-发送验证码定时器案例(setInterval与clearInterval的使用)

文章目录前言一、函数用法1.setInterval2.clearInterval二、代码三、实机演示总结前言JavaScript的学习笔记-发送验证码定时器案例(setInterval与clearInterval的使用)注:仅实现倒计时的功能,无实际发送验证码功能一、函数用法引用自菜鸟教程: https://www.runoob.com/jsref/met-win-setinterval.html1.setIntervalsetInterval(function, millisecon

2021-03-12 18:39:06 595

原创 JavaScript笔记-innerHTML与innerText的区别

文章目录前言一、区别二、代码三、运行结果总结前言JavaScript的学习笔记-innerHTML与innerText的区别一、区别属性描述innerHTML将字符串内的html标签当作标签渲染innerText将字符串内的html标签当作字符串渲染二、代码HTML代码如下(示例):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt.

2021-03-12 17:20:55 54

原创 JavaScript笔记-注册(绑定)事件的两种方式

文章目录前言一、用法二、代码三、实机演示总结前言JavaScript的学习笔记-注册(绑定)事件的两种方式1.传统方式2.方法监听方式一、用法1.传统方式<body> <!--1.第一种--> <button onclick="alert('传统方式注册事件')"></button> <script> // 2.第二种 btn.onclick = function() {} </script>

2021-03-11 22:41:07 202

空空如也

空空如也

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

TA关注的人

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