权权权权志龙啊-CSDN博客

如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳，那么这只蚂蚁从绳头爬到绳尾，就会依次触动不同的卡片挂钩。在React每一个生命周期中，也有类似卡片挂钩的存在，我们把它称之为‘钩子函数’。那么在React的生命周期中，到底有哪些钩子函数？React的生命周期又是怎样的流程？今天我给大家来总结总结如图，React生命周期主要包括三个阶段初始化阶段、运行中阶段和销毁阶段，在React不同的生命周期里，会依次触发不同的钩子函数，下面我们就来详细介绍一下React的生命周期函数一、初始化阶段name。.....

2022-07-29 11:39:47 167

原创 Vue tab切换内容变化效果

VUE中实现Tab切换方式，需要用到以下知识点：1、动态绑定class，用于导航高亮显示:class="{active:cur==0}"复制代码2、click点击事件，用于改变当前cur的值@click="cur=0"3、使用v-show="cur==0",用于判断当前cur的值为0时，显示，也就是点击那个导航，改变cur的值，对应的内容也将显示出来。Tab导航部分内容:<div> <ul> <li @click="cu

2022-05-24 17:36:20 752

原创 package.json 与 package-lock.json 的关系

模块化开发在前端越来越流行，使用 node 和 npm 可以很方便的下载管理项目所需的依赖模块。package.json 用来描述项目及项目所依赖的模块信息。那 package-lock.json 和 package.json 有啥关系和联系呢？package.json管理包大家都知道，package.json 用来描述项目及项目所依赖的模块信息。，就是帮我们管理项目中的依赖包的，让我们远离了依赖地狱。通过 npm 管理，使用一些简单的命令，自动生成package.json, 安装包依赖

2022-04-24 20:15:00 400

原创 Vue+Video.js播放m3u8视频流

首先，我们需要在vue工程中安装video.js相关依赖。npm install --save video.jsnpm install --save videojs-contrib-hls然后，我们需要引入videojs的css文件，例如在main.js中引入import 'video.js/dist/video-js.css'接着，我们在需要播放视频的页面引入js对象import videojs from 'video.js'import 'videojs-contrib-h

2022-04-13 20:00:00 206

原创你对浏览器的兼容性有了解过吗？

样式兼容性（css）方面因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式 * { margin: 0; padding: 0; } 在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css 预处理器以.

2022-03-22 09:56:24 106

原创在项目中封装axios，一次封装整个团队受益

写在前面虽然说Fetch API已经使用率已经非常的高了，但是在一些老的浏览器还是不支持的，而且axios仍然每周都保持2000多万的下载量，这就说明了axios仍然存在不可撼动的地位，接下来我们就一步一步的去封装，实现一个灵活、可复用的一个请求请发。这篇文章封装的axios已经满足如下功能：无处不在的代码提示；灵活的拦截器；可以创建多个实例，灵活根据项目进行调整；每个实例，或者说每个接口都可以灵活配置请求头、超时时间等。基础封装首先我们实现一个最基本的版本，实例代码如下：

2022-03-06 13:39:44 524

原创前端怎么判断token过期或无token问题

有如下两种情况会出现401错误：未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。登录用户的token过期了 ( token会有有效期（具体是多长，是由后端决定）)refresh_token的作用作用: 当token的有效期过了之后，可以使用它去请求一个特殊接口（这个接口也是后端指定的，明确需要传入refresh_token），并返回一个新的token回来（有效期还是2小时），以替换过期的那个token。有效期：14天。（最理想

2022-01-07 20:51:29 14298 1

原创 Object.assign 是浅拷贝还是深拷贝？实现深拷贝的方法有哪些？

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。 Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含gette.

2021-11-30 18:01:27 219

原创当点击完http和https链接后，浏览器和服务器会发生什么？

当用户点击一个http和https链接后，之后浏览器和服务器会发生什么？

2021-11-22 20:10:21 2950

原创微信小程序面试总结

总结一些微信小程序相关的知识，将笔记整理跟大家分享，有些知识会经常在前端面试的时候会问到，所以做个记录，希望对大家有所帮助，如果有什么问题，可以指出，会积极修正。如果大家喜欢，可以点赞或留言我再继续更新面试题~~~~，谢谢大家~~~

2021-11-20 09:00:00 344

原创关于小程序rpx的理解

rpx （ responsive pixel）响应单位rpx是微信小程序独有的、解决屏幕自适应的尺寸单位可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配rpx 和 px之间的换算在普通网页开发中，最常用的像素单位是px 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发以 iPhone6 为例，iPhone6 的屏幕宽度为 375px，共有 750个物理像素，则 750rpx =

2021-11-19 11:02:38 3497

原创 Git把本地内容push到远程仓库

