- 博客(14)
- 收藏
- 关注
RSS订阅原创 mpvue-手动封装小程序省市区选择器
之前在mpvue小程序的项目中有遇到手动封装一个省市区选择器组件的需求，但当时因为时间比较紧，做得不是很好，一直挺遗憾。最近抽了一些时间终于重新把这个组件重新封装了一遍。这篇博客主要介绍一下怎么用和一些实现的原理。 先展示一下做好的效果：
535
2
原创 Webpack项目接入Babel详解
npm init -y 首先在项目根目录下运行： npm init -y 来创建项目的package.json文件。-y参数可以直接以默认配置生成package.json，避免多次填写信息的麻烦。安装webpack和webpack-cli 运行命令： npm install --save-dev webpack webpack-cli 安装webpack到本项目。注意：在webpack 3中，webpack与webpack-cli是在同一个包中。为了方便管理，在webpack
2020-06-27 23:26:47
897
原创 Vue实现仿百度计算器
功能简介 计算器的功能和样式都是参照百度计算器完成。主要实现的功能包括:数字的加减乘除运算计算中的退格将数字转化为百分数形式还有一些对错误计算式的自动处理，代码中的注释有说明，就不再一一列举。功能演示bug提示 因为计算主要依赖eval()实现，所以计算浮点数时，存在JS原生运算浮点数的缺陷。对小数运算有误差。源码地址 计算器分别采用了.html和.vue两种形式完成，.html的使用起来更方便。.vue的代码更规范一些。 源码地址...
2020-06-23 16:07:03
537
原创 调用drawImage()在canvas标签中不显示图像的问题及解决方案
问题描述 初学红宝书中的canvas标签，在学到drawImage方法的时候，根据书上的代码敲了一遍但在自己的canvas中显示不出图像。 书中代码：var image=document.images[0];context.drawImage(image,10,10); 照着敲到了自己的代码中，结果canvas中始终是一片空白。原因 百度之后，得出原因：等图片加载成功后才可以绘制，当图片未加载成功时使用drawImage()，不会被调用，绘制会失败。解决方案 1.当图像使用img标签时
2020-05-30 21:22:02
5553
原创 Vue报错 Uncaught TypeError: Right-hand side of instanceof is not an object的解决办法
使用props时，本来想在子组件中为传入的prop添加类型验证。我写成了这样： props: { isShow: 'Boolean' } 但为prop添加类型验证时，属性的值应该是构造函数而不是字符串。应该改成： props: { isShow: Boolean; }...
2020-05-30 21:15:52
1963
原创 JavaScript数组方法forEach()、map()、filter()的比较
forEach()最简单的形式 Array.prototype.forEach(callback(currentElement)) 此方法的作用是：对数组中的每个元素都执行一次传入的callback回调函数，数组中的每个元素会依次传入回调函数，参与回调函数的执行。currentElement就是指当前被传入的数组元素。 返回值：没有返回值(undefined) var arr = [1, 2, 3]; var result = arr.forEach(function(curr
2020-05-30 20:54:51
477
原创 关于:last-child的误解
先上一段菜鸟教程中对它的用法的解释：:last-child选择器用来匹配父元素中最后一个子元素。 我也是这么一直简单地认为的。然而这样的理解其实是不全面的。最近有遇到一个场景是选中列表中的最后一项为它添加边框。我就照着我的理解写了（错误示范）： <ul class="container"> <li class="item">one</li> <li class="item">two</li>
2020-05-30 20:49:20
1988
原创 总结JS中判断数据类型的三种方式
JS现有数据类型 在了解如何判断数据类型之前，我们首先要明确现在JavaScript中有几种数据类型。 JavaScript中数据类型分为两类：基本数据类型和引用数据类型。基本数据类型包括：Boolean、String、Number、Null、Undefined、Symbol（ES6新增）、BigInt（ES6新增）七种。引用数据类型包括：Object、Function、Array、Date、RegExp 五种。一张图概括：typeof typeof一般用于判断基础类型，它的具体用法是：
2020-05-30 20:45:28
483
原创 No installations recognized 以及 nvm use切换node版本无效的解决办法
两个问题出现的背景： 我在安装nvm之前已经安装了Node.js。第一个问题：No installations recognized 安装之后，使用nvm list命令我以为会列出我之前已经安装的版本号，但却出现了No installations recognized提示，意为没有安装的版本。 原因：一顿百度后，了解到在安装nvm之前要卸载已经安装的node版本。 解决办法：卸载node.js，再使用nvm install latest安装最新版本的node.js。注意一定要卸载干净！
2020-05-28 14:13:42
16404
1
原创 区分多列选择器的bindchange和bindcolumnchange事件
最近有用到小程序的多列选择器组件<picker mode="multiSelector">，但官方文档中对这个组件的两个事件bindchange和bindcolumnchange事件解释得比较简略。自己总结了一下这两个事件的区别。触发时机的不同 在多列选择器中，bindchange只在点击“确定”按钮之后触发，而bindcolumnchange在每一次滚动选择器中的任何一列后都会触发。我们可以实际实验一下。以下是部分代码： <picker mode="multiSelect
2020-05-28 14:12:19
5443
原创 mpvue使用一周踩坑合集
使用mpvue开发小程序差不多整整一周了。在此总结一下使用过程遇到的一些坑和比较特别的用法。mpvue不支持在组件上定义v-show 这一点官方文档也有提到并建议使用v-if代替。但v-if与v-show有一个最大的不同就是，v-if的切换过程，实际上有子组件的销毁和重建。而v-show只是简单的通过display这个CSS属性进行切换。 这个不同带来的影响是：如果在组件的生命周期里定义了一些操作，并使用v-if代替v-show，每一次切换都会触发执行这些生命周期函数中的操作。而与我们想使用v
2020-05-28 14:11:12
556
原创 个人收藏夹各类网站推荐及前端学习入门书籍推荐
工具类Can I use：https://caniuse.com/#home 用来查CSS属性在浏览器之间的支持情况，一些属性在浏览器之间的兼容情况不一致。例：border-radius属性 可以得知此属性在IE6-8、Opera10.1中不能使用阿里巴巴矢量图标库：https://www.iconfont. cn/ 用来获取一些可爱的小图标，比如汉堡类：ProcessOn：https://www.processon.com/ 在线作图网站，支持流程图、思维导图、UML等多
2020-05-28 14:09:27
439
原创 理解Array.prototype.reduce()的执行过程
之前对reduce()一直不理解，今天专门看了一遍MDN文档感觉明白了一些。在此记录一下自己的一些理解。Array.prototype.reduce()方法的作用：对数组中的每个元素执行一次传入的回调函数（按索引升序执行），并将结果汇总为单个值。小例子感受一下reduce()的作用：求数组元素的和var arr = [1, 2, 3];var result = arr.reduce(function(accumulator, currentValue){ return accumula
2020-05-28 14:06:47
504
1
原创 npm install命令各个参数的区别
dependencies与devDependencies的区别： 首先要明确package.json中dependencies字段与devDependencies字段的区别，不同参数效果的不同也主要体现在这两个字段上：dependencies：它包含的依赖包是需要发布到生产环境中的，是项目正常运行必须依赖的包。devDependencies：它包含的依赖包只在开发时使用，不用于生产环境，如果只需要项目正常运行，则不必安装这里面的包。npm install package 安装单个包到项目中：
2020-05-28 14:03:59
2294
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人