积累【2023/07/13】

1. margin的值为3个时、delete键、toFixed()

三个值的margin:上、右=左、下;

delete键：向后删除键

number.toFixed(num)

保留num位小数

let num = 1.555555555555
console.log(num.toFixed(5));  // 1.55556

2. vue2数组、对象失去响应式的两种解决方式

由于vue的definePrototype（访问器属性）的原因，在data里面的数据会成为响应式数据，但是当我们给响应式的对象新增属性，或者给响应式的数组增加元素时，数组的变化不会展示在页面上。如下：

<template>
    <div>
        <ul>
            <li v-for="(item) in arr" :key="item.id">
                <div>{{ item.userName }}</div>
                <div>{{ item.score }}</div>
            </li>
        </ul>
        <button @click="updateData">修改引用数据</button>
        <div>obj:{{ obj }}</div>
    </div>
</template>

<script>
export default {
    name: 'ForceUpdate',
    data() {
        return {
            arr: [
                {
                    id: 0,
                    userName: '小明',
                    score: 90,
                }, {
                    id: 1,
                    userName: '小红',
                    score: 91,
                }
            ],
            obj: {
                title: 'this is an userList',
                others: 'none'
            }
        }
    },
    methods: {
        updateData() {
            this.arr[2] = {
                id: 2,
                userName: '小泗',
                score: 92,
            }
            console.log(this.arr);
            this.obj.newStats = 'newStats'
            console.log(this.obj);
        }
    },
}
</script>

点击修改引用数据按钮，给数组新增元素、对象新增属性，输出结果如下：

可以看到，数组新增的元素和对象新增的属性都没有渲染在页面上。

在vue2中，这种引用类型失去响应式的问题有两种解决方式

• this.$set：给数组新增元素或对象新增属性，页面能够重新渲染新增的元素或属性，并且新增的元素或属性是响应式的。
• 数组：this.arr = [].concat(this.arr) 对象：this.obj = Object.assign({}, this.obj)

补充方法：

• this.$forceUpdate：强制刷新页面，页面能够重新渲染新增的元素或属性，但是新增的元素或属性仍然不是响应式的。

1.this.$set

对于数组

this.$set(Array, index, newValue)

对于对象

this.$set(Object, key, value)

下面我们更改上述案例的updateData方法如下：

updateData() {
    this.$set(this.arr, 2, {
        id: 2,
        userName: '小泗',
        score: 92,
    })
    console.log(this.arr);
    this.$set(this.obj, 'newStats', 'newStats')
    console.log(this.obj);
}

点击修改引用数据按钮，可以看到数组新增的元素和对象新增的属性都渲染在页面上，并且输出的新数据是响应式的。

2.[].concat()和Object.assign()

重新给data中的数组、对象赋值的方法也能实现给新增属性或元素添加响应式。

下面我们更改上述案例的updateData方法如下：

updateData() {
    this.arr[2] = {
        id: 2,
        userName: '小泗',
        score: 92,
    }
    this.arr = [].concat(this.arr)
    console.log(this.arr);
    this.obj.newStats = 'newStats'
    this.obj = Object.assign({}, this.obj)
    console.log(this.obj);
}

点击修改引用数据按钮，可以看到数组新增的元素和对象新增的属性都渲染在页面上，并且输出的新数据是响应式的，得到的结果和this.$set是一样的。

3.this.$forceUpdate

一般在方法里修改了引用数据类型最后调用此方法实现强制刷新页面，新增的元素或属性虽然不是响应式的，但也实现了页面更新。

下面我们更改上述案例的updateData方法如下：

updateData() {
    this.arr[2] = {
        id: 2,
        userName: '小泗',
        score: 92,
    }
    console.log(this.arr);
    this.obj.newStats = 'newStats'
    console.log(this.obj);
    this.$forceUpdate()
}

