Vue进阶知识笔记

利用v-for循环出的多个li标签，点击不同的li变换颜色

方法一

    <ul v-for="(item,index) in list" :key="index" class="details">
        <li ref="lisd" @click="faillist(index)" :class="{'active':ind === index}">{{item.msg}}</li>
    </ul>
    
      data() {
        return {
      list: [
        {
          msg: "用户管理"
        },
        {
          msg: "用户列表"
        },
        {
          msg: "用户输入"
        },
        {
          msg: "菜单选项"
        }
      ],
      ind:''
    };
  },
  methods:{
      faillist(index){
          this.ind = index
      }
  },

方法二

• vue项目引入jquery npm i jquery --save 这样全局就可以使用jquery啦。

<ul v-for="(item,index) in list" :key="index" class="details">
    <li ref="li" @click="faillist($event)">{{item.msg}}</li>
</ul>

methods: {
    faillist(e) {
    //使用e.currentTarget获取当前被点击的元素
    let Dom = e.currentTarget;
    $("li").removeClass("active")
    $(Dom).addClass('active')
      console.log(Dom2)
    }
  },

• 这样就实现了点击不同的li标签实现了变颜色

利用递归循环导航菜单

//   递归重组数据
RegroupRows(tree) {
  let arr = []
  let obj = {}
  if (tree != null) {
    tree.forEach((item, index) => {
      const tmp = { ...item }
      if (tmp.children || tmp.children === null) {
        tmp.children = this.RegroupRows(item.children)
        if (item.RoleEnable && item.Enable) {
          obj = tmp
          arr.push(obj)
        }
      }
    })
  }
  return arr
},

### vue里面$set() 方法
作用：给data里面定义的对象添加新的属性以及value值<br>
语法：this.$set(this.obj,'age',24)

data(){
    return {
        student{
            name:'张三'，
            sex:'男'
        }
    }
}
mounted(){
    this.$set(this.student.age,24)
}
console.log(this.student)==>{
    student{
            name:'张三'，
            sex:'男',
            age:24
        }
}

## Vue项目分层开发
约束：数据处理应该在store中，请求在store的action中
### 行为层
体现在vue组件和路由上，存放一些简单的数据主要用于与用户之间及时交互
### 数据存储层
体现在vuex状态管理器中，通俗的来讲就是将请求来的数据进行存储和处理
### 协议层
包括http请求数据和本地获取等

js解决加减乘除精度的问题

// 解决精度问题,加减乘除 实例：floatObj.add(a1,a2)

const floatObj = function () {
 判断obj是否为一个整数
function isInteger(obj) {
  return Math.floor(obj) === obj;
}

/*
 * 将一个浮点数转成整数，返回整数和倍数。如 3.14 >> 314，倍数是 100
 * @param floatNum {number} 小数
 * @return {object}
 *   {times:100, num: 314}
 */
function toInteger(floatNum) {
  var ret = { times: 1, num: 0 };
  if (isInteger(floatNum)) {
	ret.num = floatNum;
	return ret;
  }
  var strfi = floatNum + "";
  var dotPos = strfi.indexOf(".");
  var len = strfi.substr(dotPos + 1).length;
  var times = Math.pow(10, len);
  var intNum = parseInt(floatNum * times + 0.5, 10);
  ret.times = times;
  ret.num = intNum;
  return ret;
}

/*
 * 核心方法，实现加减乘除运算，确保不丢失精度
 * 思路：把小数放大为整数（乘），进行算术运算，再缩小为小数（除）
 *
 * @param a {number} 运算数1
 * @param b {number} 运算数2
 * @param op {string} 运算类型，有加减乘除（add/subtract/multiply/divide）
 *
 */
function operation(a, b, op) {
  var o1 = toInteger(a);
  var o2 = toInteger(b);
  var n1 = o1.num;
  var n2 = o2.num;
  var t1 = o1.times;
  var t2 = o2.times;
  var max = t1 > t2 ? t1 : t2;
  var result = null;
  switch (op) {
	case "add":
	  if (t1 === t2) {
		// 两个小数位数相同
		result = n1 + n2;
	  } else if (t1 > t2) {
		// o1 小数位 大于 o2
		result = n1 + n2 * (t1 / t2);
	  } else {
		// o1 小数位 小于 o2
		result = n1 * (t2 / t1) + n2;
	  }
	  return result / max;
	case "subtract":
	  if (t1 === t2) {
		result = n1 - n2;
	  } else if (t1 > t2) {
		result = n1 - n2 * (t1 / t2);
	  } else {
		result = n1 * (t2 / t1) - n2;
	  }
	  return result / max;
	case "multiply":
	  result = (n1 * n2) / (t1 * t2);
	  return result;
	case "divide":
	  result = (n1 / n2) * (t2 / t1);
	  return result;
  }
}

// 加减乘除的四个接口
function add(a, b) {
  return operation(a, b, "add");
}

function subtract(a, b) {
  return operation(a, b, "subtract");
}

function multiply(a, b) {
  return operation(a, b, "multiply");
}

function divide(a, b) {
  return operation(a, b, "divide");
}

// exports
return {
  add: add,
  subtract: subtract,
  multiply: multiply,
  divide: divide,
}
  }()
export { floatObj };

```

js防抖、节流方法

 * 函数防抖
 */
 export function debounce(fn, delay) {
    // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
        fn.apply(that,args)
    }, delay);
  }
}
/**
 * 用法  save:debounce(function(){
 *       },30000),
 * 函数节流 触发事件立即执行，但在n秒内连续触发不执行
 * @param {*} fn 
 * @param {*} wait 
 * @returns 
 */
export function throttle(fn, wait = 3000 ){
  let timer;
  return function() {
    if(timer != null) return
    let context = this;
    let args = arguments;
    fn.apply(context, args);
    timer = setTimeout( ()=> {
      timer = null;
    }, wait)
  }
}