vue3学习记录-单文件组件 CSS 功能

vue3学习记录-单文件组件 CSS 功能

  • 1.组件作用域 CSS
    • 1.1为什么要用到样式穿透(:deep())
    • 1.2 插槽选择器:slotted(div)
    • 1.3 全局选择器:global
  • 2.CSS Modules
    • 2.1 基本用法
    • 2.2 自定义注入名称
    • 2.3 与组合式 API 一同使用
  • 3.CSS 中的 v-bind()

1.组件作用域 CSS

1.1为什么要用到样式穿透(:deep())

在用一些ui框架,例如elementui的时候,再加上style加了scoped属性导致,正常的写法是改变不了其中的一些css,为什么呢?因为scoped,

  1. 给HTML的DOM节点加一个不重复data属性(形如:data-v-123)来表示他的唯一性
    2.在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-123])来私有化样式
    3.如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性

例如,当前的App.vue文件

<script setup>
</script><template><div><p>{{ $hello('Vue') }}</p><input type="text" v-focus><el-select v-model="bb"><el-option label="选项1" value="1"></el-option><el-option label="选项2" :value="2"></el-option></el-select><global-component></global-component><button @click="showMessage">显示消息</button></div>
</template>
<style scoped lang="scss">
.el-select{width: 200px;.el-select__wrapper{background-color: aqua;}
}
</style>

当前template里的html渲染出来都会带上一个不重复的data属性
在这里插入图片描述
而且el-select组件下面的标签是没有带不重复的data属性的。而且当前的.el-select[data-v-7a7a37b1]也是class名加上data属性去命中对应的class名。但是为什么写的 .el-select__wrapper{background-color: aqua;}样式没生效呢,而且原有的样式
在这里插入图片描述
也没有我自己写的.el-select{.el-select__wrapper{ }}权重高吧,但是就是没生效。我们看看浏览器中的class文件
在这里插入图片描述
可以看到el-select的样式现在在scoped的作用下是根据.select加data属性来命中css的,这个是有的。但是.el-select__wrapper的样式是.el-select .el-select__wrapper[data-v-7a7a37b1] ,第一个.el-select就对应不上的,所以写的el-select__wrapper自然也对应不上。所以用到了样式穿透。vue3使用的是:deep()

<style scoped lang="scss">
.el-select{width: 200px;:deep(.el-select__wrapper){background-color: aqua;}
}
</style>

效果:
在这里插入图片描述
:deep()帮我们把原有的.el-select .el-select__wrapper[data-v-7a7a37b1] 变成了.el-select[data-v-7a7a37b1] .el-select__wrapper。所以样式能对应上

1.2 插槽选择器:slotted(div)

//父组件
<template><A><div class="demo">aaa</div></A>
</template><style scoped>
.demo{color: red;
}
</style>
//子组件<template><div class="container"><slot></slot></div>
</template><script setup></script>
<style lang='scss' scoped>
.container {width: 200px;height: 200px;background-color: lightcoral;margin-bottom: 10px;:slotted(.demo) {color: lightblue;}
}
</style>

这里渲染出来的结果是以带了子组件的color为重,
在这里插入图片描述

但是如果把:slotted去掉的话,color就是以父组件的为主了.container 样式去掉的话,

<style lang='scss' scoped>:slotted(.demo) {color: lightblue;}
</style>

在这里插入图片描述

却是以父组件的样式为主。
感觉:slotted的作用是能让子组件的插槽有一些默认的css样式,当然权重的就是另外的结果。

1.3 全局选择器:global

顾名思义,就是在当前组件创建一个其他组件也能访问到的css样式

//父
<script setup>
import A from './components/A.vue';
import B from './components/B.vue';
</script><template><A></A>
</template><style scoped>:global(.demo) {color: red;
}
</style>
//子
<template><div class="container"><a href="" class="demo">试一试全局的css</a><slot></slot></div>
</template>

子组件的字体是红色的。

2.CSS Modules

2.1 基本用法

一个

<template><p :class="$style.red">This should be red</p>
</template><style module>
.red {color: red;
}
</style>

得出的 class 将被哈希化以避免冲突,实现了同样的将 CSS 仅作用于当前组件的效果。
在这里插入图片描述

2.2 自定义注入名称

你可以通过给 module attribute 一个值来自定义注入 class 对象的属性名:

<template><p :class="classes.red">red</p>
</template><style module="classes">
.red {color: red;
}
</style>

2.3 与组合式 API 一同使用

