- 博客(54)
- 收藏
- 关注
RSS订阅原创 Vue3使用vxe-table表格虚拟滚动 安装方法
使用vxe-table表格虚拟滚动做一个table，想要渲染上千万条数据，一般表格会导致浏览器卡顿或崩溃，这时我们可以使用插件解决。但是在安装vxe-table的时候，运行不起来，一直报错，后来才发现是版本的问题。安装的时候参照官网全局安装的写法会出现错误，不知道你们会不会npm install xe-utils@3 vxe-table@next还有注意这里版本要切换成最新的后面找了很多方法，改成这种方式下载包：npm install xe-utils vxe-table@next这样
2022-01-06 16:26:45
4038
4
原创 html解决设置滚动条右下角出现的白块
// 定义滚动条的样式::-webkit-scrollbar { width: 6px; height: 12px; background-color: #161f35;}::-webkit-scrollbar-thumb { background-color: #252f4a; border-radius: 20px;}/*滚动条里面轨道*/::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rg.
2021-12-27 11:37:46
3247
5
原创 JS集合引用类型之 Array
Array一、创建数组1、使用Array构建函数let colors = new Array();// 创建一个初始length为20的数组let arr = new Array(20);// 传入要保存的数组元素let arr1 = new Array('red', '1', 1);2、省略new操作符，结果一致let arr = Array(2);3、数组字面量（不会调用Array构造函数）let arr = ['red', 'green', 'white'];let arr
2021-08-13 15:08:12
255
原创 JS集合引用类型之 Object
！此博文是看JavaScript高级程序设计这本书后做出的要点总结Object一、创建形式1、使用new操作符和Object构造函数let person = new Object();person.name = "zdx";person.age = 18; 2、对象字面量（并不会实际调用Object构造函数）let person = { name: 'zdx', age: 18, 1: true //属性名为数值会自动转换为字符串}//或者let per.
2021-08-13 09:37:28
208
原创 JavaScript单例内置对象之Math
Math对象ECMA提供了Math对象作为保存数学公式、信息、计算的地方。Math对象提供了一些计算的属性和方法。注意：Math对象上提供的计算要比直接使用js实现快得多，这是因为Math对象上的计算使用了JS引擎中更高效的实现和处理器指令。1. Math对象 属性2. max() 和 min()方法let max = Math.max(3, 54, 32, 16);console.log(max); // 54let min = Math.min(3, 54, 32, 16);cons
2021-08-12 10:40:21
119
原创 ts类型断言-as
/**类型断言，可以用来手动指定一个值的类型语法：值 as 类型 或 <类型>值用途：1、将一个联合类型断言为其中一个类型2、将一个父类断言为更加具体的子类3、将任何一个类型断言为any4、将any断言为一个具体的类型要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可类型断言不是类型转换，不会影响变量的类型*/// 第一种interface Cat {name: string;run(): void;}interfac
2021-08-12 09:44:24
2947
原创 2021-06-11 JS单例内置对象——Global
Global对象简介Global对象是最特别的对象，ECMA-262 规定 Global对象为一种兜底对象，不属于任何对象的属性和方法。事实上，不存在全局变量或全局函数这种东西。在全局作用域中定义的变量和函数都会变成 Global 对象的属性 。isNaN()、isFinite()、parseInt()和 parseFloat()，实际上都是 Global 对象的方法。除了这些，Global 对象上还有另外一些方法。urL编码方法–encodeURI()、encodeURICompnent()?
2021-06-11 18:39:19
318
4
原创 JavaScript原始包装类型之Boolean、Number、String特性
Boolean、Number、String特性BooleanBoolean是对应布尔值的引用类型。要创建一个 Boolean 对象，就使用 Boolean 构造函数并传入true 或 false。let booleanObject = new Boolean(true);创建之后，Boolean实例会重写valueOf()方法，返回true或false。 toString()方法返回字符串"true"或"false"。但是Boolean对象在ECMAScript中用得很少，不仅如此，它们还容易
2021-06-11 16:00:23
257
3
原创 JavaScript正则表达式（一）-- RegExp特性
JavaScript正则表达式语法：let expresion = /pattern/flags;pattern：可以使任何的正则表达式。 每个表达式可以带0或多个flags。flag取值：g：全局模式。表示查找字符串的全部内容，而不是找到第一个匹配的内容就结束。i：不区分大小写。表示在查找匹配时忽略 pattern 和字符串的大小写。m：多行模式。表示查找到一行文本末尾时会继续查找。y：粘附模式。表示只查找从lastIndex开始及之后的字符串。u：Unicode模式。启用 Uni
2021-06-09 18:12:52
280
2
原创 commander.js学习总结
commander是用于快捷开发命令行工具，提高开发效率的工具包。官网： https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md#commanderjs安装npm install commander声明两种方式声明：1、直接声明。 2、创建本地 Command 对象const { program } = require('commander');const { Command } = require('comm
2021-06-04 19:00:51
409
原创 解决：微信小程序使用createanimation无效
解决微信小程序上定义动画createanimation无效开发项目过程中，想要这样一个动画效果：写一个气泡，有动弹效果（类似呼吸，一直动），点击之后移动至消失。一开始我在气泡元素上面定义了一个动弹动画：下一步就要写点击事件之后的另一个移动至消失的动画了。//wxml<view id="pra-bubble" animation="{{animation}}" bindtap="onClick">//js//定义动画，https://developers.weixin.qq
2021-05-25 18:59:43
2880
原创 node更新mongodb嵌套数据遇到的坑
mongodb修改嵌套数据的语法如下：let result = await userModel.updateOne( { "userId": body.userId, "shoppingAddressItem.addressId": body.addressId }, { $set: {
2021-03-06 20:58:55
342
原创 vant库 如何引用本地图片
vantjs组件库，若要引入本地的图片会获取不到。会没有显示图片。 <van-card :title="item.goodsName" :desc="item.spec" :num="item.number" :thumb="getImg()" > <!-- <div slot="num" @click.stop="return false">
2021-02-22 23:22:29
2951
2
原创 git 回退（reset）、反做（revert）：撤回命令总结
git撤销及回滚命令工作区：指在自己本地分支开发，未进行 git add 操作之前。暂存区：执行过 git add 操作之后，但是为执行 git commit 操作。本地分支：执行过 git commit 操作，但是未执行 git push 操作。远程分支：执行过 git push 操作。git reset分三种场景暂存区（执行了 git add 操作 未执行 git commit 操作） git reset HEAD . //撤回所有 add 的文件 git
2021-01-13 17:49:11
3673
原创 解决vue修改数据页面无效的问题
项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性。如下案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
2021-01-05 15:41:00
3641
1
原创 vue-aioxs interceptors拦截器的实际应用
axios的拦截器 interceptors的用途axios的拦截器有什么作用呢？可以在请求之前做点什么操作，一般有三种：修改请求头的一些配置项给请求添加参数给请求的过程添加一些请求的图标全局拦截器 axios.interceptors.request.use(config=>{ console.log(1234); return config },err=>{ console.log(err) }) axios({ url:"./
2020-12-24 11:24:58
499
原创 vue框架的.native修饰符：将原生事件绑定到组件
vue的.native：将原生事件绑定到组件的理解阅读官网时，看到这里很懵，查了一些资料才理解.native的用法：通俗一点解释，就是再我们自己写的一些组件上面，正常的话是用不了原生事件的，比如点击事件click、聚焦focus等，比如这样：my-component组件是我们自己写的，直接使用原生事件click，这时点击是触发不了outClick函数的。所以我们要加上.native修饰符：<div> <my-component @click.native="outClick
2020-12-11 16:11:39
306
原创 vue中使用 lodash Debounce防抖不生效原因
最近项目需要做这样一个需求：基于element-ui框架的vue项目，输入input框实现实时搜索后台响应的数据。但用户每次按下键盘就发送请求会导致系统性能不好等问题，这时需要考虑到用防抖去解决这个问题。所以我考虑使用输入框监听+lodash库https://www.lodashjs.com/docs/lodash.debounce的防抖来实现。步骤简单：首先引入+使用import {debounce} from 'lodash';<el-form-item label="" prop=""&
2020-12-03 10:49:07
11231
原创 vue cli4.0 快速搭建项目详解
1.进入一个目录，创建项目vue create project-name2.我们这里选择手动配置按 ↓ 选择“Manually select features”，再按 Enterhttps://www.cnblogs.com/sese/p/11712275.html3.选择你需要的配置项通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选。具体每个配置项表示什么意思在下面会有说明。复制代码? Check the features needed for your
2020-11-27 17:25:01
111
原创 关于Vue的api中的this.$nextTick()
参数：{Function} [callback]用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。//第一个例子<template> <div> <div ref="hello"> <h1>{{value}}</h1> </div> &l
2020-10-20 18:30:27
357
原创 js中entries()方法的使用
语法：Object.entries(obj)参数：obj：可以返回其可枚举属性的键值对的对象返回值：给定对象自身可枚举属性的键值对数组Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for…in循环遍历该对象时返回的顺序一致。区别在于forin 会枚举原型链上的属性。eg: let per = { name:'zdx', age: 18 } for(let [key,value] of Object.entries
2020-10-20 16:11:47
3952
1
原创 Vue中mixin的用法详解
mixin：混入，提供了一种非常灵活的方式，来开发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。引用例子：目录结构：//mixin.js文件export default { data(){ return { name: 'mixin' } }, created: function(){ this.hello()
2020-10-19 22:43:04
517
原创 字符串补全字符 padStart、padEnd方法
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。//用于时间补零 2020:18:01 let h = date.getHours(); let m = date.getMinutes().toString().padStart(2,'0'); let s = date.getSeconds().toString().padStart(2,'0'); return
2020-10-10 18:02:28
402
原创 15个必须知道的JavaScript方法
some()此方法为参数传递的函数测试数组。如果有一个元素与测试元素匹配，则返回true，否则返回false。注： some() 不会对空数组进行检测。 const arr = ["a","b","c","d"]; console.log(arr.some(test => test === "e")); //false console.log(arr.some(test => test === "a")); //truereduce()reduce(.
2020-09-11 11:29:10
312
原创 NodeJS特性
一. NodeJS的特点它是一个Javascript运行环境依赖于Chrome V8引擎进行代码解释事件驱动非阻塞I/O轻量、可伸缩，适于实时数据交互应用单进程，单线程二.nodejs解决的问题并发连接异步、事件驱动模型异步机制、事件驱动整个过程没有阻塞新用户的连接，也不需要维护已有用户的连接。基于这样的机制，理论上陆续有用户请求连接，NodeJS都可以进行响应，因此NodeJS能支持比Java、PHP程序更高的并发量.虽然维护事件队列也需要成本，再由于NodeJS是单线程，事件
2020-08-04 22:25:16
3068
原创 组件化和模块化的区别
什么是组件和模块 组件和模块的区别 为什么要使用组件化和模块化什么是组件和模块组件把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。模块 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。模块就像有多个US..
2020-08-02 22:27:20
948
原创 React中的虚拟DOM
使用原生JavaScript或jQuery直接操作DOM元素时，很大可能会触发回流事件，此时浏览器需要重新渲染页面，设置整个文档，计算DOM节点浪费了性能，而且效率低，非常影响用户体验。react提出了一个新的思想，-始终整体刷新页面，当数据发生变化时，react会自动更新UI，这种方式虽然简单，但是有一个很明显的问题，慢。每次数据改变就重新渲染整个页面会做大量的“无用功”，而且无法保存节点状态，比如失去焦点，为了解决这个问题，react又提出了一个解决方案，就是虚拟DOM以及Diff算法。react根据
2020-07-30 01:29:10
388
原创 用scss写一个数组及遍历
// 定义数组，数组元素用逗号隔开$liColor:#f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278; // 开始 @each 循环遍历数组// $c 作为循环变量，代表了数组的元素，不是索引~！！！@each $c in $liColor{ $i:index($liColor,$c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！ li:nth-child( #{$i} ){
2020-07-23 23:45:45
1893
原创 使用css3的column属性，内容被截断的解决方法
使用css3的column属性，内容被截断的解决方法用column样式做瀑布流的效果，遇到了同一列的内容被截断到其他列的问题，如下效果：在CSS3规范里，各列的高度是均衡的。浏览器会自动调整每列会填充多少文本，然后让整个布局的高度保持均衡一致。而我们在做这种瀑布流的类似布局的时候，往往只需要设置每个容器的宽度，然后高度通过内容填充来自适应。所以，浏览器在处理的时候，为了保持高度的均衡分配，会将我们的布局截断，然后造成布局错乱。解决方法是在子项目加上样式：注意是子容器不是父容器哦！ heig
2020-07-15 21:54:40
1596
5
原创 关于使用vue-awesome-swiper，轮播图不能播放和分页器没显示的解决方法
vue-awesome-swiper在2020年做了更新，早上想使用vue-awesome-swiper完成vue项目的轮播图，发现一些轮播图不能播放和分页器没显示，经过一个上午，在老师的协助下终于解决了：原来是包版本太高的问题，肯能导致一些不兼容。后来我指定了版本号，下回低版本cnpm i vue-awesome-swiper@3重启基本上就可以了，但要注意的是在阅读官网的时候最好采用定义组件方式写轮播图，用指令方式可能会出问题。<swiper ref="mySwiper" :optio
2020-07-15 14:14:41
4594
3
原创 CSS盒子模型和怪异盒子模型
盒子模型与怪异模型展示效果差异：标准盒子(W3c标准)：大小 = width(content) + border + padding + margin怪异盒子(IE标准)：大小 = width(content + padding + border) + margin布局采用哪种盒子模型，通过属性box-sizing可以设置：content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)border-box：borde
2020-07-14 00:10:10
404
原创 Vue组件通信
Vue组件通信八种方式props和$emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。$attrs和$listeners第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.
2020-07-13 23:59:22
697
原创 2020使用animate.css和wow.js最新教程
animate.css可以使用动画，wow.js可以让页面滚动加载动画，oppo官网首页https://www.dowebok.com/demo/131/index2.html是一个经典的例子，只需三步就可以做出类似效果。看了官网wow.js的教程发现wow.js引入之后动画没有效果代码是这个样子的<li class="wow bounceInLeft">啊啊啊</li><li class="wow bounceInRight"></li><l
2020-07-12 14:08:36
3025
原创 CSS3：animation属性保持动画在最后状态
设置animation-fill-mode:forwardscss3：animation样式有6个属性：animation-name ：规定需要绑定到选择器的 keyframe 名称。。animation-duration ：规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function ：规定动画的速度曲线。animation-delay ：规定在动画开始之前的延迟。animation-iteration-count ：规定动画应该播放的次数。animation-
2020-07-11 23:04:54
3777
1
原创 关于vue-lic脚手架使用less和sass的配置
配置less修改webpack.config.js配置文件{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }npm下载安装包，-D代表使用依赖cnpm i style-loader less-loader -D.vue文件添加样式，加上scoped是为了在当前vue文件下
2020-07-10 16:50:32
658
原创 利用模板字符串加载二位数组数据
二维数组：let footdata = [ { title: 'Product', con: [ 'Features', 'Integrations', 'Desktop app', 'Time tracking Android app', 'Time tracking iOS app', 'Support'
2020-07-07 20:10:49
248
原创 原生AJAX步骤及兼容性
AJAX ：全称： Asynchronous JavaScript and XML (异步的JavaScript和XML)。AJAX不是万能的，在有以上优点的同时SEO也受到了影响。SEO：搜索引擎优化原生ajax步骤：创建对象：Ie8以下使用以下进行创建：xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");IE9+及其它浏览器:xmlhttp=new XMLHTTPRequset();兼容代码： try { xml = new
2020-07-06 22:31:52
307
2
原创 前端模块化的发展以及es6模块化详解
模块化类型在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。后面又有了es6模块化(export/import)。CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。npm作为node的包管理器，遵循CommonJS规范。C
2020-07-04 10:31:37
520
原创 理解JS中的模块规范Common.js 、AMD、CDM
JS中的模块规范（CommonJS，AMD，CMD），如果你听过js模块化这个东西，那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯，在ES6之前，社区制定了一些模块加载方案，最主要有CommonJS和ADM两种，前者用于服务器，后者用于浏览器。那么CommonJS，AMD，CMD究竟是啥意思咧？一、CommonJSCommonJS就是为JS的表现来制定规范，NodeJS是这种规范的实现，webpack 也是以CommonJS的形式来书写。因为js没有模块的功能所以CommonJS应运而
2020-07-03 23:30:43
414
原创 2020最新es6面向对象扩展练习题
1.constructor方法的特点？constructor方法通过new命令生成实例对象时，会自动调用该方法，如果没有显示定义constructor方法，会默认添加。constructor方法可以返回一个全新的对象，可能导致本来的构造函数里面别的方法没作用。类的构造函数不使用new没办法调用，会报错。2.this代表什么意思？this在类的方法内部默认指向类的实例，但如果this写在自己的方法中，外部调用this会指向该方法运行时的环境3.__proto__和 prototype分别表
2020-07-02 21:12:41
602
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人