前端项目学习day3 项目进度30%

最新推荐文章于 2024-09-12 08:54:42 发布

Fairy0818

最新推荐文章于 2024-09-12 08:54:42 发布

阅读量36

点赞数

文章标签：学习 vue.js 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_52111861/article/details/130550187

版权

文章介绍了使用JavaScript实现鼠标悬浮时标签背景颜色改变的功能，并探讨了防止卡顿的策略，如防抖和节流技术，特别是在处理频繁的标签滑动场景下。同时，提到了事件委托在提高效率中的应用，以及如何利用编程式导航和data属性来解决三级联动路由跳转的问题。

摘要由CSDN通过智能技术生成

1.使用js实现鼠标悬浮在标签上背景颜色改变的效果

通过动态绑定css属性，获取鼠标停留的当前currentindex，判断是否等于index,如果为true,为该标签添加cur样式

2.防抖debounce和节流throttle(引入lodash库)

当鼠标频繁的在多个标签上滑动，容易造成卡顿。

防抖：操作结束后只执行一次，让频繁的执行，变为少量的执行

节流：在规定的时间内只能执行一次

3.事件委托

4.实现三级联动的路由跳转

最佳方法是：编程式导航+事件委托

要解决的两个问题：!、如何确定点击的是a标签2、如何获取参数

给a 标签动态绑定自定义的属性，使用data-自定义属性名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Fairy0818 CSDN认证博客专家 CSDN认证企业博客

码龄4年

8: 原创

183万+: 周排名

170万+: 总排名

295: 访问

: 等级

90: 积分

0: 粉丝

0: 获赞

5: 评论

0: 收藏

私信

关注

热门文章

最新评论

前端项目学习day3 项目进度30%
CSDN-Ada助手: 恭喜您写第四篇博客，能够坚持写作真的很不容易。听说您的前端项目进度已经达到了30%，真是太棒了！我想建议您在接下来的创作中，可以多尝试一些新的技术和思路，给自己带来更多的挑战和成长。期待您的下一篇文章，加油！ CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
尚硅谷项目学习回顾|进度70%
CSDN-Ada助手: 恭喜您写了第8篇博客，看到进度已经达到了70%，非常厉害。希望您能够继续保持，坚持写作，分享您的学习成果和心得体会。下一步的创作建议是可以挖掘一些具体的项目案例，分享您在实际项目中的实践经验和问题解决方案，这样可以让读者更加深入地了解相关知识和技能。期待您的更多精彩内容。 CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply8 看奖励名单。
前端学习回顾尚硅谷项目进度45%
Fairy0818: 搜索功能优化，之前的搜索功能在mounted里面调用，挂载完毕，只能执行一次。再点击搜索按钮不管用，所以使用watch监听，在watch里面先清空上次的三级分类id，然后合并搜索参数，再次发送ajax请求
前端项目学习回顾项目进度20%
CSDN-Ada助手: 恭喜你写了第三篇博客，看来你在前端项目学习上取得了不小的进展。希望你能够继续努力，完成更多的学习进度。我的建议是，可以多尝试一些实际的项目，不断挑战自己，提高自己的技能水平。加油！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
项目学习笔记进度15%
CSDN-Ada助手: 非常棒的博客，看到你已经完成了项目学习的15%，我真的很期待你之后的更新。除了你在博客中提到的知识和技能，你可能还需要了解一些关于API接口的知识，比如如何使用Axios进行数据请求，如何使用Fetch API等等。希望你能够继续保持创作的热情，分享更多有价值的内容。如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。