前端家成-CSDN博客

原创 react总结

React hooks关于hooks的系统性整理why use hooks？Hook-Rules常用hooks说明useStateuseEffectuseEffect _componentDidMount（初次渲染）useEffect _componentDidUpdate（初次渲染以及更新渲染）useEffect _componentWillUnmount（清除操作）useEffect _async/await（异步执行）总结:What's useEffect to do?useContextuseRed

2022-02-23 10:57:16 467

原创 Js浏览器窗体宽高,用户屏幕可视区域大小位置及如何制作吸顶

浏览器对象浏览器当前窗口的宽高document.documentElement.clientWidth 和 document.documentElement.clientHeight 是获取浏览器当前窗口视图区域（也就是说不包括工具栏、滚动条等）的实际宽高（旧的HTML标准是写作document.body.clientWidth/clientHeight，已过时，建议大家用新标准来描述）由于IE8-会把这个属性当作整个文档的宽度或高度，而JQ的$(window).height()在部分浏览器下也

2021-10-31 18:31:17 634

原创移动端触摸相关事件踩坑（touchmove默认事件以及passive）

移动端移动事件监听（touch、默认行为）最近在写一个移动端网页中会遇到滑动事件监测问题，来解决用户在canvas画布中移动效果touchmove.默认触发事件e.preventDefault（）没有生效. 会导致用户在滑动canvas时会出现移出网页以及在安卓手机下.瞬间滑动会触发三个事件stat->move->end 三者但是在长按之后会发生一个奇怪的现象,canvas脱屏造成半片区域空白 -->其实也是move中没有阻止默认事件的原因所致的this.mycanvas

2021-10-19 14:21:04 7395

原创一篇大白话读懂VueX

Vuex大白话讲解老规矩：引入一下vue文档的话Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。比较难以理解,那我们可以先设想一下他的应用场景是什么**在vue的data数据存储中,我们为什么用函数形式来书写data？答：各个模板之间可能会存在变量冲突,利用函数形式可以更好的避开各个组件的冲突那我们可以设想一种情景如果我们做一个电商系统,每一个页面之间都要收到购物车中的数据,例如首

2021-09-16 17:35:56 246

原创 vue-awesome-swiper爬坑指南

canvas实现图片拖拽已经根据鼠标放/缩图片效果核心API想法及思路注意事项计算公式及定义变量：核心APIcontext.drawImage（）详情请看菜鸟教程：canvas drawImage监听事件：onmousedown：鼠标点击onmousemove：鼠标移动onmouseup：鼠标抬起onmousewheel:鼠标滚轮监听实现方法缩小比例想法及思路canvas动画就是一次次的擦除重绘，就像是小时候看的动画片，每一帧播的很快，因为视觉停留，看起来像是连续动画而已注意事项

2021-09-11 16:13:02 302 1

原创简单的手写promise

