- 博客(69)
- 收藏
- 关注
RSS订阅
原创 H5开发踩坑记录（总有你用的到的，持续更新）
一、url转码，url传值得时候中文会被转义，通过 decodeURIComponent（ ） 进行转码this.url = decodeURIComponent(item.split('=')[1])编码的话用encodeURI( )son.name = encodeURI(infoJson.name)二、H5页面在ios中滑动不流畅问题，可以通过css进行解决，兼容safa...
2019-04-28 00:28:41
398
2
原创 JavaScript高级程序设计（第三版）——引用类型Array
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2019-11-15 15:48:42
267
1
原创 解决element table表头错位的问题
因为加了boder属性，所以表格会稍有错位解决办法：全局加上display: table-cell !important;属性，覆盖源码/* 解决element table加boder后表格错位不对称情况 */.el-table th.gutter{ display: table-cell !important;}...
2019-10-25 10:43:45
930
原创 Vue面试题之（三）watch和computed的区别
computed：computed是计算属性，依赖其他的属性值，并且computed的属性值有缓存属性，当属性值变化的时候，下一次获取computed属性的时候才会重新计算computed的值。watch:更多的是一种观察的作用，用于监听某些数据的回调。每当所监听的数据发生变化时才能执行回调处理后续操作。运用场景： 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 co...
2019-10-09 10:00:33
2007
原创 Vue面试题之（二）怎样理解 Vue 的单向数据流？
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。1、v-model 用在 input 元素上v-model在使用的时候很像双向绑定的（实际上也是。。。），但是 Vue 是单项数据流，v-model 只是语法糖而已：<i...
2019-09-29 18:14:33
2693
原创 Vue面试题之（一）说说你对 SPA 单页面的理解
说说你对 SPA 单页面的理解、，它的优缺点分别是什么？SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容...
2019-09-29 18:05:44
1277
1
原创 JS处理支付宝H5支付
后端返回的支付宝H5支付调用链接是一个字符串form表单创建一个div，讲返回的form表单加入div中，返回到body中渲染页面，通过提交表单的形式打开H5支付链接。const div = document.createElement('div');div.innerHTML = ‘后端给的form数据’document.body.appendChild(div);documen...
2019-08-23 18:43:21
3129
原创 解决vue项目中的“Invalid Host header”
微信公众号项目，在服务器上测试，打开项目浏览器报错Invalid Host header，项目为vue-cli 2.x修改webpack.dev.conf.js，在devServer对中加入disableHostCheck: true,属性devServer: { disableHostCheck: true,}...
2019-08-22 09:36:27
1971
原创 Vue还原data中初始化的数据
核心代码：console.log(this.$data)console.log(this.$options.data())Object.assign(this.$data, this.$options.data())打印可以看出this.$data包含现有的data数据，this.$options.data()中是原有的data数据例：这里我想清空form对象中的数...
2019-07-24 15:04:18
13552
3
原创 Vue组件通信（非父子通信之Bus）
我的上一篇关于vue组件通信的文章链接戳这里 => vue组件通信，点击传值，动态传值（父传子，子传父）今天要说的是非父子通信方式，这种跨组件的通信方式，可以通过Bus的形式进行处理。在Vue 2.x 推荐使用 个空的 Vue 实例作为中央 件总线（ bus ），也就是 相当于一个中介。比如你需要租房子 你可能会找房产中介来登记你的需求 然后中介把你的信息发给满足要求的出租者...
2019-07-18 15:41:53
1557
原创 什么是防抖和节流？有什么区别？如何实现？
有这样一种应用场景，在滚动事件中做一个复杂取值计算或者频繁的触发一个事件，这是很影响性能并容易导致页面卡顿的，所以要合并多次请求，通过函数做一个精确操作。这时就会用到函数防抖或者函数节流，那么，这两种方式有什么区别呢？个人认为：函数节流是：在固定的时间内触发事件，每隔n秒触发一次函数防抖是：当你频繁触发后，n秒内只执行一次一、防抖触发高频函数事件后，n秒内函数只能执行一次，如果...
2019-07-12 14:31:53
19024
3
原创 React学习之路（二）JSX语法简介与实例练习
今天继续跟着胖哥学习。首先，了解一下JSXJSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析.可以在{}中写js语法import React from 'react'const Component = React.Component...
2019-07-05 17:35:56
396
原创 React学习之路（一）写一个HelloWorld
最近打算学习react，所以找来了收藏已久的胖哥视频JSpang网站：http://jspang.com/一、下载react环境（默认你已经安装好node环境）npm install -g create-react-app二、安装react脚手架mkdir ReactDemo //创建ReactDemo文件夹create-react-app helloworld //用...
2019-07-03 23:26:50
373
原创 vue 替换换行符为p标签
效果图需要把换行符替换成p标签，方便首行缩进。主要方法使用正则进行转义 this.articleData = '<p>' + content.replace(/\n*$/g, '').replace(/\n/g, '</p> <p>') + '</p>'代码示例：<template><main>...
2019-06-18 18:35:19
6489
原创 JS获取url字符串（黑科技-URLSearchParams）
之前截取url字符串一直是.split().split().split()，显得好傻，今天掌握了一个黑科技，很轻便，也很规整，但是不支持IE这个黑科技就是 构造函数 URLSearchParamsURLSearchParams MDN=>戳这里那么怎么用呢，很简单。1、首先url格式是有要求的，要问号后面的参数内容并且包含问号，如下let url = '?toke...
2019-06-15 16:30:31
1502
原创 JS实现拖拽（原生）
拖拽的原理：三个事件onmousedown、onmousemove、onmousemove1、鼠标按下，触发onmousedown，获取鼠标坐标x,y，获取元素坐标x,y 通过event.clientX、event.clientY获取鼠标位置的坐标 let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离 let y...
2019-06-10 18:58:41
223
原创 vue项目兼容android低版本、兼容IE、ES6解决办法
VUE项目兼容性处理，主要原因还是不兼容ES6。oppo和vivo等低版本浏览器不支持es6写法，所以需要对es6转es5的操作。IE浏览器没有内置Promise对象。不仅如此，几乎所有的ES6新增的方法在IE都不能用，此时你需要babel Polyfill一、需要下载几个包npm install babel-polyfill --savenpm install es6-pro...
2019-06-10 15:27:49
9122
原创 前端get方式下载文件
一般下载方式都是用get去请求，通过动态创建a标签的形式去完成下载，给a标签设置download属性。并且要声明传递blob格式responseType: 'blob',getHeader（）为我设置请求头信息的方法import CryptoJS from 'crypto-js' getHeader(apiUrl) { this.jurisd...
2019-06-05 17:07:50
11782
原创 JS实现数组去重四种方法，去重并排序
直接上代码 <script> let arr = [2, 3, 4, 4, 6, 66, 4, 743, 243, 22, 2, 4]; // 一、遍历数组法，新建一个数组，遍历原数组，如果不存在就存入新数组中，最后输出新数组 function first(arr) { let array = []...
2019-06-04 18:01:32
2589
原创 JS排序（sort排序、冒泡排序、选择排序、快速排序）
直接上代码 <script type="text/javascript"> let array = [1, 22, 13, 7, 2, 224, 354, 5, 3, 6] //sort排序 function sortNum(a, b) { return a - b; } ...
2019-06-04 16:35:09
988
原创 H5于原生APP交互封装（这里用vue，其他同理）
最近项目要求APP中要嵌套H5的页面。首先，创建两个JS文件，便于区分管理1、DeviceType.js用于判断环境是Android还是IOSexport const DeviceType=(()=>{ var u = navigator.userAgent; if (u.match(/Android/i) != null) { return "...
2019-05-10 16:58:09
2838
原创 微信公众号自定义分享（vue）
先附上微信公众平台，官网介绍的很详细，https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115微信公众号右上角自定义分享功能主要就三步：1、先引入JS文件<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweix...
2019-04-24 16:00:59
2374
原创 JS图片转换格式 （转Blob）
file格式转Blob<input type="file" accept="image/*" @change="upLoad">upLoad(e){ console.log(this.getFileUrl(e.srcElement))},getFileUrl(obj) { let url; url = window.URL.createObjectURL...
2019-04-15 10:29:36
16914
1
原创 JS判断当前环境为微信，手机判断浏览器类型
判断是否为微信环境let wx = navigator.userAgent.toLowerCase();if (wx.match(/MicroMessenger/i) == "micromessenger") { alert('当前环境为微信环境') }判断是Android还是IOSlet web = navigator.userAgent;//android终端...
2019-03-27 09:46:09
3882
原创 微信公众号H5开发登录授权流程
很久没写博客了，最近实在是太忙，有太多东西想写想记录。今天写个关于微信登录的过程吧，这次项目是我第一次写关于微信的东西，这个登录授权搞了半天。但总算是把流程搞明白了，先附上微信官方文档微信公众平台 网页开发授权我总结来说流程是这样的：1、进入首页，去打开微信授权地址，微信会告诉后端，是哪个用户请求授权的（后修改，直接让公众号去打开，而不是进到首页再去打开，这样会省去一步操作，开始的时候...
2019-03-23 11:41:25
22092
3
原创 vue移动端转rem，px2rem-loader使用方法
可以自动转rem1、下载lib-flexiblenpm i lib-flexible --save2、main.js中添加import 'lib-flexible/flexible'3、安装px2rem-loader"px2rem-loader": "^0.1.9",npm install px2rem-loader --save在build文件下的utils....
2019-02-21 16:32:53
2832
6
原创 vue使用google地图（三）在地图上使用drawingManager绘图，并获取坐标
先放需求图我这个需求是先通过接口获取已有区域，也就是红色框框的区域，通过坐标进行绘图，下面是我拿到的数据格式有个重要的一点，画图的坐标，第一个点一定要和最后一个点是相同的坐标，否则就会出错。//显示区域 drawArea(list) { // console.clear() for (let e in list) { ...
2019-01-24 15:14:10
4673
1
原创 报错解决：Error in callback for watcher "endVal": "TypeError: this.demo.update is not a function"
在使用ivew的时候报错Error in callback for watcher "endVal": "TypeError: this.demo.update is not a function"全局搜索找到 this.demo.update的位置，锁定countUp.vue在这里mounted钩子中加了定时器，延时创建demo对象，导致监听this.demo.update的时候...
2019-01-14 10:21:31
20389
3
原创 elementUI Cascader 级联选择器获取数据信息
官方API： http://element-cn.eleme.io/#/zh-CN/component/cascader <el-cascader :options="goodsOptions" v-model="selectedOptions" @change="handleChange()" :props="defaultData" size="mini" style="wi
2019-01-10 18:18:43
27331
2
原创 JS复制内容到剪贴板（vue）
MDN地址，里面有参数和命令：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand链接：<input size="mini" :value="item.downloadLink" :id="item.id"/> <el-button size="mini" type="prim
2018-12-31 15:54:56
1222
4
原创 vue使用google地图（二）实现标记实时运动（基于websocket）
最近外卖项目，需要实现一些地图的功能，前几天写了一个关于marker 和 InfoWindow、自定义label的文章，只是简单地例子。详情点击vue中使用google地图（自定义label、信息窗口）有不懂的欢迎留言，我每天都上博客，一定及时回复大家，如有不足希望批评指正。那么，今天在这里写一个曾经我可望而不可即的功能，外卖骑手实时在地图上运动。具体需求是点击按钮创建弹窗，并且创建地图与...
2018-12-29 20:50:43
2859
1
原创 Visual Studio Code 前端相关配置（vue开发）
最近看到网上VScode挺火的，也下了一个玩了玩，总结了一些配置，一些插件。都是一些我自己用的配置插件。仅供参考。主题的话，我个人还是觉得Monokai最舒服，毕竟是sublime起家的。通用插件HTML Snippets超级实用且初级的 H5代码片段以及提示HTML CSS Support让 html 标签上写class 智能提示当前项目所支持的样式新版已经支持scss文...
2018-12-26 21:00:51
4788
原创 vue中使用google地图（自定义label、信息窗口）
最近公司爱尔兰项目需要使用google地图，项目还是用vue写的，那我就寻思找个vue能用的google地图的插件吧，找了vue2-google-maps，这个插件确实还行，而且github上还有api文档，虽然都是英文很难受，但是还行，没有骚需求的话，用它还行。 google地图里面有个功能，label，vue2-google-maps里面是没有办法控制label的位置的，默...
2018-12-06 22:14:05
10904
8
原创 vue axios获取状态码（success，error）
项目中遇到个小需求，当页面半个小时内无任何操作的时候，token自动失效，毫无疑问是要跳到登录页的，token失效后后端给我的状态码是412，那么好，这个412我就是获取不到，给中console.log就是打印不出我想要的status，最终还是找到了我想要的。 获取状态有两种写法：这里的api为配置的api文件，在main.js中引入，我的配置方法链接在这axios的API配置文...
2018-11-21 14:23:02
21460
1
原创 vue解决刷新页面vuex数据、params参数消失的问题（params传递多个参数）
一般项目都会有一些逻辑需要传递值给另一个页面，那么有的时候就会出现一个问题：用户刷新了页面，诶？数据没了，参数错误。那么今天经过总结，解决了这个问题。我在最新的项目中，通过了一下几种情况进行传值：1、通过路由传值，params或query2、通过vuex进行状态管理 $store.state...3、使用localStorage进行传值那么，关于刷新页面数据消失原因有两种，一是通过...
2018-11-20 16:00:53
23440
23
原创 vue-baidu-map vue项目中使用百度地图（搜索，信息窗口，获取地点详细信息）
最近做了一个垃圾分类的项目，要求使用百度地图。主要实现以下几个功能：1、点击地图获取到经纬度和地点信息2、点击地图实时显示信息窗口3、区域搜索功能，具体功能就是如下图 ↓两个api网址，一个vue-baidu-map的api，一个JavaScript的百度地图apivue-baidu-map：https://dafrok.github.io/vue-baidu-map/#/...
2018-11-15 18:45:25
33672
17
原创 vue项目打包之后页面空白解决办法
之前项目遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，资源都加载了，但是就是不显示。然后百度找了原因，修改了两处地方一、修改 assetsPublicPath 在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点assetsPublicPath: '/',二、...
2018-11-05 17:08:08
6526
1
原创 vue组件通信，点击传值，动态传值（父传子，子传父）
vue说到组件通信，无非是父组件传子组件，子组件传父组件，跨级组件传值，同级组件传值，个人觉得，除了父子组件的传值，其余情况就可以用vuex来解决了，这篇先不说vuex，这里介绍父子组件传值。不会你打我！一、父组件传子组件，核心--props下面是场景，点击传值给子组件在这里触发 handleClick 点击事件，额外声明一个clickData，点击按钮将 inpMessage 的...
2018-10-23 11:56:40
27218
5
原创 vue-image-crop-upload图片上传裁剪功能
安装npm install vue-image-crop-upload组件代码：<template> <div id="app"> <a class="btn" @click="toggleShow">设置头像</a> <my-upload field="img" @c
2018-10-19 16:40:44
4571
1
原创 使用elementUI进行分页处理
分页是数据管理必备的功能，是这样一种操作：每一组数据是一页，当点击下一页的时候去请求下一页的接口，后端会传一个当前页的值给你，比如pageNum，不会让前端取出所有数据然后进行分页的，那样数据多了会很慢很慢，后端会把数据进行分页处理，前端只需要点击下一页或者页数去请求接口，那么我这里是基于ElementUI的分页，结合图片的讲解。<template> <div ...
2018-10-11 09:48:55
8099
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人