前端
文章平均质量分 84
鹿杖客
我已天下无敌啦
展开
-
vue通信,原理,杂谈
computed和watchcomputed计算属性依据data值改变,如果data没有改变,直接从缓存中取值有缓存,依赖data改变,才会重新计算不支持异步,有异步操作,无法监听数据变化一对一或多对一computed属性值为函数(自身),会走get方法,数据变化调用set方法(当前属性变化),watch不支持缓存,数据变化直接发生改变支持异步两个参数,第一个为newValue,第二个是oldValue监听data或者props数据immediate组件加载立即执行,deep深原创 2021-04-09 10:57:34 · 244 阅读 · 0 评论 -
http总结
同源策略web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时。源是由URI,主机名,端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。(相同的协议,主机,端口)http://www.example.com/dir/page.htmlhttp://www.example.com:81/dir/other.html 不同源,端口不同https://www.example.com/dir/other.html原创 2021-04-09 10:55:36 · 223 阅读 · 0 评论 -
vue-route的用法
vue-router 两种模式SPA单页面应用,顾名思义,但也没,加载页面不会加载整个页面,更新某个容器内内容,更新视图不请求页面,在vue中,vue-router用来实现hash模式先看官网介绍:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。类似于服务器路由,通过匹配不同的url路径...原创 2020-04-10 17:00:38 · 3441 阅读 · 0 评论 -
computed和watch区别与用法
什么是computed先来看官方文档:计算属性: 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,你都应当使用计算属性。...原创 2020-04-09 16:34:26 · 2051 阅读 · 1 评论 -
vuex源码分析
什么是vuex先来看官方介绍: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能vuex是mcv模式中的model...原创 2020-04-07 17:46:46 · 400 阅读 · 0 评论 -
关于vscode智能提示失效问题
在vscode使用react插件之后,只能提示失效把光标放在js文件中,import 引入包的时候,提示正在加载初步判断为自动关联,导致缓存包在自身node_module和c盘缓存node_module之间无法自动判断导致卡死经过google发现: 将类型声明下载到的C:\Users\MyUserName\AppData\Local\Microsoft\TypeScript\3.0\...原创 2019-12-30 09:50:32 · 3108 阅读 · 0 评论 -
箭头函数详解
箭头函数与普通函数不同1:箭头函数不能使用new2:箭头函数不能使用arguments,使用 rest参数 …var a = (...A)=>{ console.log(A)}3:箭头函数指向先看一个栗子var obj = { a:10, b()=>{ console.log(this.a); //underfined ...原创 2018-11-01 18:01:25 · 624 阅读 · 0 评论 -
vue 构造函数---vue源码解析(3)
介绍使用vue时候,要先new操作符调用,说明Vue是一个构造函数,所以我们首先要把vue的构造函数搞清楚Vue构造函数的原型npm run dev"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",调用scripts/config.js // Runtime+compiler deve...原创 2018-11-02 18:11:34 · 1201 阅读 · 0 评论 -
缺省协议和浏览器缓存
缺省协议/缺省协议的使用,代表资源访问的协议和当前页面保持一致,如果页面是http,//就代表http,如果页面是http,也是如此。许多cdn也是如此,//是缺省协议的写法//jb51.net/css/缺省协议的优缺点本地调试时候,协议为文件协议(file://);这样这个文件就不存在;浏览器的缓存为了节省网络资源的加速浏览,浏览器在用户磁盘对最近请求过的文档进行存储,再次请求...原创 2018-11-07 17:38:40 · 443 阅读 · 0 评论 -
跨域全解,看这个就够了
为什么要跨域由于浏览器同源策略,限制同一个源加载文档与另一个源进行交互,用来隔离恶意的攻击。如果没有同源策略限制会导致针对接口:在登录上使用cookie来判断是谁发送的请求,服务器验证响应头加入set-cookie,下次请求时候,浏览器自动将cookie附在http请求头字段cookie,如果没有同源策略,其他网站可以使用你的cookie登录你的账号。(CSRF攻击)但是即使有同源策略coo...原创 2018-11-08 11:27:46 · 250 阅读 · 0 评论 -
vue中Mixins 与 Hoc
什么是mixins在官方文档中混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { he...原创 2019-01-10 15:25:55 · 1506 阅读 · 0 评论 -
重绘与重排
什么是重绘和重排重绘就是重新绘制(repaint)重排就是重新排列(reflow)DOM发生改变的时候触发重排,使DOM重新排列,重绘不一定会重排,但是重排一定发生重绘,重绘和重排都会耗费浏览器的性能,尽量避免网页如何生成解析html绘制DOM树解析css绘制CSS树生成render tree(渲染树)flow排列,将渲染树节点合成(渲染)paint绘制,将排列绘制在屏幕上(...原创 2019-01-10 15:27:15 · 6797 阅读 · 0 评论 -
vue中webpack 配置的注释
什么是webpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。其最主要的就是三点:打包,转换,优化webpack 配置 module.exports = {...原创 2019-06-12 16:50:11 · 976 阅读 · 2 评论 -
call,apply,bind
函数的三种角色length 形参的个数name:函数名prototype:类的原型,在原型上定义方法都是当前类实例的公有方法_proto:把函数当成普通对象,指向Function类的原型function Fn(){ var num = 500; this.x = 100;}Fn.prototype.getX = function(){ console.lo...原创 2018-11-01 14:50:56 · 148 阅读 · 0 评论 -
什么是AMD,CommonJS,UMD(2)
模块规范JS组件生态系统稳步增加,但是组件之间互相引入导致组件混乱,为了解决问题,互为对手的AMD和CommonJS出现,他们可以让开发者在约定的沙箱以模块化的形式编写自己的代码。AMD 异步模块定义RequireJS目前是现在最流行的实现方式例如foo模块依赖于jquery// filename: foo.jsdefine(['jquery'], function ($) {...原创 2018-10-30 17:59:57 · 663 阅读 · 0 评论 -
vue源码探究---读vue技术揭秘(1)
需要了解RollUpFlowRollUpRollup是一个js的模块打包器,可以将小块代码编译成大块复杂代码,那为什么这样做呢,为了降低开发问题时候的复杂度Tree-shaking(摇树优化)除了使用ES6的模块外,Rollup还能静态分析代码中的import// 使用 ES6 import 语句导入(import) ajax 函数import { ajax } from '...原创 2018-10-30 17:58:36 · 790 阅读 · 0 评论 -
webpack入门
webpack已经出来很久了,以前就接触过,但是没有系统的学习,现在已经有了webpack2,本文基于webpack1,下面是段webpack的基本代码//一个常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextP原创 2017-06-14 22:08:45 · 251 阅读 · 0 评论 -
vue-cli 遇到的问题
1:切换子路由时,数据不刷新,在子路由进入时,观察watch代码: watch:{ '$route'(to,from){ const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length console.l原创 2017-09-07 10:21:24 · 257 阅读 · 0 评论 -
node.js学习(3)
一:网络操作1:简介通过node.js可以编写服务端的程序协助前端和测试,还需要http协议和socket协议var http = require(‘http’); http.createServer(function(request,response){ response.writeHead(200,{‘Content-Type’:’text-plain’});原创 2018-01-23 11:18:26 · 222 阅读 · 0 评论 -
call和apply用法
一直都知道call和apply,用的真的很少,今天想起来了,就随便说说吧1:基本用法看到call和apply,大家想到的应该都是一句话 改变对象执行的上下文2:apply和call的用法其实call和apply的用意简单来说都一样,就是改变this 的指向这也是他们的相同点下面看一个具体的demovar person = { name: 'xiao m原创 2018-01-15 11:56:00 · 220 阅读 · 0 评论 -
年终总结之数组
今天看到了一篇文章,关于数组的,想想年终了,总结下自己所学的文章地址:数组总结1:创建数组var colors = [];var colors = ['red','blue'];var arr = new Array();var arr2 = new Array(10);var arr3 = new Array(5,4,3,2,1)2:检测数组if(转载 2018-01-16 09:55:35 · 219 阅读 · 0 评论 -
webpack 二次总结
前言:在6月份的时候写了一个关于vue-cli的webpack探究,当时似懂非懂,现在回过头来,感觉还是欠缺不少,这次看了技术胖的博客,感觉受益匪浅 技术胖博客1:webpack介绍webpack 模块打包机 目的:分析你的目录接口,找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言,将其打包和转换为合适供浏览器使用的格式。webpack还有优化功能 打包:多个原创 2018-02-01 01:26:57 · 252 阅读 · 0 评论 -
node.js学习(1)
之前用koa2+mysql,和koa2+mongodb仿过一个多人博客论坛和个人博客,但对于node还是感觉没有入门,所以就有了下面的博客。 本文参考了七天学会node.js,算了做笔记了 链接:七天学会node.js node.js中文api文档:api文档1:node.js目的:高性能node.js的web服务器。 优点:事件机制和异步IO模型,js本身不自带IO功能,原创 2018-01-15 17:54:16 · 147 阅读 · 0 评论 -
node.js学习(2)
node.js 模块学习学习一门新语言,就要学习它的api。(ps:这笔记其实早写好了,前几天做个h5,没时间排版,等h5结束了,再总结。)1:nodejs 文件操作node.js不只是能做网络编程,还能操作文件 基本api(1)小文件拷贝var fs = require(‘fs’); function copy(src,dst){ fs.writeFil原创 2018-01-19 18:37:46 · 141 阅读 · 0 评论 -
vue 组件与通信与vuex与computed与生命周期(2)
二:vuex先看官方文档Vuex 官方文档:https://vuex.vuejs.org/zh-cn/ vuex 是一个专为vue应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 vuex 不同于localstorage,刷新之后vuex中的state数据就会丢失 所以vuex只能用于单页面之间不同组件数据流...原创 2018-02-09 17:53:24 · 3093 阅读 · 0 评论 -
vue 组件与通信与vuex与computed与生命周期(1)
一:组件1:先看官方文档——–什么是组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一...原创 2018-02-09 16:58:49 · 1562 阅读 · 0 评论 -
数据类型与es6 复习
之前做一个项目,老是不系统了解,年底做完了,总结一下 参考:es6小技巧 数据类型1:数据类型六种 es6增加了第七种symbol 数值number 字符串 string 布尔值 boolean undefined 未定义 null 空值 对象 object 数值,字符串,布尔值 为原始类型 对象为合成类型对象又分三个子类型 对象 obje...原创 2018-02-11 09:57:33 · 181 阅读 · 0 评论 -
jquery bind用法
bind介绍 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。语法 `$(selector).bind(event,data,function) event 必须。添加到元素的一个或多个事件如:click,mouseover,mouseup,change,select data 可不填。传递到函数的额外数据,如:$(select原创 2017-02-13 13:36:52 · 568 阅读 · 0 评论