- 博客(18)
- 资源 (1)
- 收藏
- 关注
原创 Vue-router 笔记
Vue-Router 笔记使用import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ config });new Vue({ router, render: h => h();}).$mount('#app');// vue.beforecreate// <router-view></rou...
2021-04-13 17:20:03
192
原创 Vue源码笔记
Vue 源码笔记使用import Vue from 'vue';new Vue({ render: h => h(component), // router}).$mount('#app');Vue 实例initDatafunction initData { let data = vm.$options.data // 组件复用,不为函数,实例保持同一个对象的引用,导致数据污染 data = vm._data = typeof data === 'functio
2021-04-10 21:25:09
147
原创 Vue 双向绑定
这里写自定义目录标题抛砖_Vue响应源码响应式流程图代码实现参考抛砖_Vue响应源码响应式流程图代码实现class Vue { // Vue 构造类 constructor(options) { this._data = options.data; observer(this._data); // 新建一个Watcher观察者对象,这时候Dep.target会指向这个Watcher对象 // 源代码中, ./instance/index.js->st
2021-03-10 15:26:48
128
原创 Js 六种继承方式
/** js 继承方式 * 参考来源 JavaScript 高级程序设计(第3版) 6.3 继承 */// 父类function Father(name) { this.name = name; // 被所有子实例共享 this.firuts = [];}Father.prototype.sayName = function() { console.log...
2019-08-18 00:01:42
139
原创 webpack搭建vue开发环境
前言本文只是个人笔记,记录关于webpack的粗浅知识,内容可见多数文章。一、webpack 的基本概念Entry:指定webpack开始构建的入口模块,从该模块开始构建并计算出直接或间接依赖的模块或者库;Output:告诉webpack如何命名输出的文件以及输出的目录;Loaders:由于webpack只能处理javascript,所以我们需要对一些非js文件处理成webpa...
2019-06-19 21:11:43
243
原创 随笔小记_2019.03
7、容灾概述容灾系统是指相隔较远的异地,建立两套或多套功能相同的IT系统,互相之间可以进行健康状态监视和功能切换,当一处系统因意外停止工作是,整个系统可以切换到另一处,使得该系统功能可以继续工作。容灾技术是系统高可用性技术的一个组成部分,容灾技术是高可用性技术的一个组成部分,容灾系统更加强调处理外界环境对系统的影响,特别是灾难性事件对整个IT节点的影响,提供节点级别的系统恢复功能。...
2019-06-05 23:52:31
122
原创 event、dom 位置信息
本文所有属性信息,均在chrome环境下。一、测试dom<!DOCTYPE html><html lang="zh"><head> <style rel="stylesheet"> body{ margin: 0; } .event{ width: 200px; heigh...
2019-06-05 20:06:36
172
原创 随笔小记_2019.05
2019.056、避免 “ cannot read property of undefined ” 错误技巧例如:favorites.reading.magazines[0] (数据结构比较深)或单元const favoriteBook = ((favorites.reading||{}).books||[])[0];try/catchconst tryFn...
2019-06-04 17:21:51
205
转载 深入理解浏览器的缓存机制
转载:深入理解浏览器的缓存机制作者:浪里行舟一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请...
2019-05-30 22:57:36
203
转载 常见六大 Web 安全攻防解析
转载:https://mp.weixin.qq.com/s/qjsGvK1tQedR2qCv2triHQ前言在互联网时代,数据安全与个人隐私受到了前所未有的挑战,各种新奇的攻击技术层出不穷。如何才能更好地保护我们的数据?本文主要侧重于分析几种常见的攻击以及防御的方法。一、XSSXSS(Cross-Site Scripting),跨脚本攻击,因为缩写和css重叠,所以只能叫XSS。跨...
2019-05-16 19:34:57
1107
原创 vue e2e 测试
1、vue e2e测试概述e2e 测试端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。典型 e2e 测试框架对比名称 断言 是否跨浏览器支持 实现 官网 是否开源 nightwatch assert和 chai expect 是 selenium http://ni...
2019-04-18 11:24:13
6311
原创 vue单元测试笔记
1、vue单元测试工具/框架概述vue test utilsvue test utils 通过将组件隔离挂载,然后模拟必要的输入 ( prop、注入、用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试Vue组件。vue-test-utils 链接:https://vue-test-utils.vuejs.org/zhkarma 基于 node 的 js 测试...
2019-04-17 14:36:47
661
原创 多屏适配笔记
关于前端屏幕适配方案这块,目前主要使用过以下6个方案:1、rem通过js根据当前设备屏幕宽度,动态计算元素长度单元。var html = document.getElementsByTagName('html')[0];var pageWidth = html.getBoundingClientRect().width;html.style.fontSize = pageWid...
2019-04-11 14:49:13
218
原创 vue-router进阶笔记
开发过程中只使用过vue-router的导航守卫做权限,路由元信息做导航激活,其他知识点没有接触过,写个笔记加深理解。1、导航守卫可以用router.beforeEach注册一个全局前置守卫,可以根据需求,根据权限拦截页面跳转,或跳转会指定页面,比如登录页面。router.beforeEach((to, from, next) => { // logic judgmen...
2019-04-11 00:30:56
186
原创 vue element-UI Upload 笔记
实现图片上传前预览功能,element-UI Upload 组件绑定 on-change函数,触发事件后没有 file.url 属性,一、解决:let blob=file.raw;let blobUrl=URL.createObjectURL(blob);this.formData.monitorPic = blobUrl;URL.createObjectURL()方法目前在...
2019-03-23 00:14:45
167
转载 祝你不幸并痛苦
“通常,毕业典礼的演讲嘉宾都会祝你们好运并送上祝福。但我不会这样做让我来告诉你为什么。”Now the commencement speakers will typically also wish you good luck and extend good wishes to you. I will not do that, and I’ll tell you why.“在未...
2019-03-19 14:12:32
305
原创 Referrer策略与防盗链
碰到后端提供图片链接不可访问,添加<meta name="referrer" content="no-referrer">后可以显示。referrer:http请求header的报文头,指明http请求从哪个页面链接过来的。referrer策略:no referrer:任何情况都不发送Referrer信息;no referrer when downgrade:仅当...
2019-03-05 23:20:49
1130
原创 前端布局笔记
前端入门一年多,项目全靠div解决,布局这块了解太少了,归纳下前端布局。归纳前端五大布局:静态布局、自适应布局、流式布局、响应式布局、弹性布局,及静态布局中两栏、三栏布局等。一、静态布局静态布局就是传统web,不管设备尺寸变化,网页布局不变。二、自适应布局自适应布局就是元素位置变化,大小尺寸不变。三、流式布局流式布局与自适应布局相反,元素大小变化,位置不变。四、响应...
2019-02-15 15:06:28
269
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人