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

news2024/11/24 16:21:38

学习项目

  • 一、深度(穿透)选择器
    • 1. /deep/
    • 2.>>>
    • 3. ::v-deep
  • 二、vue-particles
    • 1.安装
    • 2.全局引入
    • 3.使用
  • 三、v-bind对于样式控制的增强之操作类名class
  • 四、CryptoJs加密
  • 五、自定义指令的封装和使用
    • 防抖
  • 六、mixins
  • 七、复制字段
    • vue-clipboard复制文本插件
  • 八、vue.prototype
  • 九、rules属性
  • 十、vue实现动态路由和懒加载
  • 十一、\$router和\$route的区别详解
  • 十二、正则表达式

一、深度(穿透)选择器

在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的区别详解

链接: 详解

十二、正则表达式

链接: 详解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2058363.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

复制与引用

复制 复制有复制的特点。 复制可以将不可思议的巧合转变成必然。 假设基于很大的运气成分&#xff0c;探索出了一个执行流程。如果没有任何记录&#xff0c;那么下次再复现出这个流程&#xff0c;会需要同样的运气&#xff0c;甚至可能更多。但运气并不会总是发生的&#xff0c…

微服务注册中心

目录 一、微服务的注册中心 1、注册中心的主要作用 &#xff08;1&#xff09;服务发现 &#xff08;2&#xff09;服务配置 &#xff08;3&#xff09;服务健康检测 2、 常见的注册中心 二、nacos简介 1、nacos实战入门 &#xff08;1&#xff09;搭建nacos环境 &am…

20240821 每日AI必读资讯

&#x1f3ae;《黑神话&#xff1a;悟空》震撼上线&#xff0c;英伟达AI技术立功&#xff01; - 中国游戏史上的奇迹&#xff1a;《黑神话&#xff1a;悟空》预售销售额达3.9亿元&#xff0c;刷新国产游戏预售纪录。 - 游戏美学效果惊人&#xff1a;孙悟空形象深入人心&#…

Bootstrap 插件概览

在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件&#xff0c;扩展了功能&#xff0c;可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员&#xff0c;您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap …

【重磅】WHO推荐的2024-2025年流感疫苗株组分更新了,快来看看有哪些变化吧?

前 言&#xff1a; 流感病毒会引起季节性流感&#xff0c;甚至有可能引起大流行暴发。流感病毒是负链RNA病毒&#xff0c;其分类复杂&#xff0c;亚型众多&#xff0c;容易突变。目前公认的预防流感的最佳方法是接种疫苗。为了保证疫苗的有效性&#xff0c;世界卫生组织&#…

【SAP HANA 41】HANA中函数 COUNT(DISTINCT(xxx)) 的方式使用

目录 一、语法 二、COUNT(*) 三、COUNT( [ ALL ] ) 四、COUNT(DISTINCT ) 在SAP HANA数据库中,COUNT 函数用于计算表中行的数量或者特定列中非NULL值的数量。你提到的语法是COUNT函数的不同用法,它们允许你根据需要对数据进行计数。下面是对每种用法的解释以及示例。 一…

路由高阶用法 Vue2

1.几个注意点 Home.vue <template><div><h2>我是Home内容</h2><ul class"nav nav-tabs"><li class"nav-item"><router-link class"nav-link" active-class"active" to"/home/news"…

TilesetLaye存在时,使用mask遮罩层,会出现锯齿的解决方案

TilesetLaye存在时&#xff0c;使用mask遮罩层&#xff0c;会出现锯齿 function addDemoGeoJsonLayer1() {const tiles3dLayer new mars3d.layer.TilesetLayer({name: "合肥市建筑物",url: "//data.mars3d.cn/3dtiles/jzw-hefei/tileset.json",maximumSc…

SparkSQL数据类型

支持的数据类型 SparkSQL支持的数据类型如下&#xff1a; 数值类型 ByteType&#xff1a;表示1字节带符号整数&#xff08;“带符号”意味着它可以表示正数和负数。&#xff09;。数字的范围是-128到127。ShortType&#xff1a;表示2字节带符号整数。数字的范围是-32768到32…

打造更高效的项目:如何选择合适的管理工具

