vue 样式隔离原理

日常写单文件组件时,会在style添加scoped属性,如<style scoped>,目的是为了隔离组件与组件之间的样式,如下面的例子:

<template><p class="foo">这是foo</p><p class="bar">这是bar</p>
</template><style scoped>
.foo {color: red;
}
.bar {color: green;
}
</style>

在vue组件挂在到dom之前,通过vue-loader(vue2)或@vitejs/plugin-vue(vue3)编译,检查到style包含scoped时,会生成data-v-xxxx(hash值),在对应的元素上会添加data-v-xxxx(hash值)的属性,这个属性在不同的单文件组件之间是唯一的存在,对应的样式也会添加属性选择器,进而实现样式隔离效果。

hash值在不同环境生成的方式有所不同

  • 开发环境下会根据文件相对路径生成唯一 ID,比如 vite 中 src/App.vue 固定生成 7a7a37b1
  • 生产环境下会根据文件相对路径+文件内容共同生成唯一 ID

在这里插入图片描述

相关参考
https://zhuanlan.zhihu.com/p/657040862
https://juejin.cn/post/7057854547229671432

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

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

相关文章

ubuntu下docker卸载和重新安装

卸载&#xff1a;步骤一&#xff1a;停止Docker服务 首先&#xff0c;我们需要停止正在运行的Docker服务。打开终端&#xff0c;执行以下命令&#xff1a; sudo systemctl stop docker 步骤二&#xff1a;删除Docker安装包 接下来&#xff0c;我们需要删除已经安装的Docker软件…

微信小程序如何自定义单选和多选

