id生成器、URL转换规则、scc全局变量配置、剩余参数

置身事内
168 阅读4分钟

1. vscode中实现自由编辑折叠区域

//#region
    你想要折叠的代码片段
//#endregion

2. 解构赋值中不常见但好用的rest语法

注意第三个值的输出 ES6中的rest剩余模式(剩余参数)，返回剩下的值组成的数组或对象，只能放在最后面，否则会报错

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

3.Element UI中可以利用具名插槽给表格设置自定义样式

image.png

<el-table>
    <template #empty>
        <div class="empty_boxs">
          <img src="@/assets/images/emty.png" alt="" />
          <span>暂无数据</span>
        </div>
    </template>
</el-table>

4.null值除于1000等数字值为0

image.png

image.png

5.自动触发鼠标的点击事件

  • MouseEvent()  构造器创建一个 MouseEvent
  • EventTarget.dispatchEvent 向一个指定的事件目标派发一个事件,
 // 创建一个单击事件
  var event = new MouseEvent('click');
// 触发a的单击事件
  a.dispatchEvent(event);

6.vue中样式加上scoped之后样式不起作用

问题场景： 当使用Element UI的时候，使用到了里面的组件，然而加上了scoped属性，在当前页面修改的样式不会影响到子组件里面的样式，所以样式不起作用
解决方案： 使用深度选择器

  • 使用>>>操作符
  • 使用了scss之类的预处理,得使用::v-deep或者/deep/来代替>>>
  • vue3中统一使用 :deep()来处理
<style lang="scss" scoped>
::v-deep .el-drawer__body {
  padding: 15px;
}
::v-deep .asset_content_box {
}
</style>

7.位与运算判断奇偶性

const num = 15;
if(num & 1) {
    console.log('这是奇数')
}else{
    console.log('这是偶数')
}

tips：利用计算机中二进制按位与运算，通过 & 1 ，可以得出 奇数（十进制）位与1的结果是1，偶数（十进制）位与1的结果是0。

8.??运算符

image.png

tips:当 ?? 左侧的值是 null 或者 undefined 的时候才返回右侧的值,可以用于当后端接口没返回值或者返回null时，前端转为'暂无数据'方式

9.id生成器

const uuid = crypto.randomUUID(); //

image.png tips：利用 Web Crypto 提供的加密接口，可以很方便的使用其 api 生成 uuid

10.数组过滤值为false的情况

const arr=[false,null,NaN,0,"",undefined,1,-2,3];
const nArr=arr.filter(Boolean)

image.png

11.css函数中url函数

vue cli中URL转换规则

  • 如果URL是一个绝对路径(例如/images/foo.png)，它将会被保留不变。
  • 如果URL是以.开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
  • 如果URL以~开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用Node模块中的资源
<img src="~some-npm-package/foo.png">
  • 如果URL以@开头，它也会作为一个模块请求被解析。它的用处在于Vue CLI默认会设置一个指向<projectRoot>/src的别名@.仅作用于模板中
{   background: url(~@/assets/img/04_2.jpg); 
    background: url('~@/assets/img/04_2.jpg');//这里有个坑，写成字符串部分打包工具会找不到图片路径.不过两种写法都没问题
}

13. 数组扁平化/String()

image.png tips:运用了 console.log(String([1, 2, 3, [4, 5]])); // 1,2,3,4,5的原理

14. includes比indexOf好在哪里？

image.png

tips: includes 可以检测 NaN , indeOf 不能检测 NaN , includes内部使用的是Number.isNaN对NaN进行了匹配

15. Number.isNaN

image.png tips: Number.isNaN方法确定传递的值是否为 NaN，并且检查其类型是否为 Number。它是原来的全局 isNaN() 的更稳妥的版本。

16.使用双*号代替Math.pow()

const power=4**3
//等价于  const power = Math.pow(4,3)

17.使用双~(去尾法)

const floor = ~~6.8;//6
const floor1 = ~~-6.8//-6
const floor = Math.floor(6.8);//6
const floor1 = Math.floor(-6.8)//-7

tips:注意Math.floor是向下取整，~~是去尾法，他们两不是对等关系的

18.scss相关

-含义：SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件

  • vue cli 配置全局scss变量
// vue.config.js
module.exports = {
 css: {
   loaderOptions: {
     // 给 sass-loader 传递选项
     sass: {
       // @/ 是 src/ 的别名
       // 所以这里假设你有 `src/variables.sass` 这个文件
       // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
       additionalData: `@import "~@/variables.sass"`
     },
     // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
     // 因为 `scss` 语法在内部也是由 sass-loader 处理的
     // 但是在配置 `prependData` 选项的时候
     // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
     // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
     scss: {
       additionalData: `@import "~@/variables.scss";`
     },
     // 给 less-loader 传递 Less.js 相关选项
     less:{
       // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
       // `primary` is global variables fields name
       globalVars: {
         primary: '#fff'
       }
     }
   }
 }
 extract: true,
}

持续更新中~~~

avatar
文章
阅读
粉丝