m0_45219210的博客

原创 new一个构造函数时做了那些事情

3、将空对象作为构造函数的上下文（改变this指向）；2、将空对象的原型，指向于构造函数的原型；4、对有返回值的构造函数做判断处理。1、创建一个空对象；new做了那些事情？

原创 Antd Select多选时，限制最大选择数

Antd Select多选时，限制最大选择数

原创 手写instanceof

它是原理是判断left的__proto__原型链是否在right的prototype上。检测基本数据类型较麻烦，需要准确对应相应的数据类型，否则无法正确检测。instanceof可以检测某个对象是不是另一个对象的实例；instanceof可以用来检测引用类型。

原创 Vue2和Vue3的响应式原理及区别

响应式数据的声明。以下内容帮助理解，不建议死记硬背

原创 vue3中的watch函数和watchEffect

Watch在Vue2中是一个配置项，在Vue3中是一个函数，可以写多个。在Vue3中，watch可以接收三个参数，第一个是

原创 在HTML页面写入\r\n换行不生效的解决方法

在HTML页面写入\r\n换行不生效的解决方法

原创 arguments

js arguments

原创 替换字符串中的一种字符为另一种字符—replace

replace方法可以将字符串中的一种字符替换成另一种字符。正常情况下只会替换第一项。该方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串。这个方法使得我们处理后端返回的数据为想要的格式后再进行展示。下面代码的意思是将字符串中的第一个,替换成；在进行全局的搜索替换时，正则表达式需包含。下面代码的意思是将字符串中所有的,替换成；...

原创 从数组中查询一个值，如果存在则删除该值，不存在则添加该值

从数组中查询一个值，如果存在则删除该值，不存在则添加该值。

原创 Promise.all的实际运用

Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即getCallRecord的结果在前，即便getCallRecord的结果获取的比getEmailsRecord要晚。

原创 前端模糊搜索、精准搜索

前端filter+indexOf或者includes实现模糊搜索。startsWith实现从起始位置开始搜索等

原创 Ts中type和interface定义类型扩展类型的方法

在Ts中，我们可以通过type和interface的方式去定义类型，一般情况下通过interface接口的方法定义的类型都可以通过type去定义。注意type要添加等号。Interface定义类型不需要添加等号。

原创 setState的同步异步

点击按钮后通过setState让state里面的count加一，当我们进行下面的代码操作，handleClick里面的进行三次setState，打印的结果是三个1，后面每次点击打印的结果都加一，因为此时setState是同步执行的，里面取到的count都是更新前的1。在handleClick2里面，我们把更新状态的操作放在了一个setTimeout里面，此时是属于异步任务，则第一次打印的结果是2,3,4。import React, { Component } from 'react'ex...

原创 Vueuse/core

vue3.0组合API提供了更多逻辑代码封装的能力。@vueuse/core 基于组合API封装好用的工具函数。@vueuse/core 包，它封装了常见的一些交互逻辑。下载：npm i @vueuse/core@4.9.0下面是自己在项目中运用到的函数1、useWindowScroll() 是@vueuse/core提供的api可返回当前页面滚动时候蜷曲的距离。x横向，y纵向。而且这两个数据是响应式的下面的代码，下载后先引入此函数，然后从里面结构出y，即当前页面滚动时距离顶部的.

原创 onClickOutside（点击一个Dom其他地方的逻辑操作）

