Vue-2.1scoped样式冲突

已于 2023-10-11 17:01:03 修改
阅读量337 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2023-10-10 22:26:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46479909/article/details/133757315
版权
本文讨论了Vue组件中默认全局样式可能导致的冲突问题，介绍了如何通过使用scoped属性实现局部样式，以及其原理——在元素上添加data-v-hash以区分不同组件的CSS选择器。
摘要由CSDN通过智能技术生成

 默认情况：写在组件中的样式会全局生效->因此很容易造成多个组件之间的样式冲突问题

1.全局样式：默认组件中的样式会作用到全局

2.局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

<style scoped>  </style>

scoped原理：

1.给当前组件模版的所有元素，都会被添加上一个自定义属性data-v-hash值

区分开不同的组件

2.css选择器后面，被自动处理，添加上了属性选择器div[data-v-hash]

小沐°
关注
专栏目录
详解从vue-loader源码分析CSS Scoped的实现
10-16
在Vue单文件组件中，给style标签添加一个scoped属性后，即可使得该样式只作用于当前组件内的DOM元素。这种做法提高了样式的封装性，避免了样式冲突。 实现原理可以分解为几个关键步骤，这些步骤在Vue-loader的源码...
vue组件 样式冲突_vue-css样式冲突解决BEM、scoped、模块化
weixin_39820910的博客
12-22 1084
样式冲突原因：样式会继承，子组件会继承父组件；样式都会写入style标签。解决方法：BEM、scoped、模块化npm i node-sass sass-loader -S安装环境方法1 样式定义: 样式要以类或者id 打头作为选择器.box{...}#box2调用样式:方式二需要安装 node-sass / sass-loader...
vue中scoped的原理及慎用原因（转载）
Half of if的博客
04-27 1014
作用功能： 实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模 块虽然方便但是我们需要慎用，因为当我们使用公共组件时会造成很多困难， 增加难度，想知道造成那些难度，需要先从scoped实现原理了解 实现原理： 通过观察DOM结构可以发现：vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用，如图，样式属性上也会多一个该字符，...
vue-cliAppv2.1.zip
06-22
基于安卓平台开发的Vue-cli手机端单页App纯技术分享,新闻源码项目,github上也有上传,可以克隆下载
深入理解vue-loader如何使用
08-30
* `<style>`：用于描述vue组件的样式部分。 语言块的lang属性 vue-loader通过指定语言块的lang属性支持css预编译、html编译模板等语言格式。例如，在组件的style块中使用sass：<style lang="sass"> /* write SASS!...
vue3.0 CLI - 2.1 - component 组件入门教程
10-18
3. **样式（Style）**：组件内的样式通过 `<style>` 标签定义，提供了组件作用域的 CSS，避免全局样式冲突。这意味着样式仅应用于当前组件，不会影响其他组件。 在大型项目中，为了代码组织和维护，有时会将模板、...
vue学习日记17：scoped样式冲突
03-21
在Vue.js框架中， scoped样式是用于实现组件的样式隔离，它通过添加一个唯一的属性到CSS选择器来确保样式只作用于当前组件。这个特性在开发大型应用时尤其有用，因为它帮助维护代码的整洁和可预测性。然而，有时我们...
vue3之defineComponent
点点滴滴
10-10 384
/script>h1 {</style>使用可以更好地定义组件的 props、emits 和其他选项，从而提供更严格的类型检查。在这个示例中，帮助我们定义了props和emits的类型，从而提供更严格的类型检查。
Vue根实例、实例总结
m0_54007573的博客
10-04 684
Vue根实例、实例总结
计算机毕业设计 基于Python的荣誉证书管理系统的设计与实现 Python毕业设计 Python毕业设计选题 Django框架 Vue【附源码+安装调试】
m0_74181697的博客
10-07 3377
基于Python的荣誉证书管理系统是一个为教育机构设计的证书管理平台，提供证书生成、存储、查询和管理功能。系统旨在提高管理效率，增强证书安全性，优化查询体验，并支持教育决策。该系统有助于推动教育信息化，提升教育机构的管理水平。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1490
vue-live2d看板娘集成方案设计使用教程
如何使用ssm实现基于Java的校园二手物品交易平台的设计与实现+vue
寒夜
10-06 3057
【代码】ssm基于Java的校园二手物品交易平台的设计与实现+vue
【VUE】Vue2中的diff流程
10-07 304
Vue2中的diff流程
vue 权限分组
最新发布
qq_37309987的博客
10-10 319
5、同一个菜单下，查询接口和当前接口下的操作按钮需要分组。4、新增、修改、删除任何一个取消勾选，查询不取消勾选。3、查询取消勾选，则新增、修改、删除都取消勾选。1、勾选查询，新增、修改、删除不选中。2、勾选新增、修改、或删除，查询选中。
结合vueuse实现图片懒加载
clmm_的博客
10-02 1381
在 Vue.js 中，是用于注册自定义指令的 API。自定义指令允许你在组件的模板中实现特定的功能或行为，这些功能或行为通常是 DOM 操作。自定义指令是一种可以在模板中使用的功能，通常以v-开头。例如，v-model和v-bind是内置指令。通过创建自定义指令，你可以扩展 Vue 的功能。: 用于注册自定义指令。自定义指令: 可以在模板中添加特定的功能，增强组件的交互性。钩子函数: 提供不同生命周期阶段的操作机会。简单来说，这段代码的目的是确保只有当用户滚动到
【VUE】Vue2与Vue3两者Diff流程的区别
10-07 436
Vue2与Vue3两者Diff流程的区别
Vue：点击图片在新的页面打开
MMF博客园
10-10 143
Vue：点击图片在新的页面打开
深入探索Vue3组合式API
weixin_74009702的博客
10-06 1543
reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式，ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。ref：用于声明 基本类型 或者单个变量的响应式数据。ref 的核心在于它包装了一个值，当这个值变化时，依赖它的视图会重新渲染。注意：ref 返回的是一个对象，其中的值通过 .value 属性访问。// 0reactive：用于声明 对象 或 数组 的响应式数据。reactive 更适合处理复杂的数据结构（对象或数组）。
Vue83 引入elementUI
Rockandrollman的博客
10-07 514
vue脚手架升级，已经不存在 .babelrc 文件，改为babel.config.js文件。
深入解析vue-loader：CSS Scoped的实现原理
Vue CSS Scoped 是 Vue.js 单文件组件（Single File Component, SFC）中一个重要的特性，它允许我们在组件内部编写 CSS，而不用担心样式冲突。当我们给 `<style>` 标签添加 `scoped` 属性时，Vue 将自动管理这些样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值