自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(12)
  • 收藏
  • 关注

原创 vue组件传参的八种方式总结

-props 接受到的均为 String -->-- 有只有属性没有值, 这种情况 props 指定类型是 Boolean 则接收到的是 true -->

2024-04-24 14:09:23 1293

原创 Router钩子函数

进入组件前被调用,此时组件实例还没有被创建,所以函数内部不能访问this,如果需要访问当前vue实例,可以通过。切换地址时,由于路由地址的变化只表示参数发生变化,页面组件并没有变化,也会执行。③ next:是一个function,必须被执行,否则不会进行路由跳转,如果。离开组件时被调用,可以用来阻止页面离开,或者离开前销毁定时器等。不同的是,这个钩子只接收两个参数,不能改变路由跳转。应用:访问不同路由地址,显示每个页面对应的title。在路由发生变化,但是组件被复用时被调用。,直接被定义在每个vm实例上。

2024-04-23 11:58:46 495

原创 插槽的总结

总的来说,插槽是前端开发中一种非常有用的技术,能够提高组件的可复用性和灵活性,同时也为开发者提供了更多的定制化选项。:插槽允许开发者在创建可复用组件时灵活地定义其结构,以便根据需要插入不同的内容,从而增加了组件的灵活性和可复用性。:插槽是 Vue.js 和其他前端框架中的一种技术,用于将父组件中的内容插入到子组件中的特定位置。:允许开发者在父组件中为插槽分配名称,并根据名称将内容插入到子组件中对应的插槽位置。:使用插槽可以将父组件中的任意内容插入到子组件中,从而使得组件更加灵活和可复用。

2024-03-11 20:32:55 282 1

原创 css3特性和动画

Grid 布局是 CSS3 中的另一种强大的布局系统,它提供了一个二维的网格布局模型,可以更方便地进行网页布局设计,实现复杂的布局结构。:CSS3 变换效果允许对元素进行旋转、缩放、平移等变换操作,从而改变元素的位置、大小和方向,使得页面元素更加动态和有趣。:CSS3 过滤效果允许对元素的视觉呈现进行处理,包括模糊、灰度、色彩反转等效果,可以用来创建各种独特的视觉效果。:CSS3 多列布局允许将内容分割成多列进行排版,从而实现类似报纸的布局效果,提高页面的可读性和吸引力。

2024-03-10 10:31:13 611 1

原创 vue3组件常用的通信方式 Pinia

Pinia 是一个用于 Vue.js 3 应用程序的状态管理库,它提供了一种简单、轻量级的方式来管理应用程序的状态,并且支持在组件之间进行通信。在 Pinia 中,你可以通过创建全局的 store 对象来管理状态,并在组件中通过注入 store 对象来访问和修改状态,从而实现组件之间的通信。通过 Pinia,你可以方便地管理应用程序的状态,并且在组件之间进行状态共享和通信。函数将状态和 action 注入到组件中,从而实现了组件与 store 的通信。的 Pinia store,其中包含一个名为。

2024-03-10 10:28:20 771 1

原创 什么是重排?如何减少重排?

8.使用文档片段(DocumentFragment): 如果需要创建大量 DOM 元素,可以使用文档片段来批量创建,然后一次性添加到文档中,减少重排的次数。9.避免触发布局属性的读取: 尽量避免在布局属性(如宽度、高度、偏移量等)发生变化的情况下读取它们,因为这会强制浏览器进行重排。重排是一项昂贵的操作,因为它会触发浏览器重新计算并更新页面的布局,然后重新绘制受影响的元素,这可能会导致页面性能下降。2.改变了元素的样式:修改了元素的宽度、高度、边距、填充、定位等。

2024-03-10 10:11:38 539 1

原创 闭包的理解

闭包(Closure)是指函数与其相关的引用环境的组合。在 JavaScript 中,函数可以访问定义时的词法作用域,即使在函数定义之后执行,仍然可以访问到其外部作用域的变量。这种特性形成了闭包。虽然闭包在某些情况下非常有用,但过度使用闭包可能会导致内存泄漏等问题,因此在编写代码时需要注意适度使用闭包。

2024-03-10 10:09:35 304 1

原创 ts封装axios

来引入这个封装好的 Axios 实例,然后调用对应的请求方法即可。使用时,可以直接通过。

2024-03-10 10:07:16 247 1

原创 同源策略和跨域解决方案

同源策略是一种浏览器安全机制,它限制一个网页从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。"同源"指的是协议、域名和端口号都相同。同源策略的存在主要是为了防止恶意网站通过脚本等方式访问用户的敏感信息。这些方法中,CORS是最为推荐的一种跨域解决方案,因为它是一种标准化、安全且灵活的方式。JSONP由于存在一些安全性问题和只支持GET请求,现在逐渐被CORS所取代。

2024-03-10 10:02:40 291

原创 vue2和vue3的自定义指令

二、

2024-03-07 20:56:42 179 1

原创 防抖和节流,概念、怎么实现

本质上是优化高频率执行代码的一种手段如:浏览器的resizescrollkeypressmousemove等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用和的方式来减少调用频率。

2024-02-28 20:47:30 307

原创 Vue3组件通用方式

有时候想访问r e f s 绑 定 的 组 件 的 属 性 或 者 方 法 , 我 们 会 使 用 refs绑定的组件的属性或者方法,我们会使用refs绑定的组件的属性或者方法,我们会使用refs。但是Vue3不同于Vue2,在 Vue3的setup中我们是无法访问到this的,所以我们需要借助一个方法,那就是getCurrentInstance,该方法返回了当前的实例对象;emit方式也是vue中最常见的组件通信方式,该方式用于子传父;v-model不能严格成为数据的传递方式,其实只是减少了代码量。

2024-02-27 20:56:53 284

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除