第一次提交本地项目代码到github仓库一、所需的命令git init // 1. 初始化项目文件夹git add . // 2. 将所有文件添加到暂存区git commit -m "first commit" // 3. 提交到本地仓库，双引号内是提交的备注信息git remote add origin XXX // 4. （XXX就是你github或者码云等远程仓库的地址，git branch这个命令可以看到你所在的分支，删除某个仓库地址使用gi...

2021-11-04 11:05:36 14627 1

原创看完这个，终于分清楚splice、slice和split了

核心slice：截取功能截取数组为主，也可以截取字符串返回新的数组，包含截取的元素不改变原数组 splice()：数组增删查改只能对数组增删查改，字符串无效返回新的数组，内容是被删除的元素会改变原数组 split：字符串 => 数组字符串的方法，不是数组的方法。返回一个字符串数组。 join：数组 => 字符串slice()核心从数组中截取任意个元素，返回结果为新的数组不改变原数组。语法：新数组 = 原数组.

2021-10-31 19:35:50 529

原创你真的了解 Node.js 吗？

Node.js 是基于 Chrome V8 引擎的 JavaScript 运行时环境。在 Node.js 出现之前，JavaScript 只能在浏览器中使用。而 Node.js 的出现打破了这个局面。以下为 Chrome 浏览器和 Node.js 的组件构成。在 Node.js 中不需要处理 UI，所以不需要关注 webkit 引擎、HTML、显卡等 UI 技术，从而能够更加“放手大胆”去做。它使用了 Google V8 引擎，V8 引擎是采用 C++ 书写的，将 JavaScript 代码编...

2021-10-29 20:00:25 284

原创 ES6 新增Set与Map

Set是集合的数据结构let a = new Set()let a = new Set()a.add(1).add(1) // 1只被添加了一次 set不允许有重复元素let a = new Set()a.add(1).add(2) // {1,2}a.delete(1) // truea // {2}let a = new Set()a.add(1) // {1}a.has(1) // truelet a = new Set()a.add(1).add(3) /

2021-10-28 20:14:10 81

原创全面掌握异步解决方案

