lkrdmm-CSDN博客

原创 promise.all()方法手撕代码

Promise.all0 = function(promises){ return new Promise((reslove, reject)=>{ const len = promises.length; let arry_put = new Array(len); j = 0; for(var i = 0; i<len; i++){ Promise.resolve(promises[i]).then(res=>{ arry_put[j] = res; j++; if(j == len)

2020-12-30 00:30:23 510 2

原创父组件传递异步数据给子组件遇到的问题

父组件可以通过props传递异步数据给子组件，但是值得注意的是，子组件中需要watch去监听父组件传过来的值，并且要对对应的函数进行重新调用。代码如下：下面展示一些内联代码片。 props: { map: { type: Object, default: null }, mapView: { type: Object, default: null } }, watch: {

2020-12-29 14:20:36 264

原创 JS的深拷贝和浅拷贝的造成原因以及解决方法

造成深拷贝和浅拷贝的主要原因还是因为数据存储的方式以及位置造成的。在理解深拷贝和浅拷贝之前，咋们先了解下JavaScript有那些类型：基本数据类型：Number、String、Boolean、undefined、Null、以及Es6新特性Symbol、或者未来Es10中的Bigint，一共是7种。引用数据类型：Object，又细分为Object、Array、function、Data等等粗糙来讲，一共是8种数据类型；接下来我们讲讲基本和引用数据类型的存储原理：基本数据类型：存储方

2020-12-25 11:04:59 925 1

原创 px、%、rem、em的理解

在我们对某个盒子的高度、宽度进行定义的时候，我们常见用到的单位是px、%、rem、em。 px：px绝对是我们小伙伴最最常用的一种单位，也是最简单的一种。px（像素）是一种规定好的单位，无法动态的去变化。 %:：%也是一种常用的单位，就是根据父元素去变化，不断去遍历父元素，直到在某个父亲的父亲的。。中找到一个确切的值，从而确定该元素的值。（在这里我们需要理解一下页面的构造问题，下次我会对这个专门细讲一下） rem：rem也是一种比较容易理解的单位，就是根据 “根元素” 去确定值，比如在html中设置 fon

2020-12-23 22:35:05 470

原创 Vue+Echarts实例

先看下最终的效果图吧。很明显哈，是在一个父组件上，有两个子组件页面，每个子组件展示一个Echarts图。父组件源码我就不展示了，主要是把子组件导入并且加入到components属性中，然后在对应的位置去用就可以了。由于我把请求都写在了子组件中去调用，所以就不用去用props传递数据了（实际开发最好减少请求次数，从而起到优化的作用）。这个是饼图子组件的代码。 <template> <div> <div id="myCharts"></div&gt

2020-12-23 20:59:43 993 1

转载 JavaScript动态产生对象push进指定数组，发现数组所有元素一样

原因：对象是同一个对象，动态创建对象时，不断对对象赋值，push进数组，数组[obj,obj,obj],所有的obj值相同，因而导致数组中都是同一个对象错误写法：下面展示一些内联代码片。 var obj = { id: null, name: '', }; var str = []; for (var i = 0; i < 5; i++) { obj.id = i; obj.name = 'name_' + i;

2020-12-21 14:51:42 3125

原创 css_min-height、max-height、height详细讲解

首先min-height、max-height、height之间是有权重的等级的。权重等级：min-height > max-height > height 直接写一个Demo来简单的讲解一下：下面展示一些内联代码片。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

2020-12-14 16:28:38 2746

原创 webpack遇到各种问题到解决

webpack的概述就不再多少了。我直接讲一下我在学习webpack过程中遇到的一些问题。问题1：在安装局部的webpack的过程中一直会报错，无法安装成功。一般原因是你在执行 npm init -y 的时候，默认的把 package.json 文件中 "name"属性命名为 “webpack”，所以会导致命名重复报错的问题。问题2：当你安装好 webpack webpack-cli（我记得好像是在4.几版本后就必须安装webpack-cli）webpack-dev-server 后，执行 np

2020-12-13 17:17:26 455

原创 ES6__解构赋值

一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

2020-12-10 14:01:56 122

原创 ES6__let、const关键字

let : 声明的变量只在let命令所在的代码块内有效；不能重复声明；不存在变量提升； const 声明一个只读的常量，一旦声明，常量的值就不能改变；暂时性死区；注意要点：const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。 ...

2020-12-10 13:59:17 119

原创父子组件之间互相传递数据

有的时候我们常常在父组件中通过点击事件弹出一个页面，也就是该父组件的子组件。我们可能在父组件上某个部分需要用到子组件上的某个数据，这个时候我们就需要用到emit技术 // 这是发射语句，第一个参数和接受语句的第一个参数一致；第二个参数是传递的数据 this.$root.eventHub.$emit('_c_faglInfo_popup_enlarge_water', res) //这是接受语句，第一个参数需要和发射语句的第一个参数一致；第二个参数是接受发射语句的数据的函数 this.$root.event

2020-11-03 17:55:09 150

原创通过插槽来修改表单里面的数据

HTML代码 <el-table-column prop="domestic" label="生活用水" width="250"> <template slot-scope="scope"> <el-form :model="scope.row"> <el-form-item size="small"> <el-inpu

2020-10-28 17:56:19 575

原创双击table修改单元格中内容

在标签 e-table 中添加一个 @cell-dblclick="tableDbEdit" HTML代码 <div id="son-tabs" v-if="nnCodgcxmodels"> <el-table :data="riverdata" border height=60% @cell-dblclick="tableDbEdit" > JavaScr

2020-10-23 15:10:39 2048

原创 el-table点击按钮获得一行的数据

获取某一行数据有两种方式：第一种是在标签el-table上添加行单击事件***@row-click=“handleEdit**”*，但是有时候我们想只是点击一下某个操作按钮，比如保存按钮来获取row，这个时候这种方式就不合适了。所以此时我们用下面这种方法。通过插槽的方式来获取： HTML代码 // An highlighted block <el-table-column label="操作"> <template slot-scope="scope"> <el-

2020-10-23 15:00:17 8783 2

原创三次握手和四次挥手学习

三次握手首先我们要知道三次握手是为了什么。为什么一定是三次，而不是一次或者两次；其实握手这种行为就是希望客户端和服务器都能够知道，双方都具备发送和接受请求功能。所以才产生握手这个事件；第一次握手：客户端向服务端发送请求，在这次请求中；客户端只知道自己发送请求正常，服务器知道客户端发送请求正常、自己接受请求正常。第二次握手：服务器向客户端发送请求，在这次请求中；客户端知道了自己接受请求正常、客户端接受发送、接受请求正常。（客户端已经具备所以需求了）；服务器知道自己发送请求正常。第三次握手：客户端向.

2020-10-05 18:23:57 175

原创 DOM学习总结

DOM是操作HTML的一个非常常用的技术；我们可以把HTML所有的标签看成是一棵树，然后每个标签中包含的标签了就是这个标签的子节点或者子孙节点。这种树的概念很方便我们在JS中去管理HTML页面。在DOM中，我们和标签元素一般都是通过id选择器或者标签选择器来连接起来的。 DOM有很多强大的功能，比较常见的：列如对指定的元素内容进行修改 document.getElementById("id").innerHTML = "new" 一般获取的方法有三种： getElementById(id) - 获取

2020-10-04 19:23:43 334

原创 Vue生命周期

在了解Vue生命周期时候了，我们肯定会接触到官方给的Vue生命周期图。如图所示： Vue生命周期分为四个阶段：第一阶段创建Vue对象；第二阶段是编译；第三阶段是数据跟新；第四阶段是销毁实例对象；每个阶段都是有两个钩子函数，阶段中的钩子函数都是与之对应的。在第一阶段：我们会遇到第一个函数beforeCreat()，此时的’data’和’methods’都没有初始化，最早初始化是在函数Creat()时候。第二阶段：经过了第一阶段后，我们要对el进行判断是否存在，如果不存在就要初始化el，否则进

2020-10-03 22:06:41 144

原创 AJAX学习总结

AJAX使用原因：在学习AJAX之前我们要先知道为什么要去使用AJAX。在以前前端对HTML页面进行刷新是通过重新加载新的页面来实现的，可是伴随着HTML页面元素越来越多，这种刷新方式因为速度太慢，又消耗资源，慢慢满足不了客户的需求。这个时候AJAX思想就出来了。 AJAX思想：通过对页面进行部分刷新，从而起到既能满足用户的需求，又能极大的节省时间和资源。 AJAX实现：下面展示一些 function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequ

2020-10-02 20:34:33 175

lkrdmm的博客