- 博客(76)
- 收藏
- 关注
RSS订阅原创 React中context的用法
使用Context可以避免组件的层层props嵌套的问题。但是它使用consumer拿值时,会多一层组件。得益于useContext hook我们可以不使用consumer组件，直接拿到值。一般的使用场景,如拿全局的class前缀，或者国际化，Ui主题颜色等。当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。
2022-10-11 13:35:44
164
原创 【BrowserRouter与HashRouter的区别】
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本HashRouter使用的是URL的哈希值。
2022-09-11 15:38:20
182
原创 【算法】快速排序
一、原理（1）从数组中选择中间位置的值作为主元；（2）将主元从数组中剔除，并开辟两个数组left和right，把数组中小于等于主元的值放进left，大于主元的值放进right；（3）对left和right数组继续进行步骤一和步骤二，直到数组已完全排序；二、代码实现var quickSort = function (arr) { if (arr.length < 2) return arr; var currentItem = arr.splice(Math.floor(arr
2022-05-10 18:26:42
249
原创 【算法】归并排序 LeetCode148.排序链表
一、归并排序原理1.归并排序是一种分而治之的算法。其思想是将原始数组切割分成较小的数组，直到每个数组中只有一个元素，接着将小数组归并成较大的数组，直到最后只有一个排序完毕的大数组。2.算法分为两个函数一个是划分mergeSort，采用递归的方式将大数组分割成小数组。划分是一个递归过程，它需要一个终止条件，就是判断数组的长度是否为一，如果是，则返回这个数组。如果数组的长度不为一，将其继续划分为小数组，首先得找到数组的中间位mid，找到后将数组分为两个小数组left和right，left数组由索引0到
2022-05-07 11:57:55
267
原创 【算法】滑动窗口leetcode567
1.例题LeetCode567给你两个字符串 s1 和 s2 ，写一个函数来判断 s2 是否包含 s1 的排列。如果是，返回 true ；否则，返回 false 。换句话说，s1 的排列之一是 s2 的 子串 。示例 1：输入：s1 = “ab” s2 = “eidbaooo”输出：true解释：s2 包含 s1 的排列之一 (“ba”).示例 2：输入：s1= “ab” s2 = “eidboaoo”输出：false提示：1 <= s1.length, s2.length &l
2022-04-23 22:16:48
598
原创 【算法】广度优先搜索和深度优先搜索LeetCode200.岛屿数量
一、广度优先搜索 (BFS)1.学习视频 BFS学习视频简单易懂b站麦克老师讲算法2.原理二、深度优先搜索 (DFS)1、学习视频麦克老师讲算法DFS2、原理三、例题leetcode200岛屿数量给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格，请你计算网格中岛屿的数量。岛屿总是被水包围，并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。此外，你可以假设该网格的四条边均被水包围。示例 1：输入：grid = [[“1”,“1”,“1”,“1”,“0”]
2022-04-18 01:55:13
236
原创 在页面加载后设置＜embed＞标签的src
在页面加载完之后，再给embed 加入src 值无效1.原因embed 和 object 因为数据(video, audio, flash, activex)的特殊性，跟一般DOM处理上有所不同，在载入后浏览器会拒绝改变它们的 src 属性。embed嵌入式对象是比较特殊的，你一旦嵌入到文档中无论怎么改src它都不会重新加载。其实你了解它的道理后也不难理解，它实质上是浏览器调用的外部插件来渲染的（比如你的例子就是调用的flash插件），这个渲染过程是在嵌入的时候就完成了，而这些属性也都是嵌入的时候传递给
2022-03-29 18:19:57
949
原创 粘性布局之固定表头
一、粘性布局position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛）父元素中不能设置 overflow: hidden 或 overflow: auto未同
2022-03-29 17:46:02
931
原创 安卓手机调试代码
一、安装Vconsole1、官网链接：https://github.com/Tencent/vConsole/blob/HEAD/README_CN.mdnpm安装完成之后，在项目入口文件main.ts中导入Vconsole并加入以下代码，重启项目const vConsole = new VConsole();2.将以下链接发送至手机（下面一条打不开），填写完整，手机连公司内网，打开后即可调试二、在手机端调试之前先去设置中打开开发者模式1.以realme x7 pro为例，设置 ->
2022-03-23 18:28:11
2087
原创 【算法】二分查找LeetCode278.第一个错误的版本
一、 使用前提和基本原理二、题目leetcode 278.第一个错误的版本题目描述你是产品经理，目前正在带领一个团队开发新的产品。不幸的是，你的产品的最新版本没有通过质量检测。由于每个版本都是基于之前的版本开发的，所以错误的版本之后的所有版本都是错的。假设你有 n 个版本 [1, 2, …, n]，你想找出导致之后所有版本出错的第一个错误的版本。你可以通过调用 bool isBadVersion(version) 接口来判断版本号 version 是否在单元测试中出错。实现一个函数来查找第一个
2022-03-16 13:48:50
219
1
原创 addEventListener的第三个参数
1.使用事件监听绑定方法var btn = document.getElementById('submit'); btn.addEventListener('click', onClickFn, false);提问：第三个参数为何是“false”？当鼠标点击所看到的的按钮时，其实发生了一系列的事件传递，可以想象一下，button实际上是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的，document是被window“包裹”起来的。所以，在你的鼠
2022-03-15 14:49:33
7400
2
原创 子组件向父组件传值
1.子组件通过$emit发送事件以下为子组件rc-text<template> <div v-focus:1 class="rc-text" contenteditable ref="componentRef" :id="domId" :class="getClassName" :style="getStyle" v-text="component.properties.textValue" @input="textChange" @click.stop="c
2021-11-18 18:05:18
224
原创 input输入框自适应宽度
代码如下<template> <div class="rc-text" contenteditable ref="componentRef" :id="domId" :class="getClassName" type="text" v-text="'text'"></div></template><script lang="ts">import { defineComponent, PropType } from 'vue'imp
2021-11-15 18:59:43
1908
原创 vue组件传值（父子）
1.父组件向子组件传值<body> <!--父组件--> <div id="app"> <Cpn :cmovies="movies" :cmessage="message"></cpn> </div> <!--子组件--> <template id='cpn'> <div> <ul>
2021-08-18 11:40:46
82
原创 ES6解构赋值、箭头函数、剩余参数
ES6中允许从数组中提取值，按照对应的位置，对变量赋值，对象也可以实现解构1.数组解构<script> let array = [1, 2, 3]; let [a, b, c, d, e] = array; console.log(a); console.log(b); console.log(c); console.log(d); console.log(e); <
2021-08-17 19:05:34
140
原创 let、const、var关键字
1.let关键字let声明的变量只在所处的块级作用域有效使用let关键字的变量才有块级作用域，使用var声明的变量不具备块级作用域特性防止循环变量变成全局变量不存在变量提升，只能先声明再使用暂时性死区var num = 10;if (true) {console.log(num); //不会到全局中去查找numlet num = 20; //用let声明了num,num就与这个块级作用域绑定了，会出现undefined}2.const关键字作用：声明常量，常量就是值（内
2021-08-17 16:00:29
115
原创 git常用命令
1.git status查看当前文件状态2.git add .将文件添加到暂存区2.git commit -m "完成了xx功能的开发"将暂存区文件提交到本地仓库的分支3.git push 将本地仓库的文件推送到远程仓库的分支（有相应的远程分支）4.git checkout master 切换分支（这里切换到了主分支）5.git merge login 合并分支（在当前分支主动合并了login分支）6.git branch 查看分支状况，有*的分支为当前所在分支7.git checkout -
2021-08-06 16:11:35
121
原创 vue项目安装less和less-loader依赖运行后报错解决方法
由于安装的less和less-loader版本过高导致出错，解决方法如下：1.配合node.js,卸载当前版本的less和less-loader在vue_shop目录下shift+鼠标右键，打开powershell,输入以下命令npm uninstall less-loadernpm uninstall less2.安装低版本的less和less-loader,输入以下命令npm install less-loader@4.1.0 -Dnpm install less@3.9.0 -D..
2021-07-30 20:48:04
2297
1
原创 Vue生命周期函数（重点）
<body> <div id="app"> <h3 id="h3">{{ msg }}</h3> <input type="button" value="修改msg" @click="msg='no'"> </div> <script> var vm = new Vue({ el: "#app", .....
2021-07-29 11:04:57
114
原创 Vue指令
1.自定义全局指令(钩子函数)<body> <div id='app'> 输入：<input type="text" id="search" v-focus> </div> <script> Vue.directive('focus', { //指令的名称focus,使用时要写成v-focus inserted: function(el) { //元素插入到dom中
2021-07-29 09:10:13
69
原创 过滤器的基本使用
1.全局过滤器<body> <div id="app"> <p>{{ msg | msgFormat('大好人', '123') | test }}</p> <!--传入参数--> </div> <script> //定义一个vue全局的过滤器，名为msgFormat Vue.filter('msgFormat', function(msg, arg1
2021-07-28 20:52:11
137
原创 v-if和v-show的使用和特点
v-if的特点：从dom树中添加或删除元素v-show的特点：不删除或添加元素，而是切换display:none样式<body> <div id="app"> <input type="button" value="点击" @click="toggle"> <h3 v-if="flag">这是一个v-if控制的元素</h3> <h3 v-show="flag">这是一个v..
2021-07-28 11:54:32
339
原创 v-for指令
1.v-for指令的四种使用方式<body> <div id="app"> <!--值和索引--> <!-- <p v-for="(item, i) in list1">{{i}}----{{item}}</p> --> <!-- <p v-for="(user,i) in list2">{{user.id}}----{{user.name}}---索引{{i
2021-07-28 11:28:52
2100
原创 在vue中使用样式
1.使用class样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
2021-07-28 09:58:13
245
原创 MVC和MVVM的关系图解、事件修饰符
1.MVC和MVVM的关系图解2.事件修饰符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge
2021-07-27 17:27:49
191
原创 正则表达式
正则表达式1.正则表达式概述(1)什么是正则表达式(2)正则表达式的特点2.正则表达式在JavaScript中的使用(1)创建正则表达式(2)测试正则表达式3.正则表达式中的特殊字符(1)正则表达式的组成(2)边界符(3)字符类(4)量词符(5)括号总结(6)预定义类4.正则表达式中的替换(1)replace替换(2)正则表达式参数1.正则表达式概述(1)什么是正则表达式(2)正则表达式的特点2.正则表达式在JavaScript中的使用(1)创建正则表达式(2)测试正则表达式3.正则表
2021-07-26 17:33:49
113
原创 ES6函数（下）
函数3.严格模式（1）什么是严格模式（2）开启严格模式3.严格模式中的变化4.高阶函数5.闭包(1)变量作用域(2)什么是闭包(3)闭包的作用6.递归（1）什么是递归？3.严格模式（1）什么是严格模式（2）开启严格模式3.严格模式中的变化4.高阶函数5.闭包(1)变量作用域(2)什么是闭包<script> function fn() { var num = 10; function fun()
2021-07-26 09:52:04
78
原创 ES6函数(上)
函数1.函数的定义和调用(1)函数的定义(2)函数的调用方式2.this(1)函数内this的指向(2)改变函数内部的this指向call()方法apply()方法bind()方法bind()方法应用call()、apply()、bind()总结1.函数的定义和调用(1)函数的定义<script> //命名函数 function fn() {}; //函数表达式（匿名函数） var fun = function() {};
2021-07-23 16:32:13
439
原创 ES5中新增方法：数组方法、字符串方法、对象方法
1.ES5新增方法概述2.数组方法（1）forEach()<script> var arr = [1, 2, 3]; var sum = 0; arr.forEach(function(value, index, array) { console.log(index + '号元素' + value); console.log('数组是' + arr); sum +=
2021-07-23 11:02:29
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人