vue3单文件组件中style特性的深入讲解
更新时间：2021年09月06日 09:09:25 作者：_六耳_
单文件就是把一个页面拆分为多个,多层次的组件,通过多层引用,大大缩小vue文件的长度和页面复杂度,下面这篇文章主要给大家介绍了关于vue3单文件组件中style特性的相关资料,需要的朋友可以参考下
style scoped
需要注意的有：
- 样式不会影响到其他组件，只会在当前组件生效。
- 子组件的根元素会同时 受父组件的作用域样式，和子组件的作用域样式影响. 这样做的目的是让父组件可以调整子组件的布局。
- 存在3个特殊的选择器：
1. 深度选择器：可以影响到子组件. 使用伪类 => :deep(cls: 影响的选择器)
.a :deep(.b) {
...
}
2. 插槽选择器: 可以影响到插槽内容的样式。使用伪类 => :slotted(选择器)
:slloted(.a) {
...
}
3. 全局选择器: 是样式影响到全局。 使用伪类 => :global(选择器)
:slloted(.a) {
...
}
scoped style 可以和 style同时存在
style module
style 标签中带有 module。其样式和 style scoped一样只能作用域于当前组件。
此方式会将css 编译为 css modules.且暴露给组件$styles对象来使用css样式
<template>
<p :class="$style.red">
This should be red
</p>
</template>
<style module>
.red {
color: red;
}
</style>
可以给module赋值来自定义暴露的对象名称
<template>
<p :class="style.red">
This should be red
</p>
</template>
<style module='style'>
.red {
color: red;
}
</style>
在组合式api中可以使用 useCssModule() api来使用cssModule.
// 默认, 返回 <style module> 中的类
useCssModule()
// 命名, 返回 <style module="classes"> 中的类
useCssModule('classes')
状态驱动的动态css
可以使用 v-bind() 来将css值关联到动态的组件状态上
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
总结
到此这篇关于vue3单文件组件中style特性的文章就介绍到这了,更多相关vue3单文件组件style特性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue进入页面加载数据缓慢实现loading提示过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue使用天地图、openlayers实现多个底图叠加显示效果
这篇文章主要介绍了vue使用天地图、openlayers实现多个底图叠加显示,根据返回的经纬度列表通过天地图、openlayers实现底图添加，本文通过示例代码给大家介绍的非常详细，需要的朋友参考下吧2022-04-04
这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要介绍了用vscode开发vue应用的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Promise就是一个给一步操作提供的容器，在这个容器里，有两个阶段无法改变的阶段，这两个阶段在文中给大家提到。对vue中利用Promise封装jsonp并调取数据 的相关知识感兴趣的朋友，跟随小编一起看看吧2019-06-06
这篇文章主要为大家介绍了vue parseHTML函数源码解析start钩子函数，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了vue图片拖拉转放大缩小组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue双向数据绑定指令v-model的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
又是一个老生常谈的功能，接下来会从零实现一个万年日历，从布局到逻辑，再到随处可见的打卡功能。文中的示例代码简洁易懂，需要的可以参考一下2023-01-01
最新评论