- 博客(76)
- 收藏
- 关注
RSS订阅原创 Cookie、sessionStorage、localStorage的区别
共同点：都是保存在浏览器端，并且是同源的Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）sessionStorage：仅在当前浏览器窗口关闭前有效，自然
2021-08-08 18:21:36
288
原创 React 中 redux 详解
目录一、Redux1.Redux 是什么？2.安装3.为什么使用 Redux ?4.核心概念（1）state 对象（2）state 是只读的（3） 通过纯函数修改 state什么是纯函数（4）纯函数 -- 函数式编程的一种概念（5）action 对象（6）Store 对象 (负责存储的仓库)5.redux 三大原则二. Redux 基本使用三、redux-dispatch四、redux - combineReducers核心概念作用一、Redux1.Redux 是什么？Redux 是一个独立的J.
2021-07-30 20:51:53
1012
原创 React-router 路由基本使用（学习第四天）
目录一、React路由1、React Router4.0基本概述：2、RR4 采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包，分别是：3、SPA3、安装二、组件1、BrowserRouter 组件（1）BrowserRouter 组件是什么？2、HashRouter 组件（1）HashRouter 组件是什么？3.BrowserRouter 组件 和 HashRouter 组件的区别三、Route 组件配置路径1、Route 组件2、exact3、Link 组件4.、to
2021-07-30 20:09:23
1089
2
原创 React 属性 函数式组件 & Hooks（学习第三天）
目录一.React属性1.PureComponent（1）介绍PureComponent（2）为什么用 PureComponent ？（3）PureComponent优点（4）PureComponent缺点2.ref（1）ref是什么？（2） ref使用方式3. children4.dangerouslySetInnerHTML5.key(1) react中key有什么作用？(2) 原理二.函数式组件三.HooksHook 使用规则React Hooks 优势四.useState五.useEffect六.
2021-07-29 21:47:45
439
2
原创 React 的组件通信与生命周期 （学习第二天）
目录一.组件通信1. 父子组件的通信方式？2. 跨级组件的通信方式？3. 组件通信的方式有哪些二.非受控组件和受控组件1.非受控组件2.受控组件三.生命周期1、constructor2、getDerivedStateFromProps生命周期函数详解四.总结一.组件通信React组件间通信常见的几种情况:父组件向子组件通信子组件向父组件通信跨级组件通信非嵌套关系的组件通信React中的数据进行通信方式在React中数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state
2021-07-27 21:04:27
344
2
原创 React 核心入门 （学习第一天）
React基础一.React 是什么？二.声明式三.组件化四.React的特点五.如何使用 React基于浏览器的模式六.React基本使用第一种使用第二种React创建视图七.babel八.JSX什么是JSX?JSX的注意事项React为什么使用JSX?插值表达式条件输出列表循环九.基于自动化的集成环境模式 - create-react-app - 脚手架介绍安装与使用安装npmyarn使用npx组件函数式组件class类式组件创建一个FriendList.js组件组件复用 - 数据抽取十.总结一.Re
2021-07-26 21:48:02
430
原创 HTTP请求状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息200 OK 正常返回信息201 Created 请求成功并且服务器创建了新的资源202 Accepted 服务器已接受请求，但尚未处理301 Moved Permanently 请求的网页已永久移动到新位置。302 Found 临时性重定向。303 See Other 临时性重定向，且总是使用 GET..
2021-07-18 20:00:37
217
1
原创 Vue3中Teleport的使用
Vue3中Teleport的使用一、Vue3.x传送二、使用eleport实现一个模态T的组件一、Vue3.x传送Vue3.x 中的组件模板应该属于组件，我们想把这个模板的内容移动到当前组件之外的 DOM 中，就可以使用 Teleport。表示传送内包含的内容显示到身体中<teleport to="body">内容</teleport><teleport to="#app">内容</teleport>二、使用eleport实现一个模态T的
2021-07-07 19:10:15
739
1
原创 Vue3中 Composition API的介绍
Composition API的介绍一、 Composition API的介绍二、setup组件选项2.1、Props2.2、上下文2.3、setup组件的 property2.4、ref reactive 以及setup结合模板使用错误写法正确写法一：正确写法二：2.5、使用 this三、 toRefs - 解构响应式对象数据四、computed - 计算属性五、readonly “深层”的只读代理六、watchEffect七、watch 、watch 与watchEffect区别八、组合式api生命周期
2021-07-07 17:07:59
1049
3
原创 Vue3中的mixin介绍和使用
Vue3中的mixin介绍和使用一、Vue3.x中的mixin介绍使用1、新建mixin/base.js2、使用mixin二、关于Mixin的选项合并1、比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先2、同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。3、值为对象的选项，例如 `methods`、`components`，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。三、全局配置Mixin一、Vue3.x中的mixin介绍使用
2021-07-07 10:07:19
6581
4
原创 Ajax 原理是什么？如何实现？
Ajax 原理是什么？如何实现？一、是什么二、实现过程创建XMLHttpRequest对象与服务器建立连接给服务端发送数据绑定onreadystatechange事件三、封装一、是什么AJAX全称(Async Javascript and XML)即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用J
2021-07-06 10:37:04
3128
原创 Vue3中的计算属性与监视
Vue3中的计算属性与监视计算属性与监视computed函数:watch函数watchEffect函数计算属性与监视computed函数:与computed配置功能一致只有getter有getter和setterwatch函数与watch配置功能一致监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次通过配置deep为true, 来指定深度监视watchEffect.
2021-07-02 20:16:00
390
4
原创 Vue3入门 学习笔记
Vue3入门 学习笔记一.认识Vue31.了解相关信息2.性能提升3.新增特性二.创建vue3项目1. 使用 vue-cli 创建2.使用 vite 创建三.Vue2 与 Vue3 的对比四. setup 和 ref 和 reactive1.setup2.ref3.reactive五.比较 Vue2 与 Vue3 的响应式(重要)vue2 的响应式Vue3 的响应式六.setup细节六.reactive与ref-细节一.认识Vue31.了解相关信息Vue.js 3.0 “One Piece” 正式.
2021-07-01 22:02:14
663
2
原创 你所不了解的TypeScript 类型编程
你所不了解的TypeScript 类型编程一.前言二.学习目标三.类型编程1.基础泛型(1) 为什么要使用泛型(2) 注意点(3)引入(4)使用函数泛型(5)多个泛型参数的函数(6) 泛型接口(7) 泛型类(8) 泛型约束2.命名空间3.联合类型(1) 访问联合类型的属性或方法4.类型断言(1) 语法5.索引类型与映射类型(1) 索引签名 Index Signature6.条件类型 Conditional Types7.分布式条件类型 Distributive Conditional Types8.infe
2021-07-01 16:40:11
821
2
原创 TypeScript 学习笔记（详细版）
初学 TypeScript一.初始二.介绍 TypeScript一.初始二.介绍 TypeScript1.TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。2.TypeScript 由微软开发的自由和开源的编程语言。3.TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。...
2021-06-30 21:12:56
3267
15
原创 css中rem，em，px的区别和使用场景
rem布局原理深度理解（以及em/vw/vh）一、前言二、几个概念1.em2.rem3.vm/vh三、剖析rem布局原理四、rem万能吗？一、前言我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。二、几个概念这里就不讲那些，物理像素、设备像素比了，可以自己查阅。要去理解rem/em/vm/vh等，首
2021-06-29 21:12:43
1561
2
原创 详解Promise使用与原理
详解Promise使用与原理一：Promise的概念二：Promise的生命周期三：如何让创建一个Promise四：编写Promise结果处理程序浅的讲差不多了，深的来了 --> .then一：Promise的概念Promise的中文意思是‘承诺’，什么叫承诺？承诺就是现在没有发生，在将来的某个时刻一定会发生的事情。放在编程语言的环境下，Promise就是异步事件的结果的占位符。我们不用去管异步事件的结果什么时候来，只需要关心异步事件的结果产生的时候，你想要做什么就对了。二：Promise的生
2021-06-29 18:50:36
1902
1
原创 轻松理解 JS 中的面向对象，顺便搞懂 prototype 和 __proto__
这篇文章主要讲一下JS中面向对象以及 __ proto __，ptototype和construcator，这几个概念都是相关的，所以一起讲了。在讲这个之前我们先来说说类，了解面向对象的朋友应该都知道，如果我要定义一个通用的类型我可以使用类(class)。比如在java中我们可以这样定义一个类：public class Puppy{ int puppyAge; public Puppy(age){ puppyAge = age; } public vo
2021-06-28 20:58:25
432
6
原创 web大前端面试—JavaScript
1.关于闭包什么是闭包？闭包是有权限访问其它函数作用域内的变量的一个函数。在js中，变量分为全局变量和局部变量，局部变量的作用域属于函数作用域，在函数执行完以后作用域就会被销毁，内存也会被回收，但是由于闭包是建立在函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会被销毁，此时的子函数——也就是闭包，便拥有了访问上级作用域中变量的权限，即使上级函数执行完以后作用域内的值也不会被销毁。闭包解决了什么？本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。由于闭包可以缓存
2021-06-28 14:05:34
663
3
原创 JavaScript 面试题总结(二）
1、Ajax 是什么? 如何创建一个 Ajax？相关知识点：2005 年 2 月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。具体来说，AJAX 包括以下几个步骤：(1) 创建 XMLHttpRequest 对象，也就是创建一个异步调用对象(2) 创建一个新的 HTTP 请求，并指定该 HTT
2021-06-27 22:56:37
648
2
原创 JavaScript 面试题总结(一)
1、介绍 js 的基本数据类型。js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 和 ES10 中新增的 BigInt 类型。Symbol 代表创建后独一无二且不可变的数据类型，它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整
2021-06-25 21:27:21
426
2
原创 Vue面试题总结(一)
1、Vue.js介绍Vue.js是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的APIVue.js是一个构建数据驱动的Web界面的库。Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合.Vue 完全有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。简而言之：Vue.js是一个构建数据驱动的 w.
2021-06-24 21:02:40
1594
23
原创 微信小程序基础
微信小程序基础一. 常见组件1. view2. text3. image4. swiper5. navigator6. rich-text7. button8. icon9. radio10. checkbox二. 自定义组件1.创建自定义组件2. 声明引入自定义组件3. 页面中使用自定义组件4. 定义段与⽰例⽅法5.组件-自定义组件传参6.⼩结三.小程序生命周期1. 应用生命周期2. 页面生命周期四.总结一. 常见组件重点讲解⼩程序中常⽤的布局组件view,text,rich–text,button
2021-06-23 16:17:18
693
2
原创 学习微信小程序第二天
微信小程序基础一.模板语法1. 数据绑定2. 运算3. 列表渲染4. 条件渲染二.小程序事件的绑定1.wxml2.page3. 特别注意三. 样式 WXSS1. 尺寸单位2. 样式导入3. 选择器4. 小程序中使用less四.总结一.模板语法WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构 建出⻚⾯的结构。1. 数据绑定(1) 普通写法<view> {{ message }} </view>Page({
2021-06-22 20:44:00
407
3
原创 微信小程序介绍
微信小程序介绍一.微信小程序介绍1.微信小程序是什么2.微信小程序历史3.为什么是微信小程序4.疯狂的微信小程序5. 还有其他的小程序6.微信小程序体验二.环境准备1.注册账号2.获取APPID3.开发工具三.总结一.微信小程序介绍1.微信小程序是什么微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现 了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤2.微信小程序历史2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读了微信的四
2021-06-21 20:46:48
1942
1
原创 Webpack中的 Loader
Webpack中的 loader一、什么是loader二、loader的使用三、loader的特性四、常用的几种loader处理样式资源1.style-loader2.css-loader3.raw-loader4.sass-loader5.html-loader6.url-loader7.file-loader8.markdown-loader五、总结一、什么是loader1.从webpack本身来说，主要是用作处理我们写的js代码，并且webpack会处理js之间的依赖。2.但是，在开发中我们不
2021-06-11 17:13:23
1264
1
原创 初学Webpack
Webpack一、Webpack是什么二、为什要使用Webpack三、Webpack优点四、webpack作用五、Webpack能干什么六、Webpack的五大核心七、安装webpack1.webpack 初始化package.json2.下载安装webpack3.使用4.打包配置 webpack.config.js 文件5.运行指令6.webpack 开发环境的配置7.json打包8.webpack 打包样式资源八、总结一、Webpack是什么Webpack是一种前端资源构建工具，是一个静态模块打包器
2021-06-10 20:47:54
395
2
原创 Github的安装和使用
Github的安装和使用一、GitHub安装二、介绍和使用1.什么是Github2.为什么学习Github3. 使用Github的目的4.注册Github用户5.使用GitHub三、总结：一、GitHub安装下载地址: https://git-for-windows.github.io/在官方下载完后，安装到Windows Explorer integration的时候，将选项中将“Git Bash here”和“Git GUI here”打对勾。然后就是一路next就可以了，直到Finish。
2021-06-09 20:35:53
3437
2
原创 Git基本原理
文章目录1、哈希2、Git保存版本的机制(1）集中式版本控制工具(如SVN)的文件管理机制(2)Git 的文件管理机制(3)Git 文件管理机制细节3.Git的分支管理机制(依赖于指针的变化)（1）分支的创建：创建一个指向HEAD当前指向的分支的当前版本的指针（2）分支的切换：仅仅是改变HEAD指针的指向（3）版本的提交（4）冲突的产生总结1、哈希 哈希是一个系列的加密算法，各个不同的哈希算法虽然加密强度不同，但是有以下几个共同点： ①不管输入数据的数据量有多大，使用同一个哈希算法，得到的加密结
2021-06-08 20:25:57
454
1
原创 带你快速学习ES6中生成器Generator的使用场景
由于Generator可以暂停函数执行，返回任意表达式的值，这使得 Generator有多种应用场景，这篇文章简单整理一些Generator的使用场景。一、异步操作的同步化表达Generator函数的暂停执行的效果，意味着可以把异步操作写在yield表达式里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield表达式下面，反正要等到调用next方法时再执行。所以，Generator函数的一个重要实际意义就是用来处理异步操作，改写回调函数。fun
2021-06-07 21:50:24
536
原创 Git基本使用
Git安装官方网址：https://git-scm.com/Git的优势大部分操作在本地完成 不需要联网尽可能添加数据 不是删除或修改数据分支操作非常快结构git 提供了三个不同的工作区，用来存放不同的内容工作区 ——>写代码暂存区 ——>临时存储本地库 ——>历史版本工作区——>git add——>暂存区——>git commit——>本地库状态git 三种不同的记录状态（modified） 已修改（staged）
2021-06-07 20:46:25
265
1
原创 JS深拷贝与浅拷贝
1.基本概念(1)深拷贝和浅拷贝针对的是引用类型。基本类型的名值存储在栈中，当复制时，栈内存会开辟一个栈内存。所以二者修改时，彼此不会影响。(2)浅拷贝复制的是指向对象的指针，并没有开辟新的栈内存，原对象和新对象还是共享同一块内存，修改新对象自然会影响原对象。深拷贝会开辟新的栈内存，原对象和新对象不共享同一块内存，修改新对象不会影响到原对象。2.实现方式2.1深拷贝的实现方式2.1.1 JSON.parse(JSON.stringify())说明：1.用JSON.str
2021-06-06 19:28:49
621
4
原创 什么是 BFC机制
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。触发条件 (以下任意一条)float的值不为noneoverflow的值不为visibledisplay的值为table-cell、tabble-caption和inline- block之一position的值不为static或则releative中的任何一个在IE下, Layout,可通过zoom:1 触发
2021-06-05 18:07:08
381
原创 JavaScript 实现继承的6种方式 详解
一、JavaScript 的继承许多面向对象语言都支持两种继承的方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。在 JavaScript 中由于函数没有签名也就无法实现接口继承，而只支持实现继承，而且实现继承主要通过原型链来实现的。先引述下官方文档对于原型链的描述：其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。要理解这个概念要先弄清楚构造函数，原型，和实例的关系：每个构造函数（只要是函数）都有一个 prototype 属性该属性指向一个对象（这个对象就是
2021-06-05 15:00:51
767
原创 了解var let const的区别
var在ES5阶段，用var定义变量，此阶段具有以下特点：1.没有块的概念，可以跨块访问，不能跨函数访问2.存在变量提升// 代码没报错，而是打印出来了undefined，侧面说明了val变量存在变量提升console.log(val); // undefinedvar val = 1;console.log(val); // 1let在ES6阶段，出现了块的概念，新增了块级作用域，同时新增了let命令，let声明的变量具有以下特点：1.let声明的变量只在它所在的代码
2021-06-04 10:02:28
312
原创 细讲Vue中的插槽slot
一、插槽是什么下面看一个例子写一个父组件: test.vue<template> <div> <div>我是父组件</div> <myslot> <p>测试这里内容的能否显示</p> </myslot> </div></template><
2021-06-03 20:41:47
495
1
转载 九种超级实用的 ES6 特性
1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。演示一下：let firstHalf = [ one , two ];let secondHalf = [ three , four , ...firstHalf];这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：let firstHalf = [ one , two ];let secondHalf = [ three , four ];for(var i=0, i <fir
2021-05-29 15:50:30
313
1
原创 Js中Set和Map对象
1 Set对象介绍:Set数据结构类似数组，但所有成员的值唯一。Set本身为一个构造函数，用来生成 Set数据结构，使用 add方法来添加新成员。let a = new Set();[1,2,2,1,3,4,5,4,5].forEach(x=>a.add(x));for(let k of a){ console.log(k)};// 1 2 3 4 5基础使用：let a = new Set([1,2,3,3,4]);[...a]; // [1,2,3,4]
2021-05-28 19:43:19
544
原创 快速轻易掌握闭包函数
本文介绍一下js中的一个重要概念——闭包。其实即便是最初级的前端开发人员，应该都已经接触过它。本文介绍一下js中的一个重要概念——闭包。其实即便是最初级的前端开发人员，应该都已经接触过它。1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。2、表现形式：使函数外部能够调用函数内部定义的变量。一、闭包的概念和特性首先看个闭包的例子：function makeFab () { let last = 1,
2021-05-28 14:21:48
278
原创 十分钟快速学会Vue过渡和动画
Vue过渡和动画让我们网站更具现代感并为网站访问者提供更好的用户体验的好方法。幸运的是，对于开发人员而言，Vue动画只需几分钟即可完成设置。文本主要介绍 Vue 元素，使用该元素创建一些Vue动画，并了解将其添加到项目中的基本知识。首先，我们来看一下 Vue Transitiont 怎么处理有条件的渲染内容。然后，创建自己的CSS动画样式。最后，我们将了解如何将第三方CSS库与Vue动画一起使用。理解 Vue 过渡虽然大多数人认为过渡只是装饰，但精心设计的过渡可以：1.抓住并引导用户的注意
2021-05-28 11:01:26
704
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人