Vue-2.1scoped样式冲突

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

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

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

复制代码
<style scoped>  </style>

scoped原理:

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

区分开不同的组件

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

相关推荐
teeeeeeemo19 分钟前
如何做HTTP优化
前端·网络·笔记·网络协议·http
范范之交21 分钟前
JavaScript基础语法two
开发语言·前端·javascript
界面开发小八哥1 小时前
DevExtreme Angular UI控件更新:引入全新严格类型配置组件
前端·ui·界面控件·angular.js·devexpress
bitbitDown1 小时前
重构缓存时踩的坑:注释了三行没用的代码却导致白屏
前端·javascript·vue.js
xiaopengbc1 小时前
火狐(Mozilla Firefox)浏览器离线安装包下载
前端·javascript·firefox
用户016523844411 小时前
Webpack5 入门与实战,前端开发必备技能无密
前端
小高0071 小时前
🔥🔥🔥前端性能优化实战手册:从网络到运行时,一套可复制落地的清单
前端·javascript·面试
古夕2 小时前
my-first-ai-web_问题记录01:Next.js的App Router架构下的布局(Layout)使用
前端·javascript·react.js
Solon阿杰2 小时前
solon-flow基于bpmnJs的流程设计器
javascript·bpmn-js
Solon阿杰2 小时前
前端(react/vue)实现全景图片(360°)查看器
javascript·vue.js