挥别了青春-CSDN博客

原创 react hooks入门

函数组件和类组件类组件:以class声明，拥有正常的生命周期函数，state,props函数组件：本质是一个函数，接受一个props为参数，只相当于一个render方法,不存在生命周期函数，也不能维护自己到state为什么要使用hooks可以让传统的函数组件有内部状态state，并且可以通过一些hooks来模拟/替换class组件中的生命周期函数。在传统的react开发流程中，我们的自定义组件通常需要定义几个生命周期函数，在不同的生命周期处理各自的业务逻辑，有很多情况下他们是重复的。使用h

2020-07-02 20:35:07 1019

原创浅谈css的BFC

什么是BFCBFC(Block Formatting Context)全名叫块级格式化上下文。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。怎么形成BFCBFC的形成一般可以有以下几种方式根元素position为absolute、...

2019-10-26 11:10:11 250

原创实现两栏布局、三栏布局的几种方式

两栏布局1. float + margin.first-block { background: #F44336; width: 100px; height: 100px; float: left;}.second-block { background: #00BCD4; height:100%; margin-left:100px;}2. float + ...

2019-10-26 11:08:37 483

原创 CSS实现水平垂直居中的几种方式

准备工作，假设有如下html<div class="wrapper"> <div class="box"> </div></div>需要设置宽高1.position + 负margin.wrapper{ position:relative;}.box{ width:100px; ...

2019-10-26 11:06:58 142

原创简析浏览器缓存及实践

浏览器缓存是一个老生常谈的话题，也是现阶段前端面试必问高频问题之一。这篇文章主要总结下我对缓存的认识，有什么不足之处欢迎指正。强缓存和协商缓存我们一般把浏览器缓存分为强缓存和协商缓存。强缓存强缓存，顾名思义，指的就是每次请求都走或者不走缓存,不和服务端交互。走或不走缓存主要通过expires和cache-control字段来控制。expire是一个时间戳，其实本质上它就是一个过期时间...

2019-10-26 11:01:53 176

原创 ant design Pro 菜单使用iconFont的方法

ant design Pro 项目中官方文档提供给我们定义菜单的icon方式有两种:使用ant design内部的icon使用http url地址具体的使用方式可以查看官方文档但是怎么使用iconFont的icon呢，这里文档里没有说明我查看了下它的源码，了解到它内部是可以使用iconFont的，可以看如下代码// https://github.com/ant-design/an...

2019-10-24 00:27:09 5880 4

原创 vue 2.x内部运行机制系列文章

最近一直在用vue.js作为前端技术栈，闲暇之余，也简单研究了下vue.js的源码和各位前端大牛的文章，为了加深自己对vue.js的理解和完成公司的硬性要求(内部分享)，于是就有了这篇系列文章。同时也趁3.0正式版发布前做2.0的最后一波总结。vue是什么套用官网的话，vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，它拥有优雅的API,并且易于上手，还便于与第三方库或既...

2019-10-20 17:25:14 274

原创简析vue 3 的数据响应系统

在10月5日尤大大Vue3的源代码正式发布了，闲暇之余也简单研究了下源码。vue3 目前的版本是Pre-Alpha,源码仓库地址vue-next,有需要的朋友可以自行下载Vue 的核心之一就是响应式系统，通过监听数据的变化，来驱动更新视图。因此，一拿到源码，就先研究了下它的数据监听机制。当然，在介绍数据监听知识之前，还需要了解一些其他东西第一个就是实现数据监听的核心Proxy，第二个就是W...

2019-10-15 22:11:33 835

原创 vue项目遇到的坑

1.mounted钩子函数中请求数据导致页面闪屏问题其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了2.npm run build 后，部署网页到服务器，出现404错误vue项目默认配置是打包后放在服务器根目录下，所以如果要部署在子目录下则会报404错误。这种情况就需要做如下修改// vue.config.js 中，修...

2019-09-24 23:51:56 1509

原创一文弄懂vuex的使用方式

Vuex 是什么？vuex是一种状态管理模式，它保存着组件的公用的状态，并且以相应的规则保证状态变化。vuex的核心就是一个store，它相当于是一个容器，里面包含有state,action,mutation,getter,modules。state：用于数据的存储，是store中的唯一数据源getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数...

2019-09-21 12:30:30 669

原创 vue中组件通信的几种方式

我们知道，vue中的一个大页面是由多个子组件组成，组件之间的关系往往错综复杂，因此我们了解组件的通信方式成为vue中的重中之重。这篇文章就来总结一下vue项目中的几种通信方式。一. 父子组件通信1.props/$emit父组件通过props向子组件传递数据，子组件通过$emit触发父组件的方法，从而实现子到父的通信<temp...

2019-09-15 11:46:48 254

原创关于vue项目的性能优化

1. 合理使用v-if和v-show v-if是真正的条件渲染，他的渲染机制是，直到第一次满足条件才会被渲染，条件不满足后又进行销毁。 v-show 则不管满不满足条件，都会被渲染，显示与否只是切换dom的display属性。所以，一般v-if用于切换频率较少的场景，而v-show则适用于切换频率较多的场景。 2. co...

2019-08-27 22:55:59 596

原创 vue底层-响应式原理

先简单了解下object.defineProperty方法// Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。// get 方法使用该属性的时候会调用get方法// set 方法修改或者赋值该属性时调用该方法Object.defineProperty(obj, key, { enumerable: ...

2019-08-17 11:39:17 393

原创 vue底层-template模板编译

vue底层-template模板编译vue的渲染过程Vue的模板编译在$mount之后，通过compile方法，经过parse、optimize、generate方法，最后生成render function来生成虚拟DOM，虚拟DOM通过diff算法，来更新DOM。具体功能如下：parse 函数解析 templateoptimize 函数优化静态内容generate 函数创建 re...

2019-06-05 21:34:17 6021 2

原创 vue中的自定义指令

出了vue中默认的v-model、v-if、v-show等，未来满足我们日常需要,我们也可以使用自定义等一些指令怎么添加自定义指令全局指令：指可以在全局使用的指令import Vue from 'vue'// 注册全局指令 v-lowerVue.directive('lower',{ bind:function(el,binding){ el.innerH...

2019-05-10 14:02:06 199

原创 vue中过滤器的使用

vue过滤器的作用：在不改变原数据的前提下，对数据进行一定程度的处理，在返回并显示在页面上过滤器的定义和使用// 全局注册Vue.filter('toRMB', function (value) { return `￥${value}`})new Vue({ el: '#app', data: { money: 223.1233, }, // ...

2019-04-22 22:54:24 424

原创 js中创建对象的几种方式及其优缺点

1.通过字面量方式var obj = { 'name':'tom', sayName:function(){ cosnole.log(this.name) }}2.通过new Object() 的方式var obj = new Object()obj.name = 'tom'obj.sayName = function(){ c...

2019-03-13 22:20:41 757

原创 js基础之深入原型和原型链

prototype从构造函数看起function Person () { }var person1 = new Person()var person2 = new Person()person1.name = '小明'person2.name = '小红'console.log(person1.name,person2.name) // 小明,小红每一个构造函数都有一个...

2019-03-11 23:12:16 181

原创深入理解js中的闭包

写在前边：我们知道，当函数执行时，会形成自己的执行期上下文，并把它挂到自己的作用域链上，当函数执行完之后，它的执行期上下文就会被释放。所以，一般情况下，在函数外部访问函数内部的变量需要特殊的方法才能解决，这个特殊的方法就是闭包。在理解闭包前，我建议你先了解下js的作用域。理解js中的作用域闭包的概念闭包：闭包指的是在函数的外部可以访问函数内部的变量。函数没有被释放，整条作用域链上的局部变...

2019-03-05 21:48:28 473

原创关于js中的this指向问题

每个函数的this是在函数执行时绑定的,完全取决于函数的调用位置(函数执行时地方)。我把js中的this指向分为以下5大类默认绑定默认绑定时是把this绑定在window上;如果使用严格模式，则会绑定到undefined上function foo(){ console.log(this.a)}var a = 2foo() // 2这里的this就绑定在window上，如果使...

2019-03-04 12:53:35 315

原创理解js中的作用域

执行期上下文（AO）：函数在运行时(或预编译时)，会创建一个叫执行期上下文问的一个内部对象。AO或GO,他定义了一个函数的执行环境(用来做变量/函数的提升等等),函数执行完毕则会销毁。作用域:每一个函数对象都有一个[[scope]]属性，他内部存储了执行期上下文的集合，也就是我们说的作用域。这个集合是一种链式结构，叫做作用域链作用域链的形成过程当函数被定义时，这个函数的[[scope]]属性...

2019-02-27 18:38:27 1110

原创关于js的立即执行函数

1.立即执行函数的定义一般而言，函数的定义有以下几种方式// 1.函数声明function b(){ console.log("b")}// 2.表达式var a = functon(){ console.log("a")}// 3.匿名函数function(){ console.log('b')}立即执行函数是指定义就被执行的函数，通过(...

2018-10-24 22:36:44 143

原创 js中数组常用的方法总结，包括ES6

1.push() 后增push()方法可以向数组后添加一个新的元素，并返回新数组的长度。末尾添加，返回长度，改变原数组var a = [1,2,3]var b = a.push(4)console.log(a) // [1,2,3,4] console.log(b) // 42.unshift() 前增unshift()可以向数组前添加一个或多个元素，并返回新的长...

2018-10-13 11:17:47 17101 3

原创解决vue首屏加载慢，白屏的问题

1.路由懒加载// 需要ES6支持const HelloWorld = () => import('@/components/HelloWorld.vue')export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, ]})...

2018-09-27 23:28:59 17791

原创 vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template><script> e...

2018-07-12 16:53:53 30423 1

原创 vue项目或react项目用node搭建静态文件服务器

//npm install express --save-dev 下载express包//npm install http-proxy-middleware --save-dev 下载代理中间件const fs = require('fs');const path = require('path');const express = require('express');const ...

2018-07-12 15:08:21 1318

原创 vue项目中关于axios的二次封装

vue项目开发时，为了对请求的数据做统一处理，如加loading，以及请求消息提示提示等，需要对vue配套的axios进行二次封装//引入axiosimport axios from 'axios'// 使用element-ui Message做消息提醒import { Message } from 'element-ui';// 设置baseURL//axios.defaults.ba...

2018-07-12 14:56:11 2959

原创 vue使用v-if时的注意点

v-if和v-else或v-else-if之间不能添加其他元素。以下是错误事例<span v-if="type==1">错误示范</span><span>哈哈哈</span><p v-else>嘿嘿嘿</p>以下是正确实例<span v-if="type==1">正

2018-07-12 14:28:38 57224 9

原创关于vue中的slot和slot-scope

slot简言之就是插槽的意思，一般规定了一个显示的模板(规定html+css)，这个模板写在父组件里(父组件里没有模板则不显示),至于显示位置等则是由子组件决定也就是说怎么显示是由父组件决定，在哪显示则由子组件决定在父组件中，各插槽的内容模板要写在子组件标签内部。默认插槽/匿名插槽/单个插槽默认插槽只能有一个，即在父组件里不定义slot的那个模板，默认插槽渲染在子组件内部不定义name的slot标...

2018-06-22 16:32:42 5695

原创前端commonjs、AMD、CMD、ES6等模块化的对比

CommmonJS用于node端，是同步加载的AMD依赖于requirejs,是异步加载的，是提前加载，立即加载 CMD依赖于seajs,是异步加载，延后加载，就近加载，用时加载 ES6是ES2015的简称，一般通过export来暴露模块，import来导入模块 CommonJSCommonJS模块化规范：1.通过module.exports或exports来暴露模块2.通过require来加载模...

2018-02-27 21:25:11 1417

挥别了青春的博客