- 博客(114)
- 收藏
- 关注
RSS订阅原创 React useEffect 学习笔记
如果不是函数，会引发报错，也就是说，如果给回调函数添加async，这也会导致报错，因为async函数默认返回Promise，如果确实要使用异步调用，可以在useEffect内部定义一个函数，这个函数是async函数，然后再在useEffect内部调用这个函数。如果在每次useEffect调用时，不进行清除，由于useEffect内部操作是独立的，也就是说，useEffect内部的操作被看成独立的函数内容，每次调用都会重新执行一遍，并不会产生覆盖，那么每次调用时都会创建一次链接，造成多个链接。
2025-09-09 00:25:52
591
原创 Next.js学习笔记1 路由/layout/template
严格模式，在next.js项目中是默认打开的，但有时候严格模式会产生问题，严格模式在开发阶段，内部会模拟组件挂载卸载的过程，有时候，一个方法会被触发两次，如果觉得这对调试问题产生了影响，可以在next.config.mjs文件中配置关闭，但一般还是推荐打开。对于一个页面文件，文件内部也可以有自己的layout，在根布局的{children}内部，是自己页面的layout，文件夹中的页面会作为{children}嵌套在自己的layout中。文件里也可以有文件嵌套，内层文件也可以有自己的laylout。
2025-09-08 09:50:27
956
原创 React 学习笔记5 ajax/兄弟组件传值/路由
前后端通信时，一般是并不同源的，为了请求能够处理（请求可以发送，服务器端也会响应，但是浏览器会丢弃这个响应），需要在React中通过代理（和前端同一端口开一个服务器，代理服务器和前端同源，代理服务器和后端服务器不存在跨域问题，因此可以进行交互）进行配置。在接收数据的组件里订阅消息，订阅消息使用PubSub.subcribe订阅，这个函数的第一个参数是消息名，第二个参数是消息发布时触发的回调函数，回调函数有两个参数，消息名和接收到的参数。后端会根据请求，找到对应的处理函数，返回响应的数据。
2025-09-08 09:19:30
540
原创 React 学习笔记4 Diffing/脚手架
如果在旧虚拟DOM中找到了与新虚拟DOM中一样的key，则可以确定这两个节点是同一个，如果虚拟DOM中的内容没变，则直接复用，如果虚拟DOM中的内容改变了，则生成新的DOM并进行替换。对于两个组件，如果他们各有自己的css文件，且css文件中存在冲突的命名，则后引入的样式会覆盖先引入的文件，为了避免这种情况，首先，要给css的名字之前先加上module，然后，在引入样式时，给引入的样式命名，然后给组件中标签配置样式时，配置命名.样式，就可以避免冲突。包含了基础的需要的配置，并且可以下载好所需的相关依赖。
2025-09-02 16:47:50
1047
原创 React 学习笔记3 生命周期 受控/非受控组件
在React，事件绑定通过on事件名（事件名首字母大写）的形式来进行绑定。React中使用的事件，是React重新封装的自定义事件，并不是原生DOM事件，这是为了更好的兼容性考虑。React的事件是通过事件委托的方式处理的，也就是说，DOM上绑定的事件会被委托给最外层的DOM。通过这种方式提升效率。事件回调函数具有参数event，因此也可以使用event.target获得事件对应的DOM。
2025-09-01 10:56:42
611
原创 React 学习笔记2 props、refs
在使用组件时，有时希望组件中展示组件定义外部的数据。在组件上有一个props属性，在通过类式方法定义组件时，可以在渲染组件时，在组件标签上添加属性，这个属性会以key value的形式放入props。
2025-08-25 16:21:38
774
原创 React 学习笔记1 组件、State
React是用于构建用户界面的JS库。React是由Facebook（Meta）开发的，是开源的。React采用组件化模式、声明式编码，可以提高开发效率，提高代码复用率。使用React Native，可以用React语法进行移动端开发，可以使用JS编写安卓和IOS应用，而不需要使用java oc swift。React使用虚拟DOM和Diffing算法，减少与真实DOM的交互。
2025-08-22 19:09:26
1065
原创 HTTP0.9/1.0/1.1/2.0
每次一个请求处理完成后连接不会直接断开，一次通信中，可以发送多个请求，不会反复发送TCP请求，没有不断建立和断开连接的开销。HTTP1.0中，使用短连接，当服务器返回数据之后，就会断开连接，每次发送请求，都要重新建立连接（三次握手）然后传输数据，然后再断开连接。一般请求都是客户端向服务器发起，但有了服务器推送，服务器端可以告知客户端还有信息要传输，客户端不关闭连接，而是待机等待。首部压缩/头部压缩：建立头部索引表，将传输过的头部存入表中，下次传输时，如果表中有这个头部，就传输索引号，否则传输请求头。
2025-08-17 23:52:13
212
原创 VUE3 学习笔记2 computed、watch、生命周期、hooks、其他组合式API
在vue3中，虽然也能写vue2的computed，但还是更推荐使用vue3语法的computed。computed是一个函数。它的参数接收一个函数，这个函数可以是普通函数，也可以是箭头函数，由于vue3中没有this，所以无需关注函数类型对this指向的影响。这个函数就是计算的方法函数。但是通过这种方式定义的计算属性，是只读的，无法对属性进行修改。如果计算属性同时需要读取和修改，要通过下面这种形式：传入computed的参数是一个对象，在对象中配置get和set。
2025-08-15 09:50:45
1409
原创 JavaScript 学习笔记1
如果通过new 构造函数()创建实例，实例的原型是构造函数的原型对象，而构造函数身上，除了有指向原型对象的prototype，由于构造函数也是Function的实例，构造函数身上也有指向Function原型对象的__proto__，而原型对象又是Object的实例，所以身上有指向Object原型对象的__proto__。变量类型，是指变量赋值后的类型，也就是变量内存值的类型，比如let demo = {}，给demo赋值的数据类型是对象，但是demo的类型不是对象，demo是指向对象的引用。
2025-08-12 10:08:57
1052
原创 JS深拷贝 浅拷贝、CSS垂直水平居中
浅拷贝，通俗来说，就是把一个对象obj1的属性值直接拷贝给另一个对象。不管这个值是普通的数据类型，还是引用类型。实现方法：1.使用Object.assign方法2.使用扩展运算符3.手写拷贝函数拷贝对象的属性与源属性共享相同的引用。当更改源对象或拷贝的副本时，可能导致对应的对象也发生更改。如果对象obj1是obj2的浅拷贝，obj1！==obj2成立。两个对象的属性有相同的名称且顺序相同、属性值相等、原型链相等。对拷贝的副本的顶层属性的重新赋值不会影响源对象；对拷贝副本的嵌套对象的重新赋值
2025-08-11 21:51:50
944
原创 CSS优先级、HTTP响应状态码
优先级：看CSS的。行内样式/内联样式：直接在HTML元素的style属性中编写CSS样式。这种方式适用于少量样式的情况，但不推荐在大规模开发中使用，因为它会使HTML文件变得冗长和难以维护。用户important>用户样式>浏览器样式内联样式>内部样式表>外部样式表内部样式表：将CSS代码直接写在HTML文件的<head>标签内的<style>标签中。这适用于仅适用于单个HTML文件的样式，但不推荐在多个页面中重复使用。
2025-08-10 23:58:51
275
原创 node.js 学习笔记3 HTTP
path模块主要用于操作路径。要使用path，首先需要引入path模块。用于拼接规范的绝对路径。如果想拼接一个路径，有时候是使用字符串手动拼接的，但由于系统的规范不同，路径中的\和/无法统一，有时候手动拼接的字符串路径并不标准，path.resolve可以提供一种标准的绝对路径。path.resolve的参数是要拼接的路径。path.resolve中，相对路径可以省略./，但不能以/开头，以/开头的路径会被识别为绝对路径，作为根路径与其他路径参数进行拼接。获取操作系统的路径分隔符。
2025-08-10 20:02:09
818
原创 CSS BFC
文档中有三种流：普通流-块级元素、行内元素等普通标签。定位流-定义了position。浮动流-定义了float为left或者right。在实际开发中，这三种流之间可能会存在问题。比如margin重合。margin重合问题：如果两个div上下相邻，两个div同时设置了同一边的margin，margin会产生重合。比如上面的div设置了20px的margin-bottom，下面的div设置了30px的margin-top，两个div之间的margin并不是50px，而是会重合成30px。
2025-08-08 23:27:41
1109
原创 node.js 学习笔记2 进程/线程、fs
进行中的程序。比如有一段程序，程序已经载入内存了，CPU正在执行这段程序，这时候就会产生一个进程。进程，也可以看做程序的一次执行过程。在window中打开任务管理器，可以查看计算机中的所有进程。一个进程中执行的一个执行流。线程是属于某个进程的。一个进程中至少包含一个线程，可以有多个线程。比如进程A可能有一个线程a，进程B可能有线程a,b,c。线程也可以通过指令查看。pslist -dmx 进程ID。进程ID可以在任务管理器中查看。
2025-08-08 16:11:45
1008
原创 HTTP缓存机制
当前后端通信时，会互发HTTP报文，HTTP报文由header、start line、body组成。（header）允许客户端和服务器通过 HTTP 请求（request）或者响应（response）传递附加信息。
2025-08-08 10:49:11
808
原创 VUE2 学习笔记 合集
VUE2 学习笔记1 VUE特点、开发者工具、入门Demo-CSDN博客VUE2 学习笔记2 数据绑定、数据代理、MVVM_vue2的数据绑定-CSDN博客VUE2 学习笔记3 v-on、事件修饰符、键盘事件_vue2组件 点击事件-CSDN博客VU2 学习笔记4 计算属性、监视属性-CSDN博客VUE2 学习笔记5 动态绑定class、条件渲染、列表过滤与排序_vue2 :class-CSDN博客VUE2 学习笔记6 vue数据监测原理_一-CSDN博客VUE2 学习笔记7 v-model、
2025-08-05 20:28:23
367
原创 VUE2 学习笔记18 路由守卫
有时候，并不是所有的导航区都可以随意点击，需要具备某些权限，才能看到某些导航区对应的展示区。比如，希望用户在未登录的情况下，无法访问个人中心。这种效果可以通过路由守卫实现。路由守卫在VueRouter的实例对象上，通过beforeEach调用，beforeEach在每一次路由切换之前都调用一次beforeEach内部设置的函数。假设VueRouter实例为router，在路由配置文件中，通过router.beforeEach配置全局前置路由守卫。全局前置路由守卫在页面初始化、及每次路由切换前被调用。
2025-08-05 16:38:15
673
原创 VUE2 学习笔记17 路由
路由器：router，在日常生活中，路由器的一个接口可以连接一台设备，连接到路由器接口的设备可以上网。路由器可以管理多个路由。路由：route，是一种对应关系，对应某个地址和实际的设备或页面等，是一种key-value对应。在前端开发中，路由用于实现单页面应用。多页面：网站有很多个HTML，当显示不同的页面时，在多个HTML间进行跳转，通常要开多个页签。
2025-08-04 22:06:59
953
原创 VUE2 学习笔记16 插槽、Vuex
在编写组件时，可能存在这种情况，页面需要显示不同的内容，但是页面结构是类似的，在这种情况下，虽然也可以使用传参来进行，但传参时，还需要编写props等逻辑，略显重复，而且数据的结构还需要是类似的，不能显示十分不同的数据，但可以用插槽解决这个问题。
2025-08-03 20:28:20
663
原创 VUE2 学习笔记15 代理
配置代理时，相当于在前后端交互时，有一个代理服务器，代理服务器和前端的端口号一致，当前端向后端请求数据时，不直接给后端发送请求，而是把请求发给代理服务器，代理服务器把请求转发给后端服务器，代理接收到后端服务器的数据时（由于代理服务器和后端服务器都是服务器，服务器之间通过HTTP请求通信，也不存在跨域问题），代理服务器把数据反馈给前端。思考一种情况，对于一个搜索列表，如果初始进入列表时，显示的是欢迎词，当搜索时，数据未返回时，显示的是加载画面，当数据返回后，显示的是数据列表，当数据请求失败时，显示错误信息。
2025-08-01 10:00:33
642
原创 VUE2 学习笔记14 nextTick、过渡与动画
可以通过这些数据调用第三方库。可以一开始就执行一次进入激活时的样式，通过appear属性控制，当绑定true时，表示一开始就激活一次，:appear="true"，也可以直接写appear，和:appear="true"的效果是一样的。一般来说，进入的起点和离开的终点样式是一样，而进入的终点和离开的起点是一样，因此写样式时一般写 .v-enter, .v-leave-to{}和.v-enter-to, v-leave{}。.v-enter-to{} 进入的终点，对应元素进入的动画完成时的样式。
2025-07-31 10:02:45
907
原创 VUE2 学习笔记13 本地存储、自定义事件、全局事件总线、消息订阅与发布
click、keyup等事件，是Vue内置的事件，而Vue也支持开发者自己自定义事件。绑定自定义事件在标签中，如果想设置自定义事件，要以v-on:自定义事件=“自定义事件要触发的methods”的形式进行。但是，与内置的click事件不同，自定义事件没有设置的触发条件。那Vue如何决定何时触发自定义事件呢？触发自定义事件，需要通过一个方法主动触发，它是this.$emit方法，语法是this.$emit(要触发的自定义事件，触发事件时传给methods方法的参数)。
2025-07-31 00:21:49
659
原创 VUE2 学习笔记12 ref、父子组件传参、mixin
要注意，在父子组件传值的过程，如果key:value不是使用绑定变量的形式，而是使用固定的写在标签上的value传递，那么value值默认是字符串，对字符串进行加操作，会进行字符串拼接。中部列表框，列表显示已经有的TodoList列表，列表内部还有一个子组件，这个子组件控制每条列表数据；在对组件进行复用时，有时候，不同地方的组件，需要显示某些不一样的信息，这就可以通过父子组件传参来进行操作，在父组件使用子组件标签时，传入父组件指定的数据，子组件显示父组件传入的数据，这个功能可以通过props实现。
2025-07-30 08:23:45
863
原创 VUE2 学习笔记11 脚手架
Vue的js文件由Vue核心和Vue模版解析器构成，Vue模板解析器的代码体积并不小，如果Vue不提供非完整版的Vue，在项目打包之后，打包生成的文件中也含有Vue的Js文件，并且这个文件也是由Vue核心和Vue模板解析器构成，而且，由于文件已经打包完成，并不需要Vue模板解析器了。Vue最终会把Vue.config.js文件输送给Webpack，Webpack基于Node.js，Node.js的模块化是基于Common.js，因此在Vue.config.js中，也使用Common.js语法。
2025-07-28 23:24:29
633
原创 VUE2 学习笔记10 组件
首先理解组件的思想在传统的前端开发中，一堆CSS、HTML、JS互相引用，会造成逻辑链条的混乱。考虑这样一种情况，对于不同的页面，需要同样的头部header和底部footer，这就导致，需要在不同的HTML页面中，会引入同样的CSS和JS，这样虽然没有很大的问题，但是会造成CSS、JS的依赖关系混乱，对于一个CSS，如果想分析这个CSS影响了多少页面，有时候是很难分析的，而且，如果修改了这个CSS，可能影响很多页面，有时候会造成很难理解的样式效果。如果JS之间存在依赖关系，依赖关系也是很难维护的。而且，对于
2025-07-28 09:11:34
712
原创 VUE2 学习笔记9 生命周期
vue2内置了很多生命周期函数，也叫生命周期钩子、生命周期回调函数等。每个函数会在vue运行的特定时机触发。在生命周期函数内部，this指向vm实例或组件。生命周期函数的名称是不可以修改的。vue提供了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed四对函数。除这四对八个钩子之外，vue还有其他三个生命周期钩子，这三个钩子涉及路由，会在学路由的时候介绍。整个生命周期图示如下：先分析整个生
2025-07-27 19:53:00
724
原创 VUE2 学习笔记8 v-text/html/cloak/once/pre/自定义
除了vue定义好的指令，开发人员也可以自己定义指令。vue中的指令，其实一般就是对DOM的修改操作进行了封装。自定义指令的语法，在标签中，和一般的指令语法是一样的，v-自定义指令名="指令绑定的数据"。对于自定义指令，需要在new vue时进行配置：通过directives:{}进行配置，指令以key:value的形式进行配置，key是自定义指令名，value配置语法有两种，一种value值是函数式，一种value值是对象式。当把value配置成函数时，指令的效果不靠返回值，而是靠函数的参数。
2025-07-27 00:14:20
1080
原创 VUE2 学习笔记7 v-model、过滤器
对于vue中的表单，在实际使用时，虽然表单上有action属性，但是一般vue的表单并不通过action把表单提交到某个地址。一般是点击提交时绑定事件，在事件内部处理数据并向服务器发起请求。对于单选框中的数据，并不能单纯通过v-model绑定对应变量来实现。因为v-model默认收集value值，但单选框radio并没有value值。这时需要手动为单选框设置value属性，value属性的值就是希望v-model收集到的数据。对于多选框，同样不能单纯绑定v-model。
2025-07-26 18:43:12
717
原创 VUE2 学习笔记6 vue数据监测原理
指的是存在data中的数据。如果我们修改了data中存储的数据，Vue会监测到这种修改，并且把修改反应到页面上。Vue的这种监测是通过Vue上默认的监视实现的。与watch不同，watch是Vue提供给开发者使用的方法。但不管是默认监视，还是watch，背后的原理都类似。了解Vue的监视原理是很重要的，如果不知道，当自己写的某种数据修改不能被Vue识别到，就很难去分析成因。
2025-07-25 16:46:12
779
原创 VUE2 学习笔记5 动态绑定class、条件渲染、列表过滤与排序
vue模版中，使用动态类名绑定，一般可用以下class类名，变量名里存储类名的字符串，一般用于样式类名不确定，需要根据情况改变的情景下。但这种方式只能绑定一个类名。:class="数组名" （，数组里可存放多个类名，可以通过数组动态切换某个类名是否存在，用于要绑定的类名个数不确定，名字也不确定时）:class="{ 类名：true/false，类名2：true/false }" （
2025-07-24 23:39:43
1185
原创 VU2 学习笔记4 计算属性、监视属性
先写一个小demo，页面上有输入姓和名的地方，如果现在需要实现某个功能，不管firstName和lastName输入几位，都只取前三位、首字母大写。这时候如果都写在{{}}里，相关的逻辑就会过多（都写在{{}}里当然也不会报错，只是可读性比较低）。一种改进方式，是可以把逻辑写在methods里。注意：如果在{{}}里使用vm的methods，需要给函数加括号，否则显示的就是函数本身。当data数据发生变化时，模版会重新进行解析。方法也会重新进行调用。所以data的变化会反馈在{{}}中。
2025-07-23 16:59:38
669
原创 VUE2 项目学习笔记 ? 语法 v-if/v-show
写项目的时候，用v-if/v-show显示上下箭头，然后写了:v-if的语法，本意是想绑定数据，但是发现数据失效了，不管是true值还是false值都能显示。但是当解析到这行语法的时候，dataList还没返回，因此控制台会报错找不到goodsList。页面渲染的时候，需要服务器传过来的对象中的一个属性，然后根据这个属性用v-for渲染标签，结果是语法写错了，v-if和v-show绑定变量和方法不需要加:，直接写就可以。这里写的v-for=".... in dataList.goodsList"
2025-07-22 21:33:17
227
原创 VUE2 学习笔记3 v-on、事件修饰符、键盘事件
Vue.config.keyCodes.自定义别名 = 按键编码比如Vue.config.keyCodes.myEnter = 13，可以定义一个叫myEnter的按键，他在按键编码为13的键被按下或抬起时被识别。但这种方法也不太推荐。
2025-07-22 16:20:56
1013
原创 VUE2 学习笔记2 数据绑定、数据代理、MVVM
数据代理是通过一个对象，代理另一个对象中属性的操作。比如我有一个对象Obj，他有属性x，我访问x，使用Obj.x访问就可以了。但如果还有另一个对象Obj2，Obj2也想访问x，也想修改x，则可以使用代理。通过Obj2代理对Obj1中属性的操作。也就是说，虽然Obj2中没有相关的属性和方法，但是可以通过Obj2代理对Obj1的操作。x : 100,get(){},},})这里给obj2也添加属性x，但当访问obj2的x时，返回的是obj的x。修改obj2的x时，修改的是obj1的x。
2025-07-20 23:39:56
832
原创 手写New
最后判断一下构造函数运行的返回值是对象，还是一般数据类型。如果是一般数据类型，则返回一开始定义的对象，否则返回构造函数的返回值。首先，new应该返回一个对象，该对象的原型指向要new的函数，获得要new的函数上面的属性和方法，在执行一次构造函数，获得构造函数设置的属性值、运行构造函数中需要运行的方法。在要构造的函数中打印this，发现打印的结果是Window。写一个函数，接收要new的函数，以及new的参数。执行一次让构造函数中设置的内容生效。
2025-07-20 08:43:51
264
原创 JS红宝书学习笔记 对象1
字面量定义age : 18,getData(){},new Object()实例定义为对象设置一些属性Js对象中有一些内部属性，可以通过设置属性来控制对象的特征。这些属性是设置在对象中的某个具体的属性上的。设置是否可以通过delete删除并重新定义，是否可以修改特性。默认为true。Enumerable设置是否可以通过for-in循环。默认为true。Writable设置值是否可以被修改。默认为true。Value包含对应的值。默认对undefined。get。
2025-07-20 01:15:05
1098
原创 node.js学习笔记1
首先硬盘会把和游戏相关的程度载入到内存，然后如果有指令需要运行，CPU会处理这些指令，执行过程中的视频信号会交给显卡，显卡传给显示器，音频信号会交给声卡，声卡交给外部播放设备。载入到内存之后，CPU就能运行了，在CPU运行的过程中，如果发现需要传输视频信号，有内容需要在显示器呈现，就会交给显卡处理，显卡处理完，就会交给显示器，显示器最后显示出页面。服务器端开发：对于一个上线的项目，光有服务器，是无法运行程序的，而node.js装在服务端，node.js可以接收客户端的请求，并把资源返回，使程序正常运行。
2025-07-19 22:47:12
1017
原创 VUE2 学习笔记1 VUE特点、开发者工具、入门Demo
可以用来把数据构建成用户界面。自底向上，可以先从一个非常轻量级的框架开始，渐渐往里面放一些需要的插件，不需要一开始就从一个大型的项目库开始。（与命令式相反，命令式是指一行代码就是一个命令，每一行代码发出一条命令，多个命令组合达成一个效果，比如JS），声明式是先声明框架，给框架绑定数据，达成某种效果。让编程人员无需直接操作DOM，提高开发效率。
2025-07-19 21:36:31
765
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人