- 博客(42)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 npm eslint 禁用
“no-alert”: 0,//禁止使用alert confirm prompt“no-array-constructor”: 2,//禁止使用数组构造器“no-bitwise”: 0,//禁止使用按位运算符“no-caller”: 1,//禁止使用arguments.caller或arguments.callee“no-catch-shadow”: 2,//禁止catch子句参数与外部作用域变量同名“no-class-assign”: 2,//禁止给类赋值“no-cond-assign”: 2
2024-02-04 16:16:28
1475
转载 git常用命令总结
Git命令git配置（config）：git version # 查看版本git config -l # 查看当前配置git config --global user.name "Dean" # 设置用户名，邮箱 git config --global us
2022-03-02 10:15:50
103
原创 React 防抖
创建hook.ts文件type FnReturnValueType = any;type FnType = (...arg: any[]) => FnReturnValueType;const debounce = (fn: FnType, ms: number) => { let timer: NodeJS.Timeout; return (...args: any[]) => { if (timer) { clearTimeout(timer.
2021-12-30 17:19:34
328
原创 生成随机ID
function genId() { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" .replace(/[xy]/g, c => { const r = (Math.random() * 16) | 0; const v = c == "x" ? r : (r & 0x3) | 0x8; return v.toString(16); }) .toUpperCase();}
2021-12-30 17:15:20
2065
原创 将.zip的地址转换成json数据
外国的npm 有详细的介绍，看不懂的可以看看我的代码下载依赖 npminstallunzipunzipUrl(file_url) { var unzip = require('unzip-js') return new Promise((resolve, reject) => { unzip(file_url, function (err, zipfile) { if (err) { re...
2021-12-16 16:19:07
591
原创 vue中diff算法
一、是什么diff算法先来一句概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。换句人话diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁其有两个特点：比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比
2021-10-29 09:06:38
170
原创 vue插槽
一、什么是插槽？vue.js官方文档上介绍：将 slot元素作为承载分发内容的出口。也就是说，当子组件有一部分内容是根据父组件传递过来的dom进行显示时，可用slot。二、共有三种插槽（加解构插槽）1.匿名插槽（单个插槽、默认插槽）没有设置name属性的插槽。<slot>这是个匿名插槽(没有name属性)，这串字符是匿名插槽的默认值。</slot>可以放置在组件的任意位置。一个组件中只能有一个匿名插槽。匿名插槽只能作为没有slot属性的元素的插槽。
2021-10-29 00:23:34
103
原创 vue2.0和vue3.0区别
一.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：1可直接监听数组类型的数据变化2监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升3可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行4直接实现对象属性的新增/删除二.重构 Virtual DOM1模板编译时的优化，将一些静态节点编译成常量2slot优化，将slot编译为la
2021-10-25 19:11:02
425
1
原创 vue3(proxy)数据双向绑定
1.1vue2和vue3双向数据绑定1.原理发生了改变vue2的双向数据绑定是利用ES5 的一个 APIObject.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3中使用了 es6 的ProxyAPI 对数据代理。2.相比于vue2.x，使用proxy的优势如下1.vue2的defineProperty只能监听某个属性，不能对全对象监听 vue3可以直接监听对象而非属性2.可以省去for in、闭包等内容来提升效率（...
2021-10-21 10:44:47
3844
2
原创 原生Ajax创建过程
创建xhr 核心对象var xhr=new XMLHttpRequest();2.调用open 准备发送参数一：请求方式 参数二: 请求地址 参数三：true异步，false 同步xhr.open('post','http://www.baidu.com/api/search',true)3.如果是post请求，必须设置请求头。xhr.setRequestHeader('Content-Type', 'application/x-www-form-ur...
2021-10-19 20:23:55
116
1
原创 vue3项目搭建规范
一. 代码规范1.1. 集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf #
2021-10-19 20:20:28
1314
3
原创 JavaScript Es5继承以及Es6继承
Es5之前常用的三种继承Es5继承原型链继承//原型链继承 //把父类的实力属性赋值给子类原型 , 就叫做原型链继承 //父类 function Fu(name) { this.name = name this.sleep = function () { console.log(this.name + "会飞"); } } Fu.prototype.eat = functi..
2021-09-23 18:57:44
122
1
原创 深拷贝手写
深拷贝 通过递归实现<script> //深拷贝 function deepClone(res){ //判断如果不是对象类型或者null, 就不做深拷贝了 if(typeof res !='object'|| res==null){ return res } //定义一个变量 存深拷贝 let newres; if(res instance...
2021-09-17 15:58:20
105
转载 HTML5和css3新特性
css3新特性选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)1. 选择器:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disabled /* 选择每个禁.
2021-09-09 08:00:11
83
原创 link引入与@import导入区别
应用场景：<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px;
2021-09-09 07:46:04
351
原创 src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...
2021-09-09 07:43:12
120
原创 CSS Hack了解过吗?快来看看
什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器例如：1、条件Hack<!--[if IE]> <p>你在非IE中将看不到我的身影</p><![endif]--><!--[if IE]><style> .test{color:red;}.
2021-09-08 19:57:45
67
原创 块级元素/行内元素/空元素(需要的拿去)
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：span a b i img input select strong 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd… 空元素(没有内容)：<br> <hr> <i..
2021-09-08 19:54:48
52
转载 常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）
一. 两栏布局,左边定宽，右边自适应//html<div id="left">左边定宽</div><div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>1、左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响 #left{ float: left; width: 200px; background: green;}#right{ ov
2021-09-08 19:51:43
489
原创 实现盒子水平垂直居中
可以分为两种一.已知宽高的情况1.position：absolute需要知道子盒子的具体宽高2.margin: auto需要子盒子有宽高，但不需要去考虑它的宽高是多少3.display: table-celldisplay: table-cell是用来控制文本的，所以这里父元素必须设置固定宽高，且子元素要设置display: inline-block二/未知宽高的情况1. css3新属性transform可以不需要宽高2.displa...
2021-09-08 19:43:30
71
转载 postiton定位
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因.
2021-09-08 19:35:10
69
转载 清除浮动/四种常用的方法
为什么要清除浮动?清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题?一、 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。优点：通俗易懂，书写方便。（不推荐使用）缺点：添加许多无意义的标签，结构化比较差。给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）<div class="fahter"> <div class="big">big</...
2021-09-08 19:33:26
257
转载 BFC介绍
BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块border bo.
2021-09-08 19:26:44
69
原创 盒模型介绍
1. 什么是盒子模型？把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。2.盒子模型有.
2021-09-08 19:20:32
319
原创 打包vue-cli4(由20MB到1MB以内)
项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一//最简单的设置在vue.config.js中module.exports = { publicPath: './', // 静态资源路径（默认'/'代表根目录,//通过 publicPath 改成'./'当前目录，不然打包后会白屏）}进到router(配置路由的页面)将路由配置文件中的mode:'history’注释掉，或者.
2021-09-08 16:04:57
1513
转载 vue获取DOM操作DOM(ref)
ref的基本用法ref//如果想要获取到DOM对象或者组件对象，可以给对应的标签添加ref属性，并自定义名字//这是子组件<child ref="child"></child>this.$refs.child //获取的是一个组件对象//这是个普通的标签<div ref="div"></div>this.$refs.div //获取到的是一个DOM对象ref最好结合 nextTick 使用nextTick//如果想要
2021-09-02 11:25:24
374
原创 vue中query和params传参(新手来看不会的留言)
1.query传参优点：页面刷新参数不会丢失，可以用来作为分享页的路由跳转方式; 缺点：类似于get,传递参数在url后面拼接,会直接暴露在地址栏，如果参数过多，地址栏会因为参数过多而变得丑陋不堪，相当于get;编程式//路由跳转并传参this.$router.push({path:'/nextPage',query:{id:'hello query'}}) //目标组件接收参数const data = this.$route.query.idconsole.log('路由参数:',.
2021-09-02 11:14:59
466
原创 vue组件间通信
vue的组件之间通信分为三种关系父传子(父组件传给子组件)比如: A.vue传给B.vue B.vue传给C.vue 或者 B.vue传给D.vue 都称为父传子如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。注意:如遇到无关联的两个组件建议使用vuex进行通信!!!禁止偷我的美女注释<template> <div> ...
2021-09-02 10:54:53
60
转载 Vue动画transition
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被移除)，在过渡/动画完成之后移除。v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻
2021-08-31 19:07:08
106
原创 vuex(新手一看就会ctrl+c)
1.什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式它由五部分组成：分别是：state,actions,mutations,getters,modules2. vuex由五部分组成 state: 数据 actions:可以包含异步操作 mutations: 唯一可以修改state数据的场所 getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存） modules:模块化管理store（.
2021-08-31 09:30:00
444
原创 v-if和v-for优先级问题
当它们处于同一节点，v-for的优先级比v-if更高，这意味着 v-if将分别重复运行于每个 v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：<div v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</div>上面的代码只传递了未完成的 todos。而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 <template> te
2021-08-30 18:45:19
161
5
原创 axios封装+多环境变量(新手一看就会)
这里总结三种变量环境(生成环境,开发环境,测试环境)通过npm run serve启动本地 , 执行development通过npm run test打包测试 , 执行testing通过npm run build打包正式 , 执行productionpackage.json配置 一般自动生成二个 追加一个"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service buil...
2021-08-30 16:01:45
710
2
空空如也
vue前端今天碰见个表格 比较奇葩给我出出主意
2021-10-14
游戏开发需要学什么?
2021-09-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人