小朱爱开发-CSDN博客

项目可以启动，但是控制台会报错。其实就是因为你一个组件里多次使用了v-for,key值重复了，像我这个报错，就是有两个 key值’001856’，所以解决办法很简单：<div class="fund_content" v-for="(item,index) in fund_list" :key="`fund${item.id}`" ><div class="information_content" v-for="(item,index) in information_list" :k

2022-03-29 10:54:44 373

原创 js触底加载，特定机型触不到底，踩大坑了

最近在一个列表。默认展示20条，触底加载20条按道理讲是这样写就行 var a = this.$refs.scroll.clientHeight; // 滚动容器的可视高 var b = this.$refs.scroll.scrollTop; // 滚动条距离顶部的高度 var c = this.$refs.scroll.scrollHeight; // 滚动容器的整个高度 if(c = a + b) { //当滚动容器的可视高+滚动容器滚动了的高度（

2022-03-01 18:14:30 788

原创学习笔记—babel转码器，babel是什么

babel 转码器es6是2015年6月开始正式创立，所以一些老浏览器并不能解析es6的语法，babel转码器应运而生，可以将es6的代码转译为es5代码。安装babel: npm install --save-dev @babel/corebeble配置文件：babelrc该文件用来设置转码规则集和插件（转码规则集和插件均需要下载安装）//babelrc { "presets": [ //最新的转码码规则集 //npm install --save-dev @babe

2021-12-09 18:43:03 434

原创 v-model实现子传父组件（原理说明）

v-model实现子组件向父组件传值。

2021-05-16 14:28:29 541

原创封装防抖节流函数、事件对象event对象的存活期

