- 博客(35)
- 收藏
- 关注
RSS订阅原创 申请百度地图AK
3.进入控制台后，左侧选择我的应用，然后创建应用。2.在百度地图开放平台的右上角进入工作台。5.申请成功，然后复制ak码就可以。4.创建应用 应用名称没有限制。
2022-09-22 16:51:37
1400
原创 数组排序(冒泡、快速、插入)
1.冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>ar
2021-10-28 21:36:39
118
原创 vue中的diff算法
概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。其有两个特点：比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较1.为什么用diff算法由于在浏览器中操作DOM的代价是非常“昂贵”的，所以才在Vue引入了Virtual DOM，Virtual DOM是对真实DOM的一种抽象描述，不懂的朋友可以自行查阅相关资料。即使使用了Virtual DOM来进行真实DOM的渲染，
2021-10-28 21:33:38
135
原创 vue（slot）插槽
插槽的关键字slot，默认情况下，组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示），解决办法就是使用插槽。组件的原始内容： 即在vue实例范围之内，因此可以调用实例的data和methods插槽共分为3中：插槽的结构：匿名插槽：具名插槽：作用域插槽:1. 匿名插槽匿名插槽的作用： 保留组件中的所有原始标签内容，这种插槽被称为匿名插槽直接在组件中写上slot标签对，就可以在根元素中的引用的组件中间显示所写的内容//子组件childvue
2021-10-28 21:25:06
235
原创 vue封装axios与api接口管理
一、前言axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。二、axios封装步骤安装：npm install axios -S一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。//...
2021-10-21 14:15:19
769
原创 uni.requet()、网络模块封装
1. uni-app网络请求uni-app题拱了uni.requet()方法，发起网络请求：uni.request({ url: 'https://ceshi2.dishait.cn/api/v1/list', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success:
2021-10-21 14:00:25
620
原创 使用promise封装wx.request()
在根目录下创建http目录及api.js文件fetch.js以及http.js文件根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com" }, //生产环境 Prod:{ "BaseUrl": "ht.
2021-10-21 13:56:44
154
原创 promise对axios二次封装、promise封装ajax
1. 使用promise对axios进行二次封装axios本身就是使用promise封装的http库，为什么还要对它进行二次封装呢？在一个项目中我们肯定要使用很多接口，每个接口主要是.get()或者.post()请求，所以我们就要自己手动封装一个全局的Axios网络模块，这样的话就既方便也会使代码量不那么冗余。步骤1.给axios设置请求拦截，响应拦截。//请求拦截axios.interceptors.request.use( config => { if(localSt.
2021-10-21 13:54:09
1729
原创 webpack打包最强优化
项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: .
2021-10-21 13:50:45
1014
原创 vue中的修饰符
.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页.
2021-10-19 19:34:13
82
原创 vue常用的指令
1.v-model 多用于表单元素实现双向数据绑定2.v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json3.v-show 显示内容 ,通过display=block/none来控制元素隐藏出现4.v-hide 隐藏内容 同上5.v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）6.v-else-if 必须和v-if连用7.v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
2021-10-19 19:33:21
86
原创 jsonp原理
前端代码 <!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"> <titl
2021-10-19 19:30:18
95
原创 原生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-urlen...
2021-10-19 19:27:36
91
原创 事件绑定、事件传播、事件捕获、事件冒泡、自定义事件
DOM事件三种级别DOM0级事件DOM0 级时间分两种，一是直接在标签内直接添加执行语句，二是定义执行函数<input type="text" id="test"><input type="button" value="button" onclick="alert(document.getElementById('test').value)"><script> document.getElementById('button').oncli
2021-10-19 19:23:43
90
原创 vue脚手架本地开发跨域请求设置
vue脚手架配置在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址
2021-10-19 19:13:41
140
原创 vue3新语法
使用defineComponent 构建应用及绑定事件使用setup(props,content)父子通信使用 reactive 绑定数据使用 ref ( torefs ) 绑定数据使用 getCurrentInstance 获取当前实例化对象上下文信息watch、watchEffect 数据监听生命周期+axios数据请求.生命周期setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和methodonBeforeMount() : 组
2021-10-19 19:10:09
943
原创 箭头函数与普通函数区别
一、箭头函数是匿名函数，不能作为构造函数，不能使用new箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连{ ... }和return都省略掉。还有一种可以包含多条语句，这时候就不能省略{ ... }和return。二、箭头函数内没有arguments，可以用展开运算符...解决三、箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）四、...
2021-10-19 19:01:51
100
原创 javaScript数组方法
push（）可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。unshift()可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。pop（）从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。slice().
2021-09-24 11:17:53
57
原创 js 继承
1、原型链继承核心：将父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();特点：非常纯粹的继承关系，实例是子类的实例，也是父类的实例 父类新增原型方法/原型属性，子类都能访问到 简单，易于实现缺点：要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放.
2021-09-23 11:58:09
53
原创 js数组去重
1、 ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}]; function arr_unique1(arr){return [...new Set(arr)];//或者//return Array.from(new Set(ar
2021-09-23 11:49:34
49
原创 js异步之宏任务（marcroTask）和微任务（microTask）
什么是宏任务和微任务宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await微任务比宏任务的执行时间要早异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助异步和同步的区别:异步不会阻塞程序的执行， 同步会阻塞程序的执行，前端使用异步的场景：定时任务：setTimeout，setInverval 网络请求：ajax请求，动态<img>加载 事件绑定同步异步问..
2021-09-16 16:46:10
85
原创 垃圾回收和内存泄露
垃圾回收机制浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行。只有函数内的变量才可能被回收不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部
2021-09-16 16:42:27
85
原创 打包最强优化
项目开始时webpack配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, /...
2021-09-16 08:01:26
557
1
原创 两/三栏布局(圣杯双飞翼)
常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）1. 两栏布局,左边定宽，右边自适应//html<div id="left">左边定宽</div><div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响 #left{ float: left; width: 200px; backgr...
2021-09-08 20:47:28
112
原创 css3/H5新特性、浏览器兼容性问题
css3/H5新特性css3新特性选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)选择器last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disab...
2021-09-08 20:37:50
550
原创 src与href的区别、link与@import区别
href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。srcsrc是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置,在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。link与@import总结：link属于html标签。@import在css中使用表示导入外部...
2021-09-08 20:22:59
369
原创 常见的块级/行内/空元素、CSS Hack
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> <im.
2021-09-08 20:16:56
104
原创 水平/垂直居中、flex布局；
元素居中的三种方式方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半方法二：父相自绝后， transform:translate(-50%,-50%)）最常用方法方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。方法四：父元素设置成弹性盒，子元素横向居中，纵向居中flex布局1、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。2、容器的属性...
2021-09-08 20:13:02
763
原创 postiton定位5个值、清除浮动
position(五种属性，以及每个属性的特点)1、position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。3、position: absoluteabsolute(绝对定位)是指给元素设置绝
2021-09-08 20:01:13
347
原创 盒模型、BFC、 清除浮动
1. 什么是盒子模型?在HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容（content）、填充区（padding）、边框区（border）、外边距（margin）四部分组成。2.盒子模型有哪两种？标准和模型：总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异盒模型：总宽度= width + margin(左右)（即width已经包含了padding和border值3.CSS3 box-siz.
2021-09-08 19:51:05
73
原创 git&github
1.5.2 提交步骤git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件)git status 查看文件状态git add 文件列表 追踪文件git commit -m 提交信息 向仓库中提交代码git log 查看提交记录1.5.3 撤销用暂存区中的文件覆盖工作目录中的文件： git checkout 文件名将文件从暂存区中删除： git rm --cached 文件名将 git 仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：git.
2021-08-29 19:57:50
70
原创 vue如何封装axios？
1、首先在小黑框下载 npm i axios --save下载依赖,然后创建src/http/service.js2、在service.js文件中存放的时axios的配置以及拦截器等，最后导出一个axios象。3、这里我再创建一个api.js,这里面放的是请求接口.传递的参数.请求方式,并且引入封装好的axios对象。4、这里我再创建一个request.js,这里面放的是具体请求。5、使用使用前先导入然后获取数据...
2021-08-29 19:06:18
146
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人