day04

1.复习:
1.商品分类的二级列表由静态变为动态【获取服务器数据、解决跨域问题】
2.函数的防抖与节流【面试频率很高】
3.路由的跳转与传参
跳转:声明式导航(router-link)、编程式导航
编程式导航解决这个问题:自定义属性

2.开发search模块中的typenav分类菜单
(过渡动画)
过渡动画:前提组件或者元素务必要有v-show或者v-if指令才能进行过渡。
 
 


   

      <h2 class=“all” @mouseenter=“entershow” @mouseleave=“leaveshow”>
        全部商品分类
     
     
     
     
       
        <div class=“sort” v-show=“show” @mouseleave=“currentIndex = -1”>
          …
       

组件挂载:
 // 组价挂载完毕,可以向服务发送请求
  mounted() {
    // 通知vue发请求,获取数据,存储于仓库当中
    this. s t o r e . d i s p a t c h ( " c a t e g o r y L i s t " ) ;     / / h o m e 跳 转 到 s e a r c h 会 在 执 行 一 次 m o u n t e d     / / c o n s o l e . l o g ( " 我 是 t y p e n a v 挂 载 完 毕 " ) ;     / / 当 组 件 挂 载 完 毕 , 让 s h o w 变 为 f a l s e     / / 如 果 不 是 h o m e 路 由 组 件 , 将 t y p e n a v 进 行 隐 藏     i f ( t h i s . store.dispatch("categoryList");     // home跳转到search会在执行一次mounted     // console.log("我是typenav挂载完毕");     // 当组件挂载完毕,让show变为false     // 如果不是home路由组件,将typenav进行隐藏     if (this. store.dispatch("categoryList");  //homesearchmounted  //console.log("typenav");  //showfalse  //hometypenav  if(this.route.path != “/home”) {
      this.show = false;
    }
鼠标移入移除:
// 当鼠标移入的时候显示
    entershow() {
      if (this.$route.path != “/home”) {
        // 如果是search路由组件下会执行

this.show = true;
      }
    },
    // 鼠标离开时进行隐藏
    leaveshow() {
      this.currentIndex = -1;
      if (this.$route.path != “/home”) {
        // 如果是search路由组件下会执行

this.show = false;
      }
    },
过渡动画:
less
    // 过渡动画样式
    // 过渡动画进入状态
    .sort-enter {
      height: 0px;
      // transform: rotate(0deg);
    }
    // 过渡动画结束状态
    .sort-enter-to {
      height: 461px;
      // transform: rotate(5deg);
    }
    .sort-enter-active {
      transition: all 0.5s linear;
    }
  }
3.三级分类的优化
app.vue只会执行一次
export default {

name:‘’,
  components:{
    Header,
    Footer
  }
,mounted(){
  console.log(“我是根组件”);
}
修改:
typenav中index.vue
注释    // this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …的数据       this.store.dispatch(“categoryList”);

}

4.合并参数
合并params和query参数
methods: {
    // 搜索按钮的回调函数,需要search路由进行跳转
    goSearch() {
      //路由传参
      //1.字符串形式
      // this. r o u t e r . p u s h ( " / s e a r c h / " + t h i s . k e y w o r d + " ? k = " + t h i s . k e y w o r d . t o U p p e r C a s e ( ) ) ;       / / 2. 模 板 字 符 串       / / t h i s . router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase());       //2.模板字符串       // this. router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase());   //2.   //this.router.push(/search/${this.keyword}?k=${this.keyword.toUpperCase()});
      //3.对象(常用)
      // this.$router.push({name:“search”,params:{keyword:this.keyword}});

// 如果有auery参数也带过去
      if (this.$KaTeX parse error: Expected '}', got 'EOF' at end of input: …n.query = this.route.query;
        this.route.push(location);
      }
    },
  },
5.开发home首页
1.ListContainer组件与Floor组件
服务器返回的数据接口只有商品分类菜单分类数据,对于Listcontainer组件和Floor组件数据服务器没有提供。
mock数据:(模拟),如果你想mock数据,需要用到mock插件
https://docschina.org/ 印记中文,中文前端
作用:拦截前台发送的ajax请求(自娱自乐)
前端的mock数据不会和服务器进行数据任何通讯
npm install mockjs
使用步骤:
1)在项目当中src文件夹创建mock文件夹
2)准备json数据(mock文件夹中创建相应的json文件)

注意:json格式文件进行格式化一下,不能留有空格(alt+shift+f),有空格跑不起来
3)把mock数据需要的图片放在public文件夹中(public文件夹在打包的时候,会把相应的资源原封不动的打包到dist文件夹中)
public文件夹新建images文件夹
4)开始mock虚拟数据,通过mockjs模块实现,创建mockServe.js通过mock插件实现模拟数据
// 引入mockjs模块
import Mock from “mockjs”

// 引入json数据
import banner from ‘./banner.json’
import floors from ‘./floors.json’

// json文件不需对外暴露
// webpack默认对外暴露:图片,json

// mock数据,第一个参数:请求地址   第二个参数:请求数据
Mock.mock(“/mock/banner”,{code:200,data:banner});
Mock.mock(“/mock/floors”,{code:200,data:floors});

5)mockServe.js在入口处引入(至少需要执行一次)main.js
// 引入mockserve,js
import ‘@/mock/mockServe’;
api文件夹下新建mockajax.js
Listcontainer—>>index.vue

swiper使用
第一步:引入包(相应的js,css)
第二步:页面结构务必要有
第三步:(页面当中务必要有结构):new Swiper 实例【轮播图添加动态效果】

安装Swiper插件:(不要安装最新版本)
npm install --save swiper@5
// 引入Swiper包,去主函数全局引用样式
import Swiper from ‘swiper’
在main.js中引入样式,样式都一样
// 引入路由
import router from ‘@/router’
// 引入仓库
import store from ‘@/store’;
// 引入mockserve,js
import ‘@/mock/mockServe’;
// 引入swiper
import ‘swiper/css/swiper.css’


       


         

           

             
           

mounted(){
  //  派发action,通过vuex发送ajax请求,将数据存储在仓库中
  this.$store.dispatch(“getBannerList”);

// 在new swiper实例之前,页面结构必须要有
   var mySwiper = new Swiper (‘.swiper’, {
    direction: ‘vertical’, // 垂直切换选项
    loop: true, // 循环模式选项
   
    // 如果需要分页器
    pagination: {
      el: ‘.swiper-pagination’,
    },
   
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ‘.swiper-button-next’,
      prevEl: ‘.swiper-button-prev’,
    },
   
    // 如果需要滚动条
    scrollbar: {
      el: ‘.swiper-scrollbar’,
    },
  })

},
获取不到数据:
因为dispatch当中涉及到了异步语句,导致v-for遍历的时候结构还没有完全,因此不行

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值