自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 react生命周期

react生命周期react生命周期三个阶段挂载阶段更新阶段卸载阶段一、挂载阶段1、constructor 初始化数据:它接收两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。2、componentWillMount :dom渲染之前3、render:渲染函数,不要在这里修改数据。 vue中也有render函数。4、componentDidMount:在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可

2020-11-24 09:15:15

原创 vue组件中的data为什么是一个函数?

一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数,因为javascipt只有函数构成作用域,data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。...

2020-11-20 18:57:44 21

原创 vue与react使用echarts,详细使用步骤

vue引入echarts1、下载npm install echarts --save2、在min.js全局引入import Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Echarts)3、使用3.1、在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。<template> <div> <div id="echarts" :style="{widt

2020-11-18 11:45:30 23 1

原创 计算属性——computed

vuex的state与vue的data都是用户存放数据的地方,如果我们将vuex的数据直接赋值给data然后再页面使用数据,那么vuex的数据发生变化视图不会更新,那么这个时候就需要使用到计算属性computed。案例展示通过下图可以发现,如果直接将vuex的数据赋值给data中的变量,如果我们调用vuex的mutation中的修改操作,页面数据不会更新;如果我们将数据的变化交给computed来监听然后再页面使用,会发现数据更新视图也会更新。vuex部分代码截图...

2020-11-14 10:45:04 4

原创 vue—watch深度监听(deep:true)

1、监听数字如下图:第一个输入框绑定了data中的num,使用watch监听num的变化,可以发发现是可以正常监听的。2、监听对象通过上面案例可以发现,如果监听的是一个对象,那么我们这种写法是监听不到对象内部的变化的。3、深度监听1、watch加上deep:true之后就是深度监听2、handler中返回变化后端obj3、watch第一次加载不执行,数据有变化才会执行,如果需要页面加载完毕执行,那就加上immediate:true与deep同级...

2020-11-14 10:12:54 28

原创 react新增数据报错,The above error occurred in the <Table> component,

使用ntd组件新增数据的时候报错如下:提示时传输的数据格式不对,修改一下就好了。意思就是,错误发生在以上错误发生在组件中,考虑在树中添加一个错误边界来定制错误处理行为。也就是传入的数据格式不对原来新增数据时候的代码:修改后:...

2020-11-11 17:42:54 223

原创 ts泛型

泛型在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。其实就是把类也当作变量(类是可变的,未知的)使用,把类放在<>尖括号内,表示声名的类型。定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}如:function 函数名(length: number, value: T): Array {};其中T就是类型的变量名;调用 函数名(参数) /

2020-11-09 23:32:45 80

原创 TypeScriptts使用—类型断言—访问控制符—泛型

介绍TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化为什么要用TypeScript1、开源2、简单TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。3、兼容性好TScript 是 JS的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaSc

2020-11-09 23:31:43 59

原创 Array对象的全局方法——详细总结

总结会修改原始数组的方法有1、shift()删掉数组第一个,会修改原数组2、pop()删除数组最会一位,会修改原数组3、reverse()反转数组,会修改原数组4、slice(开始位,结束位)切割数组,会修改原数组5、splice()替换/删除/插入,会修改原数组注:splice()可以传递三个参数,)可以替换/删除/插入),具体用法看下面的案例用法案例1、shift()删掉数组第一个,会修改原数组 let arr=[1,2,3] let a=arr.shi

2020-11-08 18:56:42 60

原创 arguments参数对象

1、一个函数的所有参数的集合,它是一个类数组,它拥有数组的下标和.length特性。2、可以在函数内部使用arguments接收所传递过来的参数,是一个集合。可以把所有的实参复制一份,放进arguments里3、arguments只能在函数内部使用,代表的是当前函数的实参副本4、arguments是一个类数组对象5、arguments存了多个值,可以通过下标的方式去访问某一个6、arguments一般用于一系列参数,但是不确定个数得时候7、arguments得下标得取值范围 0 ~ argume

2020-11-08 17:56:59 21

原创 while与do-while语法及小案例

