Vue的scoped原理是什么

CSS常见模块化方案

  1. BEM(Block Element Modifier): BEM是一种流行的命名约定,它通过特定的命名规则来组织CSS类名,使得样式具有模块化、可重用性和可读性。BEM的命名规则是:block__element--modifier
  • block:表示一个独立的模块或组件。
  • element:表示模块内的一个元素。
  • modifier:表示模块或元素的某个状态或变体。
  1. CSS-in-JS: CSS-in-JS是一种技术,它允许将CSS代码写进JavaScript中,与组件紧密绑定。这样,样式的作用域自然就被限制在组件内部,常见的库有styled-components、emotion等。
  2. CSS Modules: CSS Modules是构建在CSS-in-JS理念之上的技术,它允许在组件级别本地化CSS类名,从而实现模块化。通过编译时生成唯一的类名,CSS Modules确保了样式的局部性。
  3. CSS预处理器(如Sass、Less、Stylus): 这些工具提供了变量、嵌套、混合(Mixins)、继承等功能,使得CSS更加模块化和可维护。
  4. 命名空间: 通过在类名前加上特定的前缀来创建命名空间,例如.ns-button、.ns-modal等,以此来避免全局命名冲突。

在Vue中,样式设置通常是在单文件组件的<style>标签内完成。通过在<style>标签上添加scoped属性,可以轻松实现样式的局部作用域,确保样式仅应用于当前组件,从而避免全局污染。此外,Vue的单文件组件还支持lesssass等预处理器,以及深度集成的CSS Modules功能。

Vue中的scoped属性的原理

Vue中的scoped属性的原理是基于CSS的作用域隔离,它通过以下步骤实现:

  1. 生成唯一属性: Vue在编译组件时,会为每个使用了scoped<style>标签生成一个唯一的属性,比如data-v-f3f3eg9。这个属性是随机生成的,确保了在全局范围内不会重复。
  2. 修改模板: Vue会遍历组件的模板,并将生成的唯一属性添加到模板中的所有元素上。这样,每个元素都会有一个对应的属性,用于标识它们属于当前的组件。
  3. 修改CSS选择器: Vue会修改<style>标签内的所有CSS选择器,为它们添加上面生成的唯一属性。这样,所有的CSS规则都会被限定只作用于带有这个唯一属性的元素。
<template>
  <div class="example">Hello World</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

编译后的结果

<div class="example" data-v-f3f3eg9>Hello World</div>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

在上边的代码中, Vue编译器给组件中DOM元素和CSS各自都添加一个相同且唯一的属性选择器如data-v-f3f3eg9。原始的CSS选择器.example会被修改为.example[data-v-f3f3eg9],这样CSS规则就只会应用到带有data-v-f3f3eg9属性的.example类元素上。如果需要scoped样式影响到子组件,可以使用>>>/deep/::v-deep等深度选择器。Vue编译器会转换这些深度选择器,以便能够穿透组件边界。

注意点

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过,子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

  • 子组件根节点受父组件scoped样式影响: 即使父组件的样式使用了scoped属性,子组件的根节点仍然可以被父组件的样式影响,因为子组件的根节点是在父组件的模板中定义的。Vue会为父组件的scoped样式添加的唯一属性也会应用到子组件的根节点上。
  • 子组件的scoped样式: 子组件的scoped样式只会应用到子组件内部的元素,而不会影响到根节点以外的元素。这意味着子组件的根节点可以同时被父组件和子组件的scoped样式影响。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

1.1 k8s的介绍与核心对象概念

本节重点总结&#xff1a; k8s主要功能k8s核心对象 PodVolumeServiceDeploymentDaemonSetStatefulSetJob k8s架构 master和node节点master节点node节点 Kubernetes介绍 Kubernetes是Google在2014年开源的一个容器集群管理系统&#xff0c;使用Go语言开发Kubernetes也叫K8S(因…

MySQL库表的操作

目录 一、库的操作 1.1库的创建 1.2字符集和校验规则 1.2.1 查看系统默认字符集以及校验规则 1.2.2 查看数据库支持的字符集 1.2.3 查看数据库支持的字符集校验规则 1.2.4 校验规则对数据库的影响 1.3操纵数据库 1.3.1显示库 1.3.2显示创建语句 1.3.3修改数据库 1.3…

详解opencv resize之INTER_LINEAR和INTER_AREA

一。先简单介绍一下resize的用法 src&#xff1a;输入图&#xff0c; dst&#xff1a;输出图 dsize&#xff1a;输出图的宽高&#xff0c;如果dsize不为空&#xff08;即宽高都不是0&#xff09;&#xff0c;则以dsize为准进行resize。 fx, fy是放大缩小的比例&#xff0c;是…

使用uniapp 微信小程序一些好用的插件分享

总结一下自己在开发中遇见的一问题&#xff0c;通过引入组件可以快速的解决 1.zxz-uni-data-select 下拉框选择器(添加下拉框检索&#xff0c;多选功能&#xff0c;多选搜索功能&#xff0c;自定义 下拉框插件&#xff0c;使用这个的原因是因为 uniui uview 组件库下拉框太…

我喜欢的数学题

偏向抖机灵性质的&#xff0c;考察理解的&#xff0c;而不是比拼计算量的&#xff0c;可能跟现在岁数大了算不明白了多少有点关系吧。 高高手&#xff0c;别太重计算&#xff0c;给普通孩子留条路。就算将来真的理工治国&#xff0c;也没必要都往人形计算机方面引导。毕竟你未来…

潜力巨大但道路曲折的量子计算

