自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 深入浅出vue.js----生命周期---初始化状态

一、初始化状态 (1)当我们使用Vue.js开发应用时,经常会使用一些状态,例如props、methods、data、computed和watch。在Vue.js内部,这些玩状态在使用之前需要进行初始化。 (2)initState函数 export function initState(v...

2020-01-14 11:09:53

阅读数 33

评论数 0

原创 在H5页面中使用Google Analytics

一、概述 Google-Analytics是google旗下一款网站数据记录类服务系统 二、注册Google Analytics账号 https://marketingplatform.google.com/about/analytics/ https://analytics.google...

2020-01-11 14:39:30

阅读数 29

评论数 0

原创 深入浅出vue.js----生命周期---初始化实例属性、事件

一、初始化实例属性 (1)在Vue.js的整个生命周期中,初始化实例属性是第一步。 (2)需要实例化的属性既有Vue.js内部需要用到的属性(如vm._watcher),也有提供给外部使用的属性(例如vm.$parent)。 (3)以$开发的属性是提供给用户使用的外部属性,以_开头的属性是提...

2019-12-30 16:59:13

阅读数 33

评论数 0

原创 深入浅出vue.js----生命周期篇幅一

一、概述 (1)每个Vue.js实例在创建时都要经过一系列初始化,例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。 (2)同时,也会运行一些叫作生命周期钩子的函数,只给在不同阶段添加自定义代码的机会。 二、生命周期图示 Vue.js生命周期可以分为4个阶段:初始化...

2019-12-27 15:16:17

阅读数 16

评论数 0

原创 深入浅出vue.js---全局API的实现原理----Vue.use、Vue.minxin、Vue.compile、Vue.version

一、Vue.use Vue.use(plugin); (1)参数 { Object | Function }plugin (2)用法 安装Vue.js插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。调用install方法时,会将V...

2019-12-26 11:54:33

阅读数 17

评论数 0

原创 深入浅出vue.js---全局API的实现原理----Vue.directive、Vue.filter、Vue.component

一、Vue.directive Vue.directive(id,[definition]); (1)参数 {string }id { Function | Object } [definition ] (2)用法 注册或获取全局指令。 <!-- 注册 --> Vue....

2019-12-25 16:34:59

阅读数 23

评论数 0

原创 深入浅出vue.js---全局API的实现原理----Vue.nextTick、Vue.set、Vue.delete

一、Vue.nextTick Vue.nextTick([callback,context]); (1)参数 { Function } [callback] { Object } [context] (2)用法 在下次DOM更新渲染结束之后执行延迟回调,修改数据之后立即使用这个方法获取...

2019-12-24 17:31:21

阅读数 21

评论数 0

原创 深入浅出vue.js---全局API的实现原理----Vue.extend

一、Vue.extend Vue.extend( optons ); (1)参数 {object }options (2)用法 使用基础Vue构造器创建一个“子类”,其参数是一个包含“组件选项”的对象。data选项是特例,在Vue.extend()中,它必须是函数。 <div...

2019-12-24 17:04:48

阅读数 13

评论数 0

原创 深入浅出vue.js----实例方法与全局API的实现原理---生命周期相关的实例方法-vm.$mount

一、概述 (1)不常用该方法,原因是如果在实例化Vue.js时设置了el选项,会自动把Vue.js实例挂载到DOM元素上。 (2)但是,无论我们在实例化Vue.js时是否设置了el选项,想让Vue.js实例具有关联的DOM元素,只有使用vm.$mount方法这一途径。 二、使用方式 v...

2019-12-23 16:05:23

阅读数 20

评论数 0

原创 前端JS和APP交互

在APP中嵌入H5时,往往需要进行交互,此时就需要用到JS交互。 一、从前端调用APP的方法 (1)与Android交互 window.Android开发人员定义的对象名.Android开发人员定义的方法名(); 例如: window.android.open(); (2)与IOS交互...

2019-12-18 14:56:19

阅读数 29

评论数 0

原创 深入浅出vue.js----实例方法与全局API的实现原理---生命周期相关的实例方法-vm.$nextTick

一、vm.$nextTick (1)nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下次DOM更新周期之后执行。 (2)它与全局Vue.nextTick一样,不同是是回调的this自动绑定到调用它的实例上。 (3)如果没有提供回调且在支持Promise的环境中,则返回一个Pr...

2019-12-04 17:35:58

阅读数 13

评论数 0

原创 深入浅出vue.js----实例方法与全局API的实现原理---生命周期相关的实例方法-vm.$destroy、vm.$forceUpdate

一、生命周期相关的实例方法 (1)vm.$destroy、vm.$forceUpdate 从lifecycleMixin中挂载到Vue构造函数的prototype属性上。 export function lifecycleMixin(Vue){ Vue.prototype.$forceU...

2019-11-29 16:48:32

阅读数 12

评论数 0

原创 深入浅出vue.js----实例方法与全局API的实现原理---数据、事件相关的实例方法

一、Vue构造函数 import { initMinxin } from './init' import { stateMinxin } from './state' import { renderMinxin } from './render...

2019-11-26 17:02:43

阅读数 14

评论数 0

原创 调用百度地图JavaScript API实现地址解析

一、百度地图 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。该套API免费对外开放。自v1.5版本起,您需先申请密钥(a...

2019-11-26 14:31:42

阅读数 19

评论数 0

原创 深入浅出vue.js----模板编译原理

一、概述 (1)在Vue.js中创建HTML并不是只有模板这一种途径。既可以手动写渲染函数来创建HTML,也可以在Vue.js中使用JSX来创建HTML。 (2)渲染函数是创建HTML最原始的方法。 (3)模板最终会通过编译转换成渲染函数,渲染函数执行后,会得到一份vnode用于虚拟DOM渲...

2019-11-20 16:23:14

阅读数 14

评论数 0

原创 深入浅出vue.js----patch

一、概述 (1)虚拟DOM最核心的部分是path,它可以将vnode渲染成真实的DOM。 (2)patch也可以叫作patching算法,通过它渲染真实DOM时,并不是暴力覆盖原有DOM,而是比对新旧两个vnode之间有哪些不同,然后根据对比结果找出需要更新的节点进行更新。 (3)patch...

2019-11-19 16:07:30

阅读数 11

评论数 0

原创 深入浅出Vue.js----VNode

一、什么是VNode (1)Vue.js中存在一个VNode类,使用它可以实例化不同类型的vnode实例,而不同类型的vnode实例各自表示不同类型的DOM元素。 (2)其实vnode只是一个名字,本质上其实是Javascript中一个普通的对象,是从VNode类实例化的对象。我们用这个Jav...

2019-11-19 08:39:08

阅读数 47

评论数 0

原创 移动端下拉加载插件----mescroll.js插件

一、官网 http://www.mescroll.com/ 二、下载引入 <script src="./js/mescroll.min.js"></script> <link rel="stylesheet" href=...

2019-11-18 17:46:36

阅读数 9

评论数 0

原创 提取富文本中文字内容(使用正则)

function removeTAG(str){ return str.replace(/<[^>]+>/g, ""); }

2019-11-18 17:28:34

阅读数 15

评论数 0

原创 input file图片上传(使用OSS Javscrtipt 上传到服务器)以及图片裁剪(cropper.js)

一、图片上传 (1)使用 <input type="file" accept="image/*" name="file" @change="upload($event)"> accept="...

2019-10-29 19:18:41

阅读数 61

评论数 0

原创 深入浅出Vue.js----虚拟DOM

一、什么是虚拟DOM (1)Vue是声明式操作DOM。 (2)我们通过描述状态和DOM之间的映射关系是怎样的,就可以将状态渲染成视图。关于状态到视图的转换过程,框架会帮我们做,不需要我们自己动手去操作DOM。 (3)应用中所使用的变量都是状态。 (4)状态可以是Javascript中的任意...

2019-10-27 21:06:20

阅读数 26

评论数 0

原创 Echarts绘制三条线间有区域颜色,同时在线上添加文字提示,以及添加一条标注的线

一、效果 二、实现 (1)使用堆叠图(stack属性相同形成堆叠图)实现区域的颜色,因为刚好该需求的三条线的数据是低、中、高的缘故,只需用50%的数据去减去3%的数据就可以得到50%这条线的数据,同时97%的数据,用97%的数据减去50%得到的数据即可实现该堆叠图的效果。 (2)线上文字...

2019-10-24 15:39:01

阅读数 128

评论数 0

原创 深入浅出Vue.js----变化侦测相关的API实现原理----vm.$delete

一、作用 (1)vm.$delete的作用是删除数据中个某个属性。 (2)由于Vue.js的变化侦测是使用Object.defineProperty实现的,所以如果数据使用delete关键字删除的,那么无法发现数据发生了变化。 (3)为了解决这个问题,Vue.js提供了vm.$delete方...

2019-10-22 15:41:09

阅读数 18

评论数 0

原创 深入浅出Vue.js----变化侦测相关的API实现原理----vm.$set

一、用法 vm.$set(target,key,value) (1)参数 {Object | Array} target {string | number} key {any} value (2)返回值 { Function } unwatch (3)用法 在object上设置一...

2019-10-21 11:22:49

阅读数 16

评论数 0

原创 深入浅出Vue.js----变化侦测相关的API实现原理----vm.$watch

一、vm.$watch (1)用法 vm.$watch(expOrFn,callback,[options]) (2)参数 1、{string | Function} expOrFn 2、{Function | Object} callback 3、{Object} [optio...

2019-10-19 15:05:50

阅读数 23

评论数 0

原创 深入浅出vue.js----变化侦测----Array的变化侦测

为什么Array和Object的侦测方式不同 object通过getter/setter来实现侦测,但数组中有许多方法,如push来改变数组,但它并不会出发getter/setter。正因为我们可以通过Array原型上的方法来改变数组的内容,所有object那种通过getter/setter的实现...

2019-09-19 21:26:03

阅读数 36

评论数 0

原创 深入浅出vue.js----变化侦测---Object的变化侦测

Vue.js (1)渐进式框架。所谓渐进式框架,就是把框架分层。 (2)最核心的部分是视图层渲染,然后往外是组件机制,再这个基础上再加入路由机制,再加入状态管理,最外层是构建工具。 (3)所谓分层,就是说你既可以只用最核心的视图层渲染功能来快速开发一些需求,也可以使用一整套全家桶来开发大型...

2019-09-17 23:15:28

阅读数 68

评论数 0

原创 canvas绘制图片模糊

一、关于canvas (1)canvas绘制的是位图,而我们平常用的jpg,png也是位图。 位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度等信息来存储和显示图像。具象一点讲,可以将位图想象成一个巨大的拼图,这个拼图有无数的拼块,每个拼块代表了一个纯色的像素点。理论上,1个位图...

2019-09-05 17:19:37

阅读数 23

评论数 0

原创 canvas.toDataURL图片跨域的问题解决

1.报错 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 2.原因 图片的跨域会导致canvas.toDataURL...

2019-08-27 15:52:31

阅读数 35

评论数 0

原创 vue中使用swiper插件时动态绑定图片数据无法滑动或白屏

一、原因 使用静态图片是没问题的,但是使用接口返回的图片数据去绑定swiper就会出现无法滑动或则白屏的问题,原因是swiper提前初始化了,获取的图片数据还未返回。 二、解决 (1)使用$nextTick,在数据更新后在初始化swiper const vm = this; vm.$ne...

2019-08-26 15:24:24

阅读数 87

评论数 0

原创 iview的菜单组件Menu动态设置open-names属性失效解决方案

使用Menu的updateopened方法:手动更新展开的子目录,注意要在 $nextTick 里调用。 this.$nextTick(() => { this.$refs.menuName.updateOpened(); this.$refs.menuName.updateAc...

2019-08-21 16:27:05

阅读数 55

评论数 0

原创 图解HTTP----web的攻击技术

一、概述 互联网上的攻击大都将Web站点作为目标。 二、针对Web的攻击技术 (1)简单的HTTP协议本身并不存在安全性问题,因此协议本身几乎不会成为攻击对象。 (2)应用HTTP协议的服务器和客户端,以及运行在服务器上的Web应用等资源才是攻击目标。 (3)HTTP 不具备必要的安...

2019-08-16 14:34:00

阅读数 25

评论数 0

原创 图解HTTP----基于HTTP的功能追加协议

一、消除 HTTP 瓶颈的 SPDY (1)Google 在 2010 年发布了 SPDY(取自 SPeeDY,发音同 speedy),其开发目标旨在解决 HTTP 的性能瓶颈,缩短 Web 页面的加载时间(50%)。 (2)HTTP 的瓶颈 1)使用 HTTP 协议探知服务器上是否有内容...

2019-08-15 17:23:02

阅读数 15

评论数 0

原创 图解HTTP----确认访问用户身份的认证

一、概述 某些Web页面只想让特定的人浏览,或者干脆仅本人可见。未达到这个目标,必不可少的就是认证功能。 二、何为认证 (1)登录者本人才会有的信息 密码:只有本人才会知道的字符串信息。 动态令牌:仅限本人持有的设备内显示的一次性密码。 数字证书:仅限本人(终端)持有的信息。 ...

2019-08-15 16:41:48

阅读数 20

评论数 0

原创 图解HTTP----确保Web安全的HTTPS

一、概述 在HTTP协议中有可能存在信息窃听或身份伪装等安全问题。使用HTTPS通信机制可以有效地防止这些问题。 二、HTTP的缺点 (1)通信使用明文(不加密),内容可能会被窃听。 (2)不验证通信方的身份,因此有可能遭遇伪装。 (3)无法证明报文的完整性,所以有可能已遭篡改。 ...

2019-08-15 15:33:35

阅读数 77

评论数 0

原创 图解HTTP----HTTP首部--实体首部字段及其他首部字段

一、实体首部字段 实体首部字段是包含在请求报文和响应报文中的实体部分所使用的首部,用于补充内容的更新时间等与实体相关的信息。 二、Allow(通知客户端能够支持Request-URI指定资源的所有HTTP方法) Allow: GET, HEAD (1)首部字段Allow用于通知客...

2019-08-14 17:53:02

阅读数 23

评论数 0

原创 图解HTTP----HTTP首部--响应首部字段

一、响应首部字段 响应首部字段是由服务器端向客户端返回响应报文中所使用的字段,用于补充响应的附加信息、服务器信息,以及对客户端的附加要求等信息。 二、Accept-Ranges(告知客户端服务器是否能处理范围请求) Accept-Ranges: bytes (1)首部字段Acce...

2019-08-14 15:10:13

阅读数 21

评论数 0

原创 图解HTTP----HTTP首部--请求首部字段

一、请求首部字段 请求首部字段是从客户端往服务器端发送请求报文中所使用的字段,用于补充请求的附加信息、客户端信息、对响应内容相关的优先级等内容。 二、Accept(媒体类型) Accept: text/html,application/xhtml+xml,application/xml...

2019-08-14 14:11:44

阅读数 17

评论数 0

原创 图解HTTP----HTTP首部--概述及通用首部字段

一、HTTP报文首部 (1)HTTP协议的请求和响应报文中必定包含HTTP首部。 (2)首部内容为客户端和服务器分别处理请求和响应提供所需要的信息。 (3)报文首部由几个字段构成 (4)首部字段同时存在于请求和响应报文内,并涵盖HTTP报文相关的内容信息。 HTTP请求报文 ...

2019-08-13 23:19:55

阅读数 21

评论数 0

原创 图解HTTP----与HTTP协作的Web服务器

一、概述 一台Web服务器可搭建多个独立域名的Web网站,也可作为通信路径上的中转服务器提升传输效率。 二、用单台虚拟主机实现多个域名 (1)HTTP/1.1规范允许一台HTTP服务器搭建多个Web站点。 (2)及时物理层面只有一台服务器,但只要使用虚拟主机的功能,则可以假想已具有多台服务...

2019-08-12 23:30:45

阅读数 22

评论数 0

提示
确定要删除当前文章?
取消 删除