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

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...