在封装防抖函数时，在网站上借鉴了下其它答主的办法，发现大家都是这样封装的：function debounce(method,delay){let myTimer=null;return function(){myTimer && clearTimeout(myTimer);let self=this;args = arguments;var myTimer=setTimeout(function(){ method.apply(self,args)},delay)}

2021-05-09 21:11:53 385 1

原创怎么理解css文档流/元素脱离文档流后有什么特点

文档流处在文档的最底层，它规定了一个页面的位置和元素布局等规则。我们所创建的元素都处在文档流中，文档流所指定的规则比如块级元素独占一行，内联元素不会独占一行，内联元素不能设置高宽，父元素的高度由子元素撑开等。文档流之所以称为流，是它的布局像流一样从上到下在从左到右。而元素脱离文档流之后，该元素便不再遵循文档流的规则，比如块级元素不再独占一行，内联元素脱离文档流之后可以设置高宽，脱离的元素不能撑开父元素，不再在文档流中占有位置等。而脱离文档流的设置有两种：float，position：absolute

2021-04-02 22:44:36 1270

原创 css常用长度单位

px,em,%,rem,vw,vh,vmax,vmin前端工程师面试中经常会问到单位问题，一次性捋清楚就可1、em1em=父元素的font-size.2、rem1rem=html父元素的font-size

2021-04-02 20:42:41 189

原创 :nth-child和:nth-of-type选择器的区别

:nth-child和:nth-of-type的主要区别是-type是选中后代中出现的所有类型的元素中的第一个，而-child是选中第一个出现的元素有点拗口，可能会听不懂，放个例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{

2021-04-02 16:41:48 331 1

原创学习笔记—JS模块化规范总结

以下内容都是我的学习总结，可能会有不对的地方，还希望看到的伙伴们批评指正，谢谢啦一、为什么js文件需要模块化什么是“模块”：“模块”是为完成某一功能所需的一段程序或子程序。模块是系统中“职责单一”且“可替换”的部分。所谓的模块化就是指把系统代码分为一系列职责单一且可替换的模块。模块化开发是指如何开发新的模块和复用已有的模块来实现应用的功能。在js文件没有模块化之前，我们往一个页面中引入js文时件，采用的是这种写法：这样的做法缺点很多，尤其在引入文件过多的时候越明显，主要的缺点如下：1、请求过多

2020-11-30 15:35:08 102

原创学习笔记—前端移动端开发知识点总结

1、什么是viewport，怎么理解在浏览器中渲染页面，当我们设置html,body{width:100%;}这个时候,body的宽度应该是初始包含快宽度的100%，而初始包含快的宽度为浏览器窗口宽度大小。按照这个理论来说，在移动端，也是这个道理，width：100%，应该就是移动端设备的宽度；其实不然，在移动端设备和html，body之间还有一层移动端初始包含快：viewport(可以这么理解，正不正确有待考究)，而viewport的宽度默认都是980px.这样用文字表述未免苍白，可以参考

2020-11-16 19:05:14 640

原创开发经验—js获取数组的最后一个元素

在开发过程中，我们常常需要得到js数组的最后一个数组元素，今天小朱总结了以下几个方法：一、通过Array.prototype.length当然这是最简单直接的方法但是，这个方法也是有缺陷的，就是在用vue开发的时候，用数组下标赋值的数组是没有get和set方法的，就会导致子组件在接受父组件的该数组时，监听不到该数组的变化，从而影响子组件的渲染，想了解的可以看看我另一篇文章在vue中用数组下标方式（arr[i]）进行赋值的弊端二、通过Array.prototype.pop()lastElement1

2020-10-28 17:52:53 5359

原创开发笔记—饿了么/element ui组件库的select选择器背景颜色修改

在使用element ui的select组件时，我们想修改这个组件的背景色：想修改成透明的：做法： /deep/ .el-input--medium{ background: transparent; }在类选择器前加上deep深度选择器。如果还是没有效果，应该是类名错了，你可以用浏览器的查看器查看下，这个select选择器里面的类名，然后找到对应的类名，再深度选中就行。然后其它的组件也是一样的方法，想修改第三方组件库组件的样式，先用查看器查看该组件的结构，找到对应的类名

2020-10-26 16:36:20 4471 1

原创开发经验—vue中style标签属性scpoed的作用

通俗理解：让style标签内的样式独属于单个组件。如果style上不加上scoped属性，可能会出现样式混乱，布局错乱的现象。刚开始用vue开发的小伙伴，应该也遇到过类似的情况（这是没加scoped时的渲染）：这是正常的渲染：刚开始用vue开发的时候，我是不知道的，每次页面出现渲染出错时，都是在我点击了另一个页面再切换到这个页面的时候出现的，然后经过我的对比，我才发现原来这两个页面中有使用相同的类名，然后就出现了把b页面的同类名的样式应用到a页面上了，就出现了渲染出错的情况。所以在单个组件的s

2020-10-26 15:40:42 738

原创学习笔记—浏览器加载HTML页面的顺序

还记得当时电话面试某大厂时问过我一个这样的问题：你觉得js代码放在body标签的前面和后面有什么区别？所以呀，这个问题其实蛮重要的，很多面试官都会问，那么今天就让我来捋一捋浏览器加载HTML页面的顺序：首先我们可以把浏览器加载页面的工作分给渲染引擎和javascript引擎，这两个小伙伴貌似不能同时工作（我也不是很懂，望大神指教）！！！ok，言归正传，浏览器在解析页面时，是从上到下的，我们来看下面这个结构：浏览器加载顺序：1、解析到head标签内的内部样式表①，渲染引擎加载样式表中的样式，下载引

2020-10-21 16:20:55 578

原创开发经验—vue/父组件请求来的值，子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时，子组件没有应用上父组件传进来的数据

前端新人，在第一次对接口的时候遇到不少小问题，都是特别细节的问题，今天记录一下遇到的让我最有收获的一个问题：首先，我要做的就是根据“数量”和“面积”echarts表显示不同的数据我拿到接口数据之后，在父组件创建两个数组，然后用下标的方式向数组里面赋值：将数组通过属性的方式传进echarts子组件里，根据用户选择的“数量”和“面积”不一样，传进去不同的数组，然后展示：在确保了子组件和父组件数据都正确，语法都正确的情况下，数据在第一次进入页面时还是没办法显示：但是我们切换“数量”和“面积”按钮时

2020-10-21 11:34:09 1627 2

原创开发经验—vue/npm run dev 报错‘vue-cli-service‘ ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еĳ▒▒▒ ▒▒▒▒▒▒▒▒▒ļ▒▒▒

npm run dev 报错报错内容：‘vue-cli-service’ ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еĳ▒▒▒▒▒▒▒▒▒▒▒▒ļ▒▒▒npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] dev: vue-cli-service servenpm ERR! Exit status 1npm ERR!npm ERR! Failed at the [email protected] dev script.npm

2020-10-20 10:36:27 1857

原创学习笔记—元素垂直水平居中方案总结

元素垂直水平居中分为以下两种情况：1、盒子高宽已知：#box1{ width: 200px; height: 200px; background-color: red; position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto; }2、未知高宽：#box2{position:absolute;left:50%;top:50%;transform:tra

2020-09-03 11:02:31 121

原创学习笔记—BFC/块级格式化上下文

Box：CSS布局基本单位，一个页面由很多Box组成，元素的类型和display属性决定了该元素的Box类型,会有不同的 formatting context容器来管理，而不同的formatting context容器有不同的渲染方式。一共由两种Box类型分别对应两种不同的渲染方式：①、block-level Boxdisplay:block,list-item,table的元素，由BFC容器来管理和渲染。②、inline-level Boxdisplay:inline,inline-block,

2020-08-29 17:22:51 135

原创学习笔记—css模拟固定定位 / 解决ie6固定定位失效问题

ie6固定定位失效ie6中是不支持元素固定定位的，所以不要慌，我们可以用css代码模拟固定定位。在贴代码之前，先要说明几个相关的问题：1、在默认情况下，当页面内容超出视窗高度时，会出现滚动条，而这个滚动条是在html标签之外的初始包含快上的！！！初始包含块是一个浏览器窗口大小的矩形并非浏览器窗口2、绝对定位绝对定位是相对于最近的开了定位的祖先元素进行定位的，如果没有这样的祖先元素，则相对于初始包含块进行定位所以我们可以利用绝对定位的特点进行固定定位模拟，当一个元素开启绝对定位但没有开启了定位的

2020-08-27 22:26:22 230

原创开发经验—react创建组件的三种方法

1、函数定义的无状态组件function Add(props){ return <h1>hello,{props.name}</h1> } ReactDOM.render(<Add name="仙女"/>,document.getElementById('app'))无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：1、渲染

2020-08-06 14:33:39 355

原创学习笔记—什么是微数据？itemscope/itemtype/itemprop（搜索引擎seo优化）

什么是微数据MDN官网定义：微数据是WHATWG HTML标准的一部分，用于在网页上的现有内容中嵌套元数据。[1]搜索引擎，网络抓取工具和浏览器可以从网页中提取和处理微数据，并使用它为用户提供更丰富的浏览体验。搜索引擎从直接访问此结构化数据中受益匪浅，因为它允许搜索引擎了解网页上的信息并向用户提供更相关的结果。微数据使用支持词汇表来描述项目和名称 - 值对，以便为其属性赋值。与使用RDFa和微格式的类似方法相比，微数据试图提供一种使用机器可读标签注释HTML元素的简单方法。看到这里可能很多同学一脸懵，这

2020-07-13 16:48:24 1563

空空如也

空空如也