当前位置: 首页 > news >正文

Vue style中的 scoped 属性

 Vue 中存在 scoped 属性,HTML5中也存在一个 scoped 属性,而且,这两者都是针对 css 样式处理的属性,所以很多文章在 解释 Vue scoped 的时候,都会把两者混为一谈,直接进把 HTML5 scoped 的定义搬到 Vue scoped 上,其实这是不对的,这两个不是一个东西。

HTML5  scoped 

在 W3C 和 MDN 文档上是这么说的:

该属性已被移除,不建议使用。

该属性是一个布尔属性。如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

第一句话就是,不建议使用这玩意。Vue 这么大受众的框架,肯定不会不考虑到这一点。

 再就是这玩意只有火狐支持,更不符合项目初衷。

使用方法 和 Vue scoped 一致,直接写在 style 标签内部

<div><style type="text/css" scoped>h1 {color: red;}p {color: blue;}</style><h1>这个标题是红色的</h1><p>这个段落是蓝色的。</p></div>

展示效果

控制台DMO结构

 

可以看到,在 DMO 结构中 ,只是把我编写的代码原封不动的渲染了,并没有做任何处理,这就是和 Vue scoped 的最大区别 

后面再讲到 Vue scoped 原理的时候会做个对比,更容易看出区别在哪。

Vue 组件的样式覆盖

Vue 项目中,每个组件内都会存在一个 <style></style> ,用来编写组件样式,如果组件过多,那么在开发过程中难免会出现,类名相同的情况。一旦类名相同,那么在编译的时候,就可能出现问题。

例如 :组件 Student 存在一个 demo 的class,组件 School 也同时存在 demo 的class ,虽然说这两个 class 代表的样式在各自组件中是不一样的,但是,展示的效果却不是我们想要的。

// Student 组件
<template><div><p class="demo">Student组件</p></div>
</template><style>.demo {background:orange}
</style>// School 组件
<template><div><p class="demo">School组件</p></div>
</template><style>.demo {background:red}
</style>// App 组件使用
<template><div id="app"><School /><Student /></div>
</template>

如果按照我们设想的,School 组件展示 红色 ,Student 组件展示橙色,但是实际效果是

两个组件都展示的 橙色,Student 组件的样式覆盖了School 组件的样式。这是因为我们在引入组件的时候,Student 组件是后引入的。如果我们先引入 Student 组件,那展示效果又不一样了。

这是因为在webpack 编译的时候,所有组件内的 style 都会合并,相同类名的样式自然就会放到一起,根据css规则,后面的样式自然会覆盖前面的样式。

我把这个空项目打包一下看看这两个组件的style合并之后长啥样。

可以看到当前只存在一个 .demo 的类名,但是这个类名中存在两个 background 属性,按照顺序也就是 Student 组件的样式 和 School 组件的样式。  

为了避免这个问题, Vue 使用了 scoped 属性,来作为样式隔离。

 Vue scoped 样式隔离

先说使用方法,只需要在组件中的 <style></style> 标签中加入 scoped 属性即可,Vue 会自动处理样式,就像下面这样。

<style scoped>.demo {background:red}
</style>

 我在 School 组件 和 Student 组件 中都加上这个属性,然后再来看看页面展示效果

 打包看下编译后的 css 文件长啥样。

.demo[data-v-2578f57b]{background:orange}
.demo[data-v-5c5da36a]{background:red}

存在两个 demo 类名,但是两个 demo 类名上都新增了一个 [data-v-xxxx] 的属性,这个就是Vue 底层根据我们的 scopde 属性,针对这些样式做了处理,导致在编译的时候,这些样式不被认为是同名样式,所以不会导致样式覆盖。

再来看看控制台上的 DOM节点和样式

 

 可以看到控制台上的样式,和 打包之后的样式是一致的,但是在 DOM 节点上,我们可以发现,两个组件的根元素和子元素上,都添加了一个 data-v-xxxx 属性,而且还是相同的。

这是因为 Vue有一个 自带的插件 Vue-loader,通过这个插件,就可以实现这些转化,而且不用引入别的第三方包。( Vue-loader 使用的是 Post-CSS 来实现这些转换,在深入的源码研究就暂时不说了,我也还没看到那里去。。。 )

Scoped CSS 和 CSS Modules

 一个是在编译之后,给类名上加上属性选择器的同时,还需要给 DOM 节点增加自定义属性用来隔离样式 --  Scoped CSS

