- 博客(21)
- 收藏
- 关注
RSS订阅转载 前端利用canvas给图片添加水印（Blob canvas img 三者之间的转化）
前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。我们在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展示一
2020-08-20 16:35:52
1269
1
转载 url、base64、blob，三者之间的转化
对于vue项目，我们使用axiso来发送请求，如果传递二进制图片时出现乱码，这个是什么问题？答：axios 默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式。解决方案：我们在 axios 里面，responseType 默认返回数据类型是 json，将其改为返回数据类型 blob。export function miniprogramQrcode (params) { return axios.post( env.MI_URL + '/XXXX/XXX
2020-08-20 16:26:34
487
转载 SCSS语法
嵌套规则// scss#id { color: red; .name { color: blue; .child { color: yellow; } }}// css#id { color: red;}#id .name { color: blue;}#id .name .child { color: yellow;}引用父选择器 &// scss
2020-08-13 13:33:35
412
转载 Unicode与JavaScript详解（涉及ES6内容）
跳转：http://www.ruanyifeng.com/blog/2014/12/unicode.html
2020-08-11 17:32:13
264
转载 vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与E是堂兄关系（非直系亲属） 针对以上关系我们归类为：父子组
2020-07-29 11:02:48
270
转载 vue 组件间的通信，子组件向父组件传值的方式总结
写vue，如果页面涉及到多个组件，就会涉及组件之间的通信，可能是父子组件间的通信，也可以是同级组件间的通信，那么，vue里面的组件如何通信。一般来说在vue的数据传递是在父组件传子组件通过属性来传，子组件传父组件通过事件来传值。1. 子组件通过通过this.$emit()的方式将值传递给父组件；2. 通过vuex来传递组件间的数据；3. 通过中央总线来传递组件间的数据；4. 通过修改父组件传过来的对象属性5. 父组件使用子组件的引用ref调用子组件的方法获取子组件的数据一、子组件通过this.$
2020-07-29 10:29:20
721
转载 slot、作用域插槽，你真的懂了吗？
前言在网上搜了很多关于作用域插槽的解释，感觉没有写得很具体的吧，我认为应该对组件化有很深的理解才会触及到这个问题吧，这里也分享下我自己对于slot-scope的一点理解。slot大家看看文档都懂了，无非就是在子组件中挖个坑，坑里面放什么东西由父组件决定。// 子组件<template> <slot>来啊，我这里挖了个坑</slot></template>// 父组件<template> <child> &l
2020-07-16 17:05:01
738
转载 vm.$attrs 【Vue 2.4.0新增inheritAttrs，attrs详解】
1、vm.$attrs简介首先我们来看下vue官方对vm.attrs的介绍：包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v−bind="attrs的介绍：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除
2020-07-16 14:53:23
665
转载 Vue - 渲染函数render
一、render函数是什么简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定它的简写叫h示例： 分别使用html语法和render函数来实现根据
2020-07-16 10:43:58
2280
转载 使用Vue.observable()进行状态管理
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给vie
2020-07-15 16:08:05
588
转载 vue源码分析前置知识必备
转载自：https://juejin.im/post/5d36d39bf265da1ba6482e52最近利用空闲时间又翻看了一遍Vue的源码，只不过这次不同的是看了Flow版本的源码。说来惭愧，最早看的第一遍时对Flow不了解，因此阅读的是打包之后的vue文件，大家可以想象这过程的痛苦，没有类型的支持，看代码时摸索了很长时间，所以我们这次对Vue源码的剖析是Flow版本的源码，也就是从Github上下载下来的源码中src目录下的代码。不过，在分析之前，我想先说说阅读Vue源码所需要的一些知识点，掌握这些
2020-07-13 19:38:26
952
转载 IOS、Android与H5通信-JsBridge原理(总结)
IOS、Android与H5通信-JsBridge原理(总结)H5和原生app（ios，android）交互的载体基本都是基于Webview，可以把Webview看作是一个性能打八折的移动浏览器。ios调用Javascript简单说下这几种：WKWebView 、UIWebView、JavaScriptCoreWKWebView：苹果在ios8之后也引入了专门负责处理网页视图的框架WebKit，Webkit是啥，接触过H5、chrome的肯定都知道。chrome使用的也是基于webkit内核的Chr
2020-07-08 20:01:24
1560
转载 Vue.js中引入图片路径的几种方式
vue中静态资源的引入机制Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理：1、在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。诸如 <img src="..."、background: url(...) 和 CSS @import 的资源 写在 template 中内联 style 的 background: url(...) 样式， 在当前版本的测试中，即使使用了相对路径也不会被
2020-07-07 19:41:09
14539
转载 Vue中mixins的使用方法和注意点
mixins特点1、方法和参数在各组件中不共享如混入对象中有一个 cont:1的变量,在组件A中改变cont值为5，这时候在组件B中获取这个值，拿到的还是1，还是混入对象里的初始值，数据不共享2、值为对象的选项如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的，比如混入对象里有个方法A，组件里也有方法A，这时候在组件里调用的话，执行的是组件里的A方法3、值为函数的选项如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调
2020-07-07 09:43:45
3939
转载 Vue.filter() 过滤器用法
自定义的过滤器，当然这包括注册在全局和注册在实例化的内部注册在全局的fliter1.全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面2.过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算3.可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突4.用户从input输入的数据在回传到model之前也可以先处理<!DOCTYPE html><html> <head>
2020-07-06 17:33:42
418
转载 Vue.directive() 封装DOM操作
这篇文章是关于Vue Directive的介绍，后面会介绍一个使用的小例子。1.Vue Directive的简介directive在Vue中十分常见，Vue提供的许多指令如 v-on 、 v-show 使得Vue的功能更加强大，可是仍然有一些操作指令是Vue没有提供的，不过Vue提供了自定义directive的属性方法来满足这一需求。其实，Vue Directive就是一种特殊的HTML元素属性。Vue提供了两中注册方法，一种是全局注册，在Vue.directive中定义组件的名字和相关指令操作Vu
2020-07-06 16:25:44
1077
转载 vue.nextTick()方法的使用详解
什么是Vue.nextTick()？？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数<template> <div class="hello">
2020-07-06 14:51:40
508
转载 Vue.extend() 编程式插入组件
前言日常中我们要使用一个弹框组件的方式通常是先通过Vue.component 全局或是 component 局部注册后，然后在模版中使用。接下来我们尝试编程式的使用组件。实现其实步骤很简单1、通过 Vue.extend() 创建构造器2、通过 Vue.$mount() 挂载到目标元素上3、目标实现一个 alert 弹框，确认和取消功能如下图document.createElement其实想要插入一个元素，通过 document.createElement 就可以实现，并非一定需要上面两步，
2020-07-06 14:27:33
1567
原创 async/await/Promise以及js中的微任务和宏任务之间的关系
宏任务与微任务同步和异步任务分别进入不同的执行"场所"，同步的任务进入主线程，异步的进入Event Table并注册函数。当异步函数完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循环)。除此之外，在js中还存在宏任务和微任务。js中的宏任务一般是：包括整体代码script，setTimeout，setInterval。微任务是：Pro
2020-07-03 09:54:29
2326
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人