240506

:not选择器

用于选择非xx的元素，如 .btn:not(:nth-child(1)) ，在btn类中选择非第一个子元素的其他元素。

Object.fromEntries

通过传入以 [key, value] 结构为元素的数组，构造出一个整合该数组所有key-value的对象字面量

let entries = [['a', 1], ['b', 2]]
let obj = Object.fromEntries(entries)
// obj: {a:1, b:2}

Object.keys

传入一个对象，以数组的形式返回其所有的key

let obj = {a:1, b:2}
let keys = Object.keys(obj)
// keys: [a, b]

vue中click事件函数不传值

<template>
	<button @click="handleClick"></button>
	<button @click="handleClick(123)"></button>
</template>
<script>
export default {
    methods: {
        handleClick(param) {
            console.log(param)
        }
    }
}
</script>

相比于react直接传参会立即执行，vue允许声明处理函数时携带参数，因此 handleClick(123) 会输出123

但是，对于这类原生事件click，即使声明时没有携带参数，也会默认传入一个事件参数event。

所以 handleClick 这个事件点击后会输出event，而不是undefined。

ApacheEcharts的init方法（在vue中）

设想：由于图形渲染需要事件，可不可以在created时期，各个属性都创建完成的时候，执行 init 方法呢？

答案：不可以！

原因：因为 init 方法是通过获取dom树上的节点进行再处理的，而created时期并没有渲染完真实dom。

el-form-item单个绑定rules属性

直接绑定 rules 属性会显示红色*表示这个数据项需要通过验证，但是并不会真实生效。

需要额外指定 prop 属性，因为 rules 本身是通过 el-form 中声明的 model 数据然后找到对应 prop 属性来对这个值进行校验的。

如果不指定 prop，无法捕捉到这个数据项的值，当然无法进行数据验证。

如何将module数据绑定到vue模板

<script>
import * as productStatus from '@/constants/product'

export default {
  computed: {
    productStatus() {
      return productStatus
    },
  },
}
</script>

最好绑定只读数据，如果让其可修改，会造成数据干扰。

如何将函数绑定到vue模板中

在methods体内再声明就可以了

<script>
import { getFormatTime } from '@/utils/timeFormatter'

export default {
  methods: {
    getFormatTime,
  }
}
</script>

如何使用lodash

1. 安装依赖

npm install lodash

2. 引入lodash

import _ from "lodash"

3. 使用

_.sort([1,2], 3) // [1,2,3]