import { useCssModule } from 'vue'// 在 setup() 作用域中...
// 默认情况下,返回 <style module> 的 class
useCssModule()// 具名情况下,返回 <style module="classes"> 的 class
useCssModule('classes')//测试
<script setup>
import { useCssModule } from 'vue'const classes = useCssModule('classes')
console.log(classes)
console.log(classes.red)</script><style module="classes">
.red {color: red;
}.green {color: green;.aa {color: yellow;}
}
</style>

结果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/85abe9e7c905436785247c1fa5a4d77e.png
返回当前type modules里面定义的class的原class名和渲染在浏览器的对应css名的映射对象。如果你想再进行后续的操作,例如在某些情况下,你可能需要将你的 Vue 组件与一些第三方 JavaScript 库或框架集成。这些库可能需要你提供元素的类名来进行操作。此时,你可以使用 useCssModule 提供的映射类名来确保正确地引用到对应的元素。

3.CSS 中的 v-bind()

单文件组件的

<template><div class="text">hello</div>
</template><script>
export default {data() {return {color: 'red'}}
}
</script><style>
.text {color: v-bind(color);
}
</style>

这个语法同样也适用于

<script setup>
import { ref } from 'vue'
const theme = ref({color: 'red',
})
</script><template><p>hello</p><button @click="theme.color = 'blue'">改变颜色</button>
</template><style scoped>
p {color: v-bind('theme.color');
}
</style>

实际的值会被编译成哈希化的 CSS 自定义属性,因此 CSS 本身仍然是静态的。感觉是在中间找了个中间变量。自定义属性会通过内联样式的方式应用到组件的根元素上,并且在源值变更的时候响应式地更新。
在这里插入图片描述
在这里插入图片描述
点击,确实中间变量属性名对应的值也改变了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/58421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

postman如何安装旧版本不升级(以9.31和11.10版本为例)

postman版本超过10.x&#xff08;包含10.x)&#xff0c;有个大的麻烦&#xff0c;就是需要登录账号&#xff0c;如果网络不佳&#xff08;其实是外网受限&#xff09;,那就很难受了 功能页面都进不去了&#xff01;而8.x /9.x等以下版本就不需要登录了。 比如9.31.30这个版本就…

Cesium基础-(Entity)-(Corridor 走廊)

里边包含Vue、React框架代码详细步骤、以及代码详细解释 4、Corridor 走廊 以下是 CorridorGeometry 类的属性、方法和静态方法,以表格形式展示: 属性 属性名类型默认值描述positionsArray.定义走廊中心的坐标点数组。widthnumber走廊

PHP程序开发基础

PHP简介及其开发环境与工具一、PHP简介 PHP是一种流行的服务器端脚本语言&#xff0c;最初由拉斯姆斯勒多父于1994年创建&#xff0c;旨在通过C语言编写小程序以统计网站的访问流量。自那时以来&#xff0c;PHP已经经历了多个版本的迭代&#xff0c;功能不断增强&#xff0c;应…

使用Canvas绘制地图

既然是通过canvas来绘制地图&#xff0c;那肯定是需要地图的数据信息的。接下来跟着我的脚步去实现这些细节。 地图数据 地图数据怎么来呢&#xff1f;当然是怎么简单怎么来 npm i surbowl/world-geo-json-zh 这个第三方包是简体中文 Geo JSON 世界地图&#xff0c;带有国家…

丁子晴作品《指尖的爱的温度》荣获“金犊奖”全球最佳新锐奖

第33届时报金犊奖颁奖盛典于10月18日在中国成都西部智谷数字体验中心隆重举行。丁子晴的作品《指尖的爱的温度》在激烈的竞争中脱颖而出,荣获了第33届“金犊奖”全球最佳新锐奖。享有盛誉的“金犊奖”是一个全球性的奖项,以其专业严谨、创意水平高的特点,被业界誉为“青年创意的…

Opensearch集群部署【docker、服务器、Helm多种部署方式】

操作系统兼容性 我们建议在 Red Hat Enterprise Linux (RHEL) 或使用systemd的基于 Debian 的 Linux 发行版上安装 OpenSearch &#xff0c;例如 CentOS、Amazon Linux 2 和 Ubuntu Long-Term Support (LTS)。OpenSearch 应该适用于大多数 Linux 发行版&#xff0c;但我们只测…

高级java每日一道面试题-2024年10月22日-JVM篇-JVM堆栈概念,何时销毁对象?

