moke
使用mockjs来模拟数据接口(其实和ajax差不多,mock其实就是给我们的json数据指定一个url路径去做请求)
1、准备json数据
2、安装mockjs
3、使用mockjs来模拟提供接口地址
4、在main中引入mockServer.js
5、在ajax当中修改Ajax中的baseUrl 为 /mock 变为一个新的文件 mockAjax
mock会拦截我们的ajax请求,不会真正去发送请求。(发送请求是往本地发的,没有往后端发,请求的数据也是本地的)
动态图片资源打包显示
如果是静态页面,div和img都是存在的,webpack在打包的时候就会把div和img进行打包
并且会根据img的src找到对应的静态资源图片一起打包,所以不会出问题
如果是动态页面,div和img都是根据请求回来的动态数据进行遍历产生的,也就是说webpack在
打包的时候,div和img不存在,因此打包完成后,图片根本没有被打包的指定位置,所以我们需要
自己把需要的静态图片资源,给放到打包后位置,其实就是开发阶段publick当中
实现页面轮播
swiper的用法参考官方网站
1、安装 5版本
2、引入js和css 可以查看页面结构是否正常,正常就代表css没问题
3、书写swiper的结构 早早都已经写完了
4、实例化swiper实例对象
注意:swiper必须在页面的数据结构显示完成后创建才会生效
(1)解决swiper影响多个页面的bug
通过选择器可以指定哪个地方需要,但是不好
通过ref最好
(2)swiper创建的时间应该是在页面列表创建之后才会有效果
静态页面是没问题的,静态页面不需要等待数据,因此monted完全可以去创建swiper
现在我们的数据是动态的,monted内部去创建,数据还没更新到界面上,因此无效
静态页面不会出问题,因为new的时候结构本身就形成,
如果是动态页面,结构是根据动态数据渲染的,此时new Swiper一定要等待页面结构完全形成之后再去new
否则new的太早,不生效
直接在mounted去实例化,数据也是在这发请求的,new swiper比数据回来还早,证明结构一定没形成
解决办法:
第一种解决方案:
加定时器,延迟一段事件再去new,但是体验不好
第二种解决方案
放在updated当中,也不行,效率比较低,因为updated是说的页面数据更新完成
组件当中任何一个数据修改,updated都要去执行,后续会多次重复的去new
第三种解决方案
watch监视 + nextTick
Vue.nextTick 和 vm.$nextTick 效果一样
nextTick是在最近的一次更新dom之后会立即调用传入nextTick的回调函数
watch: {
bannerList: {
immediate:true,
handler() {
// 代表数据回来了,但是直接去实例化,还是不行,因为数据虽然回来了,但是页面还没更新完成
// 我们既要保证数据回来了,还要保证页面也更新完成了,再去实例化
// this.$nextTick保证页面更新完成
// 等待页面最近一次更新完成,执行操作
// nextTick一般用在,当数据更新后引起页面更新,而页面刚更新完,我们需要写自己的逻辑
// 此时这些逻辑就写在nextTick的回调当中
this.$nextTick(() => {
new Swiper(this.$refs.bannerSwiper, {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
autoplay:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
})
}
}
},
封装组件
定义可复用的轮播组件
banner是在watch当中去创建swiper 因为组件创建的时候数据不一定更新
floor是在mounted当中去创建swiper,因为内部组件创建的时候,数据已经存在了
1、同一个组件 有好几个地方js代码是一样的 封装函数
2、有好几个地方js代码是一样的 封装模块(vue中还能封装混入(混合))
3、有好几个地方 html css js都是一样的 封装组件 (html,css,js的混合体,混合件)
抽离组件注意事项:
1、html css js写成一样,去封装组件
2、封装好组件之后要考虑动态数据
3、动态数据需要在使用的时候,由父组件进行传递