- 博客(41)
- 收藏
- 关注
RSS订阅原创 前端 Websocket + Stomp.js 的使用
STOMP Over WebSocket 提供了一个直接从映射到 Javascript 对象的方式。帧格式如下：和属性始终会被定义，不过当这个没有头部时，可以为空。若这个没有，的值可以为。在web浏览器中使用普通的Web SocketSTOMP javascript 客户端会使用的URL与STOMP 服务端进行交互。为了创建一个STOMP客户端js对象，你需要使用，而这个URL连接着服务端的WebSocket的代理：也可以用来覆盖默认的 。第二个参数可以是一个字符串或一个字符串数组去指定多个 。一旦
2022-06-29 11:34:49
4283
原创 for循环请求接口异步变同步
for循环数组调用同一接口传入不同 id 获取数据，改装数组实现需求。由于接口比较特殊，同时多次调用不稳定，for循环调接口会变成异步执行会报错，所以需要等待上一个请求完成再执行下一次请求，可以采用 for循环 + promise + async await 实现。使用定时器模拟请求：打印结果：...
2022-06-23 17:04:22
4624
3
原创 箭头函数与普通函数的区别？
1. 箭头函数比普通函数更加简洁如果没有参数，就直接写一个空括号即可如果只有一个参数，可以省去参数的括号如果有多个参数，用逗号分割如果函数体的返回值只有一句，可以省略大括号2. 箭头函数没有自己的this箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。3. 箭头函数继承来的this指向永远不会改变var id = 'GLOBAL';var obj = {
2022-05-09 19:00:00
22444
1
原创 watch深度监听和立即触发的使用
deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。watcharray: { handler(val) { console.log(val); }, // 开启深度监听 deep: true}immediate：立即触发回调函数。watcharray: { handler(val) { console.log(val); }, ..
2022-05-09 09:10:44
1620
原创 Vue+element ui 实现文件的导入与导出，图片导出
html代码：<el-upload class="upload-demo" :auto-upload="false" action="string" :on-change="videoWatchHandleChange" multiple :show-file-list="false" > <el-button> 导入文件 </el-button></el-upload><el-button
2022-05-06 09:00:00
1868
原创 HTML5有哪些更新？
目录1. 语义化标签2. 媒体标签3. 表单4.进度条、度量器5. DOM查询操作6. Web存储7. 其他8. 总结9. 移除的元素1. 语义化标签header：定义文档的页眉（头部）；nav：定义导航链接的部分；footer：定义文档或节的页脚（底部）；article：定义文章内容；section：定义文档中的节（section、区段）；aside：定义其所处内容之外的内容（侧边）；2. 媒体标签（1） audio：音频&..
2022-05-04 18:00:00
748
原创 React 项目中使用 TypeScript - Redux 基本使用
1.Redux 基本使用目标：能够掌握如何在 TS 项目中初始化 redux内容： 安装依赖包：yarn add redux react-redux redux-devtools-extension redux-thunk 新建文件 store/index.ts（ 后缀为.ts） import { createStore, applyMiddleware } from 'redux';import { composeWithDevTools } from 'redux-...
2022-05-04 09:34:24
1180
1
原创 React 项目中使用 TypeScript
1.useEffect 的使用目标：能够掌握 useEffect 在 TS 中的使用内容：useEffect函数不涉及到任何类型，TS 和 JS 中使用一致useEffect(() => { const onResize = () => { console.log('哈哈哈'); }; window.addEventListener('resize', onResize); return () => { window.addEventLi
2022-05-03 18:00:00
3845
原创 创建基于 TS 的 React 项目与类型声明文件
目录1. 创建基于 TS 的 React 项目2.tsconfig 的介绍3. 类型声明文件介绍4. TS 的两种文件类型5.类型声明文件-内置6. 类型声明文件-第三方库7. 类型声明文件-自定义8.类型声明文件的使用说明9.类型声明文件的总结1. 创建基于 TS 的 React 项目目标：能够使用 CRA 创建基于 TS 的项目内容：创建基于 TS 的 React 项目命令：npx create-react-app react-ts --...
2022-05-03 12:00:00
4090
1
原创 React进阶-虚拟 DOM 和 Diff 算法
1.虚拟 DOM虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容.为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的 DOM 对象 和 HTML 元素之间是一一对应的关系const element = { type: 'h1', props: { clas.
2022-05-03 08:00:00
1612
1
原创 React路由
目录1. React路由-基本使用2. React路由-Router模式3. React路由-Link&NavLink组件4. React路由-Route组件5. React路由-路由匹配模式模糊匹配精确匹配6. React路由-执行过程7. React路由-Switch组件&404页面8. React路由-编程式导航1. React路由-基本使用能够使用 react 路由切换页面内容：2021.11月初，react-r...
2022-05-02 18:00:00
917
原创 React进阶-状态逻辑复用
目录1.组件复用的说明2. mixins 混入（已废弃）3. 高阶组件概述基本使用封装 withMouse 高阶组件高阶组件的注意点4.render-props 模式基本使用children 代替 render 属性5. React Hooks 状态逻辑复用6. 为什么要有 Hooks7. 性能优化8. 优化的方向9.React.memo浅对比的说明10. useCallback11. useMemo12.class 组件优...
2022-05-02 12:00:00
852
原创 TypeScript 高级类型
目录1. TS 中的类型兼容性2.泛型概述3.泛型函数4. 简化泛型函数调用5. 泛型约束6.添加泛型约束7.多个类型变量的泛型8.泛型接口9. 泛型工具类型PartialReadonlyPick1. TS 中的类型兼容性目标：能够理解 TS 中的类型兼容性内容：TS 类型兼容性参考文档两种类型系统：1 Structural Type System(结构化类型系统) 2 Nominal Type System(标明类型系统)T...
2022-05-02 08:00:00
501
原创 TypeScript 常用类型
目录1. 类型注解2. 常用基础类型1.JavaScript 已有类型2. TypeScript 新增类型3.原始类型4. 数组类型1.类型[]写法， 如2.Array<类型>写法， 如5.联合类型6. 类型别名7.函数类型void 类型函数可选参数8. 对象类型使用类型别名带有参数的方法的类型箭头函数形式的方法类型对象可选属性9. 接口 interface接口和自定义类型的区别接口继承10...
2022-05-01 18:00:00
5513
2
原创 TypeScript快速上手
安装编译 TS 的依赖为什么要安装依赖？Nodejs/浏览器 只认识 JavaScript 代码，不识 TS 代码，需要先将 TS 代码转化为 JS 代码，才可以运行。安装命令$ npm i -g typescript验证是否安装成功$ tsc -v运行流程图编译运行 ts 代码创建一个 hello.ts 文件 （TS 的文件的后缀名为.ts） 将 TS 编译为 JS，在终端编译命令tsc hello.ts（此时，同级目录会出现一个同名 JS 文件...
2022-05-01 12:00:00
458
原创 TypeScript
目录1.TypeScript 介绍2.TypeScript 为什么要为 JS 添加类型支持3.问题4.优势5.当下最主流的开发技术栈1.TypeScript 介绍TypeScript 官方文档TypeScript简称：TS，是 JavaScript 的超集，简单来说就是：JavaScript 有的 TypeScript 都有TypeScript 实际上就是 JavaScript(弱类型) + Type (类型) , 即为 JS 添加类型支持，如图let usern.
2022-05-01 08:00:00
414
原创 react-redux学习
目录1.React-Redux介绍2. React-Redux-基本使用3.React-Redux-获取状态useSelector4.React-Redux-分发动作useDispatch5.理解 Redux 数据流6.Redux应用-代码结构7.Redux应用-ActionType的使用8.Redux应用-Reducer的分离与合并9.Redux应用-redux管理哪些状态1.React-Redux介绍目标： 能够说出为什么需要使用react-redux..
2022-04-30 12:00:00
515
原创 Redux学习
1.Redux-概念能够说出为什么需要使用Redux文档：redux 中文文档 redux 英文文档解释：Redux 是 React 中最常用的状态管理工具（状态容器）React的问题：React 只是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。 因此 React 在涉及到数据的处理以及组件之间的通信时会比较复杂 。 对于大型的复杂应用来说，这两方面恰恰是最关键的，需要一个专门的状态工具。背景介绍：2014 年 Facebook 提出了..
2022-04-30 09:00:00
486
原创 Redux 中间件
目录1.中间件概述Redux 中间件作用：中间件说明：2.中间件的触发时机3.redux-logger中间件4.redux-thunk中间件1.不使用 redux-thunk 中间件，action 只能是一个对象2.使用 redux-thunk 中间件后，action 既可以是对象，又可以是函数5.了解：redux-thunk中间件原理6.redux-devtools-extension中间件7.了解：redux 中间件原理8.理解Redux异步数据流..
2022-04-30 06:00:00
4183
原创 React-hooks进阶
目录1. 自定义hook1.未封装前2.封装hooks之后总结：2. useRef-基本使用1.基本使用2.案例练习3. useContext-基本使用1.通过createContext创建context对象2.通过Provider组件包裹根组件，注入数据3.在后代组件中使用useContext使用数据总结：1. 自定义hook尝试自己封装一个hook也就是useXxx函数大致步骤：在App.js组件实现一个记录鼠标移...
2022-04-29 09:00:00
258
原创 React-hooks 基础
1. hooks-介绍能够说出 React Hooks 是什么？大致步骤：hooks 解释 hooks 作用 有了 hooks 之后组件开发模式具体内容：1.hooks 解释Hooks：钩子、钓钩、钩住 ，Hooks是React v16.8中的新增功能2.hooks 作用为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 注意：Hooks 只能在函数组件中使用，自此...
2022-04-28 09:00:00
687
原创 Computed 和 Watch 的区别
1.computed计算属性：作用：（1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。（2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。（3）不支持异步，如果有异步操作，无法监听数据的变化。（4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。（5）computed的值会默认走缓存，计
2022-04-27 17:32:05
12118
1
原创 React 组件进阶
目录1. props-类型校验2. props-类型校验常见类型了解常见的校验规则演示校验规则的使用总结：3. props-默认值1.知道defaultProps的作用2.如何设置props的默认值参考代码3.新版react推荐使用参数默认值来实现总结：4. props-静态属性写法1.类的静态属性写法和如何访问它2.类组件中propTypesdefaultProps的使用代码参考总结：5. 生命周期-概览1.什么是组件生命周期...
2022-04-27 09:00:00
415
原创 React 组件通讯
目录1. 组件通讯-概念1.组件的特点2.知道组件通讯意义总结：2. 组件通讯-props 基本使用1.传递数据和接收数据的过程2.函数组件使用 props3.类组件使用 props总结：3. 组件通讯-props 注意事项1.知道什么是单向数据流？2.props 可以传递什么数据？任意总结：4. 组件通讯-父传子方式1.父组件提供要传递的 state 数据2.给子组件标签添加属性，值为 state 中的数据3.子组件中通过 p...
2022-04-26 09:00:00
2157
原创 js中数组常用的方法总结
目录1.push() 后增2.unshift() 前增3.pop() 后删4.shift() 前删5.splice() 修改删除6.concat() 拼接7.slice() 剪切8.join()9.sort() 排序10.reverse() 颠倒顺序11.indexOf()和lastIndexOf()12.filter() 过滤13.map() 格式化数组14.every()15.some()16.forEach() 数组遍历17.find
2022-04-25 17:01:49
834
原创 React 组件学习（函数组件、 类组件）
目录1. React 组件介绍2. 函数组件1）什么是函数组件？2）定义函数组件3）使用组件总结：3. 类组件-复习 class 语法1.掌握 class 定义类，定义属性，定义函数2.掌握 extends 继承父类4. 类组件-基本使用步骤1.什么是类组件？2.定义类组件3.使用类组件总结：5. 类组件-组件抽离6. 类组件-无状态组件和有状态组件和1.无状态组件2.有状态组件3.它们的区别4.如何去选择...
2022-04-25 09:13:47
4863
原创 JavaScript中let、const、var的区别
（1）块级作用域：块作用域由 { } 包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：1.内层变量可能覆盖外层变量2.用来计数的循环变量泄露为全局变量（2）变量提升：var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。（3）给全局添加属性：浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let
2022-04-23 13:48:39
1322
原创 JavaScript数据类型检测的方式有哪些？有什么区别？
1.typeofconsole.log(typeof 2); // numberconsole.log(typeof true); // booleanconsole.log(typeof 'str'); // stringconsole.log(typeof []); // object console.log(typeof function(){}); // functioncon
2022-04-23 09:30:00
262
原创 JSX语法学习（三）
目录1. JSX 样式-style 方式2.JSX 样式-className 方式3. JSX 样式-动态 className4. JSX 样式-classnames 库安装导入classnames 文档认识classnamesAPI1. JSX 样式-style 方式掌握使用 style 属性设置样式知识内容：style接受一个采用小驼峰命名属性的JavaScript对象，而不是CSS字符串 style中的key采用小驼峰...
2022-04-23 09:15:00
3142
原创 JSX语法学习（二）
目录1. JSX 嵌入表达式2. JSX 条件渲染if/else条件渲染三元运算符完成条件渲染逻辑运算完成条件渲染3. JSX 列表渲染可以渲染JSX数组使用map渲染列表直接在JSX中使用map渲染列表key属性使用4.JSX 列表渲染练习1. JSX 嵌入表达式掌握在JSX中嵌入JS表达式，进行渲染知识内容：在JSX中使用{ }嵌入JS表达式展示数据 进行运算 三元运算 使用函数 使用 JSX...
2022-04-23 09:00:00
907
原创 JavaScript有哪些数据类型，它们有什么区别？
JavaScript共有八种数据类型，分别是：Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型：Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全
2022-04-22 09:18:51
2293
原创 JSX语法学习（一）
目录1. JSX 基本概念概念注意演示总结2. JSX 基本使用基本使用思考问题总结补充3. JSX 的注意事项使用细节代码示例总结1. JSX 基本概念知道 JSX 是什么，知道 JSX 的优点概念JSX是JavaScript XML的简写，表示了在 JavaScript 中书写 XML 格式的代码。它是React的核心内容，它可以让我们在React中创建元素更加简单，更加直观，提高开发效率。注意JSX是...
2022-04-22 09:00:00
731
原创 React 入门学习
目录1. React 介绍2. React 特点（1）声明式（2）组件化（3）一次学习，跨平台编写3. React 脚手架方式 1方式 24. React 基本使用5. React 创建元素练习1. React 介绍了解 react 的历史背景和基本概念React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套...
2022-04-21 09:00:00
9559
7
原创 Vue权限控制
文章是根据视频总结出来的，建议点击链接打开视频，搭配视频观看更易理解。目录1.权限相关概念1.1.权限的分类后端权限前端权限1.2.前端权限的意义降低⾮法操作的可能性尽可能排除不必要请求,减轻服务器压⼒提⾼⽤户体验2.前端权限控制思路2.1.菜单的控制2.2.界⾯的控制2.3.按钮的控制2.4.请求和响应的控制3. Vue的权限控制实现3.1.菜单的控制3.2.界⾯的控制3.3.按钮的控制3.4.请求和响应的控制4.⼩结4.
2022-04-20 10:28:33
6806
2
原创 JS数组元素批量删除、上移、下移、置顶、置底总结
PS:批量方法也适用于单个元素移动哦~~~1.批量删除//this.tableData为数组。this.multipleSelection为选中的数组元素//确定删除方法deleteok() { //console.log(this.multipleSelection); for (let k = 0; k < this.multipleSelection.length; k++) { this.tableData.splice( this.tabl.
2022-04-19 10:04:03
3374
原创 vue实现点击按钮刷新页面的方法:
1.简单粗暴的刷新页面方法//第一种：使用location对象的reload()方法window.location.reload();//第二种：使用编程式导航this.$router.go(0);2.使用vue中provide和inject
2022-04-16 14:26:55
7341
原创 Vue获取实时时间
html代码：<div>{{ nowDate }}{{ nowTime }}</div>js代码：created() { this.timer = setInterval(this.getTime, 1000); },beforeDestroy() { if (this.timer) { clearInterval(this.timer); // 在Vue实例销毁前，清除定时器 } },//方法getTime() {
2022-04-13 17:14:42
1147
1
原创 Vue 实现鼠标滚轮上下滑动时div左右滑动
html代码：<div ref="scrollDiv" @mousewheel="MouseWheel($event)"></div>js代码：methods: { MouseWheel(e){ let eventDelta = -e.wheelDelta || -e.deltaY * 40; let scrollDiv = this.$refs.scrollDiv; scrollDiv.scrollLeft
2022-04-12 14:15:51
2421
原创 Vue+element ui上传图片和视频并回显，点击放大查看和播放
1.上传图片html代码:<el-upload action="#" :auto-upload="false" :on-change="handleChange"> <el-button class="video_btn iconfont icontianjia3">上传图片</el-button></el-upload><div v-for="(item, index) in urlist" :key="
2022-04-11 15:25:32
9907
1
原创 JS常用数组去重方法总结
1.let newarr = []; //盛放去重后数据的新数组for (let item1 of this.tableData) { //循环this.getRoleadd数组对象的内容 let flag = true; //建立标记，判断数据是否重复，true为不重复 for (let item2 of newarr) { //循环新数组的内容 if (item1.name == item2.name) { //
2022-03-31 15:33:55
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人