【Vue】 style中的scoped

已于 2024-07-15 16:30:54 修改
阅读量217 收藏
点赞数 3
分类专栏： Vue 文章标签： javascript vue.js 前端
于 2024-07-15 16:28:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DX390609/article/details/140442348
版权

一、什么是scoped，为什么要用

在vue文件中的style标签上，有一个特殊的属性：scoped。

当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。

二、scoped的原理

为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx
给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]

全宇宙最最帅气的哆啦A梦小怪兽
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-style中的scope属性
weixin_40944062的博客
04-23 1595
scope出现的原因: 在组件的style中, 可以使用scope属性, 限制当前的样式只作用于当前的组件. 实现原理: 使用这个属性后, Scoped Vue CSS被postcss工具构建成.{className}[data-v-{componentHash}]这样的属性, 然后这个componentHash值将作用于当前组件的所有元素. 但是, 这样又有一个问题, 引用的组件内的样式就无法修改了. 所以, 可以有两种方式对带有scope的组件样式进行修改(样式穿透): .containe
Vue中的scoped探索
qq_41718955的博客
03-22 156
文章目录前言一、Vue中的Scoped深究总结 前言 在Vue组件中 style 标签中我们经常使用 scoped 属性来防止在修改父组件的样式时把其中的子组件中的样式修改掉，使得它的样式只在本组件中起作用，所有我们平常开发中都在 style 标签中添加这个属性。而如果在本组件想修改子组件中的样式，我们可以使用深度选择器来修改其子组件样式。 在开发中，经常遇到这个问题，于是想着一探究竟！ 一、Vue中的Scoped深究 代码示例：<style lang="scss" scoped><
浅谈Vue的style scoped
Jay的博客
04-24 1万+
style scoped的作用 在使用Vue-Cli 开发时，我们都知道，在组件的<style></style>加上 scoped属性，可以让<style></style>里的样式只在当前组件生效。 那，这是如何实现的呢？ Vue 对 scoped的渲染规则 对于所有的 Vue 组件，只要设置了<style scoped></st...
Vue style中的 scoped 属性
qq_40792800的博客
07-26 3545
用来隔离样式 -- Scoped CSS一个是在编译之后，直接在 DOM 节点上给类名增加一个hash后缀，不会在节点上增加自定义属性用来隔离样式，且DOM节点与样式文件展示类名一致 -- CSS Modules。这样一对比，发现 CSS Modules 是更好用一点哈。所以在。
Vue中＜style＞标签的scoped属性
最新发布
李长渊的博客
05-16 599
Vue中标签的scoped属性
vue中style scoped属性的作用和原理以及scoped穿透
与月亮私奔l的博客
07-01 1万+
vue中style scoped属性的作用和原理以及scoped穿透
Vue中style scoped属性的作用和原理以及scoped穿透
上庸者-不服周
11-03 3332
在vue组件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。注意：实际开发中，建议在每个组件的 style 身上都加上 scoped 属性。原选择器[data-v-xxxx]
vue ＜style＞标签的scoped 属性
灵活的小胖子
08-08 943
大家都知道<style> 标签是用来设置浏览器中如何呈现HTML的，也就是设置CSS样式的，但是当我们在<style>标签里加上scope的是什么意思呢？ "scoped" 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。 <style> 标签有 scoped 属性时表示它的样式作用于当...
Vue中的scoped实现原理及穿透方法
08-27
Vue中的scoped实现原理及穿透方法 scoped是Vue中的一个特殊属性，可以将样式限制在当前组件内，避免样式污染。scoped的实现原理是通过PostCSS转译实现的。在转译过程中，PostCSS会为组件中的所有DOM添加一个...
浅谈vue中慎用style的scoped属性
08-28
浅谈 Vue 中慎用 style 的 scoped 属性 本篇文章主要介绍了 Vue 中慎用 style 的 scoped 属性的重要性。scoped 属性是在 Vue 组件中使用 style 标签时添加的特殊属性，用于使样式私有化（模块化），避免全局样式...
基于vue中的scoped坑点解说
10-14
当我们在单文件组件（Single File Component, SFC）的`<style>`标签中使用`scoped`时，Vue会自动为组件的DOM元素添加一个唯一的`data`属性，如`data-v-xxxxx`，然后在CSS选择器后面添加这个属性，以确保样式只作用于...
浅谈关于.vue文件中style的scoped属性
08-29
浅谈Vue文件中style的scoped属性 scoped属性是Vue中用来限制样式作用域的属性，它使得样式只作用于当前的Vue文件。 scoped属性可以实现style只作用于当前的.vue文件，避免样式污染其他组件。 scoped属性的实现原理...
详解Vue中的scoped及穿透方法
01-19
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件。通过设置该属性，使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部...
为什么不建议在 Vue ＜style＞ 中使用 scoped?
梓沐666的博客
05-07 878
我们使用 开发页面时，经常需要在 标签下编写样式。不知你是否留意，在 标签下有一个属性经常出现 - 。你知道它起到什么作用吗？原理是怎样的？有没有什么弊端呢？今天我们就来聊聊它。
在VUE中你知道 style 上加 scoped 属性的原理吗？
weixin_57066052的博客
09-23 1076
1、什么是 scoped 在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签 上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有 vue 组件 style 标签全部加上了 scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当 前组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。此 时只能通过穿透 scoped 的方式来解决，选择器。 2、sc...
vue中style的scope属性
千里之行，始于足下！
11-15 1万+
在vue项目中通常会给style标签加上scope属性，以此来实现样式的私有化，避免全局污染。 但有的时候这个属性又会带来麻烦：当引入第三方组件且需要修改其样式时，通常出现没有修改成功的情况 一、scope实现私有化样式的原理 通过给DOM元素结构上以及css样式上添加一个不重复的标记，来保证其唯一性，以此达到样式的私有化 例如：当使用第三方插件elementui的button组件，并在st...
Vue中的scoped
Mr-yang的随笔
07-08 7957
什么是scoped 在vue文件中的 style 标签上，有一个特殊的属性：scoped。当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签全部加上了scoped，相当于实现了样式的模块化。 scoped实现原理 转译前： <style scoped> .example { color: red; } </sty
vue中style下scope的使用和坑
热门推荐
潜行IT的博客
10-11 4万+
在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，这是一个非常好的举措，但是为什么要慎用呢？因为在我们需要修改公共组件（三方库或者项目定制的组件）的样式的时候，scoped往往会造成更多的困难，需要增加额外的复杂度。 scoped实现私有化样式的原理 为什么会说，会增加复杂度？那么我们先从的实现模块的原理说起。为...
vue中style加入scoped影响
03-16
Vue中使用scoped属性来限制样式的作用域，只对当前组件的元素生效，不会影响到其他组件的样式。这样做可以避免样式污染和冲突，提高代码的可维护性和可重用性。但是，scoped样式只对当前组件的元素生效，如果需要对父组件或子组件的元素进行样式控制，需要使用深度选择器或者使用非scoped样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值