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代码段根据不同的设备跳转不同的界面 情况有特定的几个