onClickOutside是Vueuse里面的一个函数，所以使用它之前要先下载Vueusenpm i @vueuse/core然后引入onClickOutside函数，此函数可以监听一个函数元素，实现点击这个元素的其他地方触发的函数，比如一个组件，点击组件的其他地方关闭该组件。具体实现的逻辑如下： import { onClickOutside } from '@vueuse/core' setup(){ // 实现点击组件外部元素进行关闭操作

原创 src和href的区别

src和href都表示对外部资源的引用src:表示对资源的引用，它指向的资源会被嵌入到当前标签的外置，src会将其指向的资源下载并应用到当前文档中，比如js,当浏览器解析到该标签,会暂停其他资源的下载和解析,直到该资源加载、解析、执行完成。所以-般情况会将js放在网页的底部。这里说一下defer和async的区别:引入脚本文件时，当没有defer或者async时。脚本文件会立即执行，阻塞当前的dom渲染。当有defer或者async时，dom渲染和加载脚本并行执行。他们的区别是，defer表示所

原创 Vue3 emits

Vue3提供了代码段的写法，即在template里面不需要写跟元素，可以直接写代码段。但是在代码段里面触发自定义事件。会报下面的警告。我们在一个组件里面，如果有好多地方都需要触发自定义事件。想要知道当前触发了哪一个自定义事件。需要把当前组件的代码浏览完毕。如果不把当前组件的代码浏览完毕，就不知道触发了几个自定义事件。vue3提供了一个配置项。emits。可以把当前组件所有的自定义事件全部声明在emits里面，这样当别人阅读你的代码的时候只需要查看emits就可以知道当前组件触发了多少自定义事件。

原创 RouterLink匹配类名

根据to后面的路径匹配对应的类名。规则如下router-link-active 当你的路由路径包含 router-link组件的to属性值，当前组件会加上它router-link-exact-active 当你的路由路径完全和你的router-link组件的to属性值一致，当前组件会加上它像下面这行代码，就是当url后面的路径为/member时吗，就会给当前的RouterLink添加上名active的类名。<RouterLink exact-active-class="act

原创 前端用Mockjs模拟数据

mockjs可以模拟数据，可以使我们更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。使用步骤：1、安装npm i mockjs2、配置 src/mock/index.js 这里的setup是配置，跟vue3的setup不一样。import Mock from 'mockjs'// mock的配置Mock.setup({ // 随机延时200-300毫秒，模拟网络延时 timeo...

原创 条件成立时渲染某一个dom

众所周知，下面这行代码是当activeName===‘qrcode’的时候才会去创建这个div<div v-if="activeName==='qrcode'" class="qrcode-box"></div>在平时的项目中，我们可能会遇到需要一个多字段满足多种状态中的一种时去显示某一个dom比如当支付状态为已完成或者已取消状态的时候给用户显示取消按钮于是我们可以这样写：<a v-if="order.orderState===5&&or

原创 前端隐藏手机号中间几位字符

通过replace和正则实现隐藏手机号的功能。replace()方法返回一个由替换值替换部分或所有的模式匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式。该方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串。然后通过正则把手机号分为三段，前面三个字符，后面四个字符。都加上了括号。当匹配到第一段的时候，用$1就可以取到第一个括号的内容，用$2可以匹配到第二个括号的内容，中间剩余的部分用****代替。具体代码如下： const phone="17550313746".

原创 自己封装一个Elementui的弹窗提示

众所周知，vue中我们引入elementui之后可以直接通过this.$message.XXX去实现弹窗的显示。我们也可以自己封装实现自己想要的效果。下面是封装的一个仿elementui的vue3消息提示弹窗组件，组件接收两个参数，一个弹窗提示的type，一个是弹窗提示的文本。我们最终想要实现的结果是像vant组件封装好的那样，通过函数式调用实现弹窗的显示。vant的实例代码和样式如下所示。下面直接上代码。如下封装好的组件代码如下，他可以接收两个参数，一个是type，一个是tex...

原创 vue中class的写法

比如想给一个i标签添加一个class。数组的写法<i class="iconfont" :class="[style[type].icon]"></i>当style[type].icon存在的时候就会自动添加上类名。对象的写法<i class="iconfont" :class="{'icon-warning':true}"></i>当冒号后面为true的时候，会给标签加上类名，为false时则不会加...

原创 重置数据this.$options.data()

this.$options.data() 这个是vue原始的数据，就是你页面刚加载时的datathis.$data 这个是现在阶段的vue数据，就是你改变data的数据 // 重置数据 resetData () { Object.assign(this.$data, this.$options.data()) },如果想恢复个别值，比如formInlinethis.formInline = this.$options.data.call(th..

原创 Vue每次切换路由时滚动到页面顶部

vue3配置跳转到新的路由界面的位置import { createRouter, createWebHashHistory } from 'vue-router'// vue2.0 new VueRouter({}) 创建路由实例// vue3.0 creatRouter({}) 创建路由实例const router = createRouter({ // 使用hash的路由模式 history: createWebHashHistory(), routes, // 每次切换.

原创 CSS3后代选择器last-child和last-of-type

last-child先找到父元素，找到所有的子元素，找到最后一个，判断是不是li，是就选中，不是就是无效选择器last-of-type先找到父元素，找到所有的类型为li的元素，选中最后一个下面是一个简单的例子，供大家参考学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

原创 Transition组件

在vue中，显示隐藏或者创建移除一个元素或者一个组件的时候，可以通过transition实现动画。进入（显示，创建） v-enter 进入前 （vue3.0 v-enter-from） v-enter-active 进入中 v-enter-to 进入后 离开（隐藏，移除） v-leave 进入前 （vue3.0 v-leave-from） v-leave-active 进入中 v-leave-to 进入后 多个transition使用不同动画，可以添加nam属性，name属

原创 前端单行省略号和多行省略号

单行省略号: text-overflow: ellipsis;//溢出用省略号显示 white-space: nowrap;//不换行 overflow: hidden;//溢出隐藏多行省略号: display: -webkit-box;//将对象作为弹性伸缩盒子模型显示 -webkit-box-orient: vertical;//从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式) text-overflow: ellip.

原创 Windows设置右键用VSCode打开文件和文件夹

1、打开注册表regedit2、找到对应文件计算机\HKEY_CLASSES_ROOT\*\shell，鼠标放在shell上面右键-->新建-->项 ，然后可以跟新建的项重命名为VisualCode3、双击设置右键文件要显示的文字提示4、同时右健空白处，新建，可扩充字符串值，修改名称为Icon，数据数值为vscode安装的路径5、鼠标放在VisualCode上右键新建项，然后命名为Command6、设置数据类型为 vscode 的路径，"E:\...

原创 浏览器安装Vue devtools

下载地址: https://github.com/vuejs/vue-devtools建议大家下载v5.1.1，这样中间出现错误比较少点击下载zip后解压打开cmd，这里希望大家以管理员的身份打开，防止出现不必要的报错E: 可以直接切换到自己想要的盘，进入自己解压后的目录cnpm i 下载依赖,这里也可以使用yarn add或则npm i去下载，但是使用淘宝镜像会比较快。我这里比较快是因为我已经下载过一遍，我是写博客为了截图重新演示下载成功后执行那npm...

原创 深度作用选择器以及::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞) instead警告解决

