当前位置: 首页 > 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 文献综述...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

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

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

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...