- 博客(42)
- 收藏
- 关注
RSS订阅原创 封装一个vue2的虚拟列表
这里我封装了一个简单的虚拟列表的组件，里面包含了 rowHeight：行高、viewCount：显示条数、listItem：每一行显示的内容、listData：需要渲染的整体数据，另外还添加了一个点击向父组件传递信息的方法 onClick。当我们需要很多条数据时，比如一万条时，如果只用v-for的话那么会渲染出一万个dom元素，这样是很消耗性能的，这时我们便可以使用虚拟列表了。顾名思义，就是一个虚假的列表，可能它里面只渲染了20个dom元素，但是却可以通过滚动来展示一万条数据。组件如下，可直接复制。
2023-02-11 12:52:32
490
1
原创 手写Promise第二版解决异步执行问题
这一版在class中创建了一个callback，用于接收then方法中传入的回调函数，由于这个回调函数需要将class中的#result传入，而如果实例中的resolve是异步执行的，那么这个传入的回调函数无法立即获得resolve传进来的值，所以要使用一个变量接收这个方法，然后在#resolve或者#reject中调用。另外then方法是将任务放到了微任务队列中，所以我们需要使用queueMicrotask这个方法。这一版是解决异步操作的问题，但是链式操作还没有解决。
2023-01-11 13:08:20
157
原创 封装一个简陋的promise
这是第一版的promise，只是一个简单的封装，还没有实现异步解决方法、链式操作，但是我认为这对promise的理解还是有一定帮助的，有需要的同学也可以直接看这个视频。后面也会跟着视频敲出更完整的代码，但是想从易到难地进行，所以选择将每一版的代码分别做一个记录，也更容易理解。这两天在看B站李立超老师的视频，跟着手动封装一个promise。我写的时候添加了一些注释，如果有欠缺的地方，烦请指出。
2023-01-11 11:43:15
168
原创 点击echarts图表title进行相关操作
最近在做移动端项目，页面中有一张echarts图表和一个列表，并且它们几乎已经占满页面，而页面还差一个功能是要跳转到另一个详情页面，想了半天没想到这个按钮做哪儿，后面后台老哥提醒我可以点击echarts的标题进行跳转。之前有做过点击echarts的数据弹出弹窗，但是怎么确定是点到标题进行操作呢？没能找到标题部分，那么可以自行打印params，确认一下title在哪儿。（判断点击部分为title）。核心点在于title中。（允许标题触发事件）与。
2022-11-17 19:58:16
1303
1
原创 VUE中echart的父容器大小改变，echars大小自适应、setOption中第二个参数
使用环境 VUE当手动给echarts的父容器添加类名改变大小时，直接重新调用创建echarts的方法，echarts大小也不会改变。于是我添加了个setTimeout暂时解决了问题，现在跟大家分享一下。
2022-11-15 21:09:18
888
原创 使用ExcelJs导出表格设置样式、添加边框
xlsx、xlsxStyle和fileSaver一起使用也可以导出表格，并且设置表格样式，但是就目前来看，ExcelJs安装后可以直接使用，不用去解决依赖包的报错问题，还是不错的。另外，使用ExcelJs还可以参考这篇文章ExcelJS 使用帮助文档。
2022-10-17 14:01:54
4161
原创 Vue中动画transition标签的简单使用
以下是代码展示，我们可以在router-view标签外套一个transition标签，这样我们在切换页面时就会有动画效果了。
2022-09-22 11:21:41
475
原创 eCharts图中的toolBox以及滚动条、以及其中的点击事件、文字排序localeCompare、给elementUI中的表格添加双击事件
这次就分享这么多吧，本来准备再整理一个grid布局的，但是想偷点懒，直接把我找到的博文分享一下吧。grid布局一grid布局学习二这两个资料结合在一起看是比较清晰的。
2022-08-28 19:45:36
1082
原创 js-cookie、Base64、token的使用、输入框记住密码的案例
另外我们在进入这个页面时，就要查看缓存中是否有用户名和密码，如果有，那么radio就是被选中的状态，并且将用户名和密码输入到输入框中。token相当于一个令牌，可以用于确定用户的身份，当用户登录时，后台会返回一个token值，这时可以将token值进行储存，后面进行请求时，可以带着token去进行请求。使用步骤，在后台返回token值时，可以将token值储存在cookie中，或者储存在vuex中，在请求拦截中，发送headers时，将token发送出去。js-cookie是一个插件，要在项目中进行安装，
2022-08-21 20:16:47
507
原创 vue2.0中自适应echarts图表、全屏插件screenfull
第一，自适应的echarts图表，要配合着能够自适应的盒子来使用，首先就是盒子要能够跟随屏幕大小改变而改变，比如我们使用弹性盒子就可以实现。第二，要想实现自适应的echarts图表，就是当窗口发生改变时，echarts图表的尺寸重新定义一下，使用resize的方法就可以实现。在mounted中调用这个方法，并且将数据传入进去，那么就可以实现自适应echarts图表了。首先在项目中安装这个插件，使用npm指令。在需要使用的组件，引入一下即可。
2022-08-21 18:15:02
1626
原创 vue中的echarts图可根据关键词、月份范围进行搜索，还包含了简陋的带推荐搜索的输入框
这次的小案例中包含了很多的bug，我只是提供了一种思路，如果大家有什么修改意见，可以留言，真的写的太简陋了，还有很多明显的bug因为时间原因，没能够去完善，实在抱歉以下的代码是写在一个组件之中的，另外还需要elementUI的配合template代码。...
2022-08-14 23:18:27
1331
原创 git与svn简单的使用方法
一般出现冲突以后，pull的时候，会将冲突的地方标注在vscode中，我们可以选择保留对方的代码，或者保留自己的代码，然后将不需要的代码删除，重新走一遍提交代码的顺序，目前我是这么做的，但是觉得这个做法虽然简单，但是不太妥当，希望能得到更好的解决办法。一下，将仓库的代码拉下来，相当于进行一个更新，然后再去进行编写。使用svn的话，我们一般需要下载一个tortoiseSVN。另外，svn可以下载一个中文插件，这样就可以显示中文版的了。注意：在我们开始编写代码时，我们可以先。...
2022-08-14 15:28:27
642
原创 （promise.all、promise.race、promise.any、axios同步请求、ajax同步请求）
axios执行异步的请求，我们可以使用async和await进行操作，让axios实现同步请求。就可以获取相关的信息，只要判断里面的值是否包含Android或者ISO就可以进行判断。
2022-07-21 22:02:43
708
原创 项目中注意点（cookie设置登录时效、请求拦截、响应拦截、转换formData、解决跨域、路由守卫、登录记录用户信息）
在vue.config.js中进行设置devServe。在api文件夹下的index.js中操作如下。
2022-07-17 11:06:56
596
原创 vue项目中的注意点(axios、传参方式、vant安装）
这样就设置好了，然后在各个组件中使用了。解决跨域问题在vue.config.js中进行设置在modules.exports中写api文件夹我们还可以在src文件夹中创建一个api文件夹，里面可以存放各个组件封装的方法的js文件还有一个知识点就是拦截器，拦截器分为请求拦截和响应拦截在api文件夹中创建一个index.js文件，里面放我们封装的axios请求拦截和响应拦截封装的axios使用：在api文件中为组件创建一个js文件，例如里面存放这个组件需要使用的方法，在这个js文件中首先要将我
2022-07-07 17:30:32
367
原创 Vue脚手架搭建及说明
这样我们一个相对完整的vue项目的框架就搭好了，之后就可以在里面进行编辑、操作了再来看一看项目中的几个文件夹分别是放什么文件的在src中，时间不多了，得抓紧学习，下次再分享
2022-07-05 23:26:44
277
原创 Vuex应用
首先引入vuex的js文件，注意它是依托于vue进行的，所以vuex的js文件要在vue的js文件下方引入创建Vuex实例vuex实例中有五个属性vuex实例化以后，我们怎么去调用里面的内容呢？在插值表达式中通过就可以获取state中的变量要想使用mutations中的方法，我们要先创建一个事件，通过这个事件去调用里面的方法。不过要注意的是我们要通过commit去调用里面的方法使用actions中的方法同样要通过事件去调用，与调用mutations中的方法不同的是，要使用dispatch去进行调用
2022-06-30 21:45:19
337
原创 vue（路由router、路由传参、嵌套、路由守卫）
注意这样就可以在打开页面时，显示我们想要默认显示的组件了。一般我们在写app时用hash，在操作后台管理时用history比较多路由传参有两种方式，一种是query，一种是params我们想要获取拼接的内容时，在定义的组件中使用mounted钩子，就可以通过获取到此条路由上的参数，就能找到对应的query中的参数params在配置路由规则中，在path后面通过的形式，将我们需要的参数进行设置，这里相当于函数中的一个形参，接着再router-link标签的to属性中进行拼接,，这样就将参数传好了。
2022-06-29 23:02:36
645
原创 vue编写分页组件
修改版本因为涉及到了父级将变量传给子级，子级操作过后，将变量又传回父级，所以我们可以使用v-model双向绑定。这下我们便可以省去前面的父级传给子级使用的步骤，直接改为 ,但是子级依然要去承接这个值，在props中使用value就可以了。子级想要把这个变量再传给父级，只要使用就可以了...
2022-06-28 23:32:04
490
原创 vue（插槽slot、keep-alive、动画transition、transition-group）
占位符,这是vue封装的标签，在中间写内容，就会显示在slot标签中出现几个slot标签，就会出现几次子组件的内容在slot标签上添加name属性，在template标签上对应使用v-slot，注意templat标签我们写在组件标签之中，另外代码不全，看个格式就好了作用域插槽作用域插槽其实与具名插槽是相对比较接近的，同样是要给slot标签添加name属性，并且在template标签中通过v-slot找到相应的占位符，但是作用域插槽，在创建组件的时候，将一些变量绑定在了组件上（类似......
2022-06-28 23:19:29
679
原创 Vue(调接口、组件、组件通信、生命周期)
使用axios，它是用promise封装的ajax，需要调用相应的js文件。vue调接口使用axios请求，但axios请求不止可以用在vue上我们在调取到接口后是可以使用es6中的then和catch方法的，它们是链式编程，可以直接在后面追加，与promise中的使用是相同的。then代表获取成功后的操作，catch是获取失败后的操作请求方式：get、post、option（预请求）数据传递方式：vue核心：数据驱动，组件化组件化：单页面应用/单页面编程现在就来了解一下组件，组件分为全局组件和
2022-06-28 14:01:37
1515
原创 VUE（混入mixin、计算属性computed、监听watch）
私有混入在vue实例中通过mixins进行声明，而私有混入可以分成两种形式进行，一种是通过对象的形式，一种是通过数组的形式通过对象的形式通过数组的形式（放入数组中的数据，需要在实例外部进行声明）混入总结混入就是封装一个vue属性，可以在多个实例上使用，实例首先在自身data数据中查找，接着再到私有混入中查找（数组中的多个混入，谁在后就用谁），最后再去全局混入中查找计算属性 computed计算属性是监听变量的变化，进行以下的操作计算属性return出结果不改变原来变量的值，计
2022-06-25 14:55:05
1939
原创 vue(v-bind修改样式属性、自定义命令、过滤器filter)
css代码js代码v-bind 使用格式用于修改行内属性格式：简写：`:属性名=‘变量’注意：class操作类名单独写一个变量名只写一个的话，要写变量名写数组1. 数组里的数据加引号的话，就填入class名2. 数组里面的数据不加引号，就填入变量名对象形式，判断：后面是否为true ，如果是true就调用这个类名的设置的样式v-for 补充 :keyv-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id自定义指令全局自定义命令
2022-06-23 22:56:59
1834
原创 sass、vue（v-model、v-text、v-html、v-for、v-if、v-show、v-on、修饰符）
sass变量有字符串、数字，布尔值格式使用方法作用域sass变量同样也分为全局变量、局部变量局部变量转全局变量sass文件中可以引入其他的sass文件在案例中我们可以看到hover和nth选择器的用法，它不需要像css中那样，总是要写一次类名，只要在想要控制的元素的花括号中写上hover或者hover或者hover或者nth-of-type()就可以了sass混入是指通过表达式封装一套样式，需要使用时引入就可以了混入@mixin name(a,b){}参数也可以不写引入@include
2022-06-22 22:25:00
370
原创 ES6总结
现在总结一下ES6的一些特性let和const是ES6 新增的声明命令let和const还存在一个暂时性死区，只要块级作用域内存在let或const命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。对比var如果实例本身没有方法就向上找实例=>构造函数原型=>对象原型=>null通过constructor创建构造函数，与普通的构造函数相似，它也可以在原型上添加方法，还可以直接在constructor后面添加方法Class还可以通过extends让子类继承父类的属性和方法箭头函数没有this指向，
2022-06-18 20:41:38
200
2
原创 async、await
ES7关键字，处理异步函数await得到异步操作的结果，对应Promise.then()，必须写在async函数中我们可以直接await一个promise对象也可以await一个值async函数中遇到await表达式会强制暂停，等待异步操作完毕，恢复执行顺序...
2022-06-17 15:28:54
83
原创 ES6(递归、箭头函数、浅拷贝、深拷贝、Object、symbol、promise)
递归函数本质上就是函数内部自调用，这时如果我们不加判断条件，那么函数就会不停地去调用，所以我们要给函数加上判断条件，用于跳出循环。斐波那契数列（兔子数列）0，1,1，2,3，5,8…从第三个数开始，它的值等于前面两个值相加，这就是斐波那契数列这种写法，单独判断了第一个数和第二个数的情况，虽然可以获取我们想要的结果，但是运算量比较大，我们还可以尝试以下的写法这里输入的n就不是参与运算的参数了，而是充当了一个计数器的角色这也是一个经典的案例，第一个格子有一粒麦子，第二个格子有2粒麦子，第三个格子有4
2022-06-16 23:00:06
646
原创 ES6（数组扁平化、字符串、let、const、解构赋值、闭包函数）
将多维数组转化为单层数组数组先转字符串再转数组数组转JSON字符串，保留原数据格式封装函数，利用some循环查找是否包含数组字符串模板字符串用 `` 包起来，可以解析变量、方法，变量或者方法要用${}包起来字符串的方法startswith(string) 查看参数字符串是否在原字符串的开头，返回true/falseendswith(string) 查看参数字符串是否在原字符串的末尾，返回true/falserepeat（n） 字符串重复n次let、constlet 声
2022-06-16 00:32:11
493
原创 ES6 （Class类、数组新增的方法、数组的迭代、Set、Map）
它还具有继承属性，需要使用extends数组Array相关数组的扩展方式扩展运算符[…arr]它可以将伪数组转换为真数组可以用于拼接数组对象转数组 Array.from()Array.from(需要转换的对象，function（item）{return item})注意：转换的对象要有lengthfind() 返回第一个符合条件的内容findIndex 返回第一个符合条件的索引，没有则返回-1includes(内容) 查询数组中是否包含这个值，返回true/false
2022-06-14 23:27:59
422
原创 ES6学习（this指向、原型、原型链）
html代码：js代码：改变this指向（call、apply、bind）.call(需要修改的this指向,参数1，参数2,…).apply(需要修改的this指向,[参数1，参数2,…])，可用于求最值bind(需要修改的this指向,参数1，参数2,…)js代码apply求最值三个相互比较相同之处：都可以改变this指向不同之处：传参方式不同：apply的参数以数组的形式传入；bind和call以枚举的形式传入调用方式不同：call和apply是直接调用；bind需要
2022-06-14 12:01:29
186
原创 弹性盒子、弹性布局
弹性盒子对父级进行设置给父级开启弹性布局display:flex; 子集变成行内块元素display:inline; 子集变成行元素主轴flex-direction：row; 默认，元素从左向右排列flex-direction: row-reverse; 元素从右向左排列flex-direction：column； 元素从上向下排列flex-direction：column-reverse；元素从下向上排列辅轴、交叉轴flex-wrap：nowrap； 不换行flex-wr
2022-05-26 09:18:25
208
原创 元素水平垂直居中、上边框塌陷问题、清除浮动
元素水平垂直居中定位+c3 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);定位+外边距 position: absolute; left: 0; top: 0; right: 0; bottom: 0;
2022-05-18 18:31:33
95
原创 【无标题】
目录二、JS基础 101、javascript的typeof返回哪些数据类型 102、例举3种强制类型转换和2种隐式类型转换? 113、split() join() 的区别 114、数组方法pop() push() unshift() shift() 115、事件绑定和普通事件有什么区别 126、IE和DOM事件流的区别 127、IE和标准下有哪些兼容性的写法 128、call和apply的区别 139、如何实现js中的继承 1410、JavaScript this、闭包、作用域 16
2022-05-18 08:48:47
2769
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人