- 博客(60)
- 收藏
- 关注
RSS订阅原创 react hooks
函数的副作用就是函数除了返回值外对外界环境造成的其它影响，即与组件渲染无关的操作。例如获取数据修改全局变量更新 DOM等。useEffect 是 React 中的 hooks API。通过 useEffect 可以执行一些副作用操作，例如：请求数据、事件监听等。其中：1. 第一个参数fn是一个副作用函数，该函数会在每次渲染完成之后被调用；2. 第二个参数是可选的依赖项数组，这个数组中的每一项内容都会被用来进行渲染前后的对比a. 当依赖项发生变化时，会重新执行 fn 副作用函数。
2024-09-05 10:32:52
1363
原创 前端Moke数据
下载json 创建server目录 在下面写json文件。启动 npm run serve。然后package.json 配置。
2024-09-04 12:19:15
133
原创 Redux
Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行 作用：通过集中管理的方式管理应用的状态独立于组件，无视组件之间的层级关系，简化通信问题单项数据流清晰，易于定位bug调试工具配套良好，方便调试。
2024-09-04 09:26:24
1186
原创 v-model和.sync的区别
格式不同 v-model='num' :num.sync='num'相同点 都是语法糖 都可以实现父子组件中的数据的双向通信。v-model只能使用一次 .sync可以使用多次。
2023-08-31 18:03:47
216
原创 TypeScript
可以将 TS 中的常用基础类型细分为两类：JS 已有类型原始类型，简单类型（复杂数据类型（数组，对象，函数等）TS 新增类型联合类型自定义类型（类型别名）接口元组字面量类型枚举void...泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中需求：创建一个 id 函数，传入什么数据就返回该数据本身(也就是说，参数和返回值类型相同)比如，id(10) 调用以上函数就会直接返回 10 本身。
2023-08-01 16:09:56
543
1
原创 vite的介绍
Vite（法语意为 "快速的"，发音/vit/，发音同 "veet")是一种新型前端构建工具💡 极速的服务启动，使用原生 ESM 文件，无需打包⚡️ 轻量快速的热重载，始终极快的模块热重载（HMR）🛠️丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用📦等等。
2023-07-26 09:49:21
191
原创 命名约定~
JavaScript 变量名称是区分大小写的，大写和小写字母是不同的。但是，最推荐的声明 JavaScript 变量的方法是使用驼峰式变量名。我们可以对JavaScript 所有类型的变量使用驼峰式命名约定，这样就不会相同命名的变量。变量的名称应该是不言自明的，并描述了储存的值。
2023-07-26 09:47:05
180
原创 CSS布局定位+装饰
➢ 注意点： • 开发中经常会通过 display属性完成元素的显示隐藏切换 • display：none；➢ 注意点： • 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题 • 推荐优先使用浮动完成效果。➢ 原因： • 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局。➢ 注意点： • opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……➢ 属性值：0~1之间的数字 • 1：表示完全不透明 • 0：表示完全透明。
2023-07-26 09:22:50
62
原创 路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。路由懒加载 & 异步组件， 不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件。
2023-07-25 10:52:20
164
原创 Vuex的使用
State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。例如：state中定义了list，为 1-10 的数组，组件中，需要显示所有大于5的数据。$store.dispatch('模块名/xxx ', 额外参数)$store.commit('模块名/xxx ', 额外参数)mapMutations('模块名', ['xxx'])mapGetters('模块名', ['xxx'])mapActions('模块名', ['xxx'])
2023-07-24 10:45:14
184
原创 组件缓存 keep-alive
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，② exclude ： 组件名数组，任何匹配的组件都不会被缓存。① include ： 组件名数组，只有匹配的组件会被缓存。的时候触发 → 进入这个页面的时候触发。的时候触发 → 离开这个页面的时候触发。deactivated 当组件。
2023-07-24 10:24:21
250
原创 Vue路由
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)/search/:words 表示，必须要传参数。hash路由(默认) 例如: http://localhost:8080/#/home。to="/my" 可以匹配 /my /my/a /my/b ....{ path: 匹配路径, redirect: 重定向到的路径 },网页打开， url 默认是 / 路径，未匹配到组件时，会出现空白。① 配置动态路由：path: "/path/参数名"
2023-07-24 10:22:47
71
原创 Vue插槽
2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot。1. 组件内需要定制的结构部分，改用<slot></slot>占位。作用域插槽: 定义 slot 插槽的同时, 是可以。插槽 - 后备内容（默认值）作用：让组件内部的一些。v-slot:插槽名。插槽 - 作用域插槽。
2023-07-24 10:06:45
41
原创 自定义指令
可以监听指令值的变化，进行dom更新操作。1. 注册 (全局注册 或 局部注册)自定义指令：自己定义的指令, 可以。钩子函数中，配置指令dom逻辑。，通过 等号 可以绑定指令的值。，扩展额外功能，例如获取焦点。① v-指令名 = "指令值"自定义指令的使用步骤?封装一些 dom 操作。封装一些 dom 操作。
2023-07-24 10:03:38
47
原创 Vue异步更新、$nextTick
2. 想要在 DOM 更新完成之后做某件事，可以使用。问题："显示之后"，立刻获取焦点是不能成功的！Vue 是 异步更新 DOM (提升性能)this.$nextTick(函数体)1. Vue是异步更新 DOM 的。, 才会触发执行此方法里的函数体。1. 点击编辑，显示编辑框。
2023-07-24 10:00:18
94
原创 v-model 原理
表单类组件封装 & v-model 简化代码。表单类组件封装 & v-model 简化代码。监听输入，子传父传值给父组件修改。① 子组件中：props 通过。用于在模板中，获取事件的形参。2. 父组件 v-model。实现 子组件 和 父组件数据。v-model本质上是一个。拆解 v-model。
2023-07-24 09:56:45
138
原创 Vue组件通信
1. 创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js。单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。作用：非父子组件之间，进行简易消息传递。非父子通信 (拓展) - provide & inject。不同的组件关系 和 组件通信方案分类。想用其他组件的数据 → 组件通信。的，无法直接访问其他组件的数据。Prop 作用：向子组件传递数据。2. A 组件(接收方)，监听。3. B 组件(发送方)，触发。为组件的 prop 指定。
2023-07-24 09:53:25
43
原创 Flex布局
Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。设置方式：给父元素设置 display:flex。主轴默认在水平方向，侧轴默认在垂直方向。作用: 控制弹性盒子的主轴方向的尺寸。属性名: flex-wrap。主轴：默认在水平方向。
2023-07-18 09:40:50
65
原创 CSS布局-浮动
• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。➢ 操作： 1. 在父元素内容的最后添加一个块级元素 2. 给添加的块级元素设置 clear:both。➢ 区别： 1. 元素：HTML 设置的标签 2. 伪元素：由 CSS 模拟出的标签效果。• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素 ➢。➢ n的注意点： 1. n为：0、1、2、3、4、5、6、……➢ 目的： • 需要父元素有高度，从而不影响其他网页元素的布局。
2023-07-11 15:49:59
58
原创 CSS布局-盒子模型
➢ 场景：垂直布局 的 块级元素，上下的margin会合并 ➢ 结果：最终两者距离为margin的最大值 ➢ 解决方法：避免就好 • 只给其中一个盒子设置margin即可。➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型。• 解决：计算多余大小，手动在内容中减去（手动内减）➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
2023-07-11 12:44:49
408
原创 CSS基础
➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素➢ 选择器语法：选择器1 选择器2 { css }➢ 结果： • 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式➢ 注意点： 1. 后代包括：儿子、孙子、重孙子…… 2. 后代选择器中，选择器与选择器之前通过 空格 隔开。
2023-07-10 17:46:12
47
原创 CSS文本
2. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。➢ 注意点： • 开发中会使用 text-decoration : none;➢ 注意点： • 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置。➢ 取值： • 数字+px • 数字+em（推荐：1em = 当前标签的font-size的大小）➢ 属性名： • 如：文字颜色：color • 如：背景颜色：background-color。
2023-07-10 17:17:05
38
原创 事件与表单处理
• 特殊按键指的是键盘中类似 esc、enter、delete 等功能按键， 为了更好的兼容性，应首选内置别名。• 事件程序代码较多时，可以在 methods 中设置函数，并设置为事 件处理程序。• 按键码指的是将按键的按键码作为修饰符使用以标识按键的操作 方式。• 设置事件处理程序后，可以从参数中接收事件对象。选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同。• checkbox：单个绑定布尔值，多个绑定数组。• select：单选绑定字符串，多选绑定数组。
2023-07-03 15:21:44
38
原创 Vue.js 基础语法-Vue.js 指令
指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装，当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置• 自定义全局指令指的是可以被任意 Vue 实例或组件使用的指令。• 自定义局部指指的是可以在当前 Vue 实例或组件内使用的指令。
2023-07-03 14:38:40
93
原创 Vue.js 基础语法-Vue 实例
• 挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表 达式为元素进行动态内容设置，写法为 {{ }}。• 未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参 数形式与 el 规则相同。• data 中的数据可以通过 vm.$data.数据 或vm.数据 访问。• 方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能。• data 中的数据为响应式数据，在发生改变时，视图会自动更新。• data 中的数据可以直接在视图中通过插值表达式访问。
2023-07-03 11:28:58
49
原创 搭建nodejs后端环境
1.1.1 全局命令：npm install express-generator -g。1.1.2 进入项目目录：express --view=ejs server。1.2.2 不可以使用localhost,必须要使用ip地址。1.2.3 cd serve切换目录后npm install。1.2 前端请求后端接口【本地测试】1.2.1 手机和电脑是一个wifi。1.1 搭建后端目录。
2022-09-15 14:32:13
271
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人