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,一经查实,立即删除!

相关文章

使用虚拟机搭建环境:CentOS7 Docker、MySQL、Redis 安装与配置

创作灵感 项目实践总结&#xff1a;记录了在虚拟机中安装与配置CentOS7环境下的Docker、MySQL、Redis的全过程&#xff0c;帮助理解和应用各项技术。技术笔记与问题总结&#xff1a;详细梳理了每一步安装的关键点与常见问题&#xff0c;并给出了解决方案。职业感悟与心得&…

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走廊

为什么vue的beforeupdate和updated生命周期会不停的发送请求

在 Vue2 中,beforeUpdate 和 updated 生命周期钩子会在每次组件更新之前和之后被调用。如果在这两个钩子中执行了某些操作,比如发送 HTTP 请求,那么每当组件发生更新时,这些操作也会随之执行,从而导致不断地发送请求。 以下是一些可能导致这种情况的原因: 响应式数据变化…

Python实现图像(边缘)锐化:梯度锐化、Roberts 算子、Laplace算子、Sobel算子的详细方法

目录 Python实现图像&#xff08;边缘&#xff09;锐化&#xff1a;梯度锐化、Roberts算子、Laplace算子、Sobel算子的详细方法引言一、图像锐化的基本原理1.1 什么是图像锐化&#xff1f;1.2 边缘检测的基本概念 二、常用的图像锐化算法2.1 梯度锐化2.1.1 实现步骤 2.2 Robert…

PHP程序开发基础

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

Docker方式部署ClickHouse

Docker方式部署ClickHouse ClickHouse docker 版本镜像&#xff1a;https://docker.aityp.com/r/docker.io/clickhouse/clickhouse-server ClickHouse 21.8.13.6 docker 版本镜像&#xff1a;https://docker.aityp.com/image/docker.io/clickhouse/clickhouse-server:21.8.13.…

Java 分布式缓存

在当今的大规模分布式系统中&#xff0c;缓存技术扮演着至关重要的角色。Java 作为一种广泛应用的编程语言&#xff0c;拥有丰富的工具和框架来实现分布式缓存。本文将深入探讨 Java 分布式缓存的概念、优势、常见技术以及实际应用案例&#xff0c;帮助读者更好地理解和应用这一…

使用Canvas绘制地图

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

Java常见List面试题

前言 本来想着给自己放松一下&#xff0c;刷刷博客&#xff0c;突然被几道面试题难倒&#xff01;获取一个类Class对象的方式有哪些&#xff1f;ArrayList 和 LinkedList 的区别有哪些&#xff1f;用过 ArrayList 吗&#xff1f;说一下它有什么特点&#xff1f;有数组了为什么…

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

第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 Lock LockSupport 总结

前言 相关系列 《Java & Lock & 目录》&#xff08;持续更新&#xff09;《Java & Lock & LockSupport & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Java & Lock & LockSupport & 总结》&#xff08;学习总结/最新…

php如何对海量数据进行基数统计

在PHP中&#xff0c;对海量数据进行基数统计通常可以使用布隆过滤器&#xff08;Bloom Filter&#xff09;或者Count-Min Sketch算法。以下是使用Count-Min Sketch算法的一个简单示例&#xff1a; class CountMinSketch {private $rows;private $columns;private $values;publ…

扫描开放端口的方法及代码实现telnet

背景:一个服务器不知道开放多少端口,也不知道有多少端口能用,因此扫描所有端口。 主要就是采用telnet来实现,挨个进行for训练 愿我们终有重逢之时,而你还记得我们曾经讨论的话题。 Q group 868373192 Q second group 277356808 `timeout` 命令的参数设置是正确的,但为…

高级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…