自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 npm -v提示命令语法不正确

之所以出现这个问题,是因为使用npm config set prefix 命令使npm的config乱掉了。解决方法就是,删掉.npmrc文件,这个文件我的是在C:\Users\Administrator中,删掉问题就解决了。方法仅供参考,不排除其他可能。

2023-03-03 19:31:29 1506 6

原创 vue2与vue3双向数据绑定

vue2与vue3双向数据绑定,Object.defineProperty()/Proxy

2023-02-05 18:20:45 530

原创 GET和POST的区别

POST和GET是HTTP协议中最常用的两种传参方式,这里小小总结一下两者的区别,欢迎补充~!请求方式GETPOST参数位置url的query中一般在content中,query也可参数大小受限于浏览器url大小,一般不超过32K理论上是不会受限制的服务器数据接收接收1次根据数据大小,可分多次接收适用场景(语义)从服务器端获取数据,不做增删改向服务器提交数据,如做增删改操作安全性参数携带在url中,安全性低相对于GET请求,安全性更高

2021-03-11 11:05:24 245 1

原创 微信小程序组件传值

父组件给子组件传值1、父组件传值:<List workList="sss"></List>2、子组件接收用js:(properties相当于vue中的props)Component({ properties: { workList: { type: String, value: '' } },})子组件页面上可以直接用:<view>{{workList}}</view>子组件给父组件传值子

2021-03-11 10:30:07 753

原创 常见的http状态码

http状态码分类:100-199 提示信息 – 表示请求正在处理200-299 成功 – 表示请求正常处理完毕300-399 重定向 – 要完成请求必须进行更进一步的处理400-499 客户端错误 – 请求有语法错误或请求无法实现500-599 服务器端错误 – 服务器处理请求出错常见的状态码有哪些?① 200:请求成功,浏览器会把响应体内容(通常是html)显示在浏览器中;② 404:(客户端问题)请求的资源没有找到 400: 语义有误,当前请求无法被服务器理解。401: 当前请求需要用

2021-03-08 21:00:40 394

原创 async、await

asyncasync 是“异步”的简写, async 用于申明一个异步的 functionawaitawait 可以认为是 async wait 的简写,await 用于等待一个异步方法执行完成特点:asayc的用法,它作为一个关键字放到函数前面,这样普通函数就变为了异步函数异步async函数调用,跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行)是异步方法,但是阻塞式的案例:模拟出一个摇色子的异步

2021-03-07 21:37:03 151 1

原创 Vue3转场动画及keepAlive的使用

Vue3相对于Vue2布局稍微有点不同,话不多说直接上代码App.vue<template> <div> <!-- vue3.0配置 --> <router-view v-slot="{ Component, route }"> <transition :name="route.meta.transitionName"> <keep-alive v-if="$route.meta.keepA

2021-03-02 21:55:26 2451 5

原创 vue本地开发跨域请求设置

在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址 ws:

2021-03-02 19:44:35 430 2

原创 前端路由

前端路由概念通过改变 URL,在不重新请求页面的情况下,更新页面视图。vue-Router两种模式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:Hash — 默认值,利用 URL 中的hash("#") 、history-- 利用URL中的路径(/home)如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})mode 区别:

2021-03-01 15:24:28 157

原创 v-for中为何要使用key

开始之前,我们先还原两个实际工作场景当我们在使用v-for时,需要给单元加上key<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key,手动强制触发重新渲染<Comp :key="+new Date()" />key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对

2021-03-01 11:28:57 327

原创 vue使用keep-alive缓存页面优化项目

概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。作用在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性原理在 created钩子函数调用时将需要缓存的VNode节点保存在 this.cache 中/在 render(页面渲染) 时,如果 VNo

2021-03-01 11:14:21 382 1

原创 Vue中的$nextTick()