如果你希望scoped样式中的一个选择器能够作用的更深,可以使用>>>操作符<style scoped>.json-editor{ height: 100%; position: relative;}.json-editor >>> .CodeMirror { height: auto; min-height: 300px;}.json-editor >>> .CodeMirror-scroll{ min-

原创 把为null和““的数据设为--的形式展示

一般后端给我们返回的数据有为null的时候，这样就有可能在我们渲染的时候拿不到数据导致报错。而当我们拿到数据的时候，第一时间就对数据进行处理，把为null或者为""空字符串的值更改为--，这样可以避免报错，数据的展示也会更加美观当数据的最外层为对象时{a："，b：[]} //resData为我们需要处理的数据 Object.keys(resData).forEach((key) => { if (resData[key] === null || resD

原创 new URLSearchParams() 获取地址栏的参数 通过键的方式拿到值

比如当前路径为 http:localhost:8080/#/detailqiyu? domain=dbybxjjyxgs&fromModule=qiyu_callcenter&mobilePhone=13759088676& timestamp=4646761416&signature=d5d09152fef267f649c78904cdebe4454e88a11c7 想从里面取出mobilePhone后面的手机号字段并使用，可以进...

原创 sessionStorage存储数据实际运用

对应项的点击事件首先保存数据到sessionStorage用到sessionStorage.setItem('key', 'value');分别对应参数的键和值，下面的JSON.stringify()的作用是将JavaScript 对象转换为 JSON 字符串 handleClick(item) { sessionStorage.setItem('offlineAdviserItem', JSON.stringify(item)); this.$router.push..

原创 query参数携带数据

通常情况下我们另一个页面需要前一个页面的Id当作入参项后台请求数据这个时候我们可以通过query参数去携带当触发点击事件的时候携带当前项 <div @click="onClickLook(item)" v-for="item in templatelist" :key="item.templateId" class="item" > <div class="name">

原创 a标签实现文件或者图片的下载

1、当src时从后端返回来的，我们可以把遍历出的每一项的url放在href里面，记得href前面加上:，实现动态的获取超文本链接<a :href="item.url" style="color: #6461ff">{{ item.name }}</a>2、当你是点击当前项下载当前文件或者图片的时候传递当前项，具体看代码注释。添加的字符串的作用是访问页面的时候浏览器就会开启下载框对其内容进行下载 preview(file) { //判断当前项是否存

原创 Vscode以目录树的形式显示文件夹

原创 ES6—class类的概念

constructor：class的构造方法 当我们使用new+类名的时候就会自动执行实例对象身上的constructor方法 class Car{ constructor(brand,price){ this.brand=brand; this.price=price } } let qiche=new Car('奔驰',40000) console.log(qiche); .....

原创 原型、原型链

原型 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype（显式原型） 这个属性对应着一个对象，这个对象就是原型对象 当函数以构造函数的形式调用时，他所创建的属性都有一个隐含的属性 __proto__ （隐式原型链）指向这个构造函数的原型对象 function MyClass(){ } ...

原创 生成ssh命令

1、ssh-keygen -t rsa -C +邮箱ssh-keygen ssh免密协议生成公钥和私钥的一个命令-t 指定用哪种加密算法来生成rsa非对称加密协议-C 描述2、敲三次回车3、上面是私钥，带.pub的是公钥