vue慕课网去哪儿实战项目笔记

1、移动端300ms点击延迟问题

在移动端web中会遇到300ms点击延迟的问题,这个时候可以使用fastclick来解决这个问题。
引入fastclikc

import FastClick from 'fastclick'

使用fastclick

FastClick.attach(document.body)

2、注意当网速过慢的时候获取资源导致的页面抖动问题

如果网速过慢。比如一个dom中有图片、就会出现突然出现一张图片的问题。导致页面变化、这个时候如果是移动端我觉得可以加一个loading来处理这种问题。同时在一开始的时候就预留位置

  overflow hidden
  width 25%
  height 0
  padding-bottom 25%

注意%、这里的百分比是相对宽度的百分比,其比值为图片的高宽比。

3、scoped穿透

如果我们给样式设置了scoped,这个时候组件里面的样式既不能影响外部样式,也不能比外部样式所影响、如

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue慕课网首页模仿是指通过使用Vue框架来实现一个类似慕课网首页的网页。在这个模仿中,你可以使用Vue的组件化开发方式,结合Vue的数据绑定和响应式特性,来构建一个动态、交互性强的网页。 以下是实现Vue慕课网首页模仿的一些步骤和要点: 1. 创建Vue项目:首先,你需要使用Vue CLI或其他方式创建一个Vue项目。 2. 设计页面结构:根据慕课网首页的布局和样式,设计好页面的整体结构,包括头部导航、轮播图、课程列表等。 3. 划分组件:根据页面结构,将页面划分为多个组件,例如头部导航组件、轮播图组件、课程列表组件等。 4. 数据绑定:在每个组件中,使用Vue的数据绑定语法将数据与页面元素进行关联,实现数据的动态展示。 5. 响应式交互:利用Vue的事件绑定和方法调用机制,实现页面的交互效果,例如点击导航切换选中状态、点击轮播图切换图片等。 6. 数据请求:如果需要展示真实的课程数据,可以使用Vue的生命周期钩子函数,在组件加载时通过Ajax或其他方式请求数据,并将数据绑定到页面上。 7. 样式设计:根据慕课网首页的样式,使用CSS或CSS预处理器对页面进行样式设计和布局。 8. 页面优化:对页面进行性能优化,例如使用Vue的虚拟DOM机制、异步组件加载等方式提升页面加载速度和用户体验。 9. 测试和调试:在开发过程中,及时进行测试和调试,确保页面的功能和交互效果正常。 10. 部署上线:完成开发后,将项目打包并部署到服务器上,使其可以通过浏览器访问。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值