- 博客(55)
- 收藏
- 关注
RSS订阅原创 vue2.0和3.0的区别
1. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可
2021-03-08 21:41:49
713
原创 Promise详解
什么是promisePromise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。Promise的两个特点Promise对象的状态不受外界影响（1）pending 初始状态（2）fulfilled成功状态（3）reject
2021-03-04 20:35:38
864
1
原创 vue前端路由原理
前言：看完此文章，让你对前端路由原理有一个比较深的了解，必能掌握路由原理，面试必过路由实现原理通过改变URL，在不重新请求页面的情况下，更新页面视图前端路由的两种模式Hash------默认值，利用 URL 中的hash("#") 、History------利用URL中的路径（/home）在项目中如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})通过model来设置路由模式，默
2021-03-04 11:04:36
265
3
原创 vue项目中如何引入阿里矢量图
1.首先去阿里矢量图官网https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=12.在阿里矢量图官网把我们需要的矢量图加入到购物车里面3.加入到购物车以后打开右上角的购物车图表，会在右侧弹出一个页面4.然后我们选择添加至项目，然后在右上架有一个加号，点击加号，然后定义一个文件名， 名字可以随便定义5.定义完文件名以后，点击确定，会跳转到你选择矢量图的那个页面，切记
2021-03-03 10:06:05
2336
原创 slot插槽
什么是插槽插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽有两种1.具名插槽给具体的插槽命名，并在使用的时候传入插槽的名称import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> &
2021-03-02 19:06:18
229
原创 js遍历数组和对象的方法
js遍历数组和对象的方法数组1.for循环var arr=[1,2,3,4,5,6] for(var i=0;i<arr.length;i++){ //arr.length是数组的长度 console.log("arr="+arr[i]); }2.forEachforEach()方法需要一个函数作为参数该方法没有返回值浏览器会在回调函数中传递三个参数，他们的作用分别为：第一个参数：就是当前正在遍历的对象第二个参数：就是当前正在遍历的对象的索引第三个参数：就
2021-03-02 18:52:28
1309
原创 Vue中的$nextTick
Vue中的$nextTick()1.什么是$nextTick官方定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM简单的说我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新2.什么情况下需要用到Vue.nextTick()Vue声明周期的created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中
2021-03-02 16:17:08
81
原创 vue的生命周期函数
vue的声明周期函数声明周期总共分为八个阶段1.创建前/后： 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。2.载入前/后： 在befor
2021-03-01 15:26:59
67
原创 javascript原型与原型链
javascript原型与原型链1. prototype每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _每个实例对象都会有_ proto _属性,其被称为隐式原型每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上
2021-03-01 10:50:26
761
原创 vue常用指令
vue常用指令v-model 多用于表单元素实现双向数据绑定v-for 格式： 循环，循环数组或jsonv-show 显示内容 ,通过css样式中display=block/none来控制元素隐藏出现v-hide 隐藏内容v-if 显示与隐藏，v-if和v-else在判断dom的时候是直接创建和直接销毁的过程，他和v-show、v-hide不一样，这两个只是隐藏啦，并没有销毁他们v-else：和v-if搭配使用，一个真，一个假v-bind：动态绑定 作用： 及时对页面的数据进行更改v-on
2021-03-01 10:48:57
92
原创 vue常用的修饰符
vue常用的修饰符1.v-model的修饰符.lazy修饰符:v-model默认是在input事件中同步输入框的数据的，也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变，lazy修饰符可以让数据失去焦点或者回车时才会更新.number修饰符:在输入框中，无论我们输入的是数字还是字母，都会被当做字符串类型进行处理，..trim修饰符:去除input值两边空格,2.事件修饰符stop：阻止了事件冒泡，相当于调用了event.stopPropagation方法prevent
2021-03-01 10:48:41
2742
1
原创 盒模型
盒模型1.什么是盒模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2.盒模型有哪两种box-sizing:content-box;标准盒模型是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，盒子宽度={border+padding+content}box-sizing: border-box;怪异盒模型告诉浏览器
2021-03-01 10:48:18
59
原创 JS操作DOM
JS操作DOM1.JS获取DOM的几种方法document.getElementById：获取ID名document.getElementsByClassName：获取class名document.getElementsByName：获取name名document.getElementsByTagName：获取标签名document.querySelectorAll：获取所有的标签document.querySelector：获取单个的标签2.js操作dom的增删改查添加：appen
2021-03-01 10:47:45
92
原创 JavaScript中的this与call/apply/bind的关系
JavaScript中的this与call/apply/bind的关系总结在浏览器里，在全局范围内this 指向window对象；在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的那个新的对象；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；ap
2021-03-01 10:47:23
111
原创 js数据类型、栈堆存储、多数据类型计算
js数据类型、栈堆存储、多数据类型计算js数据类型有哪些基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型: Object。包含Object、Array、 function、Date、RegExp。注意：基本数据类型，又称为值类型栈堆存储值类型栈存储： 主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间
2021-03-01 10:46:55
154
1
原创 js数据类型判断
js数据类型判断四种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1 .typeofconsole.log( typeof 100, //"number" typeof 'abc', //"string" typeof false, //"boolean" typeof undefined, //"undefined" typeof null, //"
2021-03-01 10:46:33
240
1
原创 javaScript数组方法总结
javaScript数组方法总结1. push()：可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。2.pop()从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。3.unshift()可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。4.shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变5.slice()截取类 如果不传参数，会返回原数组；如果一个参数，从该参数表示的
2021-03-01 10:46:03
169
原创 vue完整项目开发流程
vue完整项目开发流程创建项目，初始化项目配置多环境变量配置sass封装axios封装vuex按需引入我们需要的框架路由封装封装5个常用的公共组件使用节流防抖，函数防抖优化项目项目优化，项目打包上线创建项目，初始化项目配置多环境变量配置sass封装axios封装vuex按需引入我们需要的框架路由封装封装5个常用的公共组件使用节流防抖，函数防抖优化项目项目优化，项目打包上线1.搭建项目，初始化项目首先：开发这个项目我用的是vue脚手架3.0项目搭建好以后，我们需要初始化项目，安装需
2021-02-24 19:40:10
4324
原创 宏任务（marcroTask）和微任务（microTask）
宏任务（marcroTask）和微任务（microTask）什么是宏任务和微任务宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await微任务比宏任务的执行时间要早执行顺序1.主线程上宏任务、微任务执行顺序console.log('---start---');//第一轮主线程 setTimeout(() => { console.log('setTimeout'); // 将回调代码放入个宏任务队列，第二
2021-01-21 13:51:54
183
原创 箭头函数和普通函数的区别
箭头函数和普通函数的区别1.new关键字：箭头函数是匿名函数，不能作为构造函数，不能使用new关键字，而普通函数可以使用new关键字2.箭头函数内没有arguments，可以用展开用算符[…]，3.箭头函数的this始终指向父级的上下文，this指向取决于定义的位置，跟使用位置没关系，而普通函数指向调用他的那个对象。4.箭头函数不能通过call()、apply()、bind()方法直接修改它的this指向，他们都会默认忽略第一个参数，但是还可以正常传参5.箭头函数通过 call() 或 ap
2021-01-21 09:45:12
187
原创 js垃圾回收和内存泄漏
js垃圾回收和内存泄漏1.标记清除js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。2.引用计数引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加 1。相反，如果包含
2021-01-21 09:44:45
98
原创 如何产生闭包
如何产生闭包什么情况下会产生闭包1.函数作为参数背传递的时候代码演示// 函数作为返回值function create() { const a = 100 return function () { console.log(a) }}const fn = create()const a = 200fn() // 100// 函数作为参数被传递function print(fn) { const a = 200 fn()}c
2021-01-21 09:44:22
828
原创 作用域和自由变量
作用域和自由变量变量作用域：就是一个变量可以使用的范围。作用域 （种类）js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；如下图所示：es6作用域,只适用于const,let自由变量自由变量的概念： 当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作用域
2021-01-20 21:15:23
92
原创 前端常见浏览器兼容性问题解决方案
前端常见浏览器兼容性问题解决方案一、css兼容1.不同浏览器的标签默认的margin和padding不同问题：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。解决方案：CSS里 *{margin:0;padding:0;} 但是性能不好2.css3新属性，加浏览器前缀兼容早期浏览器哪些属性需要加定义关键帧动画 @keyframescss3中的变形（transform）、过渡(transtion)、动画(animation)border-radius
2021-01-20 21:14:57
268
1
原创 vue路由守卫
vue路由守卫1.全局守卫无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法 router/index.jsrouter.beforeEach((to,from,next)=>{}) 进入之前触发router.afterEach((to,from)=>{}) 进入之后触发（后置钩子函数，不需要next）2.组件守卫放在需要守卫的组件里，跟data和methods同级beforeRouteEnter((to,from,next)=>{}) 进入路由前
2021-01-20 21:14:18
153
原创 vue自定义过滤器
vue自定义过滤器1.什么是过滤器过滤器就是一个数据经过了这个过滤器之后出来另一样东西。2.过滤器分为：全局过滤器和局部过滤器全局过滤器全局过滤器通过 Vue.filter(‘filtername’,fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用.在 global-filter 方法定义里,第一个参数 val 就是 oldValue// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue
2021-01-20 21:13:55
86
原创 vue自定义指令
vue自定义指令1.除了核心功能默认内置的指令 (如v-model 和 v-show等)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。2.自定义指令分为全局自定义指令和局部自定义指令使用Vue.directive('focus',{bind(el,binding){},inserted(){}})进行全局自定义指令参数1 ：指令的名称参数2： 是一个对象，这个对象身上，有钩子函数3.指令的钩子函数inserted：被绑定元素插入父
2021-01-20 21:13:39
101
原创 微信小程序使用promise封装wx.request
微信小程序使用promise封装wx.request1.第一步：现在根目录下创建一个evn的文件，里面创建一个index.js文件，写多环境变量配置，写公共的路径，并导出多个环境2.第二步：在根目录下创建一个文件夹，http文件，然后在里面创建三个文档，api.js.,fetch.js,http.js，3.第三步：现在http下的api.js 文件里面定义api的接口列表，把公共路径后面的接口路径写在这个文件夹里面，取一个名字，在获取数据的时候方便使用4.第四步：在fatch.js文件里面用p
2021-01-20 21:13:21
288
原创 微信小程序本地存储同步和异步的 区别
微信小程序本地存储同步和异步的 区别一.同步1.wx.setStorageSync(); 存储值try { wx.setStorageSync('key', 'value') } catch (e) { }2.wx.getStorageSync(); 获取值 try { var value = wx.getStorageSync('key') if (value) { // Do something with return value } } catc
2021-01-20 21:13:07
1401
原创 微信小程序目录分析
微信小程序目录分析1.pages:是页面的文件夹，下面可以放每个页面的文件，一个页面可以创建一个文件夹。2.index文件下面会自动生成4个文件：index.wxml,index.wxss,index.js.index.json分别是：首页的结构，首页的样式，首页的行为，首页的配置文件3.utils:hi第三方的文具，存放公共数据的，相当于vue里面的vuex。4.app.js:是项目的全局 入口文件。5.app.json：是全局配置文件6.app.wxss:是全局的样式文件7.proje
2021-01-20 21:12:34
131
原创 ES6中的结构赋值
ES6中的结构赋值1.什么是结构赋值1.1：结构赋值就是从数组和对象中提取自己想要的变量，然后进行赋值，最常用的场景是element-ui vant按需引入，请求接口返回数据，提取想要的数据，重要的一点就是左右结构必须一致1.2：变量交换：有两种方法：第一种：就是声明一个空的变量，然后来进行交换，第二种：就是前面声明的变量，后面调换变量来接收就可以啦1.3忽略你不感兴趣的返回值function f() { return [1, 2, 3];}var [a, , b] = f();co
2021-01-20 21:12:11
586
原创 link与@import区别
link与@import区别应用场景<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; hei
2021-01-19 14:09:22
54
原创 清除浮动
清除浮动1.为什么要哦清除浮动清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。2.清除浮动的四种方法1.额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。优点： 通俗易懂，书写方便。（不推荐使用）缺点： 添加许多无意义的标签，结构化比较差。给元素small清除浮动（在small后添加一个空白标签clear(类名
2021-01-19 14:08:22
69
原创 元素居中的三种方式
元素居中的三种方式如何让一个元素在父元素中上下左右居中？公共的dom接口<div id="box"> <div id="x"></div> </div>父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)） #box{ width: 400px; height: 400px; background:
2021-01-19 14:07:59
83
原创 常用的页面布局（两栏布局，圣杯、双飞翼布局）
常用的页面布局（两栏布局，圣杯、双飞翼布局）前言：他们都遵循以下要点两侧宽度固定，中间宽度自适应中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的外层 标签1.两栏布局：左边定宽，右边自适应：<div id="left">左边定宽</div><div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>左边左浮动，右边加oveflow:hidden;变成BFC清
2021-01-19 14:06:27
465
原创 什么是Css Hack
什么是Css Hack1.什么是Css Hack一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。2.Css Hack常见的三种形式属性Hack选择符Hack条件注释HackHack主要针对IE浏览器例如：条件Hack<!--[if IE]> <p>你在非IE中将看不到我的身影</p><![endif]--><!--[if IE]><style> .test{color
2021-01-19 14:06:01
225
原创 src和href的区别
src和href的区别1. 请求资源类型不同href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；2.作用结果不同href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；...
2021-01-19 14:05:44
124
原创 flex布局
flex布局1.什么是flex布局flex布局又称为弹性盒子布局，可以理解为他是一个承装容器的盒子2.他的属性有哪些1.flex-direction：属性决定主轴的方向它有4个属性row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。2.flex-wrap：如果一行排不下，不想在一行显示，可以用这个换行属性他有3个属性nowrap：不
2021-01-19 14:04:45
374
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人