自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

码农日常的博客

登顶一览众山小

  • 博客(42)
  • 问答 (2)
  • 收藏
  • 关注

原创 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 1474

原创 高德地图js api

高德地图实战记录

2023-12-11 16:58:19 507

原创 React 使用Markdown 更改样式

Markdown

2022-11-01 15:48:37 1118 1

原创 react 离开页面弹窗提示

gogogo

2022-10-27 17:26:41 3164

原创 Git 线上练习

https://learngitbranching.js.org/?locale=zh_CN

2022-04-20 11:42:32 360

原创 快速转ts 线上版

https://app.quicktype.io/

2022-04-20 11:40:33 1206

转载 Map对象的用法

js Map对象的用法_前端技术的学习整理-CSDN博客_js map

2022-03-07 15:45:47 94

转载 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 590

原创 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 424 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 3843 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 1313 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

转载 flex布局

详细介绍http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2021-09-08 19:53:17 41

转载 常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局)

一. 两栏布局,左边定宽,右边自适应//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

转载 git和Github(新手来看)

1. Git基础

2021-09-01 19:17:51 108 3

转载 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 442

原创 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 160 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

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除