点击修改引用数据按钮，可以看到数组新增的元素和对象新增的属性都渲染在页面上，但输出的新数据并不是响应式的。

3. vue3数组、对象失去响应式的两种解决方式【待补充】

4. 微信原生wx:key=“*this”、修改对象内的属性

*this表示当前索引项，仅使用与微信原生小程序开发的wx:for

修改对象内的属性：

this.setData({
    ["obj.arr"]: newValue
})

5. 手机键盘弹起时输入框内的内容错位的解决方式

当出现这种情况的时候，可以考虑使用这两个input的属性解决。

微信原生与uniapp的input均有这两个属性。

属性	类型	默认值	备注
cursor-spacing	string	0	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
always-embed	boolean	false	强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)

6. rgba与opacity的区别

rgba()和opacity都能实现透明效果，它们主要有以下两个区别：

• opacity作用于元素，以及元素内的所有内容的透明度，设置的透明度会被子级元素继承；而rgba()只作用于元素的颜色或其背景色，不会被子元素继承透明效果！

如下案例：若使用opacity设置0.5的透明度，十字背景图片将会有0.5的透明度导致跟ui原稿颜色不一致，这种情况使用rgba即可解决。

<template>
    <div class="box">
        <div class="rgba-bgc">
            <div class="img-upload"></div>
        </div>
        <div class="opacity-bgc">
            <div class="img-upload"></div>
        </div>
    </div>
</template>
<style scoped>
.box {
    display: flex;
    width: 300px;
    margin: 0 auto;
    justify-content: space-between;
}
.rgba-bgc {
        width: 92px;
        height: 92px;
        background: rgba(203, 224, 208, 0.5);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .opacity-bgc {
        width: 92px;
        height: 92px;
        background: #cbe0d0;
        opacity: 0.5;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img-upload {
        width: 60px;
        height: 60px;
        background-image: url(https://pro-core.babycdn.com/2021/aosmith/lottery/images2020/watersystem/case/robot/img_upload.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

7. background-size

此属性用来设置背景图像的尺寸，该属性的可选值如下：

• xpos ypos：使用像素（px）或其它 CSS 单位来设置背景图像的高度和宽度，xpos 表示宽度，ypos 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
• x% y%：使用百分比表示背景图像相对于所在元素宽度与高度的百分比，x% 表示宽度，y% 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
• cover：保持背景图像的横纵比例并将图像缩放至足够大【裁剪】，使背景图像可以完全覆盖元素所在的区域，这么做可能会导致背景图像的某些部分超出元素区域而无法显示
• contain：保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域，背景图像可能无法完全覆盖整个元素区域

8. 原生的oninput和vue的@input

注意点：

• vue中中原生的oninput绑定方法是无法使用的，会报错，使用@input代替。
• 原生input的prop：min和max只在输入框尾部的增减按钮操作时生效，直接输入时，如果超过范围是不会生效的。
• 因此要实现限制原生输入框的输入内容，可以通过监听器或oninput实现，但是此oninput不能绑定methods中的方法。

案例：

<template>
    <div>
        <h3>通过监听器或oninput实现限制输入框输入的数字在[0-100]的范围h3>
        <div>监听器div>
        <input type="number" v-model="inputValue_2">
        <div>oninput【使用value，并且不绑定methods中的方法】div>
        <input type="number" v-model="inputValue_3" 
        oninput="if(value>100)value=100;if(value<0)value=0;value=parseInt(value)">
    div>
template>

<script>
export default {
    data() {
        return {
            inputValue_2: 0,
            inputValue_3: 0
        }
    },
    watch: {
        inputValue_2: {
            handler(newValue, oldValue) {
                if (newValue > 100) {
                    this.inputValue_2 = 100
                } else if (newValue < 0) {
                    this.inputValue_2 = 0
                } else {
                    this.inputValue_2 = newValue
                }
            }
        }
    }
}
script>

9. git tag管理 前端群git相关文件【待周末补充】