- 博客(33)
- 资源 (8)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 【JS】 字符串方法汇总（工作常用）
字符串常用方法charAt()charAt()：返回指定索引位置的字符，由传入方法的整数参数指定。let str = "hello world";console.log(str.charAt(7)); //oconsole.log(str.charAt(70)); //""charCodeAt()chatCodeAt()：返回指定索引位置的unicode编码，由传入方法的整数参数指定。let str = "hello world";console.log(str.charCo
2021-04-10 17:06:54
1963
1
原创 【JS】 函数的 this 指向
文章目录this关键字改变 this 指向callapplybindthis关键字哪个对象调用函数，函数里面的this指向哪个对象。全局定义的函数直接调用，this => windowfunction fn(){ console.log(this); // 此时 this 指向 window}对象内部的方法调用，this => 调用者var obj = { fn:function(){ console.log(this); }}obj.fn();//
2021-04-29 18:55:08
1170
16
原创 【React】生命周期详解
文章目录constructor(props)constructor(props)React组件的构造函数在挂载之前被调用。在使用React.Component构造函数时：需要先在添加其他内容前，调用super(props)用来将父组件传来的props绑定到这个类中使用this.props将会得到。官方建议：不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。constructor中应当做些初始化的动作如：初始化
2021-04-27 22:55:56
3722
1
原创 【React】路由详解
文章目录基本用法path 属性Histroy 属性HashRouterBrowserRouter声明式跳转LinkNavLink路由组件componentrenderchildren编程式导航pushgo路由传参match.paramslocation.searchlocation.stateswitch及404页面处理嵌套路由withRouter添加路由属性路由守卫基本用法安装依赖：npm i -S react-router-dom使用时，路由器 Router 就是 React 的一个组件。
2021-04-26 22:30:59
6096
7
原创 【VScode】创建用户代码片段（以React.jsx文件为例）
文章目录创建步骤相关问题怎么在React.jsx文件中使用创建步骤点击设置，选择用户代码片段选择新建全局代码片段给你要创建的代码片段命名将所圈住的代码片段取消注释结构图创建好后，Ctrl+S保存即可然后在 js 文件中调用：能弹出相应的快捷方式表示创建成功相关问题我所创建的代码片段有的文件里能用，有的文件下又不能使用。答：比如你scope里面只写了javascript，那就只能在javascript中使用，如果想在css或者html中使用，就得把这两
2021-04-25 19:04:58
3214
2
原创 【node】导入(require) 导出(exports) 语法
在实际开发中，一般是每个人完成一个功能，然后将多个功能组合在一起，从而完成整个项目。我们将这个过程叫做模块化开发。每个文件都是一个单独的模块。每个人开发的功能都是一个单独的文件，要将多个文件组合在一起，需要将这多个文件导出，然后在一个最终的项目文件中导入。
2021-04-25 17:00:04
1526
原创 【Yarn】使用教程
文章目录yarn 的定义yarn 的全局安装yarn 和 npm 的命令yarn 比 npm 的优势yarn 的定义Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享 全世界开发者的（例如 JavaScript）代码。通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步yarn 的全局安装指令：npm i -g yarn检测安装：yarn --version
2021-04-25 11:46:01
572
原创 【React】 lazy 和 Suspense
文章目录一、import() 函数二、React.lazy三、React.Suspense3.1、lazy 不用 Suspense（报错）3.2、lazy 使用 Suspense（推荐）一、import() 函数同样是引人模块，import命令是同步引人模块，而import ()函数动态引入// `math.js`文件const add = (x, y) => { return x + y;}export default add;//import 命令import { a
2021-04-23 22:48:26
1690
原创 【React】Portal 传送门
文章目录基本用法案例分析基本用法Portal 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法render到一个组件中时，实际上是改变了网页上的另一处的dom结构，一般用于对话框、提示框ReactDOM.createPortal(child,container);child：可渲染的react子项，比如元素，字符串或片段container：DOM元素普通的组件，子组件的元素将挂载到父组件的DOM节点中render(){ // React
2021-04-23 21:16:43
874
1
原创 【React】HOC 高阶组件
高阶组件Higher-Order Components就是一个函数，传给它一个组件（参数是组件），它返回一个新的组件（返回值是组件）作用：对原有的组件的扩展const NewComponent = higherOrderComponent(YourComponent)比如，我们想要我们的组件通过自动注入一个版权信息。withCopyright.jsx 文件定义一个高阶组件//版权的高阶组件 hoc import React, { Component } from 'react';/
2021-04-23 19:29:15
298
原创 【React】类组件传值（props）
文章目录父传值给子子传值给父父传值给子父组件将自己的状态传递给子组件，子组件当做属性来接收props，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变import React, { Component } from "react";// 父组件class Farther extends Component { // 父的数据 state = { msg:"父的数据" } render() { return (
2021-04-23 10:19:02
1100
原创 【React】表单应用
文章目录表单受控组件input 标签textare 标签select 标签非受控组件表单在 React 里，HTML表单元素的工作方式和其他的DOM 元素有些不同，这是因为表单元素通常会保持一些内部的state。例如这个纯 HTML 表单只接受一个名称：<form> <label> 名字: <input type="text" name="name" /> </label> <input type="submi
2021-04-23 09:49:15
362
原创 【React】 类组件中 Ref 的使用（createRef）
文章目录基本使用父子传值基本使用React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例,ref可以挂载到组件上也可以是dom元素上。挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例挂载到dom元素上时表示具体的dom元素节点import React, { PureComponent } from 'react'class Child extends Pure
2021-04-22 22:14:56
1684
原创 【React】列表应用
文章目录渲染列表组件基础列表组件用 key 提取组件渲染列表组件我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems：const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => <li>{number}</li>);我们把整个 listItems
2021-04-22 21:45:16
421
原创 【React】事件处理
文章目录事件绑定事件写法Event 对象事件传参处理表单事件绑定React 采用on+事件名的方式来绑定一个事件但是和原生事件是有区别的：原生事件全是小写onclickReact里面的事件是驼峰写法onClickReact的事件并不是原生事件，而是合成事件事件写法在组件内使用箭头函数定义一个方法（推荐）import React ,{Component} from 'react'import ReactDOM from 'react-dom'class App extends
2021-04-21 22:01:24
365
1
原创 【React】基础入门教程
文章目录组件是啥？函数组件组件是啥？组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素函数组件由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为一个方法，让这个方法去return一个元素:import React from 'react'import ReactDOM from 'react-dom'// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需
2021-04-20 16:40:50
668
原创 React 编写我的第一个 react 应用程序
react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了，不要自己手动安装配置。具体步骤：先创建一个 react 项目：点这跳转，查看流程创建的工程目录下的src里面的文件清空重新创建一个index.js文件js 代码如下：// 从 react 的包当中引入了 React。/*只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，.
2021-04-19 21:27:31
4909
3
原创 React vscode 创建 react 项目流程【超详细】
文章目录一、安装node二、配置淘宝镜像三、配置 vscode（win10）四、全局安装脚手架五、创建项目一、安装node请在官网下载安装：https://nodejs.org/zh-cn/vscode 中 点击 ( ctrl + `) 调出终端输入指令node -v，能显示版本号，说明 node 已经装好了输入指令npm -v，能显示版本号，说明 npm 可以使用了点击链接查看图文教程https://blog.csdn.net/qq_45677671/article/detail
2021-04-19 20:29:09
20430
3
原创 【ES6】解构赋值
文章目录一、解构赋值二、解构数组1. 变量赋值2. 交换变量3. 默认值4. 不完全解构5. 解构数组嵌套6. 与`...`运算符结合使用三、解构对象1. 获取成员2. 对象赋值3. 默认值4. 解构嵌套对象四、解构函数1. 函数的参数2. 函数返回值四、其他解构1. 字符串3. 其他数据类型一、解构赋值解构赋值：主要用来从数组和对象中提取值，对变量进行赋值。[]：是专门解构数组使用的{}：是专门解构对象使用的二、解构数组1. 变量赋值ES6之前的写法：var a1 = 1,b1 =
2021-04-17 17:30:17
6385
原创 【ES6】let 和 const 详解
文章目录一、let 和 const 共同点1. 不重复声明2. 无变量提升3. 作用域限制4. 暂时性死区二、let 和 const 不同点1. 声明时区别2. 赋值时区别一、let 和 const 共同点我们以前都是使用var关键字来声明变量的在ES6的时候，多了两个关键字let和const，也是用来声明变量的，只不过和var有一些区别1. 不重复声明let和const不允许在相同作用域内，重复声明同一个变量var关键字/* 使用 var 的时候重复声明变量是没问题的，只不过就是后面
2021-04-17 11:01:12
566
原创 【ES6】...扩展运算符
文章目录展开运算符一、在函数中使用1. 传递参数2. new 表达式二、在数组中使用1. 连接数组2. 拷贝数组三、在对象中使用1. 拷贝对象2. 合并对象展开运算符ES6 里面号新添加了一个运算符...，叫做展开运算符可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开let arr = [1,2,3,4,5];console.log(...arr); // 1 2 3 4 5一、在函数中使用
2021-04-16 22:02:52
457
原创 【JS】for、for-in、for-of 循环的区别
四、for 和 for in 循环因为数组的索引就可以获取数组中的内容数组的索引又是按照0-n顺序排列我们就可以使用for循环来循环数组，因为for循环我们也可以设置成0-n顺序增加我们把这个行为叫做遍历var arr = [1,2,3,4,5];// 使用 for 循环遍历数组for (var i = 0; i < arr.length， i++){ console.log(arr[i]);}//会在控制台依次打印出1,2，3,4，5i < arr.lengt
2021-04-10 14:39:21
1682
原创 【JS】数组排序（六大方法）
四、for 和 for in 循环因为数组的索引就可以获取数组中的内容数组的索引又是按照0-n顺序排列我们就可以使用for循环来循环数组，因为for循环我们也可以设置成0-n顺序增加我们把这个行为叫做遍历var arr = [1,2,3,4,5];// 使用 for 循环遍历数组for (var i = 0; i < arr.length， i++){ console.log(arr[i]);}//会在控制台依次打印出1,2，3,4，5i < arr.lengt
2021-04-10 11:04:55
5960
2
原创 【Vue】ref 的使用
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。// this.$refs.child 是 组件的实例。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的。
2021-04-09 22:40:59
651
原创 【Vue】render 方法的使用
render 是字符串模板的一种替代，可以使你利用 JavaScript 的丰富表达力来完全编程式地声明组件最终的渲染输出。
2021-04-09 22:16:26
756
原创 【Vue】实现简易待办事项表·教程
文章目录效果图源代码效果图无事项时：有事项时：源代码<!DOCTYPE html><html lang="en"><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
2021-04-09 22:03:13
673
原创 【Vue】使用 h() 函数用于创建 vnodes
>- h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。>- 这个名字来源于许多虚拟 DOM 实现默认形成的约定。>- 一个更准确的名称应该是 createVnode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力
2021-04-09 21:44:48
693
原创 【Vue】实现点击单行变色·教程
文章目录效果图源代码效果图打开页面时：点击第二行源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
2021-04-09 20:12:04
443
原创 【Vue】axios 配置详解
文章目录1.axios 定义2. 特性3.安装和使用4.请求写法5.并发请求6.创建实例7.实例方法8. 请求配置9.响应结构10.配置默认值全局的 axios 默认值自定义实例默认值11.拦截器1.axios 定义Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中2. 特性axios 的优势：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据
2021-04-08 15:50:31
5366
原创 【Vue】生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。...
2021-04-06 21:33:47
376
原创 【Vue】图片引入方式
方法一：在 data 中定义在data()里面定义好图片路径，需要在链接外面加上requiredata(){ return { imgUrl:require("../assets/test.png"), }}在template模板里面使用，需要使用v-bind (简写 : )绑定图片的src属性<template> <img :src="imgUrl"></template>方法二：使用 import 导入引入：import
2021-04-06 19:19:20
569
原创 【Vue】export 导出用法
在JavaScript ES6中，**export** 与 **export default** 均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过 **import+(常量 | 函数 | 文件 | 模块)名** 的方式，将其导入，以便能够对其进行使用...
2021-04-06 17:32:48
3554
原创 Vue vscode 创建 vue 项目流程【超详细】
文章目录一、安装node二、配置淘宝镜像三、配置 vscode（win10）四、全局安装脚手架五、创建项目六、进入项目七、项目结构一、安装node请在官网下载安装：https://nodejs.org/zh-cn/vscode 中 点击 ( ctrl + `) 调出终端输入指令node -v，能显示版本号，说明 node 已经装好了输入指令npm -v，能显示版本号，说明 npm 可以使用了点击链接查看图文教程https://blog.csdn.net/qq_45677671/ar
2021-04-02 10:05:49
53187
19
CSDN 写博客时无法上传 gif 图片怎么办？
2021-05-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人