vue
文章平均质量分 75
Jerry_ww
通信工程学生,本博客用于记录工作与学习过程
展开
-
【Vue】实现商品列表的无限加载
注:v-infinite-scroll与infinite-scroll-disabled为elementPlus中Infinite Scroll无限滚动的自定义指令。原创 2024-06-17 21:53:07 · 375 阅读 · 0 评论 -
【Vue】图片懒加载的实现
有一点需要说明:IntersectionObserver是异步库,这样即使目标元素一开始就在视口中,回调函数的执行也会在解构赋值之后,这样能够确保stop方法在回调函数中调用时已经被正确解构。原创 2024-06-17 16:36:15 · 387 阅读 · 0 评论 -
【Vue】Pinia管理用户数据
基本思想:Pinia负责用户数据相关的state和action,组件中只负责触发action函数并传递参数。原创 2024-06-15 17:18:00 · 602 阅读 · 0 评论 -
【Vue】登录功能中对于错误提示信息的重构
在 Axios 中,res 和 e 参数分别代表成功的响应对象和错误对象。这些参数是由 Axios 在请求完成时传递给响应拦截器函数的。让我们深入了解一下这些参数是从哪里来的,以及 Axios 如何处理它们。res 和 e 参数的来源成功的响应 (res)当 Axios 发出一个 HTTP 请求并成功接收到服务器的响应时,它会将该响应对象传递给 onFulfilled 函数。这个响应对象包含了从服务器返回的所有数据和元信息。res => res.data, // `res` 是成功的响应对象。原创 2024-06-15 12:10:41 · 1055 阅读 · 1 评论 -
【Vue3】新组件
vue3新组件原创 2024-05-09 23:10:20 · 336 阅读 · 0 评论 -
【Vue3】其他常用API
通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式API创建的状态只在其顶层是响应式的,对所有深层的对象不会做任何处理,避免了对每一个内部属性做响应式所带来的性能成本,这使得属性的访问变得更快,可提升性能。原创 2024-05-09 15:07:59 · 919 阅读 · 0 评论 -
【Vue3】组件通信总结
注意区分好:原生事件、自定义事件。原生事件:事件名是特定的(clickmosueenter等等)事件对象$event: 是包含事件相关信息的对象(pageXpageYtargetkeyCode自定义事件:事件名是任意名称事件对象$event: 是调用emit时所提供的数据,可以是任意类型!!!--在父组件中,给子组件绑定自定义事件:--> < Child @send-toy = " toy = $event " />原创 2024-05-08 17:31:50 · 870 阅读 · 0 评论 -
【Vue】插槽slot
作用域插槽理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。原创 2024-05-08 17:22:57 · 763 阅读 · 0 评论 -
【Vue】pinia
官网:https://pinia.vuejs.org/zh/原创 2024-05-07 17:28:44 · 837 阅读 · 0 评论 -
【Vue-router】vue路由详解
vue路由详解,包含对路由的理解,路由配置,路由工作模式,嵌套路由,路由传参,路由的props配置,replace属性,路由的编程式导航......本文代码采用组合式API+ts来写原创 2024-05-06 12:09:59 · 856 阅读 · 0 评论 -
【Vue3】watch的五种使用情况与watchEffect
监视,情况一:监视【ref】定义的【对象类型】数据,监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视。结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。// 监视,情况四:监视响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写函数,更推荐写函数。// 监视,情况五:监视上述的多个数据。原创 2024-04-30 20:43:02 · 844 阅读 · 0 评论 -
【Vue3】computed
作用:根据已有数据计算出新数据原创 2024-04-30 11:03:55 · 431 阅读 · 1 评论 -
【Vue3】Ref与Reactive
name和age是一个RefImpl的实例对象,简称ref对象,它们的value属性是响应式的。// 注意:name不是响应式的,name.value是响应式的,所以如下代码并不会引起页面的更新。// 通过toRef将person对象中的gender属性取出,且依然保持响应式的能力。// 通过toRefs将person对象中的n个属性批量取出,且依然保持响应式的能力。// tel就是一个普通的字符串,不是响应式的。// JS中操作ref对象时候需要.value。commits记录中查找。原创 2024-04-29 11:07:18 · 882 阅读 · 0 评论 -
【Vue3】setup
setup是Vue3中一个新的配置项,值是一个函数,它是表演的舞台,组件中所用到的:数据、方法、计算属性、监视…等等,均配置在setup中。setup函数返回的对象中的内容,可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用,它是“领先”所有钩子执行的。原创 2024-04-29 10:15:47 · 718 阅读 · 0 评论 -
【Vue】$emits和props
emit用于子组件向父组件发送消息或通知。props用于父组件向子组件传递数据。这两个机制共同构成了Vue组件间通信的基础,使得组件可以更加灵活和可复用。原创 2024-04-12 11:15:50 · 263 阅读 · 0 评论 -
【Vue】生命周期
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。时,Vue 会自动将回调函数注册到当前正被初始化的组件实例上。你现在并不需要完全理解图中的所有内容,但以后它将是一个有用的参考。还有其他一些钩子,会在实例生命周期的不同阶段被调用,最常用的是 onMounted。也可以在一个外部函数中调用,只要调用栈是同步的,且最终起源自。原创 2024-04-09 14:39:57 · 444 阅读 · 1 评论 -
【Vue】响应式原理与ref
JavaScript 运行环境包含了一些不可枚举、不可写入的对象属性,然而在 ES5 之前开发者无法定义他们自己的不可枚举属性或不可写入属性。ES5 引入方法以便开发者在这方面能够像 JS 引擎那样做。ES6 为了让开发者能进一步接近 JS 引擎的能力,推出了Proxy,代理是一种封装,能够拦截并改变 JS 引擎的底层操作。简单的说,就是在目标对象上架设一层 “拦截”,外界对该对象的访问,都必须先通过这层拦截,提供了一种改变 JS 引擎过滤和改写的能力。Proxy。原创 2024-04-08 12:01:01 · 819 阅读 · 2 评论 -
【Vue】第一个小项目“怪物杀手”
【代码】【Vue】第一个小项目“怪物杀手”原创 2024-04-02 14:48:15 · 652 阅读 · 0 评论 -
【vue】一个小bug和key的引入
vue当你更改元素时会在真实的dom中渲染并更新list。这两个goal是两个dom元素,触发点击事件后,vue并不会删除第一个dom元素,而是把第二个dom元素的动态内容(删除后该list后输入框中的Jerry消失了。属性,用来告知vue区分不同的。)复制到第一个dom元素中,的html标签使用,就像是。属性,可以在所有带有。原创 2024-03-30 16:35:11 · 723 阅读 · 0 评论 -
【Vue】动态样式
【代码】【Vue】动态样式。原创 2024-03-29 16:26:31 · 316 阅读 · 0 评论 -
【Vue】computed 和 watch 的区别
这个新值只会根据已知值的变化而变化,其他不相关的数据的变化不会影响该新值。计算属性不在data中,计算属性新值的相关已知值在data中。2.computed擅长处理的场景:一个数据受多个数据影响。1.watch擅长处理的场景:一个数据影响多个数据。计算属性是由data中的已知值,得到的一个新值。监听的数据就是data中的已知值。computed:计算属性。watch:监听数据的变化。监听data中数据的变化。别人变化影响我自己。原创 2024-03-29 10:55:58 · 488 阅读 · 0 评论 -
【Vue】事件绑定和计算属性
来源于Udemy-vue课程原创 2024-03-28 21:40:54 · 509 阅读 · 0 评论 -
【Vue】模板语法
用js完成输出输入框中的值到列表中当js实现功能逐渐复杂后,使用vue不妨为更好的选择。原创 2024-03-26 20:47:10 · 808 阅读 · 1 评论