近一年来&#xff0c;由于工作的原因参观访问了一些量子产业园&#xff0c;接触了量子加密计算机、量子云计算等非常炫酷的概念性产品&#xff0c;这与自己一直认为的“量子技术仍然处于实验室研究阶段”的基本判断与认知产生了强烈的冲突&#xff0c;一刹那间&#xff0c;心中…

电脑提示directx错误导致玩不了游戏怎么办?dx出错的解决方法

想必大家都有过这样的崩溃瞬间&#xff1a;满心欢喜打开心仪的游戏&#xff0c;准备在虚拟世界里大杀四方或者畅游冒险&#xff0c;结果屏幕上突然弹出个 DirectX 错误的提示框&#xff0c;紧接着游戏闪退&#xff0c;一切美好戛然而止。DirectX 作为 Windows 系统下游戏运行的…

设计模式 行为型 状态模式(State Pattern)与 常见技术框架应用 解析

状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许对象在内部状态改变时改变其行为&#xff0c;使得对象看起来好像修改了它的类。这种设计模式的核心思想是将对象的状态和行为封装成不同的状态类&#xff0c;通过状态对象的行为改变来避免…

Win11系统安装以及Java环境、Python环境配置、简单项目

1.Win11系统安装 (1)进入官方 在Edge浏览器中输入Win11下载&#xff0c;找到对应官方网站 官方网站链接&#xff1a;下载 Windows 11 (2)挑选下载方法 目录 1.Win11系统安装 (1)进入官方 (2)挑选下载方法 2.下载并配置Java环境 &#xff08;1&#xff09;版本选择 &a…

net-http-transport 引发的句柄数(协程)泄漏问题

Reference 关于 Golang 中 http.Response.Body 未读取导致连接复用问题的一点研究https://manishrjain.com/must-close-golang-http-responsehttps://www.reddit.com/r/golang/comments/13fphyz/til_go_response_body_must_be_closed_even_if_you/?rdt35002https://medium.co…

西电-神经网络基础与应用-复习笔记

此为24年秋研究生课程复习笔记 导论 神经网络的研究方法分为 连接主义&#xff0c;生理学派&#xff0c;模拟神经计算。高度的并行、分布性&#xff0c;很强的鲁棒和容错性。便于实现人脑的感知功能(音频图像的识别和处理)。符号主义&#xff0c;心理学派&#xff0c;基于符号…

DSP+Simulink——点亮LED灯(TMSDSP28379D)超详细

实现功能&#xff1a;DSP28379D-LED灯闪烁 :matlab为2019a :环境建立见之前文章 Matlab2019a安装C2000 Processors超详细过程 matlab官网链接&#xff1a; Getting Started with Embedded Coder Support Package for Texas Instruments C2000 Processors Overview of Creat…

Hadoop 实战笔记(一) -- Windows 安装 Hadoop 3.x

环境准备 安装 JAVA 1.8 Java环境搭建之JDK下载及安装下载 Hadoop 3.3.5 安装包 Hadoop 下载&#xff1a;https://archive.apache.org/dist/hadoop/common/ 一、JAVA JDK 环境检查 二、Hadoop(HDFS)环境搭建 1. 解压安装文件 hadoop-3.3.5.tar 2. 配置环境变量 HADOOP_HO…

计算机网络 笔记 物理层

物理层的目的:主要为了实现相邻节点之间的数据的传输(01010....) 通信基础概念 信源:信号的发送方 信宿:信号的接收方 信道:信号的通道,通常一个物理的线路包含了两个:发送信道和接受信道 信号:数据的载体,有两种分别是 数字信号:离散的信号值 模拟信号:连续的信号值 马元…

WIFIAP项目 5G RX二次谐波超标案例分析

一、 问题的现象及描述 采用博通WIFI方案方案的两个项目在做CE高频杂散测试时发现5G RX出现10.359 GHz的高频杂散点&#xff0c;通过更换信道&#xff0c;该杂散点跟着改变&#xff0c;最终确认该频率是5G主信号的二倍频&#xff1b;如下图&#xff1a; 二、 问题分析  由于…

大语言模型兵马未动,数据准备粮草先行

​从OpenAI正式发布ChatGPT开始&#xff0c;大型语言模型&#xff08;LLM&#xff09;就变得风靡一时。对业界和吃瓜群众来说&#xff0c;这种技术最大的吸引力来自于理解、解释和生成人类语言的能力&#xff0c;毕竟这曾被认为是人类独有的技能。类似CoPilot这样的工具正在迅速…

【Python】Python与C的区别

文章目录 语句结束符代码块表示变量声明函数定义注释格式Python的标识符数据输入input()函数数据输出print()函数 语句结束符 C 语言 C 语言中每条语句必须以分号;结束。例如&#xff0c;int a 10;、printf("Hello, World!");。分号是语句的一部分&#xff0c;用于…

167.两数之和II-输出有序数组

给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#xff0c;则 1 < index1 < index2 < numbers…

【江协STM32】10-4/5 I2C通信外设、硬件I2C读写MPU6050

1. I2C外设简介 STM32内部集成了硬件I2C收发电路&#xff0c;可以由硬件自动执行时钟生成、起始终止条件生成、应答位收发、数据收发等功能&#xff0c;减轻CPU的负担支持多主机模型支持7位/10位地址模式支持不同的通讯速度&#xff0c;标准速度(高达100 kHz)&#xff0c;快速…

继续坚持与共勉

经过期末考试后&#xff0c;又要开始学习啦。 当时一直在刷算法题就很少写博客了&#xff0c;现在要继续坚持写博客&#xff0c;将每天对于题的感悟记录下来。 同时我将会在学习Linux操作系统&#xff0c;对于过去学习的内容进行回顾&#xff01;&#xff01; 在此&#xff…