- 博客(78)
- 收藏
- 关注
RSS订阅原创 React学习笔记（三）——React 组件通讯
② 通过 prop-types 可以在创建组件的时候进行类型检查，更合理的使用组件避免错误。① 理解props都是外来的，在使用的时候如果数据类型不对，很容易造成组件内部逻辑出错。② 给子组件标签添加属性，值为 state 中的数据。③ 子组件中通过 props 接收父组件中传递的数据。② props 中 children 属性的使用。校验接收的props的数据类型，增加组件的稳健性。通过 props 将父组件的数据传递给子组件。通过 props 将子组件的数据传递给父组件。
2024-09-20 10:39:46
829
原创 浅谈vue2.0与vue3.0的区别（整理十六点）
个人实际开发中，使用下来感受到的区别和不同点，欢迎大佬们修正与补充。借用人民日报今年的广告语，“请你努力，为了你自己。
2024-09-16 22:50:32
1406
原创 React学习笔记（二）——React 组件
了解 React 组件作用，和创建组件的方式组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑，这样可以提高项目代码的可维护性。使用函数function使用类class掌握类组件中状态的定义与使用定义state属性定义组件状态，属于组件自己的数据，它的值是个对象。使用state的时候通过this。数据发生变化，驱动视图更新。super()// 给 this 增加一个属性 state。
2024-09-15 22:12:24
1037
原创 华雁智科前端面试题
此博客记录，秋招第一次很简单的手撕代码笔试题。哭死，希望能给个面试机会。一定能找到工作的。加油，多积累面试经验，借用人民日报今年的广告语，“请你努力，为了你自己。祝大家秋招都能收到offer。
2024-09-14 17:38:02
712
原创 React学习笔记（一）——React 入门
了解 react 的历史背景和基本概念React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。React 是最流行的前端框架之一。对比近两年Vue 和 Angular的下载量，还有 2021 年开发者使用的 web 框架的比例，可以看到 React 是前端工程师应该必备技能之一，现在很多大厂也在使用它。
2024-09-13 15:06:03
1503
原创 Vue3.0项目实战（五）——大事件管理系统个人中心页面实现
ChatGPT 3.5 的使用 (4.0 使用方式一致，回答准确度更高，但付费，且每3小时，有次数限制)打开 vscode， 搜索并安装插件 Copilot。登录 github，试用 Copilot。Ctrl + enter： 查看更多方案。正常注册流程 (IP限制，手机号限制)谷歌搜索：chatgpt 免费网站列表。② 页面中校验后，封装调用。付费，免费使用30天。
2024-09-10 23:28:16
671
原创 Vue3.0项目实战（四）——大事件管理系统文章管理页面 - [element-plus 强化]
window.URL.createObjectURL(file)：使用浏览器的 URL.createObjectURL() 方法，为传入的 file 对象（即用户选择的文件）生成一个本地的临时 URL。vue2.0 v-model 是 :value 和 @input 的简写，相当于传递了一个 value 属性给子组件，自定义的事件是 input 事件。立即将图片对象，存入 formModel.value.cover_img 中，将来点击发布按钮的时候，提交给后台的服务器。
2024-09-10 11:15:03
1068
原创 Vue3.0项目实战（三）——大事件管理系统首页 layout 架子与文章分类的实现
组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑。① 封装组件 article/components/ChannelEdit.vue。① 新建 api/article/article.js 封装获取频道列表的接口。① api/article/article.js 封装请求 API。④ 基于传过来的表单数据，进行标题控制，有 id 的是编辑。① api/article.js 封装接口 api。① api/user/user.js 封装接口。
2024-09-05 20:32:11
1418
1
原创 Vue3.0项目实战（一）——Vue3 大事件管理系统项目搭建
如何在 git commit 前执行 eslint 检查？使用 husky 这个 git hooks 工具如何只检查暂存区代码？使用 lint-staged 工具4. 目录调整4.1 目录调整默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是以下工作：删除一些初始化的默认文件修改剩余代码内容新增调整我们需要的目录结构拷贝全局样式和图片，安装预处理器支持① 删除文件② 修改内容routes: []})
2024-08-25 21:07:04
1047
原创 React18学习笔记（三）——redux状态管理工具
组件中使用哪个hook函数获取store中的数据？组件中使用哪个hook函数获取dispatch方法？如何得到要提交action对象？执行store模块中导出的actionCreater方法4. Redux与React - 提交action传参4.1 需求说明组件中有俩个按钮 `add to 10` 和 `add to 20` 可以直接把 count 值修改到对应的数字，目标count值是在组件中传递过去的，需要在提交action的时候传递参数4.2 提交action传参实现需求。
2024-08-24 17:37:33
1222
原创 React18学习笔记（二）——react基础
1. 受控表单绑定1. 受控表单绑定① 准备一个React状态值② 通过value属性绑定状态，通过onChange属性绑定状态同步的函数。
2024-08-22 15:11:22
1168
原创 TypeScript学习笔记（三）——TypeScript 类型声明文件
今天几乎所有的 JavaScript 应用都会引入许多第三方库来完成任务需求。这些第三方库不管是否是用 TS 编写的，最终都要编译成 JS 代码，才能发布给开发者使用。我们知道是 TS 提供了类型，才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时，你会发现它们几乎都有相应的 TS 类型，这些类型是怎么来的呢？类型声明文件类型声明文件用来为已存在的 JS 库提供类型信息。这样在 TS 项目中使用这些库时，就像用 TS 一样，都会有代码提示、类型保护等机制了。
2024-08-20 17:07:22
898
原创 TypeScript学习笔记（二）——TypeScript 高级类型
概述：TS 中的高级类型有很多，重点学习以下高级类型：1.class 类2.类型兼容性3.交叉类型4.泛型 和 keyof5.索引签名类型 和 索引查询类型6.映射类型TypeScript 全面支持 ES2015 中引入的class关键字，并为其添加了类型注解和其他语法（比如，可见性修饰符等）。解释：根据 TS 中的类型推论，可以知道 Person 类的实例对象 p 的类型是 Person。TS 中的class不仅提供了 class 的语法功能，也作为一种类型存在。
2024-08-20 15:28:17
1138
原创 ES6学习笔记（九）——class（类）
传统面向对象的编程序语言都是【类】的概念，对象都是由类创建出来，然而早期 JavaScript 中是没有类的，面向对象大多都是基于构造函数和原型实现的，但是 ECMAScript 6 规范开始增加了【类】相关的语法，使得 JavaScript 中的面向对象实现方式更加标准。class（类）是 ECMAScript 6 中新增的关键字，专门用于创建类的，类可被用于实现逻辑的封装。
2024-08-18 22:23:52
754
原创 黑马头条vue2.0项目实战（十一）——功能优化（组件缓存、响应拦截器、路由跳转与权限管理）
先来看一个问题？从首页切换到我的，再从我的回到首页，我们发现首页重新渲染原来的状态没有了。首先，这是正常的状态，并非问题，路由在切换的时候会销毁切出去的页面组件，然后渲染匹配到的页面组件。但是我想要某些页面保持状态，而不会随着路由切换导致重新渲染。
2024-08-17 20:47:26
876
原创 黑马头条vue2.0项目实战（十）——小智同学
原生的 WebSocket 使用比较麻烦，所以推荐使用一个封装好的解决方案：socket.iosocket.io 提供了服务端 + 客户端的实现客户端：浏览器服务端：Java、Python、PHP、。。。。Node.js对于前端开发者来说，只需要关心她的客户端如何使用即可注意：Socket.io 必须前后端配套使用实际工作中，socket.io 已经成为了各大后端开发的 WebSocket 通信主流解决方案GitHub 仓库官网。
2024-08-16 20:16:39
970
原创 黑马头条vue2.0项目实战（八）——文章评论
弹层渲染出来以后就只是简单的切换显示和隐藏，里面的内容也不再重新渲染了，所以会导致我们的评论的回复列表不会动态更新了。把当前的评论对象传递给 reply-comment组件，把当前点击之后展示弹出层的值传递给爷爷组件，让爷爷组件展示回复评论弹出层，但是当一个事件中同时使用两次 $emit触发的其他组件中的事件，可能导致状态更新延迟。解决方案：只传递当前的评论对象，让控制显示弹出层的变量的状态卸载，$on 事件监听里。② 当点击评论项组件中的回复按钮的时候展示弹层。回复列表和文章的评论列表几乎是一样的。
2024-08-14 15:50:18
933
原创 TypeScript学习笔记（一）——TypeScript介绍与常用类型注解
TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统。所有的 JS 代码都是 TS 代码。JS 有类型（比如，number/string 等），但是JS 不会检查变量的类型是否发生变化。而TS 会检查。TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。类型注解常用基础类型。
2024-08-09 12:39:40
988
原创 vue3.0学习笔记（五）——Vue3 状态管理 - Pinia
1. 什么是Pinia1. 什么是PiniaPinia是Vue的最新状态管理工具，是Vuex的替代品。提供更加简单的API（去掉了mutation）提供符合，组合式风格的API（和Vue3新语法统一）去掉了modules的概念，每一个store都是一个独立的模块配合TypeScript更加友好，提供可靠的类型推断2. 手动添加Pinia到Vue项目在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加现在我们初次学习，从零开始：使用Vite创建一个空的Vue3项目。
2024-08-06 17:17:00
739
原创 vue3.0学习笔记（四）——关于setup语法糖补充以及新特性
setup选项的执行时机？beforeCreate钩子之前 自动执行setup写代码的特点是什么？定义数据 + 函数 然后以对象方式return解决了什么问题？经过语法糖的封装更简单的使用组合式APIsetup中的this还指向组件实例吗？指向undefined5. 组合式API - reactive和ref函数reactive和ref函数的共同作用是什么？用函数调用的方式生成响应式数据reactive不能处理简单类型的数据。
2024-08-05 21:52:57
988
原创 黑马头条vue2.0项目实战（四）——首页—文章列表
List 组件通过 loading 和 finished 两个变量控制加载状态， 当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 设置成 true，此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件。
2024-08-01 16:30:03
747
原创 黑马头条vue2.0项目实战（三）——个人中心功能的实现
通过分析页面，可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。
2024-07-30 11:41:48
1027
原创 黑马头条vue2.0项目实战（二）——登录注册功能的实现
官方文档实现：实现效果：最左侧显示的图标无法满足需求的情况下，可以通过 slot 实现，插入自定义的图标。可以插入的slot如下所示：具体实现，通过插入 i 标签，设置 iconfont 类名。
2024-07-28 22:16:49
819
原创 vue3.0学习笔记（三）——计算属性、监听器、ref属性、组件通信
计算属性应该是只读的，特殊情况可以配置 get set核心步骤：导入computed 函数执行函数在回调参数中return 基于响应式数据做计算的值，用变量接收。
2024-07-24 22:25:19
1151
原创 vue3.0学习笔记（二）——生命周期与响应式数据（ref,reactive,toRef,toRefs函数）
组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。
2024-07-22 22:40:39
947
4
原创 vue学习笔记（十一）——开发心得（axios的封装、promise细节、vue-router开发中的使用、vuex在开发中的使用）
1.1 为什么要封装api?代码分层，便于以后的修改，无需触碰逻辑页面根地址并使用默认导出将 axios 导出。每个模块中，只允许使用唯一的一次 export default，否则会报错！统一管理所有需要的url地址，封装网络请求的方法并导出。如在 api 目录下新建 home.js 用于统一管理首页 Home 组件中的所有网络请求index.js接口API 后缀。
2024-07-20 21:05:24
1042
1
原创 EventLoop、宏任务和微任务
JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：①宏任务异步 Ajax 请求、文件操作其它宏任务②微任务Promise.then、.catch 和 .finally其它微任务2.2 宏任务和微任务的执行顺序每一个宏任务执行完之后，都会检查是否存在待执行的微任务， 如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
2024-07-06 15:37:58
720
原创 Promise学习笔记
注意：第 5 行代码中的 new Promise() 只是创建了一个形式上的异步操作。async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在 async/await 出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。示例代码如下：.then 链式调用的优点： 解决了回调地狱的问题.then 链式调用的缺点： 代码冗余、阅读性差、不易理解。
2024-07-05 23:09:25
741
原创 ES6模块化学习
ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。ES6 模块化规范中定义：每个 js 文件都是一个独立的模块导入其它模块成员使用 import 关键字向外共享模块成员使用 export 关键字4. 在 node.js 中体验 ES6 模块化node.js 中默认仅支持 CommonJS 模块化规范。
2024-07-05 22:27:00
719
原创 vue学习笔记（八）——Vue组件-进阶（插槽、自定义指令）
准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里准备UseTable.vue – 准备数据传入给MyTable.vue使用例子：我想要给td内显示图片，需要传入自定义的img标签在MyTable.vue的td中准备占位，但是外面需要把图片地址赋予给src属性，所以在slot上把obj数据绑定。
2023-11-27 22:39:33
207
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人