const PENDING = 'PENDING';const FULFILLED = 'FULFILLED';const REJECTED = 'REJECTED';class Promise {constructor(executor) {this.status = PENDING;this.value = undefined;this.reason = undefined;// 存放成功的回调 this.onResolvedCallbacks = [];// 存放失败的回调 this

2021-08-27 09:35:34 64

转载 vue的diff算法

**今天浅读一下vue的diff算法有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM，当virtualDOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。diff的过程就是调用名为patch的函

2021-08-27 09:30:21 138

原创浅谈react和vue的区别

在近期面试过程中，框架部分经常会遇到vue和react的对比,如此,在下整理一下react和vue的区别数据可变性react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpd.

2021-08-27 09:19:56 2003

原创如何深入理解Vue的生命周期？

生命周期的钩子函数我们首先来讲vue的生命周期其实也就是8大钩子函数(手动狗头)beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed看似简单，但是是也非也,我们学习技术就要深入要么不学，要么就好好理解,首先我们去vue文档中找一下VUE的生命周期图片这张图片充分说明了vue的生命周期,当有人问我们这个问题时,确实可以甩出这张图片来解释所有问题,那今天我来深入这张图片细致了解一下v

2021-08-12 23:14:07 131

原创 css布局常遇问题

BFC问题通过float：left布局我们经常会遇到图## 标题片过宽之后脱离文档流解决办法：overflow：hidden解决bfc脱离文档流的问题float布局两种布局1.圣杯布局和双飞翼布局圣杯布局和双飞翼布局的目的：通过float来实现页面布局圣杯布局运用padding 双飞翼布局只运用marginclearfix手写.clearfix：after{content：‘’；display：table；clear： both；}.clearfix{*zoom

2021-08-02 14:37:15 73

原创 2021-07-27

uniapp@uniappuniapp 手机刘海屏适配问题/**判断手机是否为iphoneX系列*/uniappIsIPhoneX() {let isIphoneX = false;let systemInfo = uni.getSystemInfoSync();// #ifdef MPif (systemInfo.model.search(‘iPhone X’) != -1 || systemInfo.model.search(‘iPhone 11’) != -1 || systemI

2021-07-27 11:44:17 201

原创 vue项目中创建modal弹窗组件（父子组件传递）

带着项目来复习一下vuecli父子组件传递首先modal组件是每个页面创建所必须的具体展现形式如下这就需要我们定义一个子组件信息,在每个页面时需要引用modal组件来自定义文本信息这是我在modal组件中写入的信息,以上信息要提供给父组件自定义编辑（类似父子组件协商定义的接口）html中自行编辑<div class="modal" v-show="showModal"> <div class="mask"></div> <di

2021-04-26 09:39:17 1691

原创 vue电商网站调用后台接口实现前端页面加载（动态更新）

利用动态接口在商城首页实时更新我们的页面首先我们来看一下后台的接口封装的axios再次不再赘述,在这里我们只讲在vue实例中发起axios的方法以及提取照片做二维数组的方法首先我们看一下vue实例中methods方法中的init（）在这里提醒大家两点,其中是axios由客户端提供参数的方式为params：{}第二：数组slice和plice方法的区别：前者不会返回新的数组,后者会返回新得数组在属性中我们设置了phoneList存储接收到的数组变量OK那么下一步我们来动态引入在s

2021-04-25 12:18:05 824

原创通过swiper5了解vuecli脚手架的底层原理

对比swiper5轮播图对vuecli项目的推测在学习利用swiper插件构建轮播图时，查看了利用原生js和vuecli项目搭建中的用法，通过对比来了解vue底层构建：让我们一起来看一下我搭建的原生js在javascript中：在原生js中就是创建了一个Swiper对象且传入参数‘.swiper-container’和’swiper-button-next‘，‘.swiper-button-prev’参数构成的object对象,对html页面进行渲染,来完成js对html的传导ok,很好理解在

2021-04-25 09:20:13 166

原创带题讲解js中微任务和宏任务

javascript中微任务、宏任务的了解和简单小测首先我们来插入代码,先进行代码分析来进入情景setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); console.log('4

2021-04-22 08:26:27 114

原创接口错误拦截

接口错误拦截代码// 发请求时设置基础值axios.defaults.baseURL='/api';axios.defaults.timeout=9000;// 接口错误拦截axios.interceptors.response.use(function(response){ let res = response.data; if(res.status == 0){ return res.status; }else if (res.status == 10){ wi

2021-04-20 09:03:28 379

原创 vuecli

*商城项目中封装sotrage详解释为什么要封装storage？Storage本身有API，但只是简单的键值对Storage只存储字符串，需要人工转换为json对象Storage只能一次性清空，不能单个清空**1.首先获取网页中原有的storage**getStorage(){ return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) ||'{}') },**2.查询方法storage方法：直接获取

2021-04-19 15:17:31 82

原创 VueRoute传递参数的两种规则

vuerouter的配置以及传递参数1/首先我们第一步来制定两个路由规则并进行注册const one = { template:'#one', created:function(){ console.log(this.$route); } } const two = { template:'#two', created:function(){ console.

2021-04-12 09:32:50 239

原创 vue父子组件传值

Vue父子组建之间的传值：1 父组件向子组件传值父组件向子组件传值是通过属性的方式传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。在父组件中引入子组件；并在components中注册子组件；通过属性向子组件中传值template> <div>

2021-04-12 09:26:54 145

原创 VUE自定义组件data引用方式的理解

自定义组件在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑：为什么自定义组件在利用时,data变量引用方式为函数引用Vue.component("this",{ template:'#info', methods:{ add(){this.number++} }, data:function(){

2021-04-06 15:03:34 3904

原创 VUE中v-for造成数据混乱问题及解决方法

## 关于v-for遍历造成dom数据混乱问题有关问题图解首先我们创建一个可以双向交互的列表<div id="app"> <form > <input type="text" v-model="name"> <input type="submit" value="添加" @click.prevent="add()"> </form>

2021-04-06 10:09:09 3708 1

原创 rkdown编辑器

web前端笔记（一）css篇css定位：相对定位.box{position：relative；//相对定位positon：absolute；//绝对定位positon：fixed；//不动定位}//相对定位得偏移量是针对当前位置//absolute在没有上下文relative是参考当前页面不再区分租元素还是父元素.假如：设置top left bottom right均为为20px可以实现完美定位//fix是在页面上面不动的；CSS选择器：6个类型1.id选择器#id1{

2021-03-23 10:05:10 102

qq_44880532的博客