小笔记

1.vuejs不能监测到给数组赋值 因为javascript的限制 

解决办法：this.curarrlist.splice(index,1,curindexval)

2.数组有关的操作（去重）

    常规:

• let arr = [11, 23, 26, 23, 11, 9]
• const deduplication = arr => [...new Set(arr)]
• console.log(deduplication(arr)); // [ 11, 23, 26, 9 ]

   

   保留数组中非重复数据:

• let arr = [11, 23, 26, 23, 11, 9]

• const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i))

•  

  console.log(filterNonUnique(arr));  // [ 26, 9 ]

保留数组中重复元素:

• let arr = [11, 23, 26, 23, 11, 9]
• const filterUnique = arr => arr.filter(i => arr.indexOf(i) !== arr.lastIndexOf(i))
• console.log(filterUnique(arr)); // [ 11, 23, 23, 11 ]

--------------------- 
作者：StevenDIY 
来源：CSDN 
原文：https://blog.csdn.net/momDIY/article/details/81351140 

3.数组有关的赋值操作且不改变源数组的内容(浅拷贝)

• 1.concat 方法

  let arr2=arr1.concat();

• 2.slice  方法

   let arr2=arr1.slice(0);

--------------------- 
作者：zSY_snake 
来源：CSDN 
原文：https://blog.csdn.net/zSY_snake/article/details/81810349

4.对象有关的赋值操作 因为对象赋值直接是默认赋值引用的。（浅拷贝）

eg: let a={ name:'1',title:'test'}

      let b=a;

      b.name="234"

     因为引用赋值了，则会造成a.name="234"

解决办法:let b=Object.assign({}, a); 重新分配对象

--------------------- 
作者：曾经去过跨越一个小时的地方 
来源：CSDN 
原文：https://blog.csdn.net/u012814856/article/details/81078279

5.vue-lazyload 动态切换图片问题

<img v-lazy="ImgSrc" :key="ImgSrc">

--------------------- 
作者：N_years
来源：CSDN 
原文：https://blog.csdn.net/ly124100427/article/details/81016378

 

6.vuejs中watch监听

内包含整个对象的监听+某个对象中某个属性的监听

1.对象监听

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

2.对象中的某个属性监听

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

作者：zhumengzj
来源：CSDN 
原文：https://blog.csdn.net/zhumengzj/article/details/78742069#commentBox

 

7.普通图片转换为.ico 格式

地址: http://www.faviconico.org/favicon

8.数组中最大最小值

let arrs=[1, -99, 22, 10, 9];
Math.min(...arrs)
// -99

Math.max(...arrs)

//22

9.判断字符串是否包含某个片段

let url = 'http://www.itlike.com';

url.startsWith('http')

//return true 判断字符串是否以http开头

url.endsWith('.com')

//return true 判断字符串是否以http结尾

url.includes('itlike')

//return true 判断字符串是否包含itlinke

url.repeat(100)

//拷贝100份 

10.数组深浅拷贝

let oldArr = [
 
      '小煤球', 10, 
 
      {df1: '小Python',  df2: '土豆'}
 
 ];
 
 let newArr = Array.from(oldArr); //浅拷贝 当数组有对象时，改变新数组中对象的属性值，则会影响到原数据
 newArr.df1="小小"
 console.log(oldArr); 
 console.log("=====");
 console.log(newArr);
//result newArr oldArr内的df1都改变了



let newArr2=JSON.parse(JSON.stringify(oldArr)) //深拷贝
 newArr2[2].df1="小小"
 console.log(oldArr); 
 console.log("=====");
 console.log(newArr2);
//result 仅有newArr2中的df1属性的值修改了

11.vue项目移动端又弹出框时禁止被遮盖的页面的滚动

在弹出的遮罩层的dom元素上添加@touchmove.prevent即可

12.vue项目中后端返回文件链接前端下载文件到本地 这是前端下载文件最方便、实用的一种方式

  let a = document.createElement('a');
  a.href = url;
  a.download = 'demo.xlsx';
  a.click();

13.插槽传值  子组件传递给父组件中的值

eg：场景：如下图所示  多个不同样式的组件公用一个下拉加载和获取数据api的需求 

 

 实现代码如图所示:

1.公共组件加载更多

2.父组件 ⚠️slot-scope就是插槽的作用域 所以.curdata即为传递过来的参数的值

14.响应式布局和自适应布局区别

1.响应式布局是一套代码适应所有终端 flex 媒体查询 rem(root 浏览器文档根元素html的font-size的大小的计量单位) 等布局  情况多个复杂性更高 使用频率更多

2.自适应布局根据不同的设备编写不同的代码片段 使用js代码段根据不同的设备跳转不同的界面 情况有特定的几个