如果有遗漏,评论区告诉我进行补充 面试官: JVM堆栈概念,何时销毁对象? 我回答: JVM堆栈概念 栈&#xff08;Stack&#xff09;&#xff1a; 定义&#xff1a;栈是Java虚拟机为每个线程分配的内存区域&#xff0c;用于存储线程执行时的局部变量、操作数栈、动态链接和方法返…

串口调试工具

https://download.csdn.net/download/jinhuding/89933087?spm1001.2014.3001.5501

boost笔记:boost::Graph中找出所有环

1. 问题描述 本文描述了找出一个有向连通图中所有的环的解决方案 测试用到的有向连通图 2. 自写算法 通过深度优先遍历算法&#xff0c;发现回边时&#xff0c;即存在环的原理来找出环。对于用共享边的环&#xff0c;以下算法有些环找不出来&#xff0c;如上图中的2->8…

DriftingBlues: 1渗透测试

靶机&#xff1a;DriftingBlues: 1 DriftingBlues: 1 ~ VulnHubhttps://www.vulnhub.com/entry/driftingblues-1,625/ 攻击机&#xff1a;kail linux 2024 1,将两台虚拟机网络连接都改为NAT模式&#xff0c;并查看靶机的MAC地址 2&#xff0c;攻击机上做主机扫描发现靶机 靶机I…

【C++单调栈 记忆化搜索】1130. 叶值的最小代价生成树|1919

本文涉及的基础知识点 C单调栈 C记忆化搜索 C动态规划 LeetCode1130. 叶值的最小代价生成树 给你一个正整数数组 arr&#xff0c;考虑所有满足以下条件的二叉树&#xff1a; 每个节点都有 0 个或是 2 个子节点。 数组 arr 中的值与树的中序遍历中每个叶节点的值一一对应。 每…

【我的 PWN 学习手札】setcontext + ROP

堆上的setcontext利用系列还有&#xff1a; 【我的 PWN 学习手札】setcontext shellcode-CSDN博客 目录 前言 一、setcontext gadget 二、setcontext ROP &#xff08;一&#xff09;setcontext设置寄存器 &#xff08;二&#xff09;ROP链布置 三、图示 四、模板与…

【算法】Kruskal最小生成树算法

目录 一、最小生成树 二、Kruskal算法求最小生成树 三、代码 一、最小生成树 什么是最小生成树&#xff1f; 对于一个n个节点的带权图&#xff0c;从中选出n-1条边&#xff08;保持每个节点的联通&#xff09;构成一棵树&#xff08;不能带环&#xff09;&#xff0c;使得…

信号完整性SI总结【小登培训】

信号完整性问题的根源通常在于阻抗不匹配、串扰、时序误差、电磁辐射和电源噪声。解决这些问题需要从PCB设计、布线、材料选择、匹配和屏蔽等多个方面综合考虑&#xff0c;并结合眼图分析等工具进行调试和优化。确保信号完整性对于高速电路设计尤为重要&#xff0c;影响系统的可…

【蓝桥杯选拔赛真题78】python电话号码 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析

目录 python电话号码 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python电话号码 第十五届蓝桥杯青少年组python比赛选拔赛真题 一、题目要…

2022NOIP练习总结

种花 1.本题是一道前缀和优化加上枚举的问题。先考虑 C 因为 F 是 C 下边随便加一个点&#xff0c;所以只要求出 C 就求出了 F 。 注意到&#xff0c;并没有要求上下行一样&#xff0c;唯一的要求是 C 的两个横要隔一行&#xff0c;这就是问题的突破点&#xff0c;这题很明显…

【Spring Boot】元注解

元注解 1.元注解1.1 Target1.2 Retention1.3 Inherited1.4 Documented1.5 interface 2.自定义注解2.1 创建自定义注解类2.2 实现业务逻辑2.3 使用自定义注解 1.元注解 元注解就是定义注解的注解&#xff0c;是 Java 提供的用于定义注解的基本注解。 注解 说明 Retention是注解…

高速定向广播声光预警系统赋能高速安全管控

近年来&#xff0c;高速重大交通事故屡见不鲜&#xff0c;安全管控一直是高速运营的重中之重。如何利用现代化技术和信息化手段&#xff0c;创新、智能、高效的压降交通事故的发生概率&#xff0c;优化交通安全管控质量&#xff0c;是近年来交管部门的主要工作&#xff0c;也是…

Cmake Error:could not find any instance of Visual Studio.

出现以下错误 解决方案&#xff1a; 安装visual stuido 2017。 检查是否安装“使用C的桌面开发” 检查是否安装了扩展开发 点开“单个组件”是否安装了以下组件 编辑计算机环境变量&#xff0c;