工作杂谈一（基于Vue项目）

最新推荐文章于 2021-12-28 17:24:53 发布

燃情雪

最新推荐文章于 2021-12-28 17:24:53 发布

阅读量293

点赞数

分类专栏：工作杂谈

本文链接：https://blog.csdn.net/h1234561234561/article/details/104186057

版权

工作杂谈专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、关于vue中style标签中的lang及scoped属性
lang属性：标志此style是原生的css还是css预语言（比如，less,scss等）
scoped属性：标志此style是否为全局样式（也就是说若加上此属性，当编译到浏览器后，会给每个样式对应的元素添加一个唯一标志的属性data-v-xxx，并且css选择器上会加上属性选择）
例如：
在这里插入图片描述
示例代码：

<style lang='scss' scoped>
button {
  @include color(green);
}
</style>

PS：若想在父组件中对子组件进行深度css渲染，可以使用关键字deep或则使用简易模式
注意一点：在scss这种预语言时，官方建议模式失效，必须使用deep关键字。
示例：

// 父组件：
<template>
  <section>
    <Uploader class="test" />
  </section>
</template>

<style lang='scss' scoped>
.test {
  /deep/ p{
    color: red;
  }
}
</style>

// 子组件（Uploader组件） 
<template>
  <div>
    <p>test</p>
  </div>
</template>

二、svg使用注意事项
若svg内部代码存在fill字段，则外部样式无法改变其颜色
1、存在fill字段svg代码（外部css不可更改其颜色）

<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
    <title>+</title>
    <desc>Created with Sketch.</desc>
    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="PingFangSC-Medium, PingFang SC" font-size="23" font-weight="400" letter-spacing="0.411294">
        <g id="添加提货地址复制" transform="translate(-105.000000, -462.000000)" fill="#727781">
            <g id="编组" transform="translate(-0.000000, 125.000000)">
                <text id="+">
                    <tspan x="104" y="349">+</tspan>
                </text>
            </g>
        </g>
    </g>
</svg>
// 若想使用外部css设定的颜色，必须将fill字段全部删除，包括fill="none"

2、不存在fill字段svg代码（外部css可更改其颜色）

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1557226332974" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2862" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M542.308283 480.000192H926.290631c17.672498 0 31.998785 14.326287 31.998785 31.998785s-14.326287 31.998785-31.998785 31.998785H542.308283v383.981324c0 17.672498-14.326287 31.998785-31.998785 31.998785s-31.998785-14.326287-31.998785-31.998785V543.996738H94.330412c-17.672498 0-31.998785-14.326287-31.998785-31.998785s14.326287-31.998785 31.998785-31.998784h383.981325V96.018867c0-17.672498 14.326287-31.998785 31.998784-31.998785s31.998785 14.326287 31.998785 31.998785v383.981325z" p-id="2863"></path></svg>

三、package.json中dependencies和devDependencies字段含义
dependencies字段：包含的是项目运行时所用的依赖（简单来说就是你写代码时所用到的外部引入依赖包，比如你代码里面要用到vue，你就需要加载vue这个依赖）。

devDependencies字段：包含的是项目开发需要的依赖（简单来说就是你写代码时不会用到，但是起初想把你的项目构建起来，并设置相应配置以及后期的打包就会用到这些依赖，比如node-sass和sass-loader）。

四、关于单个加载dependencies和devDependencies中的某个依赖以及与node_modules的关联
1、npm install 默认会加载这两种依赖到node_modules文件夹中
2、npm install name --save 这会将名为name的依赖项加载到node_modules文件夹中，名称目录在dependencies字段对象中
3、npm install name --save-dev 这会将名为name的依赖项加载到node_modules文件夹中，名称目录在devDependencies字段对象中
4、在dependencies和devDependencies中的都是node_modules中依赖的名称和版本号，它们的关系就好像dependencies和devDependencies是本书的目录，而node_modules是这本书的内容部分

五、关于dependencies依赖项的使用（此时我们只是加载这些依赖，并没有引入到代码中使用）
1、依赖项在项目全局代码都有可能使用到
这种情况下就在最开始的main.js中引入到项目的全局中，在vue中可以使用Vue.use(name)
示例：

import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'

Vue.use(VueVideoPlayer)
// 这样就将vue-video-player依赖引入到项目全局代码中了

2、依赖项只在项目中【某些/某个】模块代码中使用到
这种情况下就在只需要此依赖的文件中引入即可，可以使用import Name from '依赖名称'
示例： import BScroll from 'better-scroll';

六、正则test方法中全局标志符g的使用注意事项
关于正则中的.test方法，需要注意的是是否添加了全局标识符g。

情况一：当正则添加了全局标识符g时
此时，由于添加了全局标识符，正则会全局匹配字符串是否存在正则表达式相关字段，但是.test方法是一个只返回Boolean类型的方法，那怎么进行全局匹配检索呢？它又不是想str.match(reg)一样返回一个类数组。那此时它就会根据lastIndex来开始匹配，简单来说，开始lastIndex为0，当匹配到正则相关字段时lastIndex就会变为n + 1【n为正则字段中最后一个字符在字符串的位置（从0开始数起）】，直到没有匹配到正则中的相关字段，lastIndex才会重新置为0。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    const str = '15261abc12abc'
    const reg = /abc/g
    console.log('result1', reg.test(str)) // true
    console.log('lastIndex1', reg.lastIndex) // 8
    console.log('result2', reg.test(str)) // true
    console.log('lastIndex2', reg.lastIndex) // 13
    console.log('result1', reg.test(str)) // false【没有匹配到相关字段,indexIndex置为0】
    console.log('lastIndex1', reg.lastIndex) // 0
    console.log('result2', reg.test(str)) // true【重新开始上述循环】
    console.log('lastIndex2', reg.lastIndex) // 8
  </script>
</body>
</html>

情况二：当正则没有添加了全局标识符g时
此时，正则没有全局标志符g时，正则每次就会只匹配目标字符串中的第一个符合字符段，因此每次lastIndex只会为0。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    const str = '15261abc12abc'
    const reg = /abc/
    console.log('result1', reg.test(str)) // true【只会匹配到第一个'abc'，就会将lastIndex置0】
    console.log('lastIndex1', reg.lastIndex) // 0
    console.log('result2', reg.test(str)) // true
    console.log('lastIndex2', reg.lastIndex) // 0
  </script>
</body>
</html>