一个是在编译之后,直接在 DOM 节点上给类名增加一个hash后缀,不会在节点上增加自定义属性用来隔离样式,且DOM节点与样式文件展示类名一致  --  CSS Modules。

 这样一对比,发现 CSS Modules 是更好用一点哈。所以在  Vue Loader v15 及以上版本 增加了

  CSS Modules 功能,但是需要手动开启该功能

CSS Modules 必须通过向 css-loader 传入 modules: true 来开启

// webpack.config.js
{module: {rules: [// ... 其它规则省略{test: /\.css$/,use: ['vue-style-loader',{loader: 'css-loader',options: {// 开启 CSS Modulesmodules: true,// 自定义生成的类名localIdentName: '[local]_[hash:base64:8]'}}]}]}
}

 然后在你的 <style> 上添加 module 特性,就和添加 scoped 属性一样

<style module>
.red {color: red;
}
.bold {font-weight: bold;
}
</style>

总结

 Vue scoped 作用

  • 给当前组件的所有标签添加一个不重复的data属性(形如:data-v-40b76154)来表示唯一性

  • 为了避免影响全局样式,给每句CSS选择器末尾(编译后生成的CSS语句)加一个当前组件的data-v-hash属性选择器来私有化样式

  • 为了避免影响子组件的样式,只会给子组件的最外层标签上添加当前组件的data-v-hash属性

 CSS Modules 模块化应用越来越好,也越来越广泛,我觉得还是 CSS Modules 比较好,至少看起来比较清爽一点,不会在节点上增加很多自定义属性

相关文章:

Vue style中的 scoped 属性

Vue 中存在 scoped 属性&#xff0c;HTML5中也存在一个 scoped 属性&#xff0c;而且&#xff0c;这两者都是针对 css 样式处理的属性&#xff0c;所以很多文章在 解释 Vue scoped 的时候&#xff0c;都会把两者混为一谈&#xff0c;直接进把 HTML5 scoped 的定义搬到 Vue scop…...

移动端适配rem

1.安装amfe-flexible和postcss-pxtorem&#xff0c; npm install amfe-flexible --save npm install postcss-pxtorem5.1.1 (这里我使用的postcss-pxtorem是5.1.1版本)或者在pageage.json中写入 "amfe-flexible": "^2.2.1","postcss-pxtorem": …...

Go语言开发小技巧易错点100例(八)

往期回顾&#xff1a; Go语言开发小技巧&易错点100例&#xff08;一&#xff09;Go语言开发小技巧&易错点100例&#xff08;二&#xff09;Go语言开发小技巧&易错点100例&#xff08;三&#xff09;Go语言开发小技巧&易错点100例&#xff08;四&#xff09;Go…...

100个网络安全测试面试题

1、Burpsuite常用的功能是什么&#xff1f; 2、reverse_tcp和bind_tcp的区别&#xff1f; 3、拿到一个待检测的站或给你一个网站&#xff0c;你觉得应该先做什么&#xff1f; 4、你在渗透测试过程中是如何敏感信息收集的&#xff1f; 5、你平时去哪些网站进行学习、挖漏洞提交到…...

7.26 作业 QT

1.继续完善登录框&#xff0c;当登录成功时&#xff0c;关闭登录界面&#xff0c;跳转到新的界面中&#xff1a; 结果图&#xff1a; second.h: #define SECOND_H#include <QWidget> #include<QDebug> //信息调试类&#xff0c;用于打印输出的 #inc…...

Python - Opencv应用实例之树叶自动分割、标签及统计分析系统

Python - Opencv应用实例之树叶自动分割、标签及统计分析系统 本文通过Python+opencv 实现这样的需求:输出位置和角度(x, y, r),并标记出轮廓基于传统图像处理算法实现,算法原理:输入图像 -> 灰度化 -> 二值化 -> 形态学处理 -> 轮廓提取 -> 树叶中心定位 -…...

IC设计工程师,参加IC面试应该注意哪些细节?

秋招已至&#xff0c;诸多IC设计企业&#xff0c;比如联发科、长鑫、大疆、燧原、地平线、复旦微、兆易创新、百度昆仑芯等&#xff0c;都已经陆续开启了提前批招聘。 很多人对各种关于秋招、面试、简历的比较感兴趣&#xff0c;所以今天就来跟大家分享关于秋招求职面试中的一…...

java poi导入Excel、导出excel

java poi导入Excel、导出excel 导出meven架包 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>4.1.1</version></dependency>导入Excel public void uploadFile(HttpServletRequ…...

【算法与数据结构】101、LeetCode对称二叉树

文章目录 一、题目二、递归法三、迭代法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、递归法 思路分析&#xff1a;这道题目标就是要对比左右两半的树是否对称&#xff0c;因此对比不是左右节点是否相等&…...

【N32L40X】学习笔记04-gpio中断库

gpio中断 该函数库的目的就是在统一的地方配置&#xff0c;将配置的不同项放置在一个结构体内部使用一个枚举来定义一个的别名 NVIC 寄存器 NVIC 相关的寄存器定义了可以在 core_cm4.h 文件中找到。我们直接通过程序的定义来分 析 NVIC 相关的寄存器&#xff0c;其定义如下…...

Godot 4 着色器 - Shader调试

我之前用OpenCV进行图像相关处理&#xff0c;觉得已经很不错&#xff0c;结合GDI可以实现流畅的动画效果 直到近来用Shader后才发现&#xff0c;着色器更上一层楼&#xff0c;原来这是入了GPU的坑 Shader编程限制很多&#xff0c;各种不支持&#xff0c;看在它性能不错功能炫…...

liunx时间慢几分钟,定时更新系统时间

#&#xff01;/bin/sh hwclock --hctosys echo "执行成功" 定时5分钟执行一次...

C# 委托详解

一.委托的概念 C#中委托也叫代理&#xff0c;委托提供了后期绑定机制(官方解释)&#xff0c;功能类似于C中的函数指针&#xff0c;它存储的就是一系列具有相同签名和返回类型的方法的地址&#xff0c;调用委托的时候&#xff0c;它所包含的所有方法都会被执行。 二.委托的用法…...

chatGPT 学习分享:内含PPT分享下载

InstructGPT论文地址&#xff1a; Training language models to follow instructions with human feedbackchatGPT地址&#xff1a;openAI个人整理的PPT&#xff08;可编辑&#xff09;&#xff0c;下载地址&#xff1a;chatGPT学习分享PPT...

使用CRM进行数据分析的四大好处

使用CRM数据分析系统够帮助企业更好地了解客户需求和行为习惯&#xff0c;提供个性化的服务&#xff0c;从而提高客户满意度和忠诚度。使用CRM数据分析系统可以为企业带来一些好处&#xff0c;包括提高客户洞察力、加强营销策略、提高运营效率等。 1.提高客户洞察力&#xff1a…...

Excel“牛人”变现方案参考

有几种方式可以通过Excel技能实现变现&#xff1a; 1. 提供Excel咨询和培训服务&#xff1a;如果你对Excel非常熟悉&#xff0c;你可以提供咨询和培训服务&#xff0c;帮助他人解决Excel使用中的问题或提高他们的Excel技能。 2. 制作和销售Excel模板&#xff1a;你可以根据市…...

vscode和jetbrains IDEA添加免费的gpt代码生成插件

vscode和jetbrains IDEA添加免费的gpt代码生成插件 VSCODE添加代码智能生成插件 一、打开vscode添加扩展 打开vscode&#xff0c;点击扩展&#xff0c;搜索 aws toolkit ​​ 二、连接到AWS 如图&#xff0c;选择添加connectiong to aws 选择 Sign up or Sign in ​​ …...

【C#】医学实验室云LIS检验信息系统源码 采用B/S架构

基于B/S架构的医学实验室云LIS检验信息系统&#xff0c;整个系统的运行基于WEB层面&#xff0c;只需要在对应的工作台安装一个浏览器软件有外网即可访问&#xff0c;技术架构&#xff1a;Asp.NET CORE 3.1 MVC SQLserver Redis等。 一、系统概况 本系统是将各种生化、免疫、…...

linux:AWS LightSail 设置虚拟内存

参考&#xff1a; https://www.cnblogs.com/fallin/p/13186236.html 总结&#xff1a; #2G的swap文件 sudo dd if/dev/zero of/swapfile bs1M count2048 sudo chmod 600 /swapfile sudo mkswap /swapfile sudo swapon /swapfile sudo echo /swapfile none swap defaults 0 0 &g…...

“华为杯”研究生数学建模竞赛2016年-【华为杯】E题:粮食最低收购价问题研究

目录 摘 要: 第 1 章 前 言 1.1 研究的目的与意义 1.2 文献综述...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...