前言在我们日常项目开发中，我们在做业务开发的时候会涉及到复选框组的功能，所以封装了这个复选框组的组件。Promise长久以来，我们一直期望着一种既能实现异步、又可以确保我们的代码好写又好看的解决方案出现。带着这样的目标，经过反复的探索，我们终于迎来了 Promise。用 Promise 实现异步，我们这样做const https = require('https'); function httpPromise(url){ return new Promise(functio

2021-10-26 20:24:05 116

原创你了解过移动端适配吗？

前言很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生1、为什么要移动端适配？一般情况下设计稿的设计师按照375的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时357的设计稿，如果想要还原那基本是不可能了，因

2021-10-22 15:46:37 318

原创 JavaScript 类型转换

JavaScript 加法规则在JavaScript中，加法的规则其实很简单，只有两种情况：数字和数字相加字符串和字符串相加所有其他类型的值都会被自动转换成这两种类型的值在JavaScript中,一共有两种类型的值:原始值有：undefined、null、布尔值(boolean)、数字(number)、字符串(string)、symbol 对象值：其他的所有值都是对象类型的值，包括数组(arrays)和函数(functions)类型转换加法运算符会触发三种类型转换：将值转换

2021-10-14 20:06:41 417

原创双向数据绑定与父子组件通信：v-model与.sync详解

v-modelv-model能够实现双向数据绑定（数据model改变会自动响应到UI层，UI层的数据改变能够同步到model层），一般用在表单的双向数据绑定。 v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。---在表单上---<input v-model="searchText"/>等价于：<input :value="searchText" @input="search=$event

2021-10-13 20:01:38 262

原创 vue美食杰项目实现菜谱详情效果

目录detail.vuedetail-header.vuedetail-content.vuecomment.vue注意：因为用到了element-ui组件，所以需要先安装element-ui组件，进入项目根目录后执行npm i element-ui思路：detail.vue：1.根据menuId请求数据（查看数据结构），渲染页面（如果没有menuId），提示框请登录注意：数据结构过多，在保存到组件中时，提前写好默认值，避免在异步请求返回数据之前找不到属性detail-h

2021-10-12 20:21:55 422

原创 vue美食杰项目菜谱大全，loading事件实现效果（二）

这篇文章是根据上篇文章: vue美食街项目之菜谱大全实现效果（一）思路：1.实现loading加载页的数据2.首先要将后端数据获取到，这个就是 import {getMenus} from ‘@/service/api’;，就调用getMenus的方法对其解构3.调用解构完的data，拿到params传过来的数据，建个空数组来存储数据this.list = [];getMenus(params).then(({ data }) => { this.list = data.list

2021-10-11 20:12:03 356 1

原创【Vue】常用指令v-if和v-show的区别

【Vue】学习养成记，【必备小知识】???? 今日小知识——Vue指令v-if和v-show的区别 v-show 和v-if 是比较常用的Vue指令，经常用来判断渲染部分代码块，但两者具体的区别在哪里呢？？？1. v-showv-show指令的作用是：根据真假值切换元素的显示状态,是响应式的语法表达v-show = " 表达式 " 原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏指令后面的内容最终都会解析为布尔值值为真(true)的时候元素显示，值为假

2021-10-10 20:06:33 199

原创 vue美食杰项目之菜谱大全实现效果（一）

目录recipe.vue 注意：因为用到了element-ui组件，所以需要先安装element-ui组件，进入项目根目录后执行 npm i element-ui思路： 1.找到对应的组件进行数据渲染 2.都要对路由参数进行解构 3.在tab切换时,通过路由参数来进行切换，跳转成不同的参数来展示数据 4.在筛选时，通过点击‘炒’进行颜色切换，但颜色如果没有进行切换，要给css样式加上权重 .filter-tag...

2021-10-09 20:36:04 388

原创 vue项目之个人空间

目录space.vue fans.vue 路由 index.js 注意：下载element-ui1.效果展示2.视图页面：viewsspace.vue<template> <div class="space"> <h2>欢迎来到我的美食空间</h2> <div class="user-info"> <div class="user-avatar"> &l..

2021-10-08 20:39:27 293

原创 Vue3.x中的Mixin实现组件功能的复用、全局配置Mixin

一、Vue3.x中的mixin介绍使用混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。1、新建mixin/base.jsconst baseMixin = { data() { return{ apiDomain: "http://www.itying.com" } },

2021-10-07 19:36:32 512

原创 git基本操作，一篇文章就够了

1. git简介在实际开发中，会使用git作为版本控制工具来完成团队协作。因此，对基本的git操作指令进行总结是十分有必要的，本文对一些术语或者理论基础，不重新码字，可以参考廖雪峰老师的博文，本文只对命令做归纳总结。git的通用操作流程如下图主要涉及到四个关键点：工作区：本地电脑存放项目文件的地方，比如learnGitProject文件夹；暂存区（Index/Stage）：在使用git管理项目文件的时候，其本地的项目文件会多出一个.git的文件夹，将这个.git文件夹称之为版本.

2021-10-05 07:15:00 160

原创 Vue3对比Vue2

1.为什么要有vue3我们使用vue2常常会遇到一些体验不太好的地方，比如：随着功能的增长，需求的增加，复杂组件的代码越来越难以维护，逻辑混乱，虽然vue2也有一些复用的方法，但是都存在一定的弊端，比如我们常常用的Mixin,特别容易发生命名冲突，暴露出来的变量意图不是很明显，重用到其他组件容易冲突。 vue2对于typeScript的支持非常有限，没有考虑到ts的集成。 vue3的出现就是为了解决vue2的弊端，其composition API很好的解决了逻辑复用的问题，而且vu

2021-10-04 16:00:00 1288 1

原创简单理解Vue中的nextTick

一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div> <div v-if="msg2">Message got inside $nextTick: {{msg2

2021-10-03 11:55:01 97

原创让虚拟DOM和DOM-diff不再成为你的绊脚石

神奇的虚拟DOM首先神奇不神奇的我们先不去关注，先来简单说说何为虚拟DOM虚拟DOM简而言之就是，用JS去按照DOM结构来实现的树形结构对象，你也可以叫做DOM对象好了，一句话就把这么伟大的东西给解释了，那么不再耽误时间了，赶紧进入主环节吧当然，这里还有整个项目的地址方便查看实现一下虚拟DOM在亲自上阵之前，我们让粮草先行，先发个图，来看一下整个目录结构是什么样子的这个目录结构是用create-react-app脚手架直接生成的，也是为了方便编译调试// 全局安装.

2021-10-03 11:36:14 90

原创 vue的diff算法

背景在vue中，视图更新的diff算法在面试过程中算是常被问及的一个问题，那么它到底是什么？源码分析这里我先贴一下diff算法的核心代码// isUndef 判断是否为undefined // oldCh 旧节点列表// newCh 新节点列表// sameVnode 判断是否是相同的节点，判断key值，标签，data等等东西 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (

2021-10-03 11:22:50 5026

原创 7张图，从零实现一个简易版Vue-Router，太通俗易懂了！

前言用最通俗易懂的话，讲最难的知识点，相信大家在Vue项目中肯定都用过Vue-router，也就是路由。所以本文章我就不过多讲解vue-router的基本讲解了，我也不给你们讲解vue-router的源码，我就带大家从零开始，实现一个vue-router吧！！！路由基本使用方法平时咱们vue-router其实都用很多了，基本每个项目都会用它，因为Vue是单页面应用，可以通过路由来实现切换组件，达到切换页面的效果。咱们平时都是这么用的，其实分为3步1、引入vue-router，并使用Vue.u

2021-10-03 11:06:18 581

空空如也

空空如也