- 博客(34)
- 收藏
- 关注
原创 CSS中样式继承+优先级
1、继承属性是指在父元素上设置了这些属性后,子元素会自动继承这些属性的值,除非子元素显式地设置了不同的值。字体font系列文本text-aligntext-identline-heightletter-spacing颜色color列表list-style可见性visibility光标cursor透明度opacity背景background系列2、非继承属性是指在父元素上设置这些属性后,子元素不会继承这些属性的值,除非子元素显式地设置了相同的属性。
2025-01-18 22:22:44
1263
原创 React Router
useNavigate 是一个 Hook,允许你在函数组件中进行编程式导航。它可以用于在事件处理程序中、条件逻辑中或任何需要动态导航的地方。Navigate 是一个组件,通常用于在渲染时进行导航。它可以在路由中声明性地使用,适合在需要条件导航的场景下,比如在某个条件满足时自动重定向。在构建 React 应用时,React Router 提供了灵活而强大的路由解决方案,使得管理导航和组件渲染变得简单高效,增强了用户体验和应用的可维护性。
2024-12-01 22:23:39
921
原创 useEffect、useCallback、useMemo和memo的区别
在构建现代 React 应用时,性能优化是一个关键考虑因素。随着组件的复杂性增加,合理管理状态和副作用变得尤为重要。React 提供了多个工具来帮助开发者优化组件性能,其中最常用的包括 useEffect、useCallback、useMemo 和 React.memo。这些 API 各自有着不同的用途和机制,但它们的目标一致:通过有效地缓存和副作用,提升应用的响应速度和用户体验参数setup是一个函数,称之为副作用函数,在函数内可以放置要执行的操作,同时需要返回一个清理(cleanup)函数de
2024-11-22 18:25:10
860
原创 React——useCallback
useCallback是一个允许你在多次渲染中缓存函数的 React Hook。它返回一个记忆化的回调函数,只有在依赖项改变时才会更新。这有助于避免在每次渲染时都创建新的函数实例,特别是在将回调函数传递给子组件时。
2024-11-19 12:14:34
1784
原创 React中事件绑定和Vue有什么区别?
React使用事件代理(Event Delegation)技术,将所有事件监听器绑定到document上,而不是直接绑定到具体的DOM元素上。:React将所有原生DOM事件封装成合成事件,通过统一的接口暴露给开发者。:Vue提供了丰富的事件修饰符(如.stop、.prevent等),方便开发者处理复杂的事件逻辑。如果你在类组件中使用事件处理函数,通常需要显式绑定 this,或者使用箭头函数来自动绑定。:Vue通过指令(如v-on)来绑定事件,指令内部会处理事件的监听和分发。因此,不需要额外的绑定。
2024-11-17 21:03:46
596
原创 使用ref操作DOM(React)
注:在这个例子中,itemsRef 保存的不是单个 DOM 节点,而是保存了包含列表项 ID 和 DOM 节点的 Map。:在事件处理函数中访问 ref 是安全的,因为这些函数是在用户交互后执行的,此时 DOM 元素已经存在并可以安全访问。手动操作另一个组件的 DOM节点会使你的代码更加脆弱,所以想要暴露其DOM节点的组件必须。暴露出去了,所以能在父组件直接访问和操作该DOM元素,也就是说能够对子组件的DOM元素执行。的列表绑定ref时,上面的一般方法显然是行不通的,因为Hook 只能在组件的。
2024-11-05 21:09:47
1332
原创 第三章:数据链路层(一)
链路::网络中两个结点之间的物理通道数据链路:网络中两个结点之间的逻辑通道,把控制实现数据传输协议的硬件和软件加到链路上就够构成了数据链路帧:链路层的协议数据单元,封装网络层数据报为网络层提供服务。无确认无连接服务、有确认无连接服务、有确认面向连接服务(有连接一定有确认!!链路管理,即连接的建立、维持、释放(用于面向连接的服务)组帧流量控制(限制发送方)差错控制(帧错/位错)
2024-11-03 22:35:07
584
原创 node和npm
node.js是一个基于Chrome v8引擎的js运行环境包是基于内置模块封装出来的,提供了更高级、更方便的API,极大的提高了开发效率。
2024-10-24 11:28:45
1268
原创 Props
第一种方式错误是因为:给 watch 传递的是一个值而不是响应式数据源,而watch监听的应该是一个可变的数据,不然没有意义。如果你想要将一个对象的所有属性都当作 props 传入,你可以使用没有参数的 v-bind,即只使用 v-bind 而非 :prop-name。注:子组件中数据的更新是由父组件数据更新后流下来的,而不是在子组件中去更改prop,prop只是。原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。而子组件想在之后将其作为一个局部数据属性。
2024-10-20 21:07:55
531
原创 什么是组合式函数?
组合式函数在 Vue 3 中是实现逻辑复用、清晰结构和避免命名冲突的重要工具。它们增强了代码的灵活性、可测试性,适应了 Vue 3 的响应式系统,是现代 Vue 开发中不可或缺的一部分。
2024-10-13 10:06:42
1038
1
原创 watch和watchEffect的区别
即刻回调:是指当设置了监听器后,回调函数将在监视生效的同时立即执行。不即刻回调意味着回调函数不会在监听器设置后立即执行,而是等待被观察的响应式数据发生变化时才会执行。通过选项 { immediate: true } 来实现即刻回调。深层监听的有无主要区别在于如何处理嵌套对象或数组的变化。
2024-10-13 09:48:32
682
原创 Vue2和Vue3的区别
Vue 3 在多个方面进行了显著的改进,增强了性能、灵活性和可维护性,特别是在响应式系统、API 设计和 TypeScript 支持等方面。这些改进使得 Vue 3 更加灵活、强大,适合现代 Web 应用的需求。
2024-10-09 21:42:19
28466
1
原创 大学生成长档案项目复盘(前端)
通过以上的分析,对本次项目进行总结:1、项目已经完结,目前在交付测试2、第一个对接甲方的项目,除了效果实现,也开始去考虑用户的需求,努力实现用户利益最大化,增加了项目经验3、对一些技术栈的使用更加熟练4、在项目开发中,加强了团队合作意识,体味到了伙伴们并肩作战的幸福感前提:此处的精彩是指在这一模块学到了很多背景:几乎所有完整的后台管理系统都是要配备权限管理的,它能够使不同等级用户登录时动态的去设置这个用户该有的权利,也有利于后期的维护提醒。
2024-10-03 19:23:38
1012
原创 pinia(vue3)
命名规范:user+仓库名+Store (那个对象的名字)介绍:是最新状态管理工具,是Vuex的替代品。注:pinia要在2.0.0以上的版本。
2024-09-22 17:15:52
270
原创 防抖(vue3)
在Web开发中,经常会遇到一些高频触发的事件,如窗口大小调整(resize)、滚动(scroll)、输入框内容变化(input)等。如果不对这些事件的处理函数进行适当的限制,就可能导致在极短的时间内执行大量的函数调用,这不仅会消耗大量的计算资源,还可能导致浏览器界面卡顿或响应迟缓。在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。简单来说,就是给事件处理函数加了一个延迟执行的“缓冲期”,只有在这个“缓冲期”结束后,如果事件没有被再次触发,那么才会执行事件处理函数。
2024-09-19 08:21:50
392
原创 羊肉串改为驼峰命名
语法:str.replace(oldSubstr, newSubstr) 用newSubstr来替换oldSubstr,返回更新后的字符串,这个更新的只是相同字母的第一个,例如:abcabc,在对a进行替换时,只会作用于第一个a。语法:str.split(separator, limit) separator:指定的分隔符(如果忽略此参数,将会把整个字符串作为数组的第一个(也是唯一一个)元素返回) limit:指定返回数组的最大长度。功能:用于提取一个字符串和一个数组的一部分,并返回一个新的字符串和数组。
2024-08-09 15:52:36
474
原创 精度问题原理及解决方法
原因:浮点数在计算机中是以二进制形式存储的,而某些十进制小数在转换为二进制时可能会无限循环,但由于计算机的资源是有限的。所以没办法用二进制精确的表示,只能确定一定的位数,例:单精度(32位),双精度(64位),然后在有限的精度情况下,最大化的接近该小数,但多多少少还是会造成一定的精度缺失。结果:0.7999999999999999。3、怎么做才能等于0.8?1、打印的结果是什么?2、为什么结果是这样?
2024-08-06 15:52:15
301
原创 vuex基本使用流程
创建store管理所有共享的状态,这个store通常包含state、mutations、actions、getter等部分。第二种提交: (在actions里经过一些异步操作后,提交到mutations中,最后改变state中对应的状态)注:小弟们不需要再安装和启用Vuex插件,因为有他们大哥“罩”着他们。第一种提交:(只涉及state和mutations)2、在store(user.js)里。
2024-07-27 21:51:34
374
原创 响应式布局时的页面分布控制
在进行响应式布局的条件下,界面宽度为360px,当界面拉长到768px时,页面分为两列;当界面拉长到1200px时,界面分为三列。
2024-07-17 10:26:22
359
原创 常用数据类型的判断
null、Array、Set、Map用typeof进行判断,输出的也都是object,无法进行区分。null的二进制,32位全是0,所以返回的是object。在js语言的第一版,所有值都设计为32位,最低三位用来表示数据类型,object对应的值是000。Set、Map:这些数据结构都是基于对象实现的,所以判断输出的是object。编写一个函数,他接受一个参数,并根据该参数的类型返回相应的字符串表示。类型(蓝色是基本数据类型,紫色是引用数据类型)判断方法(value是判断的对象)typeof直接判断。
2024-07-16 10:49:00
215
原创 js实现对象的map方法(在Object的prototype上添加)
Object.hasOwnProperty.call(this,key)就是限定整个操作只围绕调用这个方法的对象obj进行,而不牵扯到原型链上的一些东西,然后判断this所指的这个对象上是否含有遍历到的key,有的话返回true,否则,返回false。例如:将一个对象内的所有键对应的值都进行翻倍操作。6. 将对象obj循环遍历完成后也就将对象中的所有值都完成操作了,此时只需要返回存储数据的对象result就行。将遍历到的键所对应的值进行参数上的操作并存到第3步创建的空对象result中。
2024-07-10 09:50:39
331
原创 找不同项目复盘总结(前端)
通过以上的分析,对本次项目进行总结:1.完成了整个游戏的基本流程,保证整个项目能够正常运行。2.完成了websocket的学习和使用,熟练掌握websocket四种大方法的使用(onopen、onmessage、onclose、onerror);了解了心跳包的定义、使用和关闭以及断线重连的方法。3.能够熟练运用本地存储来实现条件的判断4.了解了一点部署服务器的相关操作技术栈(列觉所用的技术)JavaScriptwebsocketAjaxHTMLCSS列觉所遵循的代码规范。
2024-03-21 18:07:45
1722
3
原创 前端部署服务器(从软件的安装到部署一应俱全)
listen后面的端口号应该改为自己所用的端口号,root后面的所存位置可以改为自己设置的位置(下一步有用到)。2、两个软件都登录进去后,点击左上角的新建,在弹出的页面中,根据自己的需求更改名称;主机号就是公网ip。在左边找到你所写项目的所有文件,在右边找到你自己设置的位置,然后将左边你的所有文件拖到右边设置的位置的目录下面就可以去测试了了。到这里点击“安装”Xshell就安装完成了(Xftp安装同理),然后可以自己去按照提示进行注册登录。搜索“阿里云服务器”,并用购买服务器的手机号或者账号进行登录。
2024-03-18 20:02:07
865
1
原创 gitee上传代码到仓库
这两条语句在你创建仓库后跳转的页面上就会给你提供(在“简易的命令入门教程”里面),可以直接粘贴复制(但别忘了在这个控制台不能用快捷键Ctrl C/V,要点击鼠标右键进行复制粘贴)执行这条语句的作用是将一个名为 "origin" 的远程仓库与你的本地 Git 仓库关联起来。这条语句的作用是将暂存区的文件提交到本地Git仓库中, "first commit"这个可以自己定义,是一个备注。它的作用是将当前目录下的所有修改过的文件(包括新添加的文件和已修改的文件)添加到Git的暂存区。
2024-03-08 20:02:45
635
1
原创 静态网页作品总结
input type="text" class="check" placeholder="音乐/视频/电台/用户" onfocus="if(placeholder=='音乐/视频/电台/用户')可能是文字的line-height过大,过大的情况可能是继承了父类的line-height,而父类的ling-height过大。::-webkit-scrollbar-track-piece //内层轨道,滚动条中间部分(除去)::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个。
2023-09-11 15:57:28
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人