Vue-2.1scoped样式冲突

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

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

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

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

scoped原理:

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

区分开不同的组件

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

相关推荐
2501_906467631 分钟前
HTML5结合Vue3实现百万文件分块上传的思路是什么?
前端·html·html5·vue上传解决方案·vue断点续传·vue分片上传下载·vue分块上传下载
San30.1 分钟前
现代前端工程化实战:从 Vite 到 React Router demo的构建之旅
前端·react.js·前端框架
kirinlau3 分钟前
vue3+vite+scss项目使用tailwindcss
前端·css·scss
阿贾克斯的黎明5 分钟前
现代前端的魔法标签:HTML5 语义化标签全解析
前端·html·html5
菠菜盼娣8 分钟前
vue3知识点
前端·vue.js
JIngJaneIL12 分钟前
基于java+ vue建筑材料管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
土豆125014 分钟前
终端自治时代的 AI 开发范式:Claude Code CLI 全方位实操指南
前端·人工智能·程序员
一 乐15 分钟前
办公系统|基于springboot + vueOA办公管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring
Gazer_S17 分钟前
【Vue Router 路由守卫(Navigation Guards)指南:概念、执行顺序、beforeResolve、异步路由组件】
前端·javascript·vue.js