![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web知识学习
心若向阳无谓悲伤
开博客只是想记录自己在成长过程中的一些收获和疑惑,在这个大舞台中,有很多志同道合的人,可以相互交流,共同进步,向着更宽阔的道路前行
展开
-
前端页面性能检测工具-Lighthouse安装及使用
最近在做开发的过程中,需要对前端界面进行性能检测和优化,使用的是lighthouse。Lighthouse是Google开源的一个自动化工具,用于改进网络应用的质量,适用于网页版和移动端,比如找出哪些资源适合延迟加载,以及可以在初始页面加载中节省多少流量。能生成一个包括页面性能、PWA(Progressive web apps,渐进式 Web 应用)、可访问性(无障碍)、最佳实践、SEO的报告清单提供参考。一、lighthouse的安装Lighthouse是Chrome提供的一个扩展工具,.原创 2021-04-01 18:12:58 · 2917 阅读 · 4 评论 -
Error in v-on handler: "TypeError: _.mapObject is not a function"解决方案
最近在做微信公众号开发,需要用到微信的扫码功能,所以集成了相应的功能及相应的JS文件后,点击调用一直报这个问题:Error in v-on handler: "TypeError: _.mapObject is not a function"首先怀疑是使用到的_变量没有引入进来,引入后还是在报同样的错误。在浏览器中打断点调试,发现当加载这个方法的时候,_这个变量指向了lod...原创 2020-04-11 13:33:05 · 5364 阅读 · 0 评论 -
实现点击3D翻转效果
最近在项目开发中需要实现很多特效,其中一个卡片就是点击后,要3D翻转显示背面信息,再点击再3D翻转回正面。实现代码是参考以下这篇文章:http://www.php.cn/html5-tutorial-389335.html但其中有两个参数我改了一下,因为在移动端,发现这样写效果和图片中的不一致。...转载 2019-03-20 15:08:57 · 1338 阅读 · 0 评论 -
Vue 数组赋值踩过的坑
最近需要在Vue当中完成动态赋值数组操作,从服务器拿到数据后,刷新数组中的数据,但是发现无论使用什么方法都不行,通过打log,发现数据在这里就无法向下执行,而且也没有报任何的异常,最终问题解决,在这里做个记录。Vue中的数组赋值和在普通的JS中赋值还是有所区别。以下操作可以引起界面刷新:push,pop ,unshift,shift,reverse,sort,splice以下操作不会引...原创 2019-02-27 14:03:36 · 9137 阅读 · 0 评论 -
Vue 实现带图标的input框
最近由于项目需要,需要实现一个带图标的input框,但一直没有找到一个很好的方法,所以只能自己动手写了。该控件是单独写的,所以可以拿来直接使用。先说一下该控件支持的功能:1.从外部动态传入placeholder的值2.从外部传入图标地址并给图标增加点击事件3.外部监听input的change事件并获取input的输入值,input禁止输入表情元素和特殊字符4.外部可动态设置...原创 2019-02-20 17:42:37 · 8163 阅读 · 0 评论 -
vue post application/x-www-form-urlencoded如何传参
今天在使用axios进行参数获取时,始终获取不到,但是调用postman是正常的,所以初步估计是参数格式不正确,那么正确的应该怎么写呢?一般按照正常的逻辑,我们在传递application/x-www-form-urlencoded时,参数应该这样写,但实际操作中发现一只获取不到参数。 axios.create({ baseURL: 'url', ...原创 2019-02-27 16:09:27 · 72681 阅读 · 4 评论 -
mint-ui picker 实现省市区县三级联动
实现效果:首先说一下实现思路:1.采用单独的js文件存储省市区数据,可以是json或者js文件,数据可参考我的上一篇博客。2.使用mt-picker进行赋值,(需要提前引入mint-ui)根据省的数据的改变,动态的改变市和区的显示数据。3.最好采用单独的组件实现,方便修改和复用。代码:<template> <div class="location...原创 2019-02-16 18:20:30 · 2647 阅读 · 2 评论 -
2018最新版省市区三级联动数据
这个也是我在网上找的相对比较新的数据,提供给大家参考。其中附加了三个方法和四个参数,分别用来获取省的列表,第一个省中包括市的列表以及市中包括的区县的列表,可以直接导出,在想使用的地方直接引用(限于支持export和import属性的版本哦~)为什么这么做?之前在网上看了很多人写的方法,他们大多都是从服务器上获取的数据,数据结构相对简单,获取本身省市区数据结构比较简单,可以通过Objec...原创 2019-02-16 18:02:42 · 3361 阅读 · 0 评论 -
Vue 实现横向滑动效果 从小到大
最近项目中遇到一个需求,需要实现横向滑动,并且在滑动过程中,中间的大,两边的小,通过参考其他的人代码以及自己的实践,终于做出来啦,给大家做个参考。实现效果如下图:先来说一下实现思路吧:整体思路:采用vue+vue-awesome-swiper完成因为我们的项目是采用vue来做的,所以在经过很多的考量和比较以后,选择了vue-awesome-swiper插件来辅助,从这个名字上也...原创 2019-02-21 17:38:55 · 5670 阅读 · 1 评论 -
Webpack打包后报错问题解决办法
最近使用Vue+WebPack进行项目开发,在完成开发后,执行npm run build生成dist文件后,打开index.html,界面一直未加载成功,通过console窗口看到所有资源文件都在报404错误。意思很显然是路径不对,但是检查过后,感觉路径也没有大的错误,后来发现只要其实是一个特别不起眼的错误导致的。这个是引入文件的路径地址,看起来是不是感觉没什么问题,其实是少了一个...原创 2019-01-08 17:57:35 · 3607 阅读 · 0 评论 -
使用mt-range实现一个数字随着滑动杆变化的效果
最近开发中有一项需求,需要实现数字随着滑竿移动的这样一个效果。对于我来说,我喜欢用最少和最简单的代码来实现看似复杂的功能,所以在这里记录一下我的实现思路和方法,希望有更好的实现方法的小伙伴,可以多多交流~先上效果图(录制GIF图失败,只能上静态图凑活看o(╥﹏╥)o)1.实现思路:使用UI框架:Vue+MintUI通过获取滑竿上的值,将滑竿上的值按照最大值和最小值以及步...原创 2019-01-24 11:01:47 · 1560 阅读 · 0 评论 -
vue-awesome-swiper滑动失效的问题解决方案
最近在做项目的时候遇到这样一个问题,就是在vue项目的不同页面使用了swiper插件后,导致其他界面的swiper插件失效,最终摸索了一天终于解决了。我遇到的情况是这样的,在界面A中,使用这种定义变量式的方式来初始化swiper.var mswiper = new Swiper('.swiper-container', { effect : 'coverflow', ...原创 2019-03-04 18:03:15 · 6157 阅读 · 0 评论 -
Unexpected token: name (Dom7)
今天在运行vue项目的时候,报了这个异常,异常引起的原因是由于在vue项目中使用了4.0以上版本的swiper,Dom7是swiper4.0+版本的依赖库,所以在编译的时候,因为无法找到dom7这个依赖,就报错了。我看了很多种解决方法:第一种:修改webpack.base.conf.js(在/build目录下),新增这两句代码,但这个方法对我不起作用,还引入了新的问题。resolve...原创 2019-03-07 15:15:15 · 3707 阅读 · 0 评论 -
html 界面内跳转,点击浏览器返回键时,返回界面空白的问题解决方法
最近在开发时,遇到一个需求,在界面内有一个tabbar,点击其中一个,需要使界面跳转到对应位置,一般能想到的办法就是采用锚 链接实现。<a href="#aaa"></a> 大家都知道,这样写,我们在点击链接时,会伴随着url改变,一般都是locaiton.href+“/#/”+href#后面的值,这样写有一个问题就是在点击浏览器后退按钮时,界面直接...原创 2019-10-09 19:33:17 · 3281 阅读 · 0 评论 -
vue 出现Uncaught SyntaxError: Unexpected token 解决方案
最近在做vue项目时,需要引入一个第三方的js文件,在index.html中通过以下方式引入JS文件编译后,就报了这个问题。根据广大的网页的思路,导致这一现象的原因可能有以下几种:原因一.引用文件的位置不正确js文件放在static文件夹下和放在assets文件夹下的引用方式是不一样的。简而言之: 1.assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放...原创 2019-03-28 15:55:38 · 71362 阅读 · 5 评论 -
vue js引用路径报错解决方案
最近在做项目的时候,需要在index.html中引用js文件,但是一直报Failed to load resource: the server responded with a status of 404。从字面上看,就是路径找不到,但是检查了一圈之后,发现路径没有错误啊。最后在浏览器调试台看到加载出来的文件的路径是这样的,在localhost:8080服务器下,先生成了本地磁盘路径,然后将s...原创 2019-04-01 15:33:14 · 4794 阅读 · 0 评论 -
使div滑动到父元素的指定位置
最近有一个项目需求,需要在界面顶部竖排显示菜单栏,菜单栏底部显示内容,点击菜单栏中的选项,让底部显示的相应内容置于内容显示区的顶部,而不是页面的顶部,这样做的好处是可以不遮盖菜单栏,方便用户操作。说一下实现思路:总体思路:采用js原生的Scroll实现。因为是在vue中实现,引入jquey显得很笨重,所以直接用原生写,代码也是非常简单。第一步,计算父元素div到顶部的高度第二步...原创 2019-03-13 11:30:03 · 2324 阅读 · 0 评论 -
css drop-shadow使用方法
大家可能都习惯了使用box-shadow来设置盒阴影,但顾名思义,盒阴影一般阴影的投影是一个方形,如果我们遇到其他姓张,想要做阴影效果应该怎么实现呢,比如下面这种?那就要用到drop-shadow啦~drop-shadow滤镜可以给元素或图片非透明区域添加投影。box-shadow: h-shadow v-shadow blur spread color inset;h-shado...原创 2019-03-21 16:12:01 · 7913 阅读 · 0 评论 -
css中设置多张背景图片
有一些应用场景中,我们需要叠加设置多张图片,一般我们可能是采用img来设置,但还有一种更简单的方法,采用背景属性来设置,css提供了可同时设置多张背景图的属性。语法如下:.bg{ background: url('../img/bg1.png'), url('../img/bg2.png'), url('../img/bg3.png')}为不同的背景图片...原创 2019-03-21 15:35:12 · 14457 阅读 · 1 评论 -
Vue 从文件中获取文本信息
最近在使用vue做项目的时候,遇到一个需求,界面中需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上。刚开始我使用的是File和FileReader对象获取,但是比较气人的是这两个对象是IE浏览器特有的属性,chrome不支持,而且为了安全起见,现在浏览器是不推崇这种做法的,因为很容易造成文件被外部恶意删除或增加内容,安全性太...原创 2019-03-13 09:41:28 · 7470 阅读 · 0 评论 -
在VUE中使用Lottie动画
使用方法及步骤:1.在webStorm的terminal窗口中下载vue-lottie插件,下载命令:npm install --save vue-lottie2.在main.js文件中引入vue-lottie插件,你可以将其设置为全局组件,也可以在需要使用的时候单独引入第一种:全局引入,在main.js中加入如下代码import lottie from 'vue-lotti...原创 2019-03-21 14:12:44 · 10763 阅读 · 8 评论 -
MintUI mt-range 事件
最近开发中在使用饿了么的移动端UI框架MintUI,但发现这个框架虽然用起来很方便,但是官方给的文档真的有点坑爹,好多属性和调用方法都没给出来,在这里只能自己动手总结啦~Q1.mt-range在Vue中调用后,无法显示的问题?第一次调用的时候就遇到这个问题,而且在网上查了一圈儿也没人回答这个问题,不知道是不是因为大家都没有遇到这个问题。没办法,只能自己动手解决了~其实这个问题解决方法很...原创 2019-01-24 10:29:33 · 2015 阅读 · 0 评论 -
CSS3新特性学习之Transform Transition Animation总结
1.transition介绍transition是指元素的过渡,指元素从一个状态过渡到另外一个状态。这里的状态要和形态区分开,状态比如说hover,focus,active等都算是元素的状态,所以往往我们会将transition定义在初始状态中,只在最终状态中定义它需要改变的属性,就可以看到过渡效果。transition的相关属性:transition-property:需要实现过渡效...原创 2018-12-18 15:56:25 · 479 阅读 · 0 评论 -
ES6自定义Symbol.iterator的实例-解决死循环问题
今天学习ES6的Symbol属性,顺便分享一个Symbol.iterator的实例:这是一个用于输出下标为偶数位数值的遍历方法,但是发现这样写以后,直接进入死循环,浏览器都卡死了//自定义Symbol的迭代器Symbol.iteratorvar arr1 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];//自定义遍历器,输出index为偶数的数...原创 2018-12-11 17:04:41 · 1124 阅读 · 2 评论 -
webpack :invalid configuration object
最近初学webpack,就遇到了很多难题。通常我们都是按照网上查找的教程来一步一步完成构建,但是我发现webpack不同的版本之间语法上存在一定的差异,可能教程是以3.0的版本来讲解的,但是我自己下了一个4.x的版本以后,使用教程来写,各种BUG。这不,在写完配置文件后,又出现了一个新的问题。第一个问题:_dirname is not defined.出现这个问题的原因是在dirn...原创 2018-08-06 14:30:11 · 15760 阅读 · 2 评论 -
webpack打包时提示 The ‘mode’ option has not been set......
今天在学习使用webpack,遇到了各种各样的问题,在此记录一下,以方便以后打包时遇到同样问题不知道怎么解决。问题一.在执行webpack xx.js bundle.js时提示以下信息出现的原因并不是由于我们的命令不对,而是webpack4的语法问题。出现这个错误提示并不是我们环境装错了,而是webpack4 更新后对webpack语法进行了更严格的要求,之前的命令被修订为 np...原创 2018-08-06 11:43:26 · 3852 阅读 · 2 评论 -
一个Cordova 调用相机和本地相册的实例分享
使用Cordova调用原生相机有以下几个步骤:1.下载相关的插件cordova-plugin-camera,在命令行,切换至项目根目录下后,输入以下命令:cordova plugin add cordova-plugin-camera2.我们会看到在项目assets/www/plugin文件夹下多了一个插件cordova-plugin-camera3.开发index.html,这...原创 2018-08-03 16:33:44 · 9230 阅读 · 1 评论 -
JS 监听回车事件
本方法适用于chrome,safari,IE等主流浏览器,亲测有效~但由于刚开始IE浏览器抽风,一直执行不出来,还以为是兼容问题,最后研究了半天,发现又可以使用了,不知道为什么~三行就可以搞定,简单的跟1一样~document.onkeydown = function(e){ if(e.keyCode == 13){ alert("回车键事件触发~"); }}如果想监听...原创 2018-07-12 10:30:25 · 12777 阅读 · 0 评论 -
使用JS获取浏览器类型
由于不同浏览器之间的差异,有时候需要对不同浏览器采用不用的处理方式,这个时候就需要获取浏览器类型,以下是使用原生JS获取浏览器类型的方法。function init(){ var Sys={}; var browserName = window.navigator.userAgent; var UserAgent = ""; if(/Trident/i.te...原创 2018-07-12 10:20:47 · 458 阅读 · 0 评论 -
移动端网页点击链接出现蓝色背景如何解决
最近在做移动端开发时,采用路由来实现网页之间的跳转,发现通过给文字和图片加<a>...</a>之后,每次在移动端运行时,点击或者长按都会出现蓝色背景,非常不好看,采用下面这个方法得到有效解决。只需要在css文件中加入以下这句代码,就可以搞定*{-webkit-tap-highlight-color:rgba(0,0,0,0);}说明:*号表示应用与所有的元素。可能有的小...原创 2018-07-16 14:37:40 · 2788 阅读 · 1 评论 -
Html input输入框自动填充背景为黄色
开发完登录界面后,发现输入框在未聚焦的情况下,背景颜色为黄色,很影响界面美观。采用以下方法可以成功将背景色去掉:方法一:在input行内加入以下参数:autocomplete="off"但是加入以后,发现背景色还存在,只是没有选中时的外边框了。方法二:增加该属性:input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}两个方...原创 2018-07-02 14:39:01 · 8804 阅读 · 0 评论 -
AngularJS $http用法总结
最近由于项目需要,在研究AngularJS $http的用法,查了很多资料,发现貌似没有一篇内容可以完整的满足我对$http的基本了解,为了下次方便自己查找,所以特意把最近查到的一些资料和自己的理解记录下来。如果有理解不到位的地方,也欢迎路过的大神可以指点。一.$http简介1.$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。2.$http服务,它是对原生X...原创 2018-06-15 16:11:38 · 9854 阅读 · 0 评论 -
点击Button 出现选中框应该如何清除
今天在写界面的时候,发现按钮每次点击都会出现一个黄色的选中框,非常不好看,对于有强迫症的我来说这是不能容忍的。去除方法也很简单,我看很多人说设置这个属性就可以:{outline:none;}但是我加了之后,发现还是存在,后来我发现设置outline的同时,添加如下属性,则黄色框消失,点击就不会再出现了。{ outline:none; outline-color: r...原创 2018-08-03 10:18:01 · 5248 阅读 · 0 评论 -
CordovaBridge: Ignoring exec from previous page load
今天在做cordova项目的时候,遇到了这个问题,找了很多解决方法,都没有解决问题。最终发现原因是在cordova.js这个文件执行初始化的时候有问题,所以最终没有正常执行下去。虽然不是处女座但是却有强迫症的我,发现界面初始化后总会弹出prompt,很是心烦,于是在cordova.js中所有应用了prompt的地方,都把它屏蔽了,世界终于清静了~然后问题来了,在调用原生接口的时候,一直提示...原创 2018-08-03 14:24:29 · 1118 阅读 · 0 评论 -
使用Hbuilder编写ECMAScript6的语法报错解决方案
最近学习ECMAScript6,采用HBuilder编写,结果报错了,语法无法识别,遇到这个问题的小伙伴可以参考下面这个方法:首先,在项目上右键-属性-语法&框架-Javascript版本,选择ECMAScript 6,然后点击应用,确认。但你会发现你的项目依然在报错,这个时候,需要退出关闭应用后,重启,就可以啦~但是我发现在HBuilder自带的控制窗口依然会有错误...原创 2018-12-11 13:20:36 · 2578 阅读 · 0 评论 -
Cannot find module 'webpack/bin/config-yargs'解决方案
最近在学习使用命令行创建vue项目,满心欢喜的开始,然后在运行的时候,报了这个BUG:Cannot find module 'webpack/bin/config-yargs'具体的报错信息是这样的:经过查询,是由于安装的webpack和webpack-dev-server版本不匹配导致的,所以首先尝试了在命令行卸载webpack-dev-server,然后安装指定的...原创 2018-12-07 13:55:31 · 30044 阅读 · 8 评论 -
CSS3 动画实现几个常见的loading效果
最近在学习使用CSS动画,看着一些已经实现的loading,自己动手写了一下,在这里做个记录,方便以后在项目中应用,感兴趣的小伙伴也可以拿去用,由于我的电脑无法录制gif,所以暂时先用图片代替效果吧,以后搞好了再更新。1.图片效果html代码<!DOCTYPE html><html> <head> <meta charset="U...原创 2018-12-19 17:42:39 · 976 阅读 · 0 评论 -
VUE学习笔记(二) -computed与methods的区别
最近在学习VUE的时候,发现computed与methods的作用很像,而且一些网站上也说这两种可以互相替换使用,但实际上在用的时候,发现其实这两者之间还是有区别的。computed 计算属性 可用于定义属性的setter和getter方法,一般如果不特意强调的话,申明出来的会被自动当做属性的getter方法调用,也就是说computed中虽然定义的时候,形式和方法很像,其实定义的是...原创 2018-11-28 14:00:49 · 1108 阅读 · 0 评论 -
VUE学习笔记(三)-子路由、多路由、嵌套路由、动态路由都是什么鬼?
最近学习到VUE路由这块,发现这块知识点有点多,好容易混乱,我的学习习惯就是先要建立框架,然后再去挨个学习搞懂,所以先来把概念搞搞清楚再说。首先,我们要知道VUE路由创建的是单页面路由。子路由其实和单路由意思是一样的,单路由应该很好理解,因为我们都知道路由是可以一层一层嵌套的,你可以想象一下俄罗斯套娃,就是一个套一个的这种感觉,而里面那个都会一直被外面一个包含着。所以单路由的意思就是只有一...原创 2018-12-04 17:31:55 · 5478 阅读 · 0 评论 -
多页面与单页面应用的区别
虽然接触web开发有一段时间了,但从头开始构建一个完整的web项目的机会非常少,对于一些概念还很模糊,今天首先来梳理一下在应用开发中,单页面应用和多页面应用的区别。其实从字面意思上理解,就很好理解了。单页面,顾名思义只有一个界面。界面是通过URL来定位的,所以单页面应用从头到尾它的html地址都是不变的,注意哦,是html地址,而不是URL地址,这两者还是有点区别的。html地址是截止...原创 2018-12-04 16:47:27 · 7320 阅读 · 0 评论