- 博客(167)
- 收藏
- 关注
RSS订阅原创 Vue3实现带点击外部关闭对应弹出框（可共用一个变量）
首先，假设您在单文件组件(SFC)中使用了Vue3，并且有两个div元素分别通过`v-if`和`v-else`来切换显示一个带有`.elpopver`类的弹出组件。在这种情况下，每个弹出组件应当拥有独立的状态管理（例如：各自的isOpen变量）。为了实现点击外部关闭对应弹出框的功能，我们需要为每个组件实例绑定唯一的标识并更新事件处理函数。这里我们利用Vue的`ref`特性获取到两个弹出框的DOM元素，并在事件处理函数`closePopup`中分别判断点击目标是否在各自弹出框内部。
2024-01-15 19:13:32
850
1
原创 富文本编辑器（wangEditor 5）
钩子中，使用了模拟的异步请求来设置编辑器的初始内容。最后，通过返回 JSX 元素来渲染编辑器和展示编辑器内容的部分。生命周期方法中模拟了异步请求来设置编辑器的初始内容。请确保已正确安装所需的依赖，并根据实际需要进行调整和修改。钩子的清理函数，及时销毁编辑器实例，避免内存泄漏。在该组件中，使用了 React 的。组件来渲染富文本编辑器的工具栏和编辑区域。钩子来管理编辑器实例和编辑器内容。状态来保存和更新编辑器实例。需要注意的是，在组件销毁时，通过。状态来保存和更新编辑器的内容。来配置工具栏和编辑器的属性。
2023-12-03 08:00:00
684
原创 react 字轮播滚动
将文本分成两部分，并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本，它被渲染到页面上。将文本分成两部分，并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本，它被渲染到页面上。当然，在实际开发中，还可以根据需求进行更灵活的时间控制和动画效果的调整。在组件的构造函数中初始化了组件的 state，包括要滚动显示的文本。，可以更好地与浏览器的渲染机制进行协调，以提供更流畅的滚动效果。加入了组件的 state 中，用于记录上一次动画触发的时间戳。的 React 组件。
2023-12-02 19:01:37
905
原创 react经典面试题解析
CSS IN JS是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题。CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（<style scoped> 、css modules）等React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。
2023-11-21 08:00:00
250
原创 Vue面试题
在style标签上不加上scoped的属性，默认为全局css样式通过directive来自定义指令，自定义指令分为全局指令和局部指令，自定义指令也有几个的钩子函数，常用的有bind和update，当 bind 和 update 时触发相同行为，而不关心其它的钩子时可以简写。// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})})通过filter来定义过滤器，过滤器分为全局和局部过滤器，过滤器的主体为一个普通的函数，来对数据进行处理，可以传递参数。
2023-11-20 08:00:00
198
原创 第三十二节——组合式API计算属性+watch
它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数，简单来说，我们写的函数，会立即执行一次，然后每次里面的数据发生变化后再出发该函数。3、watchEffect在组件第一次就会收集依赖，然后收集到的依赖发生了变化，回调才会再次执行；监听对象类型的数据，并且可以传入第三个参数，是个对象deep 是否深度观察immediate立即执行一次。1、watchEffect不需要指定监听的属性，自动收集依赖；watch需要指定监听的属性。watch用来监听特定的数据源，并在回调函数中执行。
2023-11-17 08:00:00
205
原创 第二十九节——组合式API定义响应式数据
有些时候我们不希望数据进行响应式实时更新，可以通过toRaw获取ref或reactive引用的原始数据，通过修改原始数据，不会造成界面的更新，只有通过修改ref和reactive包装后的数据时才会发生界面响应式变化。
2023-11-15 08:00:00
251
原创 第二十七节——组合式API介绍
组合式API(Composition API)是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue组件。组合式API是Vue 3及 Vue 2.7 的内置功能。对于更老的 Vue 2版本，可以使用官方维护的插件@vue/composition-api。在Vue3中，组合式API基本上都会配合语法在单文件组件中使用.
2023-11-13 08:00:00
826
原创 第二十三节——路由守卫
该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined，也就是他在beforeCreate生命周期前触发。简单理解：导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，比如跳转前是否验证登录等，这就是导航守卫。
2023-11-10 08:00:00
218
原创 第二十三节——路由懒加载+动态路由
对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。动态路由主要通过两个函数实现。router.addRoute() 和router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
2023-11-09 08:00:00
229
原创 第二十一节——路由初识
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
2023-11-08 08:00:00
145
原创 第十九节——vue内置组件
Vue提供了一些内置的组件，这些组件可以在Vue应用中直接使用，无需额外安装或配置。以下是一些常见的Vue内置组件。
2023-11-07 08:00:00
309
1
原创 第十八节——插槽
具名插槽允许在子组件中定义多个命名插槽，父组件可以根据插槽的名称来插入内容。在子组件的模板中，使用<slot name="slotName"></slot>标签定义具名插槽的位置，并为每个插槽指定一个唯一的名称。父组件在使用子组件时，可以在子组件的标签内放置内容，这些内容将被插入到子组件模板中的默认插槽位置。插槽允许父组件在子组件的模板中插入任意的内容，从而实现更灵活的组件组合和定制。作用域插槽是一种特殊的插槽类型，它允许slot组件向子组件传递数据，并且子组件可以在插槽中使用该数据进行渲染。
2023-11-06 08:00:00
247
原创 第十五节——观察者watch
在Vue中，watch是一个用于监听数据变化的功能。它可以监听一个或多个数据，并在数据发生变化时执行相应的操作。当我们需要在数据变化时执行异步操作、计算属性或执行一些副作用时，watch就派上了用场啦。因为watch是在数据变化时被调用的，频繁的异步操作可能导致性能问题或引发意外的行为。如果需要在数据变化时执行异步操作或有副作用时，应使用watch。在编写代码时，应仅在必要时使用watch，并尽量使用计算属性或方法来处理简单的数据变化。当在watch中修改被监听的数据时，可能会导致无限循环的问题。
2023-11-03 08:00:00
126
原创 第十四节——计算属性computed
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。5、计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed。4、计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求。
2023-11-02 01:00:00
192
原创 第十三节——生命周期
在组件实例创建之后调用，此时组件的数据观测、事件监听和模板编译已经完成，可以访问到组件的响应式数据、计算属性、方法等，但是还没有挂载到 DOM 上，因此无法访问到组件的元素或子组件。在组件更新之后调用，此时组件的数据已经更新到 DOM 上，并且完成了重新渲染，可以在这个钩子中获取更新后的状态，并进行一些后续操作或效果处理。在组件挂载到 DOM 之后调用，此时组件的虚拟 DOM 已经插入到父容器中，并且生成了真实的 DOM 节点，可以访问到组件的元素或子组件，并且可以执行一些需要 DOM 的操作。
2023-11-01 08:00:00
119
原创 第十二节——ref
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素;如果用在子组件上，引用信息就是组件实例。ref 加在子组件上，用this.ref.xxx 获取到的是组件实例，可以使用组件的所有方法。ref 加在普通的元素上，用this.ref.divRef 获取到的是dom元素。注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册。
2023-10-31 08:00:00
216
原创 第十节——Vue组件
组件(Component)是vue.js中很强大的一个功能，可以将一些可重用的代码进行封重用。所有的Vue 组件同时也是Vue 的实例，可以接受使用相同的选项对象和提供相同的生命周期钩子。一句话概括：组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。在vue项目中，所有.vue结尾的文件都是一个组件引入组件后，需要在components对象里进行注册，注册后可以直接进行使用创建qf-button.vue文件
2023-10-30 08:00:00
143
原创 第八节——Vue渲染列表+key作用
3.如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；3.使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性，实际项目中如果没有id，推荐使用index）1.vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法。4.使用key给每个节点做一个唯一标识，Diff算法就可以正确识别此节点，"就地更新"找到正确的位置插入新的节点。
2023-10-28 08:00:00
373
原创 第七节——Vue中定义组件状态驱动视图
在Vue组件中，data选项必须是一个函数，而不能直接是一个对象。这是因为Vue组件可以同时存在多个实例，如果直接使用对象形式的data选项，那么所有的实例将会共享同一个data对象，这样就会造成数据互相干扰的问题。因此，将data选项设置为函数可以让每个实例都拥有自己独立的data对象。
2023-10-27 08:00:00
167
原创 第五节——Vue 中如何编写样式
默认情况下，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（ 、css modules）等。如果你的引入了第三方库，如果你想修改第三方库的样式，直接通过dom查找，修改样式是没有效果的。在style标签上使用scoped，当 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
2023-10-25 08:00:00
1131
1
原创 第四节——Vue属性绑定
Vue绑定属性一般是在属性名后面加 : 也就是 v-bind（不推荐使用v-bind），当使用 : 绑定html元素的属性后，属性就相当于参数，属性值为预期值，一般在实际应用中，: 绑定的属性值都是通过计算得来 或者 是一个通过判断时刻变化的值。该操作也叫动态属性在组件传值中经常使用。属性指的是Html元素的属性，例如a标签的title就是一个属性！
2023-10-24 08:00:00
231
原创 第三节——Vue 基础语法
-- 花括号中可以直接展示这个状态 -->/*** 在script中使用export default 导出一个对象* 在对象里面定义一个函数data* 在data函数里面return 一个 对象* 在return 的这个对象里面 可以直接定义当前组件的状态*/data () {return {// 定义的message状态message: "你好 vue"
2023-10-23 08:00:00
346
原创 第二节——Vue 基本介绍
它从模型中获取数据，并将数据转换成视图所需的格式，同时处理用户输入，并将用户操作传递给模型。主持人（Presenter）：充当了控制器的角色，处理用户输入并根据输入更新模型和视图。视图（View）：负责展示数据给用户，但通常比MVC中的视图更为被动，不直接处理用户输入。模型（Model）：同样负责处理应用程序的数据逻辑，与MVC和MVP中的模型类似。模型（Model）：负责处理应用程序的数据逻辑，通常包含数据的获取、处理和存储。模型（Model）：同样负责处理应用程序的数据逻辑，与MVC中的模型类似。
2023-10-22 08:00:00
224
原创 第一节——vue安装+前端工程化
learn-vue/README.md# 项目第三方依赖包# 一般用来存放静态依赖public/index.html# 存放项目源代码，注意只有放在scr目录下的文件才会被webpack打包src/assets/ # 存放静态目录component/ # 存放组件app.vue # 页面组件main.js # 入口文件。
2023-10-21 08:00:00
271
1
原创 react面试题
CSS IN JS是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题。CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。
2023-10-20 08:00:00
140
原创 第60节——使用redux-toolkit实战一个商品列表的增删查改
【代码】第60节——使用redux-toolkit实战一个商品列表的增删查改。
2023-10-19 08:00:00
214
原创 第59节——redux-toolkit中的createSelector
在 Redux Toolkit 中，createSelector 是一个函数，它允许我们从 Redux store 中选择部分状态数据，并将其作为参数传递给一个 memoized 函数，以避免在相同的输入下重复计算。它的主要用途是创建输出选择器函数，该函数将redux store中的多个状态组合并到单个值中，并将该值缓存以提高性能。通过createSelector函数，可以将Redux store中的原始数据转换为更易于处理的格式，如图表数据，饼状图数据等。
2023-10-18 08:00:00
403
原创 第58节——redux-toolkit中的createAsyncThunk
createAsyncThunk 是一个由 Redux Toolkit 提供的函数，用于创建处理异步操作的 thunk action creator。使用 createAsyncThunk 可以简化 Redux 中处理异步操作的流程，使代码更加清晰、简洁。点击按钮age延迟1秒后+1，在延迟的时候，显示loading。偶数的时候显示报错，并显示提示信息。可以不可以封装一下createSlice和createAsyncThunk，让调用变得更简单🤔。
2023-10-17 08:00:00
855
请各位专家解答！，运行一下asp项目
2023-12-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人