笔记day5

1 复习

1. 完成商品分类三级列表路由跳转一级路由传参（合并参数）
2. 完成search模块中对于typeNav的使用（过渡动画）
3. 对于typeNav请求次数也进行了优化（App.vue根组件）
4. swiper插件：经常制作轮播图（移动端|PC端也可以使用）
   使用步骤：
   1)引入相应依赖包
   2)页面中的结构务必要有
   3)初始化swiper实例，给轮播图添加动态效果
5. mock数据，通过mockjs模块实现的

2 最完美的解决方案，解决轮播图问题

var mySwiper = new Swiper ('.swiper-container', { //也可以传真实的DOM节点，document.querySelector('.swiper-container')//direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器agination: {el: '.swiper-pagination',//点击小球时候切换图片clickable: true},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}
})

• watch数据监听 + nextTick：监听已有数据的变化（仓库中的bannerList）

• $nextTick：在下次DOM更新 循环结束之后 执行延迟回调，在 修改数据之后 立即使用这个方法，获取更新后的DOM

• $nextTick：可以保证页面中的结构一定是有的，经常和很多插件一起使用【都需要DOM存在】

3 开发Floor组件

• 切记：仓库当中的state数据格式，不能乱写，数据格式取决于服务器返回的数据

• getFloorList这个action在哪里触发，是需要在Home路由当中发的，不能在Floor组件内部发action，因为需要v-for遍历floor组件

• v-for也可以在自定义标签中使用

• 组件通信方式有哪些？【面试频率极高】

  • props：用于父子组件通信
  • 自定义事件：$ on、$ emit 可以实现子给父通信
  • 全局事件总线：$ bus，全能
  • pubsub-js：vue中几乎不用，全能
  • 插槽：默认插槽、具名插槽、作用域插槽
  • vuex

4 把首页中的轮播图拆分为一个共用全局组件

• 切记：以后在开发项目的时候，如果看到某一个组件在很多地方都使用，就将其变成全局组件
• 注册一次，可以在任意地方使用，共用的组件|非路由组件放到components文件夹中

5 search模块开发

1. 先写静态页面 + 静态组件拆分
2. 发请求（API）
3. Vuex（三连环）
4. 组件获取仓库数据，动态展示数据