- 博客(23)
- 收藏
- 关注
RSS订阅原创 vue全局指令实现按钮权限
// 以插件的方式用全局指令实现按钮权限export default { install(app) { app.directive('has', { // vue3全局指令钩子函数 组件及子组件更新完成后调用 updated(el, binding) { dealPermission(el, binding) }, // vue2全局指令钩子函数 组件及子组件更新完成后调用 componentUpdated(e.
2022-04-15 16:52:52
888
原创 手写vuex
const Vueclass Store { constructor(options) { this._mutations = options.mutations this._actions = options.actions // 将state数据响应式化并保护起来 this._vm = new Vue({ data: { // $$的数据Vue不做代理 $$state: options.state }.
2022-03-16 17:23:28
940
原创 vue手写hash router
const Vueclass HVueRouter { constructor(options) { this.$options = options // 当前hash路径响应式化 // 当hash变化时 组件的render函数重新调用 重新渲染组件 Vue.util.defineReactive(this, 'current', '/') // 监听url变化 window.addEventLister('hashchange', this.o.
2022-03-16 11:46:57
1176
原创 js防抖和节流
概念函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，n秒内高频事件再次触发，重新计算时间函数节流(throttle)：高频事件触发，n秒内只会执行一次，会稀释函数执行的频率函数防抖和函数节流都是为了限制函数执行的频率，以此优化函数高频触发导致响应速度跟不上触发的频率，避免出现延迟，卡顿，假死的现象实现函数防抖实现：每次触发事件时设置一个延迟调用的方法，并取消之前的延迟调用方法缺点：如果事件在规定时间的间隔内不断触发，则调用的方法会不断的延迟functio
2022-03-02 16:41:49
117
原创 前端关于频繁切换代理地址的优化
每次修改我们的代理地址的时候，都会要重启项目，如果需要频繁的切换代理地址，这个时候就比较繁琐了，我们可以借助http-proxy-middleware的router支持动态修改的特性来解决这个问题index.jsconst fs = require('fs')function urlParse(obj) { return Function('"use strict"; return (' + obj + ')')()}function getUrl(prop) { const ro
2022-02-25 16:13:27
434
原创 vue3常用的api
vue3使用Composition API，相比于vue2的Options API而言，我们可以按需引入需要使用到的api，而不必引入所有api，从而提高了项目打包构建的速度，减少了项目打包后的体积1. setupsetup函数是composotion api的入口函数，我们的变量，方法，函数等都是在该函数里定义的<template> <div id="app"> <p>{{count}}</p> <button
2022-02-21 17:48:00
726
原创 TypeScript的基本语法
1. TypeScript是什么TypeScript是微软开发的一种强类型语言，它不允许改变变量的数据类型，除非进行强制的类型转换，它是JavaScrip的一个超集，它遵循最新的ES6脚本语言规范，TypeScript扩展了JavaScript的语法，任何已经存在的JavaScipt程序都可以在不经任何改动的情况下在TypeScript环境运行2. 基本数据类型的使用booleanlet isBoolean: boolean = falsestringlet str1: stri
2022-02-17 16:01:23
491
原创 vue3的响应式
一 proxy1. 什么是proxyproxy是es6的新特性，主要是通过handler对象中的拦截方法拦截目标对象target的某些行为(属性查找，赋值，枚举，函数调用等)const proxy = new Proxy(target, handler)/* target: 使用Proxy包装的目标对象(可以是任何类型的对象，如原生数组，函数，另外一个代理) *//* handler: 通常以函数作为属性的对象，定义了在执行各种操作时代理proxy的行为 */ 2. 为什么改用prox
2022-02-15 15:22:46
3144
原创 微信小程序原生框架MINA生命周期
MINA框架是微信小程序的原生框架，其生命周期可以分为两类，一类是应用生命周期，一类是页面生命周期，应用生命周期是写在全局js文件，也就是全局app.js文件中的生命周期函数，页面生命周期则是写在对应页面js文件中的生命周期函数应用生命周期1. onLaunch()：小程序初始化完成时触发，全局只触发一次2. onShow()：小程序启动，或从后台进入前台显示时触发3. onHide()：小程序从前台进入后台时触发4. onError()：小程序发生脚本错误或 API 调用报错时触发
2020-07-11 10:23:20
1567
原创 你真的明白GET与POST吗
很多人会认为GET与POST最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数，其实不尽然。HTTP是基于TCP/IP的关于数据在万维网中如何通信的协议，GET和POST是HTTP协议中的两种发送请求的方法，HTTP的底层是TCP/IP，所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样的，你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。GET与POST
2020-07-04 10:42:02
135
原创 vue双向数据绑定原理
1. 原理1.1 vue双向数据绑定原理，又称vue响应式原理，是vue的核心，双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变1.2 vue双向数据绑定原理的实现，其核心是Object.defineProperty()方法1.3 Object.defineProperty(obj, prop, descriptor)方法，接收三个参数，分别为obj（定义其上属性的对象）prop（定义或修改的属性）desc
2020-06-20 12:03:41
5862
原创 vue生命周期函数
vue生命周期函数是指当一个vue实例被创建的时候，在vue实例生存的不同阶段会调用不同的生命周期函数。下面是vue生命周期函数的官方图生命周期函数描述函数名称 介绍 场景 beforeCreate vue实例的挂载元素$el和数据对象data都为undefined，还未初始化 可以加入 loading 事件,在服务器端的应用场景中，这个时候发送数据请求比较多 created 实例创建完成后，data、methods 被初始化,$el还没有 结束l
2020-06-13 09:01:40
105
原创 js对象深度克隆
js对象克隆就是将一个对象的属性方法赋值给另外一个空对象，我们先来了解一下js对象。在js中一切实例皆是对象具体分为原始类型和合成类型，原始类型对象指的是Undefined、Null、Boolean、Number和String ，按值传递，合成类型对象对象指的是array、object以及function，按址传递，传递的时候是内存中的地址。而对象的克隆拷贝也因此分为两种，浅度克隆和深度克隆，浅度克隆是指基本类型为值传递，对象仍为引用传递，深度克隆是指所有元素或属性均完全克隆，并...
2020-06-06 11:27:38
194
原创 js闭包
1.闭包是什么 js的作用域分为两种，全局和局部，在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的。函数和对其周围状态的引用捆绑在一起就会形成闭包，也就是说，闭包可以让你从内部函数访问外部函数作用域，在js中，每当函数被创建，就会在函数生成时生成闭包2.闭包的三特性2.1 函数嵌套函数...
2020-05-30 10:14:08
74
原创 Canvas与SVG
Canvascanvas通过javascript来绘制2D图形canvas是逐像素进行渲染的在canvas中，一旦图像被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象SVGSVG是一种使用XML描述2D图形的语言SVG基于XML，意味着SVG DOM中的每个元素都是可用的，我们可以为某个元素附加javascript事件处理器在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，那么浏览器能够
2020-05-23 10:01:28
137
原创 flex布局详解
说明：本文参照阮一峰老师的flex布局教程，所有图片均来自于阮一峰老师flex布局教程原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。1.flex布局是什么 任何一个容器都可以指定其布局为flex布局，将其display：flex，行内元素也可以使用flex布局，display：inline-flex，设为 f...
2020-05-16 10:33:27
178
原创 Vuex详细介绍
Vuex官方说明是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到 Vue的官方调试工具devtools extension，提供了诸如零配置的time-trave调试、状态快照导入导出等高级调试功能。1. 什么是状态管理模式 把我们需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件之中供其他组件去使用。通俗点来说就是将vue当成是一个js文件，组件是函数，那么v...
2020-05-08 23:10:57
157
原创 vue的methods，watch，computed
methods是方法，将被混入到 vue的实例中，可以直接通过vm实例来访问这些方法，也可以在指令表达式中使用，方法中的 this 自动绑定为vue实例。computed是计算属性，它的结果会被缓存，除非依赖的响应式属性变化才会重新使它计算，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，那么计算属性是不会被更新的。watch是监听属性，一个对象的键是需要观察的表达式，它的值是对应的...
2020-04-18 10:17:18
77
原创 js数组方法总结
js的数组是我们常见的知识点，我们在学习和开发中难免会接触到数组，这样就避免不了跟数组的方法打交道，但js数组的方法非常的多，有很多的方法也不常用，下面我对这些方法做了一个整理记录，供大家查阅js创建数组的两种方式1.使用Array函数构造函数：let arr = new Array()2.使用数组字面量表示法：let arr = [ ]下面是数组方法，对应es版本，方法功能以及对...
2020-04-12 10:50:09
99
原创 cookie和session的那些事
会话跟踪是web程序中常见的技术，用来跟踪用户的整个会话，cookie和session就是常用的会话跟踪技术cookiecookie是服务器在本地上存储的小段文本并伴随着每一个请求发送至同一个服务器。网络服务器用HTTP头向客户端发送cookie，在客户终端，浏览器解析这些cookie并将它们保存为一个本地文件，它会自动将同一服务器的任何请求缚上这cookie。具体来说cookie采用的是...
2020-04-04 13:30:16
64
原创 echarts新手上路
echarts是一个使用JavaScript实现的开源可视化图表库，底层依赖于轻量级的canvas类库zrender1.通过官网https://www.echartsjs.com/zh/index.html获取官方源码包或者在webpack使用npm install echarts --save安装2.下载echarts后，通过script引入echarts文件3.准备一个具有宽高的d...
2020-03-28 10:25:45
128
原创 vue-cli构建项目的步骤
vue-cli是官方发布的vue.js项目脚手架，可以快速的构建一个vue项目。1.安装node.js和npm，去https://nodejs.org/zh-cn/安装node.js，由于npm安装比较慢，这里推荐使用淘宝镜像全局安装cnpm（npm install cnpm -g --registry=http：//registry.npm.taobao.org）2.全局安装vue-cl...
2020-03-21 17:11:59
104
原创 github项目的下载与上传
github项目下载1.首先进入github官网，在downloads模块下载相应系统的git工具至本地；2.下载完成后点击安装，安装过程中基本都是选择默认，一直安装完成；3.安装完成后在github上找到你所需要下载至本地的项目，点击右上方的clone or download，然后复制弹窗里面的地址；4.在你需要下载的本地的地方右击，选择git bash here；5.打开g...
2020-03-13 23:30:48
303
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人