while与do-while的区别1、do…while循环至少会执行一次循环体;2、while循环只有在条件成立的时候才执行循环体。语法while循环只有在条件成立的时候才执行循环体while(执行条件){逻辑} while(true){ var num=prompt('请输入谜底'); if(num==50){ alert('猜中了'); break; }else if(num<50){ alert('猜小了'); }els

2020-11-08 17:46:19 49

原创 js条件判断语句switch

语法1、switch后面写的是表达式2、case后面的返回值代表的是表达式的返回值,当表达式的返回值与任意一个case后面的值相同,就会执行该case后面的代码段,然后将返回值返回出去3、如果没有满足全部case后面的返回值,那么就会返回default后面代码段的值,default就是设置默认值的地方switch (表达式){case 返回值1:{ 代码.. ... .. break; } case 返回值2:{ 代码.. ... .. break; } case 返回值3:{ 代码.. ..

2020-11-08 17:09:43 22

原创 Redux—redux-thunk— action里处理异步,封装详细步骤,适合初学者。

1、2、3、4、

2020-11-04 23:34:49 31

原创 Redux—redux-thunk——combineReducers

任何对数据的才做都会经理renducer,reducer要求是个纯函数(在函数内部不能修改函数的参数(输入),要有返回值),它的功能是:传入旧的state,根据action对state做操作,返回新的state。redux是什么Redux是为javascript应用程序提供一个状态管理工具,集中的管理react中多个组件的状态。redux是专门作状态管理的js库(不是react插件库可以用在其他js框架中例如vue,但是基本用在react中)什么时候用redux需求场景:某个组件的状态需要共享的

2020-11-03 17:49:46 23

原创 React—HOC 高阶组件

HOC 高阶组件基本概念对组件中可以被重复使用的内容进行封装什么是高阶组件高阶组件是一个函数,接收是一个组件,返回值也是一个组件,这类组件我么叫做高阶组件(HOC);高阶组件的本质就是一个函数,比如js中的 map() filter()forEach…,高阶组件是React中用于重用组件逻辑的高级技术。HOC本身不是React API 的一部分。他是从React构思本质模式中浮现出来的一种模式。注意: 在使用高阶组件的时候 如果需要进行props的传递 那么必须在高阶组件中向组件添加 {…

2020-11-02 14:29:25 21

原创 uni-app引入字体图标详细步骤

之前自己做学习中不会引入矢量图,在网上搜索方法,没找到哟个详细的,自己动手记录一下,uni-app引入字体图标1、在案例矢量图官网选择需要的图标进行下载2、得到如下文件3、将将文件中的六个文件放进项目里面,就是下面截图的那六个即可4、在全局App.vue中引入引入后会报如下错误5、解决方式进入你引入的字体图标中的iconfont.css中注意下下图标红的地方路径需要修改一下就号了。6、按照如下图的修改方式即可解决7、然后就可以在页面正常使用了在下载的字体图标的文件中店

2020-11-01 15:03:44 105 4

原创 vue路由传参—params—query

1、Params的方式类似于get请求,传递的数据会在浏览器地址显示Params路由传参分为三步:1、绑定参数在你传参的路由绑定参数2、发送数据3、接收参数在路由页面用this.$route.params.listdata收传递过来的参数。二、query类似与post请求,传递的数据不会再浏览器地址显示。query传参分文两步:发送-接收(不需要再路由中配置)1、传递参数2、接收参数1、query和params是两种传参方式2、使用params传参只能由name引入路

2020-11-01 11:39:18 16

原创 c3弹性盒—Flex布局

什么是弹性盒就是给父元素加上display:flex;会形成一个弹性盒,其子级会自动成为弹性盒成员,通过给父元素添加属性来改变子元素的排列方式、及空间分配。概念:弹性盒式c3中提出的一种布局方案。是为了针对不同屏幕不同设备的一整套解决方案。主要针对一个容器中的子元素进行排列、对齐、空间分配。#### Flex布局(弹性盒布局)添加给父元素的属性:1、display:形成弹性盒子 + display:形成弹性盒子 - flex(常用)/inline-flex(内联弹性盒子);

2020-10-31 15:38:40 24

原创 react—props验证及默认值

2020-10-31 11:35:37 13

原创 react组件之间参数传递—正传props—逆传—同级传值pubsub—跨组传值详细步骤

一、正传props:1、组件中使用rccp快速生成一个子组件(rccp快捷键会自动生成props验证)2、在父组件调用子组件并传递数据给子组件3、在子组件接收父组件传递过来的数据二、逆传思路:逆传需要通过单机事件触发,在父组件中传递一个函数在子组件,在子组件触发函数,逆传数据以形参的方式传递给父组件。1、在父组件调用子组件,并产地一个函数给子组件2、在子组件触发父组件传递过来的函数,并返回数据给父组件逆传小案例:在子组件触发事件删除父组件对应的数据。1、在子组件使用this.

2020-10-31 10:26:11 21

原创 react搭建路由

一、路由—概念:实现spa(单页面应用)应用:整个项目只有一个完整的页面,页面切换不会刷新整个页面(不会感觉到页面闪烁,更加贴近原生应用的体验)二、路由—分类:1、React-Router:提供了一些router的核心API,包括Router, Route, Switch等,但是它没有提供 DOM 操作进行跳转的API。2、React-Router-DOM:提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转,大多数情

2020-10-30 20:06:56 29

原创 React双向绑定,详细案例。

先生命一个空变量,然后将这个空变量的赋值给input的value属性,这样就将数据绑定到input框上,再通过onchange调用setState将input的value赋值给之前声名号的空变量,即可事件双向绑定。代码如下: <div id="box"></div> <script type="text/babel"> class Demo extends React.Component{ constructor(props)

2020-10-29 15:39:10 22

原创 call、apply、bind三者的却别。

call和apply相同点1、call与apply两个方法相同的是,两个方法都会帮助函数调用一次,会用第一个参数来代表this指向call和apply的不同点1、call:使用call方法调用函数,如果需要传递参数,call方法从第二个参数开始都会被解析成参数。2、apply:使用apply调用函数,如股票需要传递参数,第一个参数代表this指向,第二个参数是一个数组,这个数组的成员是需要传递的参数。bindbind方法与call和apply不同的是,call和apply和会直接调用函数;bin

2020-10-28 14:35:46 9

原创 react事件处理——修改this指向(面试常问)

方式1:通过bind方法进行原地绑定,从而改变this指向注:bind不会调用函数本身,只是改变函数中的this指向,bind会返回一个新的函数,再任何时候调用bind返回的新函数都是bind绑定号的this指向。方式2:通过创建箭头函数方式3:在constructor中提前对事件进行绑定方式4:将事件调用的写法改为箭头函数的形式<body> <div id="box"></div> <script type="text/babel"&gt

2020-10-28 14:12:23 6

原创 vue配置自动启动、配置文件夹别名、反向代理

再项目跟目录下创建vue.config.js(文件名必须前面的这个名字),然后复制下面代码放进去,配置即可,配置完之后重启项目生效。module.exports={ // 配置文件夹别名 configureWebpack:{ resolve:{ alias:{ // "别名":"对应的文件夹" "c":"@/components" } } }, //

2020-10-27 20:54:42 8

原创 Object.keys()、Object.values()、Object.entries()的详细用法案例。

一、object.keys()1、object.keys()传入对象,返回一个数组类型 值是方法中对象的键(key)let obj={name:"小白",age:18,sex:"男"}let newobj=Object.keys(obj)console.log(newobj)//["name", "age", "sex"] newobj.map(item=>{console.log("键名为"+":"+item+"----"+"键值为"+":"+obj[item])})控制台打印结果

2020-10-27 19:35:42 23

原创 React学习笔记1

什么是 React ?React 是一个用于构建用户界面的 javascript 库。react的特点:1、声明式设计−React采用声明式,可以轻松描述应用。(开发者只需要声明显示内容,react就会自动完成)2、高效−React通过对DOM的模拟,最大限度地减少与DOM的交互。3、灵活−React可以与已知的库或框架很好地配合。4、组件− 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。(把页面的功能拆分成小模块–每个小模块就是组件)5、单向数据流– 

2020-10-27 17:13:27 31

原创 面试题用promise实现,红色三秒打印一次、绿色两秒打印一次、黄色一秒打印一次

用promise实现,红色三秒打印一次、绿色两秒打印一次、黄色一秒打印一次,三种颜色循环不断交替打印。 function red() { console.log("red"); } function green() { console.log("green"); } function yellow() { console.log("yellow");

2020-10-26 17:52:55 42 2

原创 animate.css使用步骤

vue项目使用animate.css1、下载:npm install animate.css --save2、引用,在全局min.js中引用3、就可以正常在页面使用了举例:前面的animate__animated必须有,不然动画效果无效,class中第二项animate__bounce是你需要的动画效果,可以在官网找到你想要的动画效果,然后替换掉animate__bounce。<h1 class="animate__animated animate__bounce">An animat

2020-10-26 14:53:34 20

原创 Ajax、jQuery ajax、axios和fetch的区别

1、Ajax:ajax自然不必说,最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。2、 Jquery Ajax:是jQuery框架中的发送后端请求技术,由于jQuery是基于原始的基础上做的封装,所以,jquery Ajax自然也是原生ajax的封装3、Fetch:fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构

2020-10-22 20:03:58 21

原创 async 和Generator基本用法和概念介绍。

基本概念1、 async 表示这是一个async函数,await只能用在这个函数里面。2、await 表示在这里等待promise返回结果了,再继续执行。3、await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。普通函数 var sleep = function (time) { return new Promise(func

2020-10-22 19:41:20 18

原创 面试题之-遍历多维数组-数组去重-深拷贝浅拷贝

1、遍历多维数组 //遍历多维数组 var newarr =[] ; function demo(arr){ for(let i=0;i<arr.length;i++){ if(typeof arr[i] !=="object"){ console.log(arr[i])

2020-10-22 09:51:33 23

原创 web页面国际化,web页面中英文切换,vue项目国际化----------vue-i18n详细用法。

什么是web页面国际化web页面国际化页面国际化,就是可以让网页的文字信息,根据用户的选择,显示中文、英文、韩语、等等。如下图举例:第一张用户选择中文第二用户选择韩语前端应该如何实现国际化思路:如上面举的例子,用户点击选自不同的语言,页面就会展示对应的语言文字,类似与翻译功能;首先我们编写我们国际化配置文件,配置文件中是页面需要显示的文字信息,通过用户的选择页面展示不同的配置文件。1、下载vue-i18nnpm install vue-i18n2、配置国际化文件zh.js中的配置如

2020-10-16 14:30:43 110

原创 ES6---Generator语法---Generator传参

ES6—Generator什么是GeneratorGenerator 主要是异步编程,用来封装一个异步任务,是一个异步任务的容器。特点:交出普通函数的执行权(可以让函数在调用的时候按照我们的需要执行或者是暂停)普通函数:在调用的时候函数中的内容会全部执行,如下面的普通。 <script> function fun(){ console.log(1) console.log(2) console.log

2020-10-15 22:15:41 28

原创 json-server模拟数据使用方法详解,小白教程。

json-server使用步骤:1、在项目下新一个文件夹,我新建的文件名叫mock2、mock文件下建一个xxx.json文件用来存放模拟数据模拟练习就放这了,别客气,直接拿上跟着下面的步骤练习{ "books":[ {"id":"878911","name":"三国","author":"罗贯中"}, {"id":"878912","name":"水浒","author":"吴承恩"} ], "readers":[ {"id":"007","name":"张三疯","age":

2020-10-15 19:02:24 37

原创 三次握手四次挥手,简单易懂。

三次握手四次挥手了解三次握手四次挥手之气那需要先先了解几个基本知识点1、FIN=1表示此报文段的发送方的数据已经发送完毕,请求释放传输连接。2、确认字段号(ACK):期望接收报文段的数据的第一个字节的序号,ack=N表示序号N-1为止的所有数据都正确接收到。3、确认位:只有ACK=1时确认号字段才有效,ACK=0时无效连接状态:1、CLOSE_WAIT状态下只能发送数据,不能接收数据2、LAST_ACK状态:被动断开连接的一端在缓冲区数据发送完成后发送FIN=13、TME_WAIT:此状态下

2020-10-11 22:34:46 16

原创 umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

umiJSUmi 是蚂蚁金服的底层前端框架 中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备。同时有强大的插件扩展各种功能。什么时候不用 umi需要支持 IE 8 或更低版本的浏览器需要支持 React 16.8.0 以下的 React需要跑在 Node 10 以下的环境中有很强的 webpack 自定义需求和主观意愿需要选择不同的路由方案使用确保电脑上有nodejs 10.13 或以上umi下载安装npm

2020-10-11 17:14:25 540

原创 React项目如何使用Element ui?

初次在react项目中使用element框架,碰到了一些很简单的问题,但是卡了很久才解决,写篇博客记录一下。1、安装:在项目目录下下载:npm i element-react --savenpm install element-theme-default --save注:element官网快速上手中有提到2、全局引用在项目跟录下的index.js中全局引入3、在项目中引用你需要的element组件可能会报错解决方式:在项目中下载依赖npm install react-hot-loa

2020-10-09 16:21:10 155

原创 什么是TypeScript?本文介绍TypeScript基本用法和语法。

什么是TypeScript?TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化。TypeScript是JavaScript的超集,他可以编译成纯JavaScript。TypeScript可以在任何浏览器运行、任何计算机和任何操作系统上运行,并且是开源的为什么要用TypeScript开源简单TypeScript 是 J

2020-10-04 17:50:29 51

原创 React状态提升,Hook是什么,怎么使用?

React状态提升React中的状态提升概括来说,就是多个组件需要反映相同的变化数据,提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件。React Hooks是React 16.8.0版本推出的新特性 主要的作用就是让无状态组件 可以使用状态(在react开发中状态的管理是必不可少的 以前为了进行状态管理需要使用类组件或者redux等来管理useState() 就是React提供最基础、最常用的Hook,主要用来定义和管理本地状态。useState返回的是一个数组(长

2020-10-02 17:11:20 27

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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