一、nextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM我们可以理解成,Vue 在更新 DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新例:<div id="app"> {{ message }} </div>const vm = new Vue({ el: '#app', data: { mes

2021-03-01 11:03:06 612

原创 vue中mixins(混入)的使用

混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。项目中如何使用混入在vue组件内,如果想将一些公共功能,如组件、方法、钩子函数等复用,混入是一个很好的选择。下面简单介绍一下混入的方式及特点你可以将一个对象作为混入的选项,在组件中复用。因为vue实例也是对象,所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins,在创建一个comment.js文件如.

2021-03-01 10:54:46 193

原创 js数据类型判断

1 .typeofconsole.log( typeof 100, //"number" typeof 'abc', //"string" typeof false, //"boolean" typeof undefined, //"undefined" typeof null, //"object" typeof [1,2,3], //"object" typeof {a:1,b:2,c:3}, //"object" typeof func

2021-01-21 21:16:24 171 1

原创 JS数组方法

ES3~ES7的数组方法学习JavaScript数组方法总结:push()可以接受一个或者多个参数,将参数追加到数组的尾部,返回添加后的数组的长度,原数组会发生改变。pop()从数组尾部删除一个元素,返回这个被删除的元素,原数组发生改变。unshift()可以接受一个或者多个参数,将参数放到数组的头部,返回添加后的数组的长度,原数组会发生改变。shift()从数组头部删除一个元素,返回这个被删除的元素,原数组发生改变。slice()(复制)如果不传参数,会返回原数组

2021-01-21 18:25:53 200

原创 JS查找字符串中出现次数最多的字符

1. 统计一个字符串中某个字符出现的次数? function sum(str, a) { let b = str.indexOf(a); var num = 0; while (b !== -1) { console.log(b); num++; b = str.indexOf(a, b + 1) } return num; }2. 统计一个字符串中,出现次数最多的字符,出现了多少次?方法一:// 统计一个字符,中出

2021-01-21 16:39:54 3351 2

原创 递归手写深拷贝

前提:深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。浅拷贝与深拷贝深拷贝和浅拷贝的示意图大致如下:浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。赋值和浅拷贝的区别赋值:把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因

2021-01-21 11:52:03 225

原创 js继承

前言继承在js中占有非常重要的地位,那么在js中有很多中继承的方式,不过每一种继承方式都有优缺点。下面就列举几种继承的方式实现继承首先需要一个父类,在js中实际上是没有类的概念,在es6中class虽然很像类,但实际上只是es5上语法糖而已function People(name){ //属性 this.name = name || 'Annie' //实例方法 this.sleep=function(){ console.log(this.name + '正在睡觉')

2021-01-20 19:26:31 172

原创 null和undefined区别

1、undefined 表示"缺少值",就是此处应该有一个值,但是还没有定义 典型用法是:  (1)变量被声明了,但没有赋值时,就等于undefined。  (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。  (3)对象没有赋值的属性,该属性的值为undefined。  (4)函数没有返回值时,默认返回undefined。2、null 表示"没有对象",即该处不应该有值。 典型用法是:  (1) 作为函数的参数,表示该函数的参数不是对象。  (2) 作为对象原

2021-01-20 18:32:30 144

原创 for···in和for···of的区别

首先一句话:(for···in取key,for··of取value)从遍历数组角度来说,for···in遍历出来的是key(即下标),for···of遍历出来的是value(即数组的值)var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}从遍历字符串的角度来说,同数组一样从遍历对

2021-01-20 18:27:07 230

原创 js 垃圾回收机制和内存泄漏

垃圾回收机制这是在前端面试中经常被闻到的题目。Javascript具有自动垃圾回收机制(GC:Garbage Collecation)。原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。1. 标记清除法在函数声明一个变量的时候,就将这个变量标记为“进入环境”。从逻辑上讲,永远都不能释放进入环境的变量作占用的内存,因为只要执行流进入相应的环境,就可能会用到它们。而当变量离开环境时,则将其标记为“离开环境”。垃圾回收器在运行时候会给存储在内存中中的所有变量都加上标记。然后它

2021-01-20 16:54:14 203

原创 js中的宏任务与微任务

众所周知js是单线程,但js是可以执行同步和异步任务的,同步的任务众人皆知是按照顺序去执行的而异步任务的执行,是有一个优先级的顺序的,包括了 宏任务(macrotasks)和 微任务(microtasks)宏任务包括:setTimeout setInterval Ajax DOM事件微任务:Promise async/await微任务比宏任务的执行时间要早每次执行栈执行完所有的同步任务后,会在任务队列中取出异步任务,先将所有微任务执行完成后,才会执行宏任务所以可以得出结论, 微任务会在宏任

2021-01-20 16:26:40 283

原创 javascript原型与原型链

1. prototype每个函数都有一个prototype属性,被称为显示原型2. _ proto _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性,指向它关联的构造函数。4. 原型链获取对象属性时,如果对象本身没有这个属性,那就会去他的原型__proto__上去找,如果还查不到,就去找原型的

2021-01-20 16:02:38 131

原创 作用域和自由变量

作用域(定义)变量作用域:就是一个变量可以使用的范围。作用域 (种类)js中首先有一个最外层的作用域,全局作用域js中可以通过函数来创建一个独立作用域称为函数作用域,函数可以嵌套,所以作用域也可以嵌套es6中新增了块级作用域(大括号,比如:if{},for(){},while(){}…)如下图所示:es6作用域,只适用于const,let自由变量自由变量的概念: 当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找,直到找到为止,最高找到全局作用域,就形

2021-01-19 19:10:27 189

原创 闭包

闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢?我们都知道,js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的,那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢?闭包就

2021-01-19 16:41:57 1136

原创 前端常见浏览器兼容性问题及解决方案

不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎所以浏览器兼容性问题一般指:css兼容、js兼容浏览器内核(渲染引擎)Chrome谷歌之前Webkit,已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一. css兼容不同浏览器的标签默认的margin和.

2021-01-18 18:35:41 671 4

原创 js的DOM操作整理(整理)

什么是DOM?DOM(Document Object Model)的缩写,即文档对象模型。是针对XML并经过扩展用于HTML的应用程序编程接口(API)所以DOM本质上是一种接口(API),是专门操作网页内容的API标准DOM把整个页面映射为一个多层节点结构,HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API,开发人员可以删除、添加、替换或修改任何节点DOM节点操作1. 创建新节点 (document调用)createDocumentFragment() //创建

2021-01-18 16:56:03 513

原创 清除浮动

为什么要清除浮动?清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题如下:给父盒子设置一个boder,内部放两个盒子一个big 一个small,未给big和small设置浮动,则他们会默认撑开父盒子。当我给内部两个盒子加上float属性的时候底部的footer盒子就会顶上来,然后父盒子因为没设置高度,变成一条线,big和small已经浮动了清除浮动的方法(常用的4种)**额外标签法:**给谁清除浮动,就在其后额外添加一个空白标签 。优点:通俗易懂,书写方便。缺点:

2021-01-18 11:54:20 126

原创 一篇文章弄懂flex布局

一篇文章弄懂flex布局谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生。可以说包括我在内的大部分人,都是在被flex垂直水平居中方式所惊艳后才对其有所了解,以至于在日常开发中对于flex的使用,也确实更偏向于元素对齐方式的使用。对我而言,flex布局不应该局限于对齐方式的使用,熟练掌握它对于页面布局也是有较大好处的,所以这篇文章主要是偏向于flex属性笔记式记录

2021-01-18 11:31:03 238

原创 Vue路由守卫

导航守卫是什么官方这么说:正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。好吧,看不懂,就好(当)好(废)理(话)解(吧)下。其实,导航守卫就是路由跳转过程中的一些钩子函数,再直白点路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。为什么使用导航守卫真实的项目中需要判断权限或者登录状态决定用户能访问的路由,但是因为路由是在浏览器地址栏中的,用户可以输入,如果不加以

2021-01-13 20:50:51 559

原创 Vue自定义组件,Vue组件通信

使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚)。如果我们把这样的代码到处都进行复制粘贴,虽然一时方便了,但后期维护代价非常高,而且代码重复性较高,导致可读性也有所下降。这时候我们就可以将这些重复代码封装成一个组件,以后在使用的时候只需要写上自定义组件的标签即可直接调用。如何使用一般用脚手架开发项目,每个 .vue单文件就是一个组件,一般都是存放在components文件夹下面在项目的components文件夹里面新建一个组件(建议组件名字大写 防止与标签相撞)在组件.vue的

2021-01-13 20:09:55 243

原创 vue常用指令,事件修饰符,v-model修饰符

vue常用指令一.vue指令官网解释指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。1.v-once能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:2.v-show和v-if一样 区别是if是注释掉 v-show是给一个display:none的属性 让它不显示! 用法

2021-01-11 21:41:14 355

原创 vue虚拟dom,diff算法

什么是虚拟dom,和 diff 算法虚拟 DOM 的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的 DOM 操作。例如,一个 ul 标签下很多个 li 标签,其中只有一个 li 有变化,这种情况下如果使用新的 ul 去替代旧的 ul,因为这些不必要的 DOM 操作而造成了性能上的浪费。为了避免不必要的DOM 操作,虚拟 DOM 在虚拟节点映射到视图的过程中, 将虚拟节点与上一次渲染视图所使用的旧虚拟节点(oldVnode)做对比,找出真正需要更新的节点来进行

2021-01-08 14:45:40 179

原创 vue双向数据绑定

先说面试答案:vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每

2021-01-06 14:06:32 166

原创 头像上传

<div class="upload-img">  <div class="img-box" v-for="(item,index) in uploadImages" :key="index">    <img class="image" :src="item">  </div>  <!-- vant的upload组件 -->  <van-uploader :after-read="onRead" accept="image/*"

2021-01-06 10:24:24 175

原创 vuex总结

1. 什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成:分别是:state,actions,mutations,getters,modules2. 有5部分组成state: 数据actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation

2021-01-05 20:15:52 132

原创 项目开发流程介绍(项目优化)

因为是移动端项目,所以选择了vue+vant-ui。vue它是一个 MVVM 框架 ,有一套脚手架可以便于我们高效开发,生态已经非常的强大,在 github 上的 star 已经10W+,其次有各种各样的第三方库。vant就是目前业界主流的移动端组件库之一,是一个轻量的组件库,比较符合国人的审美首先通过vue的脚手架创建项目,需要配置多环境变量,项目要经三个阶段,开发阶段、测试阶段、最后是发布上线package.json 里的 scripts 配置 serve stage build,通过 --m

2021-01-04 15:25:58 1221

原创 Class类继承,原型和原型链

class类JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数。例如:1 function Mold(a,b){2 this.a=a;3 this.b=b;4 }5 Mold.prototype.count=function(){6 return this.a+this.b;7 }

2020-12-27 15:19:33 439

原创 变量类型和计算

值类型字符串、数字、布尔、undefined、symbolvar a='abc' //字符串类型var b=18 //数字var c=true //布尔var d //undefinedvar e=Symbol('e') //symbol引用类型对象、数组、nullvar obj={age:18} //对象var arr=[1,2,3] //数组var a=null //null 特殊引用类型,指向空地址typeof运算符用于判断值类型var a='abc'

2020-12-27 14:32:27 176 1

原创 微信小程序的生命周期详解

1,应用生命周期App:App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。关于小程序的退出:当用户点击小程序左上角关闭,或者按设备Home键离开微信,小程序并没有直接销毁,而是触发onHide方法进入了后台,短时间内当再次进入微信或者再次打开小程序,小程序会从后台状态进入前台,此为“热启动”。注意当小程序进入后台状态一定时间后,或者系统资源占用过高,微信会真正销毁小程序。用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。小程序的冷启动:小程

2020-12-24 07:53:29 4709

空空如也

空空如也

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

TA关注的人

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