scoped原理及使用

一、什么是scoped,为什么要用
在vue文件中的style标签上,有一个特殊的属性:scoped。
当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。

二、scoped的原理
1、为组件实例生成一个唯一标识,给组件中的每个标签对应的dom元素添加一个标签属性,data-v-xxxx
2、给<style scoped>中的每个选择器的最后一个元素添加一个属性选择器,原选择器[data-v-xxxx],如:原选择器为.container #id div,则更改后选择器为.container #id div[data-v-xxxx]

注意:是加在最后一个元素上的!

//.a为大div父组件 .b为子组件根元素 .c为子组件内的子元素.a .b .c{//多层color:red}//会渲染成.a .b .c[data-v-2311c06a]{color:red}

三、示例
转译前的vue代码

<template><div class="example">hello world</div>
</template>
<style scoped>
.example {color: red;
}
</style>
<template><div class="example" data-v-49729759>hello world</div>
</template>
<style scoped>
.example[data-v-49729759] {color: red;
}
</style>

二: /deep/深度作用选择器
1.说明
通过上面的讲解,我们了解到scope主要通过文件指纹控制作用域范围。而针对每个样式的定义,只能出现一个文件指纹。我们看如下代码:

<template><div class="container"><span>1111</span></div>
</template>
<script lang=ts setup>
</script>
<style lang=scss scoped>
.container{background-color: lightblue;width: 100px;height: 100px;.abc{background-color: #fff;.def{color: red;}}
}
</style>

这里我们使用的是scss语法,我们看一下编译后的呈现形式:
在这里插入图片描述
通过截图我们发现会在每个样式后面都加上一个文件指纹的属性。
那我现在有个需求,我想把文件指纹加到中间该怎么办呢?此时,v-deep就派上用途了。看下面代码:

<template><div class="container"><span>1111</span></div>
</template>
<script lang=ts setup>
</script>
<style lang=scss scoped>
.container{background-color: lightblue;width: 100px;height: 100px;::v-deep.abc{background-color: #fff;.def{color: red;}}
}
</style>

在这里插入图片描述
其实/deep/ 编译后的结果将会是一个属性选择器

2. 案例
通过上面的讲解,那他究竟有什么作用呢?下面我们通过一个案例体会他的真正作用。
再vue的世界中,我们很多时候会使用第三方库,比如element-ui等。如果我想该里面的样式,之前好多同事会把样式放到全局中,这样显而易见容易污染其他的元素,此时,/deep/就会大显身手。

我们暂时选择ant-design库作为测试。
index.vue

<template><div class="container"><a-checkbox class="check" v-model:checked="checked">Checkbox</a-checkbox></div>
</template><script lang=ts setup>
import { ref } from 'vue';
const checked = ref(true)
</script><style lang=scss scoped>
.container{background-color: lightblue;width: 500px;height: 510px;
}
</style>

此时,我们看一下生成的代码片段:
在这里插入图片描述
在这里插入图片描述
假如我现在有个需求,想把复选框中间的蓝色变成红色,很容易想到需求修改ant-checkbox-inner的样式,如下代码:

<style lang=scss scoped>
.container{background-color: lightblue;width: 500px;height: 510px;.check{.ant-checkbox-inner{background-color: red;}}
}
</style>

然而,并没有生效,我们看一下生成的代码:
在这里插入图片描述
我们发现在ant-checkbox-inner后面加了一个文件指纹。而实际这是第三方库(也就是已经打包好的文件),里面的标签根本不会出现文件指纹。这样就导致我们写的样式文件不能作用于ant-checkbox-inner上。此时,我们很容易想到要把样式变成全局。

<style lang=scss>
.container{background-color: lightblue;width: 500px;height: 510px;.check{.ant-checkbox-inner{background-color: red;}}
}
</style>

在这里插入图片描述
虽然样式生效了,但是出现了最严重的问题,它会污染到其他vue组件使用的checkbox组件。此时v-deep就登场了。代码如下:

<style lang=scss scoped>
.container{background-color: lightblue;width: 500px;height: 510px;.check{/deep/ .ant-checkbox-inner{background-color: red;}}
}
</style>

在这里插入图片描述

再看样式表,发现给check加了文件指纹,check是我们vue组件的标签,因此编译的时候会加上文件指纹。这样就完美解决了问题。

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

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

相关文章

重构智能防丢产品,苹果Find My技术引领市场发展

目前市场上最主要的防丢技术是蓝牙防丢和GPS防丢&#xff0c;蓝牙防丢是通过感应防丢器与绑定手机的距离来实现防丢的。一般防丢会默认设置一个最远安全距离&#xff0c;超过这个安全距离后&#xff0c;与手机蓝牙信号断开&#xff0c;触发防丢报警&#xff0c;用户根据防丢报警…

高可用系列特殊场景:第三方限时唯一访问令牌

一、业务特点 很多第三方服务&#xff0c;都使用访问令牌来做访问验证&#xff0c;比如某度、某信的access token&#xff0c;主要特征如下&#xff1a; 1、令牌由第三方系统发放&#xff0c;用于访问第三方特定资源&#xff1b; 2、令牌存在有效期限&#xff0c;过期自动失…

学习java第三十三天

Spring 官网列出的 Spring 的 6 个特征: 核心技术 &#xff1a;依赖注入(DI)&#xff0c;AOP&#xff0c;事件(events)&#xff0c;资源&#xff0c;i18n&#xff0c;验证&#xff0c;数据绑定&#xff0c;类型转换&#xff0c;SpEL。 测试 &#xff1a;模拟对象&#xff0c;Te…

Shell GPT:直接安装使用的chatgpt应用软件

ShellGPT是一款基于预训练生成式Transformer模型&#xff08;如GPT系列&#xff09;构建的智能Shell工具。它将先进的自然语言处理能力集成到Shell环境中&#xff0c;使用户能够使用接近日常对话的语言来操作和控制操作系统。 官网&#xff1a;GitHub - akl7777777/ShellGPT: *…

深度学习理论基础(三)封装数据集及手写数字识别

目录 前期准备一、制作数据集1. excel表格数据2. 代码 二、手写数字识别1. 下载数据集2. 搭建模型3. 训练网络4. 测试网络5. 保存训练模型6. 导入已经训练好的模型文件7. 完整代码 前期准备 必须使用 3 个 PyTorch 内置的实用工具&#xff08;utils&#xff09;&#xff1a; ⚫…

【4.5】

多重映射 典题&#xff0c;多次整体修改&#xff0c;把所有的 a i x a_ix ai​x 改成 a i y a_iy ai​y 。时间逆序。 圆 朴素区间 DP 时间是 O ( n 3 ) O(n^3) O(n3) 的&#xff0c;考虑如何枚举以达到优化。 优化思路类似于【智乃想考一道完全背包】。 外向树 较好…

mysql 通配符与模式匹配用法详解

一、通配符 什么是通配符&#xff1f; 通配符用于替换字符串中的一个或多个字符。 通配符通常与LIKE、NOT LIKE操作符一起使用。LIKE操作符在WHERE子句中用于搜索列中的指定模式。 Mysql 有哪些通配符&#xff1f; % &#xff1a;百分号通配符&#xff0c;表示匹配0个或多个…

TXT文本高效编辑神器,教你进行隔行删除不需要的内容,轻松整理文本内容。

在信息爆炸的时代&#xff0c;我们每天都会接触到大量的文本信息&#xff0c;无论是工作中的报告、邮件&#xff0c;还是生活中的读书笔记、备忘录&#xff0c;都需要我们对文本进行高效的管理和编辑。然而&#xff0c;传统的文本编辑方式往往繁琐低效&#xff0c;无法满足我们…

PTA L2-048 寻宝图

给定一幅地图&#xff0c;其中有水域&#xff0c;有陆地。被水域完全环绕的陆地是岛屿。有些岛屿上埋藏有宝藏&#xff0c;这些有宝藏的点也被标记出来了。本题就请你统计一下&#xff0c;给定的地图上一共有多少岛屿&#xff0c;其中有多少是有宝藏的岛屿。 输入格式&#xf…

程序员35岁现象:年龄与职业发展的辩证关系

程序员35岁现象&#xff1a;年龄与职业发展的辩证关系 引言 近年来&#xff0c;关于程序员职业发展的“35岁现象”引发了业界内外的广泛关注。人们普遍认为35岁是一道程序员生涯的分水岭&#xff0c;一部分人担忧随着年龄增长&#xff0c;技术更新速度快&#xff0c;资深程序员…

LeetCode练习题--567.字符串的排列

今天讲一个非常经典的滑动窗口的问题 这道题的意思很明显: 给你两个字符串s1与s2,判断s2中是否存在一个子串:它包含s1中所有字符且不包含其他字符 让我们先来写一下滑动窗口的模板: /*** 滑动窗口模板 * param s1 * param s2 */public static void model (String s1, String s2…

包装类知识总结

包装类的使用1. 为什么要使用包装类&#xff1f; 为了使得基本数据类型的变量具备引用数据类型变量的相关特征&#xff08;比如&#xff1a;封装性、继承性、多态性&#xff09;&#xff0c;我们给各个基本数据 类型的变量都提供了对应的包装类。 为了让基本数据类型也可以有引…

51单片机入门:认识开发板

认识开发板 板载资源&#xff1a; 数码管模块 说明&#xff1a; 2个四位一体共阴数码管 详细&#xff1a; 2个四位一体&#xff1a;两个独立的四位数码管&#xff0c;每个四位数码管都是“一体”的设计&#xff0c;也就是说&#xff0c;每个数码管内部集成了四个独立的七段LE…

HTTPS跟HTTP有区别吗?

HTTPS和HTTP的区别&#xff0c;白话一点说就是&#xff1a; 1. 安全程度&#xff1a; - HTTP&#xff1a;就像是你和朋友面对面聊天&#xff0c;说的话大家都能听见&#xff08;信息明文传输&#xff0c;容易被偷听&#xff09;。 - HTTPS&#xff1a;就像是你们俩戴着加密耳机…

回文串问题

1、回文子串 647. 回文子串 - 力扣(LeetCode) class Solution {//1、状态表示:// dp[i][j]:s字符串种从i位置到j位置的子串,是否是回文串//2、状态转移方程://if s[i] != s[j],false//如果s[i] == s[j]:(1)i == j,true;(2) i+1 == j相邻,true;(3)如果不是前面两种关…

论大数据服务化发展史

引言 一直想写一篇服务化相关的文章&#xff0c;那就别犹豫了现在就开始吧 正文 作为大数据基础架构工程师&#xff0c;业界也笑称“运维Boy”&#xff0c;日常工作就是在各个机器上部署以及维护服务&#xff0c;例如部署Hadoop、Kafka、Pulsar这些等等&#xff0c;用于给公…

InternLM2-lesson2笔记

书生浦语大模型趣味 Demo 视频连接&#xff1a;https://www.bilibili.com/video/BV1AH4y1H78d/?vd_source902e3124d4683c41b103f1d1322401fa 目录 书生浦语大模型趣味 Demo课程总览SIG项目Demo部署的一般流程存在的问题总结 课程总览 InternLM2-chat-1.8B部署八戒-chat-1.8B…

【css】文本过长溢出一行不换行普通css以及antd实现

.text-box { white-space: nowrap; /* 防止文字换行 */ overflow: hidden; /* 隐藏超出div的内容 */ text-overflow: ellipsis; /* 当内容超出时&#xff0c;显示省略号 */ max-width: calc(100% - 80px); /* 假设按钮宽度为80px&#xff0c;则设置div的最大宽度为容器宽度…

【华为OD机试】根据IP查找城市(贪心算法—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…

Nginx配置使用笔记

Nginx配置使用笔记 前言 官网下载压缩包https://nginx.org/ 解压完成后当前目录cmd输入nginx指令启动 访问http://localhost:80确认启动成功 1.部署前端项目 部署前端项目到路径E:\Workspaces\Vscode\app-web 2.0配置nginx.conf文件 在nginx安装的conf目录下新建一个文件夹l…