自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(22)
  • 收藏
  • 关注

原创 JavaScript事件的防抖和节流

函数防抖和节流函数的防抖和节流在我们的工作中经常会用到,在面试中也经常会出现.因此今天我们来聊聊防抖和节流首先我们来看下面这张用竖线画成的图:这其中的每一条竖线都代表着一次函数调用(如鼠标mousemove事件,input输入事件等) 正常执行的时候,调用的频率很快.但有时,我们并不需要这么高的频率去调用这个函数.假如这是一个调用后台接口的操作,那么就容易造成网络堵塞,大大的增加服务器的压力 函数防抖的时候,每次调用事件都是在正常执行暂停后一段时间(等你歇菜了我再上) 函数节流的时候.

2021-04-09 16:53:08 143 1

原创 JavaScript闭包理解

目录什么是闭包?变量的作用域初识闭包分析闭包经典使用场景1. 使用return 返回函数知识拓展--简化2. 函数作为参数3.IIFE(自执行函数)4. 定时器setTimeout(回调函数都是闭包)知识拓展-回调函数5.循环和闭包思考题思考题1思考题1解答思考题2思考题2解答使用闭包注意点参考我们学习闭包之前先了解作用域和作用域链的相关知识什么是闭包?闭包:闭包就是访问另一个函数作用域变量的函数闭包简单定义为在.

2021-03-31 02:16:43 240

转载 理解Javascript的作用域和作用域链

目录正文什么是作用域作用域的类型作用域嵌套词法作用域作用域链作用域和作用域链是如何工作的Javascript引擎是如何进行变量查找的结论正文作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。正确的去理解这个概念有利于你去写更好,更高效和更简洁的代码,让你成为一个更优秀的Javascript开发者。因此,在本文中,我将会向大家解释.

2021-03-30 01:23:38 264

原创 promise函数封装(完整版)

// 声明构造函数function Promise(executor) { // 添加默认属性 this.PromiseState = 'pending'; this.PromiseResult = ''; // 接受多个then链式调用 this.callbacks = []; const self = this; // resolve函数 function resolve(data) { if (self.Promis.

2021-02-28 00:31:18 1623 5

原创 flex布局(精华-全)

目录什么是Flex布局flex布局中的一些基本概念容器的一些属性项目的一些属性什么是Flex布局flex布局表示弹性布局,为盒状模型提供最大的灵活性。适用范围任何一种元素都可以指定为flex布局.wrap{ display:flex;}1 2 3使用时应该注意些什么?如果是Webkit内核的浏览器,需要加上-webkit前缀 在父级元素设置为flex布局后,子元素的float、clear、vertical-align属性都将失效,所...

2021-02-23 21:06:31 1696 3

原创 ES6+知识点集(详细-超长篇)

目录let关键字const关键字解构赋值数组解构对象解构字符串/数值/布尔值浅拷贝交换变量遍历Map结构map函数let关键字声明变量 块级作用域 变量不能重复声明 不存在变量提升 不影响作用域链const关键字声明常量并且必须赋值 不存在变量提升 不能重复赋值 但可以更改和添加常量对象的属性 块级作用域 const car = { type: "porsche", model: "911", color: "Bla.

2021-02-01 20:40:44 1234

原创 由变量提升谈谈 JavaScript Execution Context

1.'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序或批处理文件。 删除node_modules后再cnpm install2.missing script: dev(启动命令)检查package.json中的配置命令是否配置或配置错误 查看是否有两个package.json文件存在...

2021-01-27 23:51:09 136

原创 ajax讲义

jax 运行原理Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。Ajax的实现步骤:1.创建Ajax对象var xhr = new XMLHttpRequest();2.告诉Ajax请求地址和请求方式xhr.open('get','http://.....');3.发送请求xhr.send();4.获取服务器端和客户端的相应数据xhr.onload = function(){ co

2021-01-24 17:39:00 65

原创 vue过滤器

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>你可...

2021-01-21 23:16:51 83

原创 vue自定义全局指令和局部指令

除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。当页面加载时,该元素将获得焦点 (注意:autofocus在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:// 注册一个全局自定义指令 `v-focus...

2021-01-21 23:02:50 541

原创 vue动态组件和异步组件

<template> <div id="app"> <!-- <myProp title="stylsssss" age="20" @aaa="getaaa" /> <div>{{ current }}</div>子传父 --> <vue-slot> <template v-slot:header> <p>header</p> .

2021-01-21 00:02:18 106

原创 三分钟了解vue中slot插槽的写法

哈哈哈,上代码//子组件<template> <div> <slot name="header">我是header</slot><!-- 具名插槽 --> <p><slot>default</slot></p><!-- 匿名/默认/缺省插槽 --> <slot name="footer">我是footer</slot>

2021-01-20 21:23:08 654

原创 vue中父子组件互相传递

直接上代码!!!!!!!!!!!//子组件<template> <div> sss <div> <p>{{ title }}:{{age}}</p><!--父传子--> <button @click="getMessage">按钮</button><!--子传父--> </div> </div></templa

2021-01-18 21:27:21 92

原创 vue数组变异方法

<template> <div> <div> <button @click="push">push:添加到数组末尾</button><br> <button @click="pop">pop:从数组末尾移除最后一项</button><br> <button @click="shift">shift:移除数组中的第一个项</button.

2021-01-16 22:00:27 269

原创 vue中的事件修饰符(详解)

<template> <div> <button> <a @click.prevent="pre" href="https://www.baidu.com/" >如果想要阻止执行事件默认行为——例如:当链接被单击时阻止页面的跳转——可以使用.prevent修饰符</a > </button> <button @click="stopaaa"> .

2021-01-14 20:46:59 240

原创 v-for遍历数组和对象

<template> <div> <ul> <li v-for="(item, index) in names" v-bind:key="index">{{ item }}</li> </ul> <ul> <!-- 遍历数组 --> <li v-for="(item, index) in user" v-bind:key="index"...

2021-01-13 23:55:10 231

原创 JS正则表达式完整版(入门到精通)

在实现方式上:v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点 v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上。在性能消耗上:v-if有更高的切换消耗,不适合做频繁的切换; v-show有更高的初始渲染消耗,适合做频繁的额切换;...

2021-01-13 22:52:14 358

原创 vue基于父子组件的发表评论案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><scriptsrc="../vue.js">&...

2020-07-01 23:18:48 240

原创 vue生命周期函数

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><scriptsrc="../vue.js"&gt...

2020-06-29 22:33:15 111

原创 vue中的全局和私有过滤器,自定义修饰符及全局指令写成的品牌案例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style></styl...

2020-06-29 20:17:58 122

原创 vue组件的三种创建方式

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><scriptsrc="../vue.js">&...

2020-06-29 19:50:37 158

原创 vue组件的两种切换方式及动画切换

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><scriptsrc="../vue.js">&...

2020-06-29 19:44:19 467

空空如也

空空如也

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

TA关注的人

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