上海网站托管,兰州企业网站建设,wordpress文章发布专题文章,全网营销推广平台在这里记录一下Vue3.0里面的样式隔离特性#xff0c;在项目开发过程当中#xff0c;有时候将样式单独提到了一个文件当中再引入到单组件文件当中#xff0c;会导致没有样式隔离。
这里阅读Vue官方文档找到了解决办法。
一、scoped
我们了解到的最常见就是scoped#xff…在这里记录一下Vue3.0里面的样式隔离特性在项目开发过程当中有时候将样式单独提到了一个文件当中再引入到单组件文件当中会导致没有样式隔离。
这里阅读Vue官方文档找到了解决办法。
一、scoped
我们了解到的最常见就是scoped主要的原理是通过通过 PostCSS为元素添加自定义属性(data-xxx-xxx)它的形式如下
style scoped
.example {color: red;
}
/styletemplatediv classexamplehi/div
/template编译后的形式
style
.example[data-v-f3f3eg9] {color: red;
}
/styletemplatediv classexample data-v-f3f3eg9hi/div
/template1.1 深度选择器
形式:deep()伪类 作用父组件的样式能够影响到子组件
1.2 插槽选择器
形式:slotted()伪类 作用组件样式可以影响到插槽插入的元素样式
1.3 全局选择器
形式:global()伪类 作用组件样式可以应用到全局
1.4 混合使用局部与全局样式 style
/* 全局样式 */
/stylestyle scoped
/* 局部样式 */
/style二、CSS Modules
Vue会将一个 \style module 标签会被编译为 CSS Modules 并且将生成的 CSS class 作为 $style 对象暴露给组件
templatep :class$style.redThis should be red/p
/templatestyle module
.red {color: red;
}
/style得出的 class 将被哈希化以避免冲突实现了同样的将 CSS 仅作用于当前组件的效果。
CSS Modules css 模块化指的是就是用url()或者import导入的文件
在我们现在的构建工具里面几乎都支持了对CSS Modules的处理只要将文件命名改为xxx.module.css就可以如果有预处理器改成相对应的名称即可。
三、CSS 中的 v-bind()
单文件组件的 style 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态
templatediv classtexthello/div
/templatescript
export default {data() {return {color: red}}
}
/scriptstyle
.text {color: v-bind(color);
}
/style这个语法同样也适用于 script setup且支持 JavaScript 表达式 (需要用引号包裹起来)
script setup
const theme {color: red
}
/scripttemplatephello/p
/templatestyle scoped
p {color: v-bind(theme.color);
}
/style实际的值会被编译成哈希化的 CSS 自定义属性因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上并且在源值变更的时候响应式地更新。
