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