国内外主流的 10 款项目工程管理系统对比&#xff1a;PingCode、Worktile、Asana、Trello、Monday.com、ClickUp、Wrike、泛微项目协同工具、广联达项目管理软件、泛普OA。 在选择项目工程管理系统时&#xff0c;你是否经常感到无从下手&#xff0c;担心投资不当或工具不适合自…

细数全球七大网络空间安全搜索引擎

随着网络攻击的频率和复杂性不断增加&#xff0c;安全专业人士需要利用各种工具来识别和应对潜在的威胁&#xff0c;网络安全搜索引擎就是其中之一&#xff0c;它们帮助安全专家查找漏洞、分析威胁情报以及监控互联网活动&#xff0c;本文将介绍全球七大网络安全搜索引擎。 1.…

误闯机器学习(第一关-概念和流程)

以下内容&#xff0c;皆为原创&#xff0c;实属不易&#xff0c;请各位帅锅&#xff0c;镁铝点点赞赞和关注吧&#xff01; 好戏开场了。 一.什么是机器学习 机器学习就是从数据中自动分析获取模型&#xff08;总结出的数据&#xff09;&#xff0c;并训练模型&#xff0c;去预…

Gadmin极速开发平台,几分钟给你整一个OA系统出来

Gadmin极速开发平台 在企业信息化的大潮中&#xff0c;Gadmin极速开发平台以其独特的低代码开发模式&#xff0c;为企业提供了一套高效、灵活的解决方案。本文将介绍Gadmin平台的基本信息、核心特点&#xff0c;以及它如何帮助企业快速实现信息化建设。 软件简介 Gadmin是一个…

华为:数据入湖,企业数据的逻辑汇聚(附数据湖建设方案下载)

往期回顾>> 华为内部“维度数据”解析 数据入湖是个什么鬼&#xff1f; 为什么数据治理工作越来越迷茫&#xff1f;(附数据治理方案PPT下载) 数字化的本质逻辑:连接、数据、智能 125页PPT&#xff1a;数据中台应用技术方案 数据中台解决方案&#xff0c;附55页PPT…

React 学习——forwardRef,暴漏子组件的dom元素

父组件拿到子组件的值&#xff1a;使用forwardRef import { forwardRef,useRef } from react;const Input forwardRef((props,ref)>{return <input type"text" ref{ref} /> })const App () > {const inputRef useRef(null);const showRef () > …

[答疑]心脏的功能是泵血,心脏是个模块,所以“功能模块”没毛病啊!

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 有同学在我的视频下留言&#xff1a; 其实认真看我的视频或书就明白&#xff0c;这和我说的不是一回事。 这个留言有点新意&#xff0c;和以往的留言如“人能说话&#xff0c;嘴就是…

Python | Leetcode Python题解之第352题将数据流变为多个不想交区间

题目&#xff1a; 题解&#xff1a; from sortedcontainers import SortedDictclass SummaryRanges:def __init__(self):self.intervals SortedDict()def addNum(self, val: int) -> None:intervals_ self.intervalskeys_ self.intervals.keys()values_ self.intervals…

常见分布式ID解决方案的优缺点

分布式系统之所以难,很重要的原因之一是“没有一个全局时钟,难以保证绝对的时序”。 一、分布式ID的特性或要求: 唯一性:确保生成的ID是应用系统内唯一。高可用性:确保任何时候都能正确的生成ID。有意义:或者说包含更多信息,例如时间、业务等信息。如:有序性,通常都需…

多重示例详细说明Eureka原理实践

Eureka原理&#xff08;Eureka Principle&#xff09;是指在长时间的思考和积累之后&#xff0c;通过偶然的瞬间获得灵感或发现解决问题的方法的一种认知现象。这个过程通常包括三个主要阶段&#xff1a;准备阶段、潜伏期以及突然的灵感爆发。下面详细说明Eureka原理的实践步骤…

零拷贝并非万能解决方案:重新定义数据传输的效率极限

PageCache有什么作用&#xff1f; 在我们前面讲解零拷贝的内容时&#xff0c;我们了解到一个重要的概念&#xff0c;即内核缓冲区。那么&#xff0c;你可能会好奇内核缓冲区到底是什么&#xff1f;这个专有名词就是PageCache&#xff0c;也被称为磁盘高速缓存。也可以看下wind…