day03

1.一级分类添加背景颜色
第一种：采用样式完成
        .item:hover {
          background-color: skyblue;
第二种：采用js完成
待定
2.js控制二三级分类的显示与隐藏
1.最开始通过css的display：显示与隐藏
 // &:hover {
          //   .item-list {
          //     display: block;
          //   }
          // }
2.通过js控制
 
     

       

         

            <h3 @mouseenter=“changeIndex(index)”>
               
              {{ c1.categoryName }}
           
           
           

             

data() {
    return {
      //存储用户鼠标移动哪一个位置
    currentIndex:-2
    }

},
 methods:{
    // 鼠标进入修改响应式curentIndex属性
    changeIndex(index){
    //index，鼠标移动到某一个一级分类
    this.currentIndex = index;
    }
  }

3.卡顿现象
正常情况：用户慢慢的操作，鼠标进入，每一个一级分类都会触发鼠标进入事件
非正常情况：用户的操作很快，本身所有的以及分类都应该触发，但实际操作只有部分触发
由于用户的行为过快，导致浏览器反应不过来，如果当前的回调函数中有很多的业务，有可能出现卡顿现象
3.1函数防抖
前面的所有的触发都被取消，最后一次执行在规定的时间之后才能触发
简单来说：如果快速触发，只会触发一次
3.2函数节流
在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才能触发回调，把频繁触发变为少量触发
3.3lodash插件
里面封装了函数的 防抖和节流的业务【闭包和延迟器】
lodash函数对外暴露_函数
//防抖
官网—》》函数–》》debounce—》》func，wait，option
let result = _.debounce(function(){

console.log("我在一秒后执行一次");

},1000);
result();

//节流
官网—》》函数—》》throttle–》》wait，option
button.οnclick= _.throttle(function(){

console.log("我在一秒只能执行一次");

},1000);
result();

4.三级联动节流
// 这种引入的方式，是把lodash全部的功能函数引入
// import _ from ‘lodash’;
// 最好的方式，按需引入
import throttle from “lodash/lodash”

methods:{
    // 鼠标进入修改响应式curentIndex属性
    // changeIndex(index){
    // //index，鼠标移动到某一个一级分类
    // this.currentIndex = index;
    // }  es6

changeIndex:throttle(function(index){
  //index，鼠标移动到某一个一级分类
    this.currentIndex = index;
    },50)
    // es5
  }
5.三级联动组件的路由跳转和传递参数
三级联动用户点击：一级分类、二级分类、三级分类
当点击的时候，会从home模块跳转到search模块，一级会把用户选中的产品（产品的名、产品的id）在路由的跳转的时候，进行传递。
路由跳转：
声明式导航：router-link
编程式导航：push | replace
三级联动：如果使用声明式导航router-link，可以实现路由的跳转与传递参数。
但是需要注意：出现卡顿现象
router-link：当服务器的数据返回之后，选混出很多的router-link组件，
创建组件实例的时候，一般创建1000+很好内存的，因此出现了卡顿现象。
<a @click=“goSearch” href=“”>{{ c1.categoryName }}
goSearch(){
    // 进行路由跳转的方法
    this.$router.push(‘/search’);
  }
方法二：

       

goSearch(event) {
      // 进行路由跳转的方法
      // this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …转         this.router.push(location);
      }
    },

{{ c1.categoryName }}