坦淡-CSDN博客

原创手写一个Promise

一、Promise的执行原理：Promise对象首先存在三种状态：pendding、fulfilled、rejected。在通过new Promise的时候，Promise内部默认的状态是pendding，Promise的状态一旦改变后就不会再进行改变。例如用原生的Promise举个例子：{ let p = new Promise((resolve, reject) => { resolve('OK'); reject('error'); }).th

2022-03-03 11:14:07 441

原创 v-slot语法的详细用法

v-slot语法的详细用法一、具名插槽老的写法（子组件child）<template> <div id='child'> <p>----我是子组件---</p> <slot name="header"></slot> <slot name="footer"></slot> </div></template><

2021-12-02 14:36:21 2055

原创 Vue中的作用域插槽slot-scoped的详细用法

Vue中的作用域插槽slot-scoped的详细用法插槽是什么：意思是子组件有一个标签slot，就是一个占位符，然后在父组件中调用这个子组件，在子组件标签中填写HTML模块，会自动显示在子组件中的slot占位标签处。例子：子组件（child组件）：<template> <div id='child'> <p>----我是子组件---</p> <slot></slot> <!--这里是

2021-12-02 10:22:38 2200

原创当高度为100%的时候，如何让文字垂直居中

当高度为100%的时候，如何让文字垂直居中在开发过程中，通常让文字垂直居中的办法就是设置line-height：元素高度。但是这个方法有缺陷，当height是百分比的时候再设置line-height就没有效果了，line-height必须是一个实际的px值。例如高度位百分比的时候再设置line-height的效果如下：代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Co

2021-12-01 16:24:45 2966 1

原创 Vue项目在标签中如何书写多个内敛style样式

Vue项目在标签中如何书写多个内敛style样式例如：对一个数组进行循环，我想给偶数项的添加红色背景，奇数项的添加蓝色背景，这时候就可以用v-bind:style="[]",详细语法书写方式如下：组件代码：<template> <div id='test'> <div v-for="item in 10" :key="item" :style="[{'width': '50px', 'height': '20px', 'background-colo

2021-12-01 15:45:21 2095

原创亲手撸一个Echarts数据可视化

模仿B站视频的界面，代码自己实现。效果图：部分代码截图代码可私聊发送，也可在Github上去下载，github地址：https://github.com/zenghaiy/myEcharts.git。

2021-11-09 16:13:10 1027 4

原创 vue和echarts实现地图航线

vue和echarts实现地图航线效果图：第一步：echarts的安装。npm install echarts --save第二步：在vue项目中的main.js中进行导入echarts，放在其原型上方便利用。main.js代码：import Vue from 'vue'import App from './App.vue'const echarts = require("echarts")Vue.config.productionTip = falseVue.prototype.$

2021-11-01 16:57:58 2499 6

原创 Vue中脚手架配置多入口

Vue通过cli脚手架创建的项目是单页面工程项目，main.js就是整个项目的入口，组件都是挂载到index.html下的。对于大型的项目使用单页面工程项目，负载就会加重，所以更适合多页面。第一步用vue-cli脚手架创建一个新的项目。目录结构如下：第二步：创建新的入口文件。项目最开始的入口文件就是main.js、app.vue、index.html，以此类推：创建一个login.js、login.vue、login.html。创建好新的入口文件后，目录文件如下：login.html:&lt

2021-11-01 10:36:58 807

原创用echarts实现中国疫情地图

效果图：首先第一步进行安装echartsnpm install echarts --save然后在main.js中进行导入和添加到vue的原型上。main.js中的代码如下：import Vue from 'vue'import App from './App.vue'const echarts = require("echarts")Vue.prototype.$echarts = echartsVue.config.productionTip = falsenew Vue({

2021-10-29 10:13:13 4658 6

原创 Vue导入Echarts实现折线散点图

效果图：一、vue-cli中导入echarts通过命令：npm install echarts --save进行下载到项目中，然后在项目中的main.js中进行导入且保存在vue的原型上。main.js代码如下：import Vue from 'vue'import App from './App.vue'const echarts = require("echarts")Vue.prototype.$echarts = echartsVue.config.productionTip =

2021-10-28 11:43:44 492

原创 Vue框架中输入框做防抖和节流操作

什么是防抖？防抖：就是你触发事件后多少秒后在进行执行，如果你触发事件的事件间隔小于延迟事件，那么就在你最后一次触发事件后的多少秒的时候才执行。应用场景：例如一个搜索框，用户输入数据会进行发送网络请求进行检索，为了减少服务器的压力，在@input事件上可做一个防抖操作。在用户触发@input事件的200ms后执行网络请求函数，如果一直输入就一直不发送，直到停止输入后的200ms才执行。代码：效果如图，不断的输入，等输入完了然后执行一次。...

2021-10-27 16:54:19 2510

原创解决element-ui修改原生的样式污染全局的样式

方法一：把样式css写在没有scoped属性的style标签中，部分组件的样式需要用到!important使其样式权重最高缺点：会影响全局的样式。优点：某些共同的样式不需要进行重复书写。现在页面有2个组件，可以进行点击切换，且2个组件有同样的element-ui组件。现在想对Home的输入框设置蓝色，about组件的设置为红色。如图home组件的样式书写：about组件的样式书写：最后的结果是2个组件的样式都是蓝色。显然不是想要的结果。解决办法：利用方法二方法二：样式穿透 >&gt

2021-10-27 16:29:44 2026 1

原创解决element-ui的table组件排序只进行本页排序的问题

如图对年龄进行排序：前端界面HTML部分：如果像这样使用它自己原生的排序方式，那么就只会在当前页进行排序，并不是所有的数据进行排序。解决办法：对显示年龄的哪一个el-table-column标签设置属性：sortable=“custom”(这样就表示自定义排序方法)然后再在最外层的el-table标签上添加方法：@sort-change=“sortChange”，然后再sortChange()函数中些自己的排序规则@sort-change="sortChange"该方法接收一个参数，标识是哪一

2021-10-27 15:45:58 2927 7

原创 git reset --soft命令的使用

git reset --soft命令的使用命令语法：git reset --soft 版本号作用：用于版本的回退，只进行对commit操作的回退，不影响工作区的文件。例如：在提交代码的时候，commit之后，然后我又在工作区添加了东西，这时候突然发现，上一次的commit有错误的文件，需要重新修改，但是我添加的东西友不想丢失，而且我想修改上一次的提交，这时候可进行git reset --soft 版本号这里进行演示：我进行4次commit。第一次提交：在src目录下提交了一个test1.txt文

2021-10-15 15:08:43 38360 6

原创 Vue组件中父组件和子组件之间的通信

一、父组件给子组件传参数。1.首先可以通过props传参数。页面的初始显示，这就是一个大的Home组件，里面包含了一个子组件：Home组件的代码如下：子组件的代码：这时候页面的显示，子组件确实是能够接收到父组件的参数。这时候点击父组件的修改参数事件看页面结果是什么。部分参数确实是改变了，但是data中绑定的值却没有更新，这时候就可以利用this.$refs，通过父组件触发子组件的函数去更新data中的数据实现视图的更新。(在一个页面的data中的数据确实已经改变了但是页面没有动态刷新，那

2021-09-25 18:56:25 288

原创 Vue组件中的data为什么是一个函数

Vue组件中的data为什么是一个函数首先进行了解引用数据类型在JS中存在2大类的数据类型，引用数据类型和原始数据类型。引用数据：对象函数数组都是引用类型。引用数据类型的存储方式是不一样的：它的引用（名字）是存放在栈空间的，而它的数据是存放在堆空间的，栈空间就是存放的数据在堆空间的地址。例如代码：对对象进行赋值后再进行改变数据。可见引用数据类型直接进行赋值的话，是赋值的地址，在堆空间并没有进行开辟新的内存空间。所以这时候可以想到data为什么是一个函数，如果data是一个对象，那么在页面

2021-09-20 20:15:52 251

原创回顾Vue中父子组件的通信

回顾Vue中父子组件的通信1.父组件给子组件的传值：props首先组件的层级关系没错，父组件的包裹子组件。在父组件中调用子组件的标签中添加属性，属性名=“属性值”，然后在子组件中利用props进行接收。父组件：子组件中：子组件给父组件传递参数利用this.$emit(事件名,传递参数).子组件：父组件：...

2021-09-20 18:08:00 95

原创 Vue组件封装TabBar

Vue组件封装TabBar1.首先把TabBar进行拆分首先把最下面当作一个整体的TabBar组件，然后每一个菜单就是一个组件，且四个组件都是一样的。下一步进行创建组件。目录结构如下：首先创建一个大的组件tabBar用于后面包裹4个tabBarItem，创建好该组件然后得展示，那么就得在App.vue中导入该组件，然后进行注册，然后编写tabBarItem，因为这里得4个都是一样的，为了封装的TabBar更加的灵活，所以这里就利用slot插槽。大组件tabBar的写法路由配置：.

2021-09-20 17:34:20 129

原创 git基本使用详解

首先去官网：https://git-scm.com/下载git的安装包。安装完成后，点击鼠标右键出现这种，就说明安装成功：然后进行初始化本地版本库：首先进入到你项目的目录下，然后鼠标右键点击Git Bash Here:这时候就会弹出Git的命令行窗口，然后再输入git命令：git init这时候它会在该目录下创建一个隐藏文件夹.git。本地仓库就已经初始化完成，下一步随便创建项目文件。这里我创建了一个src文件夹：其中包含js文件夹（里面有个js文件）、html文件夹（有html文件）

2021-08-05 14:09:35 92

原创 CSS清除浮动的几种方法。

<div class="box"> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> </div>当给所有的子元素使用浮动的话，这时候父元素的高度就坍塌，高度就为0.**清除浮动的方法：第一种：**给父元素添加css属性：overflow: hidde

2021-07-29 16:23:11 177

原创 JS面试题分享

题目一：判断括号匹配是否正确：例如：传入“{}()[()[]]”，输出true，"{(})[{]}"，输出false思路：首先要知道括号都是一对存在的，然后遍历传入的字符串，因为遍历从左往右遍历的，所以如果是正确的括号匹配，那么肯定是先匹配到左括号，匹配到左括号就将该左括号放入数组，然后继续匹配，匹配到右括号，那么它的左括号肯定已经存在了数组中，且是数组的最后一个，不然的话那么括号就不匹配。看代码：{ function kuohao(str) { let reg = /[\[

2021-07-29 15:36:49 189

原创 JS实现全排列

利用递归实现全排列：先看代码，再看流程分析。{ function fullpermutate(str) { var result = []; if (str.length > 1) { //遍历每一项 for (let i = 0; i < str.length; i++) {//3遍大的循环，每一遍循环递归调用，直到存在一个递归出口。第一遍大循环：固定a：得到abc、acb

2021-07-27 22:05:14 485

原创 JS写轮播图

第一种：直接切换隐藏的。思路：让所有的图片进行绝对定位，然后默认显示第一张，然后通过修改display：block属性，切换隐藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont

2021-07-26 13:11:41 58

原创 JS面试题分享

题目一：用Math方法实现0<=num<=10。Math.floor(Math.random() * 10)//然后提一下Math常用的方法：xMath.floor(x) 返回小于或等于x的最大整数。Math.random()：随机生成[0-1)的浮点数,包括0但是不包括1.Math.round(x)：返回x进行四舍五入的数字，如果x是小于0的话，那么就是五舍六入。Math.raoud(-2.5)//输出：-2Math.max(1,2,3,4),返回这一组数据中的最大值，不能够传数

2021-07-21 20:52:13 152

原创 JS实现小数的相乘

首先看代码：{ let a = 0.02; let b = 0.0002; console.log(a * b); //输出结果：0.000004000000000000001}这是因为JavaScript 里的数字是采用 IEEE 754 标准的 64 位双精度浮点数。该规范定义了浮点数的格式，对于64位的浮点数在内存中的表示，最高的1位是符号位，接着的11位是指数，剩下的52位为有效数字。用一个函数实现小数的乘积运算：{ function multiply(a

2021-07-20 17:05:58 1713

原创面试题：[“0x1“, “0x2“, “0x3“].map(parseInt)

let arr = [“0x1”, “0x2”, “0x3”].map(parseInt)arr的输出结果是什么？正确结果：[1,NaN,0].首先parseInt方法：parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。radix参数可选，如果radix不选或者等于0的时候，该方法首先会对string方法进行识别是几进制的数，然后转化为十进制的数。[“0x1”, “0x2”, “0x3”].ma

2021-07-20 16:30:31 1213

原创浏览器输入URL发生了什么

首先在浏览器中输入一个网址（www…com）点击回车。1：DNS域名解析，把网址转换为IP地址。1.首先去查找浏览器是否有这个DNS缓存，如果有缓存就直接返回IP，然后DNS解析完成。没有就进行下一步的逐级查询。2.浏览器没有，然后去查询本地操作系统是否有DNS缓存，有就直接返回IP，没有就再继续查询。3.然后再查询本地DNS服务器是否有这个网址的DNS缓存，有就返回IP，没有就再继续查询。4.查询根域名DNS服务器，是否有这个网址的DNS缓存，有就返回IP，没有就再继续查询。5.最后就是查找c

2021-07-20 15:21:22 65

原创 cookie

CookieCookie:Cookie 就是访问者在访问网站后留下的一个信息片段。举一个例子：例如你第一次进入CSDN官网，是需要进行账户登录的，第一次登录成功后，你第二次进入CSDN官网的时候，就不用再进行登录了，就直接显示你已经登录。这就是因为在你第一次访问CSDN的时候，在他们的后端服务器会生成一个Cookie，然后通过http返回给客户端，客户端自动进行保存，然后再第二次发送同类网络请求的时候，就会自动携带Cookie，然后后端就会进行对Cookie进行判断然后做相应的处理。Cookie

2021-07-19 17:06:00 92

原创 JS面试题

题目一：{ function test() { let n = 4399; function add() { n++; console.log(n); } return {n:n,add:add}; }; let re = test(); let re2 = test(); re.add();// 4400 re.add();// 4401

2021-07-12 22:18:16 88

原创 JS中异步和同步的执行机制

什么是同步、异步？同步：必须这件事情做完了才能进行下一件事情。异步：不必要等这件事请做完，可以先干其他事情。为什么JavaScript是单线程的？主要原因就是避免dom渲染的冲突，因为JS可以访问dom节点且可对节点进行操作。比如：如果JS是多线程的，那么它在同一时刻就可以刚多件事情，假如A事件在对一个节点进行渲染，而B事件又想删除该节点，岂不是就产生了冲突，为了避免这种冲突，所以JS就被设计为单线程的，所以同一时间就只能干一件事情。单线程意味着一个时刻只能干一件事情，那么遇到同步代码和异步代码，

2021-07-11 20:48:24 542

原创 JavaScript中的instanceof的检验原理

instanceofMDN的解释：instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。可用于检测引用类型数据的数据类型。A instanceof B：意思就是检测A（实例）是不是B（构造函数）的实例。返回值为布尔类型：true表示A是B的实例，false则不是。那么它判断原理是什么呢?首先知道，每个实例都存在一个__proto__属性，该属性指向创建它的构造函数的prototype属性指向的对象。然后每个构造函数都有一个属性prototyp

2021-07-11 17:24:06 200

原创 JS的迭代器和生成器

迭代器（Iterator）迭代器就是一种机制，一种接口，就是给各种不同的数据结构提供访问机制。一种包含数据的结构实现了迭代器接口就可以通过for…of遍历。Iterator的遍历过程如下：1.会创建一个指针对象，指向此数据结构的起始位置，遍历器对象本身就是一个指针对象。2.它就是去调用Iterator实现的next()方法，第一次调用，就把指针指向数据的第一个成员，且返回。第二次调用就指向第二个成员，直到最后。每次返回的是一个对象，{value:成员数据，done:布尔值}，value就是该

2021-07-08 14:53:21 119

原创微信小程序开发中的页面组件中的通信

页面、组件的数据传递页面与页面的跳转同时实现数据的传递。代码：首先在原始页用navigateTo事件来进行页面的跳转，在结合success中的res.eventChannel.emit(“事件名”,传递数据)进行数据的传递。然后在目标页对该事件进行注册：this.getOpenerEventChannel().on(“test1”,（data）=>{})，data就是传过来的数据，在函数中可对数据进行处理。组件和页面的通信1.页面触发事件去修改组件的数据：首先通过this.se

2021-07-07 16:32:00 191

原创微信小程序开发中的事件捕获和冒泡

微信小程序中的事件捕获和冒泡学习微信小程序原生开发，记录一下，防止忘记。事件捕获：事件触发的过程是从外层的容器一层一层的向目标元素触发。事件冒泡：事件的触发从里层依次向最外层传递。如图：代码：capture-bind:tap这个属性是监听事件捕获的。bindtap属性是监听事件冒泡的。当点击最里层的view3的时候，打印结果如图：先事件捕获：从最外层的click1事件触发，捕获到最里面，然后再从最里面冒泡到最外面。这就是事件的捕获和冒泡。在开发过程中，为了解决事件的冒泡或者捕获，怎

2021-07-07 14:53:34 884

原创 JavaScript的作用域和作用域链

什么是作用域？作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。看代码：{ function fn() { var a = 10; } fn(); console.log(a);//直接报错：a is not defined!}由此可见a就只能在fn函数外部是不能访问的，把变量进行了隔离。在ES6之前把作用域分为全局作用域和函数作用域全局作用域任何不在函数中或是大括号中声

2021-06-26 19:09:40 68

原创 JavaScript上下文和变量提升面试题

题目一{ console.log("gb:" + i); var i = 1; foo(1); function foo(i) { if (i == 4) { return; } console.log("fb:" + i); foo(i + 1); console.log("fe:"+i); } console.log("ge:"+i);}答案：

2021-06-26 17:38:07 315 6

原创 JavaScript中的变量提升和函数提升

变量提升首先看代码例子： console.log(a);//输出 undefined var a = 1;var关键字声明的变量会进行变量提升，所以是输出undefined。那么其内部原理是什么样的呢？首先可以理解为这样:var a;console.log(a);a=1;JavaScript会把 var a=1看为2步，var a和a=2，变量的声明是在代码编译阶段（也可以说是预处理阶段）进行的，然后变量的赋值是在代码执行阶段执行的。函数提升看代码例子： fn();//

2021-06-26 16:18:28 174

原创 JavaScript的原型链

原型链原型是什么？在JavaScript中的构造函数都有一个属性prototype，叫做原型，这是在构造函数定义的时候就会自动创建这个属性，这个属性是指向一个空的Object（这里的空Object含义：是我们本身没有给它增加属性，但是是可以增加属性的）。在JavaScript的实例对象中会有一个__proto__属性，这是在创建实例的时候JS自动添加的属性，__proto__的指向是创建它的构造函数的prototype属性，该属性不适合生产环境使用，可用于测试方面。通过代码来验证prototype和

2021-06-26 11:58:20 212

原创 JavaScript的proto和prototype

__proto__的含义：可称为隐式原型属性，对于使用对象字面量创建的对象，这个值是 Object.prototype。对于使用数组字面量创建的对象，这个值是 Array.prototype。对于functions，这个值是Function.prototype。对于使用 new fun 创建的对象，其中fun是由js提供的内建构造器函数之一(Array, Boolean, Date, Number, Object, String 等等），这个值总是fun.prototype。对于用 js定义的

2021-06-25 17:22:28 201

原创 JavaScript判断数据类型的几种方法

JavaScript中常见的数据类型基本数据类型：String、Number、Boolean、undefined、Null引用数据类型：Obejct、Array、Function判断的方法有： 1.typeof：可用于判断String、Boolean、Number、Function、undefined。不能判断：Null、Object、Array。 2.instanceof：用于判断引用数据类型的具体类型。 3.===：可用于判断null和undefined。 4

2021-06-25 10:36:33 166

空空如也

空空如也