摘要: 初始化阶段的生命周期只会执行一次钩子函数,运行中的阶段会随着状态的改变或父组件变更了属性而执行钩子函数,销毁阶段会随着组件在DOM数上被移除而触发的钩子。 具体看文件中的代码:https://gitee.com/manongquan02/react_test.git 新的生命周期 getDerive 阅读全文
posted @ 2022-11-27 23:10 HuangBingQuan 阅读(78) 评论(0) 推荐(0) 编辑
摘要: /* * @Author: HuangBingQuan bingquan111@qq.com * @Date: 2022-11-25 17:42:05 * @LastEditors: HuangBingQuan bingquan111@qq.com * @LastEditTime: 2022-11- 阅读全文
posted @ 2022-11-26 17:02 HuangBingQuan 阅读(145) 评论(0) 推荐(0) 编辑
摘要: 简单刮刮乐 <!-- * @Author: HuangBingQuan bingquan111@qq.com * @Date: 2022-11-15 17:24:09 * @LastEditors: HuangBingQuan bingquan111@qq.com * @LastEditTime: 阅读全文
posted @ 2022-11-24 22:44 HuangBingQuan 阅读(22) 评论(0) 推荐(0) 编辑
摘要: CSS3 背景 背景图 background-image 默认情况下,背景图会在横坐标和纵坐标中进行重复。 background-repeat 可以控制图片是否重复 background-size 背景图尺寸 预设值 contain:保证图片显示在盒子中不能改变比例 cove:图片一定要把这个区域撑 阅读全文
posted @ 2022-11-24 22:41 HuangBingQuan 阅读(15) 评论(0) 推荐(0) 编辑
摘要: React 组件通信总结 父子通信 传递数据(父传子)与传递方法(子传父) /* * @Author: HuangBingQuan bingquan111@qq.com * @Date: 2022-11-21 16:02:17 * @LastEditors: HuangBingQuan bingqu 阅读全文
posted @ 2022-11-23 21:10 HuangBingQuan 阅读(39) 评论(0) 推荐(0) 编辑
摘要: // 调度中心 var bus = { list: [], // 订阅 subscribe(callback) { // console.log(callback); this.list.push(callback) }, // 发布 publish(text) { // 遍历注册集合,执行回调函数 阅读全文
posted @ 2022-11-23 17:23 HuangBingQuan 阅读(15) 评论(0) 推荐(0) 编辑
摘要: 文字多行:text-align: justify; 文字单行:text-align-last: justify; 阅读全文
posted @ 2022-11-22 19:34 HuangBingQuan 阅读(164) 评论(0) 推荐(0) 编辑
摘要: ![](https://img2022.cnblogs.com/blog/1947730/202211/1947730-20221121134121484-542177041.png) 阅读全文
posted @ 2022-11-21 13:41 HuangBingQuan 阅读(25) 评论(0) 推荐(0) 编辑
摘要: 字符串常用API String.prototype.slice[start, end) // 字符串分割(截断) start 从第几位开始截 end 截到第几位 // 举个栗子 let userName = '码农哥哥' let handelUserName = (userName) => { le 阅读全文
posted @ 2022-11-16 10:33 HuangBingQuan 阅读(13) 评论(0) 推荐(0) 编辑
摘要: CentOS开放指定端口: 方式一 1、开启防火墙 systemctl start firewalld 2、开放指定端口 firewall-cmd --zone=public --add-port=1935/tcp --permanent 命令含义: –zone #作用域 –add-port=193 阅读全文
posted @ 2022-11-15 10:42 HuangBingQuan 阅读(716) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2022-11-09 13:58 HuangBingQuan 阅读(24) 评论(0) 推荐(0) 编辑
摘要: webstorm里面react快速创建模板 rcc + tab键 - - 用ES6模块系统创建一个React组件类 rccp + tab键 - - 创建一个带有PropTypes和ES6模块系统的React组件类 rcfc + tab键 - - 创建一个带有PropTypes和所有生命周期方法以及E 阅读全文
posted @ 2022-11-06 18:58 HuangBingQuan 阅读(578) 评论(0) 推荐(0) 编辑
摘要: 解决react执行两遍的问题 原因 使用脚手架创建项目后默认会开启严格模式,在严格模式下,React 开发环境下会刻意执行两次渲染,用于突出显示应用程序中潜在问题。 解决 将入口js文件(index.js)的<React.StrictMode>删除即可。 import React from "rea 阅读全文
posted @ 2022-11-05 15:27 HuangBingQuan 阅读(295) 评论(0) 推荐(0) 编辑
摘要: 前端对手机号脱敏 /** * 手机号码脱敏 * @param { string } phone * @return { String } */ function phoneNuberConvert (phone) { if (!phone) return "" let pat = /(\d{3})\ 阅读全文
posted @ 2022-11-04 18:28 HuangBingQuan 阅读(177) 评论(0) 推荐(0) 编辑
摘要: JS函数注释规范 | 常用符号 | 说明 | 用法 | | | | | | @param | 参数 | @param { type } name 备注 | | @returns | 返回值 | @return {type} | /** * 测试 * @param { number } num 备注 阅读全文
posted @ 2022-11-04 16:58 HuangBingQuan 阅读(896) 评论(0) 推荐(0) 编辑
摘要: 数据交换格式 1、什么是数据交换格式 数据交换格式,就是==服务器端==与==客户端==之间进行==数据传输与交换的格式==。 前段领域,经常提及的两种数据交换格式分别是 ==XML== 和 ==JSON==。 其中 XML 用的非常少,所以,我们重点要学习的数据交换格式是 ==JSON==。 2、 阅读全文
posted @ 2022-11-04 11:18 HuangBingQuan 阅读(247) 评论(0) 推荐(0) 编辑
摘要: 文字在div内左右两边对齐 div{ text-align: justify; text-justify:inter-ideograph; } 阅读全文
posted @ 2022-10-31 10:37 HuangBingQuan 阅读(120) 评论(0) 推荐(0) 编辑
摘要: React setState 对于 setState() 相信伙伴们都用过,它是 react 官方推荐用来更新组件 state 的 API,但是对于 setState() 你真的了解吗?且待我慢慢详聊一番。 语法 setState(arg1, [arg2]) arg1: 对象类型,会将传入的对象浅层 阅读全文
posted @ 2022-10-30 21:21 HuangBingQuan 阅读(24) 评论(0) 推荐(0) 编辑
摘要: dangerouslySetInnerHTML export default function App () { let init = () => { // 向后端发送请求 拿到html 用富文本填展示 return ` <div> <p>后端数据。。。。</p> </div> ` } return 阅读全文
posted @ 2022-10-23 18:51 HuangBingQuan 阅读(519) 评论(0) 推荐(0) 编辑
摘要: 统计下面字符串中每个字符出现的频率 let str = "fgasdfadfdasd" let result = {} for (let i = 0; i < [...str].length; i++) { if (!result[[...str][i]]) { result[[...str][i] 阅读全文
posted @ 2022-10-21 22:32 HuangBingQuan 阅读(483) 评论(0) 推荐(0) 编辑
摘要: React Ref 用法一 给标签设置ref="xxx" (通过这个获取this.refs.username,ref可以获取到应用的真实DOM) 用法二 给组件设置ref="xxx"(通过这个获取this.refs.xxx,ref可以获取到组件对象) 新的写法 myRef = React.creat 阅读全文
posted @ 2022-10-21 18:14 HuangBingQuan 阅读(28) 评论(0) 推荐(0) 编辑
摘要: ES6导出与导入 导出 // 声明并导出成员(最终会导出一个对象) export let a = 123; export let b = 234; export { x } // 导出默认成员 export default {} // 导入 (如果不解构 则返回导出的export default的值 阅读全文
posted @ 2022-10-15 21:43 HuangBingQuan 阅读(149) 评论(0) 推荐(0) 编辑
摘要: ES6数组API Array.map(item, index) /* Array.map(item, index) item: 数组中的每个元素 index: 索引 特性:映射,进去几个,出来的还是几个,返回一个新数组 */ const socres = [60, 90, 62, 83, 98, 7 阅读全文
posted @ 2022-10-15 13:13 HuangBingQuan 阅读(46) 评论(0) 推荐(0) 编辑
摘要: node接口跨域 解决方案 // 解决跨域问题 app.all("*",function(req,res,next){ // 设置允许跨域的域名,*代表允许任意域名跨域 res.header('Access-Control-Allow-Origin','*'); // 允许的header类型 res 阅读全文
posted @ 2022-10-14 15:27 HuangBingQuan 阅读(52) 评论(0) 推荐(0) 编辑
摘要: 在项目中封装自己的axios 在src目录下建立一个unit文件夹 // unit => http.js import axios from "axios"; const http = axios.create({ baseURL: "xxxx", // 设置基础路径 timeout: xxxx / 阅读全文
posted @ 2022-10-14 10:34 HuangBingQuan 阅读(116) 评论(0) 推荐(0) 编辑
摘要: Babel编译 安装Node.js,初始化项目 yarn init -y 安装babel-cli yarn add @babel/core @babel/cli @babel/preset-env --dev yarn add @babel/polyfill 添加执行脚本 "script": { " 阅读全文
posted @ 2022-10-13 22:46 HuangBingQuan 阅读(23) 评论(0) 推荐(0) 编辑
摘要: vue打包部署样式混乱 问题分析:样式混乱最根本的原因就是样式冲突。 样式冲突是如何产生的? 由于一个页面由多个.vue文件组成,后每个.vue文件都有style,所以就导致冲突了 解决方案:检查每个.vue文件的style,是否加入scoped,不管有没有用该.vue,style都必须加上scop 阅读全文
posted @ 2022-10-11 11:08 HuangBingQuan 阅读(711) 评论(0) 推荐(0) 编辑
摘要: js删除数组指定元素 const person = [ { id: 0, name: 'zhangsan' }, { id: 1, name: 'wangwu' }, { id: 2, name: 'zhaoliu' } ]; // 删除对象id为1的元素 person.splice(person. 阅读全文
posted @ 2022-10-09 16:07 HuangBingQuan 阅读(274) 评论(0) 推荐(0) 编辑
摘要: BOM 查看与设置滚动条的滚动距离 IE9及以上 let x = window.pageXOffset; // 横向滚动距离 let y = window.pageYOffset; // 纵向滚动距离 IE8及以下 兼容性比较混乱,用时取两值相加,因为不可能存在两个同时有值 let x = docu 阅读全文
posted @ 2022-09-26 14:16 HuangBingQuan 阅读(29) 评论(0) 推荐(0) 编辑
摘要: vue 中 router.afterEach用法,和router.beforeEach用法 router.afterEach是vue全局的导航钩子函数,我个人的理解是,进入某个路由之后触发的钩子函数,我用的比较多的有两种用法 修改,每个页面的title 首先在路由元中meta添加一个title属性, 阅读全文
posted @ 2022-09-26 13:58 HuangBingQuan 阅读(553) 评论(0) 推荐(0) 编辑
摘要: 从深入潜JavaScript 日期对象 | 方法 | 描述 | | | | | * 空执行 Date() | 返回当日的日期和时间(字符串)。 | | getDate() or setDate() | get返回月中的第几天(1-31),set设置对象当月天。 | | getDay() | 返回一周 阅读全文
posted @ 2022-09-25 16:52 HuangBingQuan 阅读(46) 评论(0) 推荐(0) 编辑
摘要: 下载vue dev-tools 访问GitHub地址:vue dev-tools (选择add-remote-dev分支) 2. 进入到解压后的devtools-add-remote-devtools包中,在文件夹路径中打开cmd窗口,执行yarn或npm下载依赖(yarn 或 npm instal 阅读全文
posted @ 2022-09-20 18:19 HuangBingQuan 阅读(1255) 评论(0) 推荐(0) 编辑
摘要: 将数组中的对象 年龄字段进行排序 (升序 a - b 降序 b - a) let objArr = [ { name: "zhangsan", age: 20 }, { name: "lisi", age: 17 }, { name: "wangwu", age: 27 } ]; // (升序 a 阅读全文
posted @ 2022-09-16 14:40 HuangBingQuan 阅读(86) 评论(0) 推荐(0) 编辑
摘要: ###react关闭ESlint "eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "rules": { "no-undef": "off", "no-restricted-globals": "off", "no-unu 阅读全文
posted @ 2022-09-12 01:50 HuangBingQuan 阅读(77) 评论(0) 推荐(0) 编辑
摘要: 苹果跳转回退不刷新页面 场景一:当点击某个按钮 跳转到其他页面,再次返回就不会刷新页面,不刷新页面导致数据还是老数据。 场景二:在缴费系统中,用户选中一定金额,由于临时更变金额,点击取消支付,回来也会导致页面不刷新,在次拉起支付还是之前的价格 // 兼容苹果跳转回退不刷新页面(不触发mounted) 阅读全文
posted @ 2022-09-09 14:12 HuangBingQuan 阅读(908) 评论(0) 推荐(0) 编辑
摘要: LocalStoreage 和 SessionStoreage 区别与用法 了解一下WebStorage 区别和特点 阅读全文
posted @ 2022-09-02 14:12 HuangBingQuan 阅读(88) 评论(0) 推荐(0) 编辑
摘要: vue动态修改标题 document.title // 笨方法 create() { document.title = 'xxx'; } // 推荐写法(Vue-Router的beforeEach拦截) ```js // router.js { name: "xxx", path: "xxx", c 阅读全文
posted @ 2022-08-31 11:17 HuangBingQuan 阅读(145) 评论(0) 推荐(0) 编辑
摘要: vue路由拦截器 有三种路由拦截器:全局的,针对单个路由的,针对单个组件的 1.全局的路由拦截器 写在router下的index.js的export default router 之前的代码。 前置拦截器: router.beforeEach((to, from)=> { //from中包含跳转前的 阅读全文
posted @ 2022-08-30 16:09 HuangBingQuan 阅读(2384) 评论(0) 推荐(0) 编辑
摘要: 路由跳转的方式和传参——方式之声明式导航、编程式导航 & 传参之params和query 1. 路由跳转的2种方式 第一种:声明式导航 router-link(必须要有to属性),可以实现路由的跳转 2. 编程式导航 利用的是组件实例的$router.push|replace方法,可以实现路由的跳转 阅读全文
posted @ 2022-08-30 11:28 HuangBingQuan 阅读(167) 评论(0) 推荐(0) 编辑
摘要: vue 使用 vue-wechat-title 动态设置 title // 1.安装 vue-wechat-title yarn add vue-wechat-title // 2.在main.js import VueWechatTitle from 'vue-wechat-title' Vue. 阅读全文
posted @ 2022-08-29 17:55 HuangBingQuan 阅读(201) 评论(0) 推荐(0) 编辑