【小趴菜前端学习日记3】

一、深度（穿透）选择器

在vue项目的开发过程中，当我们想修改element-ui组件库的原生样式时，需要去掉scoped属性才能直接修改成功，但是这样可能会作用于全局样式，因此我们可以使用深度选择器，才能修改成功。

1. /deep/

特点主要适用于vue的老版本 vue.js 2;css扩展语言是less或者node-sass

<style lang="less" scoped>
    /deep/.el-button{
         span{
                color: '#f00'
         }
    }
</style>

2.>>>

适用于css的原生样式

<style lang="css" scoped>
    .el-button >>> span{
        color: '#f00'
    }
</style>

3. ::v-deep

通用于所有扩展的css语言，在vue3中更推荐使用，如果使用/deep/可能会因为无法编译而报错 ：deep是vue3中对其的别名

<style lang="scss" scoped>
    .el-button::v-deep{
         span{
                color: '#f00'
         }
    }
    
</style>

二、vue-particles

粒子动画特效背景 粒子可以跟随鼠标移动

1.安装

npm install vue-particles --save-dev

2.全局引入

//main.js
import VueParticles from ‘vue-particles’

Vue.use(VueParticles)

3.使用

  <vue-particles color="#0087ff" :particleOpacity="1" :particlesNumber="100" shapeType="circle" :particleSize="4"
          linesColor="#dedede" :linesWidth="2" :lineLinked="true" :lineOpacity="1" :linesDistance="150" :moveSpeed="3"
          :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
 </vue-particles>

color: String类型。默认'#dedede'。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认'#dedede'。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"

三、v-bind对于样式控制的增强之操作类名class

:前是绑定的类名，：后是布尔值，根据布尔值是否为true绑定对应的class

默认情况下绑定的类名是userDefault,当userFocus变为true时绑定类名为userFocus
通过动态绑定class实现鼠标focus时输入框的边框变为高亮

当账户和密码为空时控制p标签的隐藏和显示也可以用此方法

四、CryptoJs加密

链接: 详情

五、自定义指令的封装和使用

链接: 详情参考

//index.js
import copy from './modules/copy'
import permission from './modules/permission'
import debounce from './modules/debounce'


// 自定义指令
const directives = {
    copy,
    permission,
    debounce
};

// 这种写法可以批量注册指令
export default {
    install(app) {
        Object.keys(directives).forEach((key) => {
            app.directive(key, directives[key]);
        });
    },
};

防抖

在main.js中导入

import Vue from 'vue';
import debounce from './directives/debounce';
Vue.directive('debounce', debounce);

使用：

<div>
	<button @click="addRequest" v-debounce>发送请求<button>
<div/>

六、mixins

链接: 详解

七、复制字段

    // 点击复制
    toCopy(row, column, cell, event) {
      let filterArr = ["操作", "状态", "是否可用","是否启用","是否手动调度","是否受保护","是否有效","公网IP地址","SD-WAN","客户端地址"]; //不需要复制的字段
      let dom = event.target; //点击的dom
      let key = column.property; //当前单元格数据接收的数据字段
      let value = String(row[key]) ; //当前单元格对应的数据
      dom.classList.add("copy");
      let res = this.isCopy(column.label, filterArr);//判断是否可以复制
      //   值为空 或者 被过滤的字段不能复制
      if (!value || !res) return;
      let clipboard = new Clipboard(".copy", { text: () => value});
      //成功回调
      clipboard.on("success", function (e) {
         Notification({
          title: "复制成功",
          dangerouslyUseHTMLString: true,
          message: `<b> ${column.label}</b> 已复制到粘贴板上`,
          type: "success",
        });
        e.clearSelection();
        clipboard.off("success");
        dom.classList.remove("copy");
        clipboard.destroy();
      });

    },
    // 判断字段是否可以复制
    isCopy(value, arr) {
      return !arr.some((str) => value.includes(str));
    }

vue-clipboard复制文本插件

链接: 详解

八、vue.prototype

链接: 详解

九、rules属性

链接: 详解

十、vue实现动态路由和懒加载

链接: 详解

十一、$router和$route的区别详解

链接: 详解

十二、正则表达式

链接: 详解1
链接: 详解2