Vue开发学习-周报2-动画样式以及首页开发

本文链接：https://blog.youkuaiyun.com/qq_42497807/article/details/86661990

本文记录了Vue开发的学习周报，重点包括首页头部、滚动栏、模块显示、周末推荐和热门推荐的开发。在首页头部，利用iconfont和CSS布局。滚动栏问题解决了递归无限循环和Vue runtime版本问题。模块显示借助position定位，用overflow处理内容溢出。通过axios模拟后台数据，结合Vue生命周期进行数据获取和更新。在总结中强调了Vue中CSS布局、父子组件传值和组件化开发的重要性，并规划了未来的学习任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完成情况

完成动画样式学习
首页具体开发
1.头部完成（css布局为重）
2.页面滚动栏完成（外部方法的使用为重,解决溢出问题）
3.模块图标完成（css布局为重）
4.热门推荐完成（css布局为重）
5.周末推荐完成（css布局为重）
用axios进行后台模拟传递数据动态显示

在这里插入图片描述

重点以及特殊问题记录

1.首页头部问题

利用iconfont提供的css，以及一些配置对图标进行配置，更加方便快捷，在使用时要对css中的位置进行重新定位，否则会出现图片丢失

@font-face {font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1518407379870'); /* IE9*/
  src: url('./iconfont/iconfont.eot?t=1518407379870#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAXMAAsAAAAACGwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kg6Y21hcAAAAYAAAABwAAABsv+M04hnbHlmAAAB8AAAAc8AAAIM5/cy7mhlYWQAAAPAAAAALwAAADYQbaOmaGhlYQAAA/AAAAAcAAAAJAfeA4ZobXR4AAAEDAAAABMAAAAUE+kAAGxvY2EAAAQgAAAADAAAAAwBPAGkbWF4cAAABCwAAAAeAAAAIAEUAF1uYW1lAAAETAAAAUUAAAJtPlT+fXBvc3QAAAWUAAAANgAAAEebMznXeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s04gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzzYm7438AQw9zM0AAUZgTJAQAp9Ay8eJzFkbENgDAMBM8JIIQYg5KKCaiZhYqKib0GfGIKmIC3Lnq/HCVKgBbIYhYN2IFRtCu1mmeGmjes6gd6kur0yRffrkvZ24dMc1HFZ+1NMh2/yf47+quxruvT6cU5H3RFn4LyI74EZca3gHQD3FMV3HicNZC7ixNRFMbvd29m5k4ek+TOe5LJ5GFmdlkd2Bgni49slIVFERSsLP0DtJM0FgERLBSSShsbEaw2tQurEgRbexsRLfZPsJr1JrCXc36cwzl8fOcShZCz3+yEecQkW2SXHJD7hEDdQdegITrJMKU7sDuK7VoGS3pJR+t1U3YDble1nEE2jF1VU6sw0MLlziBLUprgynBMr2Hg