实现单选 实现效果:点击显示单选状态,每次仅能点击一个元素。 实现方式: wxml: <view wx:for="{{item_list}}" data-info="{{index}}" class="{{menu_index===index?choose:no_choose}}" bind:tap="changeColor">{{ite…

25考研每日的时间安排

今天要给大家分享一下25考研每日的时间安排。 没有完美的计划&#xff0c;只有合适的计划。 仅供参考 很多人说复习不要只看时长而是要看效率&#xff0c;所以学多长时间不重要&#xff0c;重要的高效率完成任务。 完美的计划 这个计划看起来很完美&#xff0c;从早到晚有学习…

尚无忧球馆助教系统源码,助教小程序源码,助教源码,陪练系统源码

特色功能&#xff1a; 不同助教服务类型选择 助教申请&#xff0c;接单&#xff0c;陪练师入住&#xff0c;赚取外快 线下场馆入住 设置自己服务 城市代理 分销商入住 优惠券 技术栈&#xff1a;前端uniapp后端thinkphp 独立全开源

【C++基础】析构函数和构造函数面试知识点总结

&#x1f308;欢迎来到C基础专栏 &#x1f64b;&#x1f3fe;‍♀️作者介绍&#xff1a;前PLA队员 目前是一名普通本科大三的软件工程专业学生 &#x1f30f;IP坐标&#xff1a;湖北武汉 &#x1f349; 目前技术栈&#xff1a;C/C、Linux系统编程、计算机网络、数据结构、Mysq…

大脑的漏洞:你是如何走向狭隘和顽固的?

在这篇文章的最开始&#xff0c;我想请大家思考一个问题&#xff1a; 为什么谣言的传播总是非常容易&#xff0c;但辟谣却一点也不容易呢&#xff1f; 有一个非常简单的答案&#xff0c;你或许立刻就能想到&#xff1a;因为谣言一般都非常简单&#xff0c;但辟谣一般都不怎么简…

linux安装docker--更具官网教程

1.访问https://docs.docker.com/ 2.进入download 3输入cento 或者直接访问地址Install Docker Engine on CentOS | Docker Docs 4一步一步根据官网命令走 2安装 3 4 方式一&#xff1a; service docker start&#xff08;开启&#xff09; service docker status&#xff08…

如何使用 NFTScan API 检索 NFT 合约地址下 Transactions 数据

对于大多数人而言&#xff0c;获取某 NFT 合约地址下的全量交易记录是十分有挑战性的&#xff0c;不仅涉及到对区块链技术的深入了解以及使用相应的工具和资源&#xff0c;还需要处理区块链上的智能合约和交易数据&#xff0c;并将其与外部数据源进行整合分析。通常&#xff0c…

简单介绍----微服务和Spring Cloud

微服务和SpringCloud 1.什么是微服务&#xff1f; 微服务是将一个大型的、单一的应用程序拆分成多个小型服务&#xff0c;每个服务负责实现特定的业务功能&#xff0c;并且可以通过网络通信与其他服务通信。微服务的优点是开发更灵活&#xff08;不同的微服务可以使用不同的开…

「研发部」GitFlow规范-升级版(二)

前言 上一篇文章简单整理过一次产研团队的GitFlow《Git 分支管理及Code Review 流程 (一)》 GitFlow是一种流行的Git分支管理策略&#xff0c;它提供了一种结构化的方式来管理项目的开发和发布流程。以下是GitFlow规范的主要组成部分&#xff1a; 主要分支&#xff1a; mast…

Mybatis-Plus入门

Mybatis-Plus入门 MyBatis-Plus 官网&#xff1a;https://mp.baomidou.com/ 1、简介 MyBatis-Plus (简称 MP) 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、 提高效率而生。 https://github.com/baomidou/mybatis-p…

python数据类型-字符串

1 表示方式 python单行字符串用单引号’内容’或双引号"内容"表示&#xff0c; 多行字符串用三引号表示&#xff0c;‘’‘换行内容’或"““换行内容””"&#xff0c; str()函数可将其它类型转换为字符串类型 a henry b "Tom" c 窗前明月…

什么是协方差矩阵?

协方差矩阵&#xff08;Covariance Matrix&#xff09;是一个用于衡量多个变量之间相互关系的工具&#xff0c;在统计学和数据分析领域中非常重要。这个矩阵展现了每一对变量之间的协方差。协方差是衡量两个变量如何一起变化的度量&#xff1b;如果两个变量的协方差是正的&…

C/C++ - Auto Reference

目录 auto Reference auto 当使用auto​​关键字声明变量时&#xff0c;C编译器会根据变量的初始化表达式推断出变量的类型。 自动类型推断&#xff1a;auto​​关键字用于自动推断变量的类型&#xff0c;使得变量的类型可以根据初始化表达式进行推导。 初始化表达式&#x…

oracle19.22的patch已发布

2024年01月16日&#xff0c;oracle发布了19.22的patch 具体patch如下 Reserved for Database - Do not edit or delete (Doc ID 19202401.9) 文档ID规则如下 19&#xff08;版本&#xff09;年份&#xff08;202x&#xff09;(季度首月01,04,07,10).9 往期patch no信息和下…

[论文阅读] |RAG评估_Retrieval-Augmented Generation Benchmark

写在前面 检索增强能够有效缓解大模型存在幻觉和知识时效性不足的问题&#xff0c;RAG通常包括文本切分、向量化入库、检索召回和答案生成等基本步骤。近期组里正在探索如何对RAG完整链路进行评估&#xff0c;辅助阶段性优化工作。上周先对评估综述进行了初步的扫描&#xff0…

每次请求sessionid变化【SpringBoot+Vue】

引言&#xff1a;花了一晚上的时间&#xff0c;终于把问题解决了&#xff0c;一开始后端做完后,用apifox所有接口测试都是可以的,但当前端跑起来后发现接收不到后端的数据。 当我写完前后端&#xff0c;主页面和获取当前页面信息接口后&#xff0c;配置了cros注解 CrossOrigin…

支持向量机(SVM)详解

支持向量机&#xff08;support vector machines&#xff0c;SVM&#xff09;是一种二分类模型。它的基本模型是定义在特征空间上的间隔最大的线性分类器&#xff0c;间隔最大使它有别于感知机。 1、线性可分支持向量机与硬间隔最大化 1.1、线性可分支持向量机 考虑一个二分…

Vulnhub-dc6

信息收集 # nmap -sn 192.168.1.0/24 -oN live.port Starting Nmap 7.94 ( https://nmap.org ) at 2024-01-25 14:39 CST Nmap scan report for 192.168.1.1 Host is up (0.00075s latency). MAC Address: 00:50:56:C0:00:08 (VMware) Nmap scan report for 192.168.1.2…

Java 字符串 10 字符串相关类的底层原理

底层原理1&#xff0c;底层原理2 底层原理3&#xff1a; 分两种情况&#xff1a; 1、等号右边没有变量&#xff1a; 2、等号右边有变量&#xff1a; 两个对象&#xff0c;一个是StringBuilder&#xff0c;一个是String&#xff0c;浪费空间&#xff0c;性能不高 在jdk8之前&am…