当前位置: 首页 > news >正文

vue3 布局样式的原理

style scoped

<style scoped > 它的 CSS 只作用于当前组件中的元素,如果子组件只有一个根元素,也会被渗透
原理:
当我们再组建中使用scoped时,vue会自动为组件中所有元素生成一个随机的属性,形如:data-v-7a7a37b1,生成后,所有的选择器都会在最后添加一个[data-v-7a7a37b1],
.box -》box[data-v-7a7a37b1],

<template><div class="box"><p>我是父组件</p></div>
</template>
<style scoped>.box{background:#ccc;}
</style>

在这里插入图片描述
注意:随机生成的属性,除了会添加到当前组件内所有元素上,也会渗透当前组件引入的其它组件的根元素上(单根情况会,多根情况不会渗透),这样设计是为了,可以通过父组件来为子组件设置一些样式

:deep

希望将组件和引入的组件中的某个元素字体都设置为黄色
这时候用到 :deep()
父组件

<template><div class="box"><p>我是父组件</p><stylechild></stylechild></div>
</template><script setup lang="ts">
import stylechild from '../components/StyleChild.vue'
</script><style scoped>.box :deep(p){color: blue;}   /*没加deep之前 子组件不会变蓝,加上之后就会变蓝了*/
</style>

子组件

<template><div><p>我是子组件</p></div>
</template>

在这里插入图片描述

:global

全局选择器 :global(div),如果给div设置样式,全局的div都会渗透这个样式
也可以新增一个
s

style module

css模块module,会自动的对模块中的类名进行hash化来确保类名的唯一性

<template><div :class="$style.box"><p>我是父组件</p><stylechild></stylechild></div>
</template><style module>.box {color: blue;}   /*没加deep之前 子组件不会变蓝,加上之后就会变蓝了*/
</style>

module也可以指定一个名称,默认用$style,加入module = “classssss”
使用 classssss.box

相关文章:

vue3 布局样式的原理

style scoped <style scoped > 它的 CSS 只作用于当前组件中的元素&#xff0c;如果子组件只有一个根元素&#xff0c;也会被渗透 原理&#xff1a; 当我们再组建中使用scoped时&#xff0c;vue会自动为组件中所有元素生成一个随机的属性&#xff0c;形如&#xff1a;da…...

Qt程序使用路径方式和注意事项

Qt程序使用路径方式和注意事项 更多精彩内容&#x1f449;个人内容分类汇总 &#x1f448;&#x1f449;Qt开发经验 &#x1f448;文章目录Qt程序使用路径方式和注意事项[toc]前言一、Windows下Qt程序使用路径1.准备工作2.测试结果二、Linux下Qt程序使用路径1.准备工作2.测试结…...

和日期相关的代码和bug——一道力扣题中的小发现

目录 Day of the Week 题目大意 常规方法 Python代码 Golang代码 C代码 基姆拉尔森公式 Python代码 Golang代码 C代码 使用库函数 Python代码 Golang代码 C代码 Day of the Week Given a date, return the corresponding day of the week for that date. The inp…...

如何在2023年学习编程并获得开发者工作

丢下自负 许多进入软件开发领域的人都是从最底层开始的&#xff0c;你可能会获得“初级开发者”的头衔。每天面临的问题是&#xff1a;我有十年的专业经验了。我不是个入门员工。但尽管过去的工作经验丰富&#xff0c;我仍然是个入门级的开发者&#xff0c;我还是个新手。别总…...

Python实战之小说下载神器(三)排行榜所有小说:最全热门小说合集,总有一款适合你,好多好多好多超赞的小说...(源码分享学习)

前言 这次的是一个系列内容 给大家讲解一下何一步一步实现一个完整的实战项目案例系列之 小说下载神器&#xff08;三&#xff09;&#xff08;GUI界面化程序&#xff09; 多线程采集小说下载、采集排行榜所有小说 哈喽&#xff01;大家上午好啦&#xff0c;我是爱看小说的栗子…...

前端监控之用户行为监控实践1(数据收集)

前文对前端监控进行了简单介绍&#xff0c;起因是因为当前做的一个需求&#xff0c;老板要看当前项目的uv、pv信息。其实这是非常简单的统计。 但在最开始接到这个需求&#xff0c;却难倒我了。 现在进行简单的复盘&#xff0c;记录一下实现方法。 一、数据记录 用户行为从大…...

【网络原理7】认识HTTP

目录 一、HTTP协议的位置 二、HTTP协议的特点&应用场景 三、HTTP协议的格式的查看 Fiddler下载与使用 ​编辑 如何查看HTTP请求消息 ​编辑 如何查看HTTP响应数据包 如何默认开启HTTPS的解析功能 四、HTTP的请求数据包的格式含义 第一部分&#xff1a;请求行&…...

SPI实验

目录 一、SPI 简介 二、硬件原理 ECSPI3_SCLK ECSPI3_MISO和ECSPI3_MOSI ECSPI3_SS0 三、I.MX6U ECSPI 简介 ECSPIx_RXDATA ECSPIx_TXDATA ECSPIx_CONREG ECSPIx_CONFIGREG ECSPIx_PERIODREG​编辑 ECSPIx_STATREG 四、ICM-20608 简介 五、代码编写 1、创建文件及文…...

去基线处理

目录detrend函数去除基线多项式拟合原函数BEADS 基线处理小波算法经验模态分解&#xff08;EMD&#xff09;参考detrend函数去除基线 detrend函数只能用于去除线性趋势&#xff0c;对于非线性的无能为力。 函数表达式&#xff1a;y scipy.signal.detrend(x): 从信号中删除线…...

模拟信号4-20mA /0-5V/0-75mV/0-100mV转RS-485/232,数据采集A/D转换模块 YL21

特点&#xff1a;● 模拟信号采集&#xff0c;隔离转换 RS-485/232输出● 采用12位AD转换器&#xff0c;测量精度优于0.1%● 通过RS-485/232接口可以程控校准模块精度● 信号输入 / 输出之间隔离耐压3000VDC ● 宽电源供电范围&#xff1a;8 ~ 32VDC● 可靠性高&#xff0c;编程…...

[USB]键盘数据格式以及按键键值

USB键盘数据包含8个字节 BYTE1 – 特殊按键 |–bit0: Left Control是否按下&#xff0c;按下为1 |–bit1: Left Shift 是否按下&#xff0c;按下为1 |–bit2: Left Alt 是否按下&#xff0c;按下为1 |–bit3: Left GUI&#xff08;Windows键&#xff09; 是否按下&#xff0c;…...

web客户端-websocket

1、websocket简介 WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c…...

mysql间隙锁

首先我们这里有一个表t&#xff0c;其中的数据如下图所示 注意哈 update由于操作的最新的值&#xff0c;所以是当前读&#xff01; 另外一个事务插入 8的时候发生锁 而我对id为10的数据进行更新&#xff0c;却不会被锁住 分析&#xff1a;在执行当前读时&#xff0c;由于id7不存…...

华为OD机试 - 计算面积(Java) | 机试题+算法思路+考点+代码解析 【2023】

计算面积 绘图机器的绘图笔初始位i在原点(0.0)。 机器启动后其绘图笔按下面规则绘制直线: 1 )尝试沿着横向坐标轴正向绘制直线,直到给定的终点值E, 2 )期间可通过指令在纵坐标轴方向进行偏移。井同时绘制直线,偏移后按规则1绘制直线;指令的格式为X offsetY。表示在横坐标X…...

Python 之 Pandas 时间戳、通过时间间隔实现 datetime 加减、时间转化、时期频率转换和 shift() 时间频率进行移位)

文章目录一、时间戳1. unit 参数是 s2. year、month、day、hour、minute、second、microsecond 单独设置时间二、通过时间间隔实现 datetime 加减三、时间转化1. 处理各种输入格式2. 将字符串转 datetime3. 除了可以将文本数据转为时间戳外&#xff0c;还可以将 unix 时间转为时…...

一篇文章搞定linux网络模型

网络协议感觉晦涩难懂&#xff1f;什么七层网络模型&#xff1f;又五层网络模型&#xff1f;又四层网络模型&#xff1f;TCP/IP协议是个啥&#xff1f;UDP是啥&#xff1f;什么是三次握手&#xff1f;什么是四次挥手&#xff1f;tcpdump听说是抓包的&#xff0c;怎么用&#xf…...

惠普庆祝在中国40年,强化中国发展战略

中国北京&#xff0c;2023年2月23日 ——今日&#xff0c;“品质信赖向未来” 惠普在中国40年系列活动启动仪式及惠普打印春季新品发布会在北京盛大举行。现场&#xff0c;惠普回顾了40年来与中国经济及产业共同发展的历程&#xff0c;并再次强调了惠普一以贯之的“在中国&…...

C++小作业

前言&#xff1a;long long time ago&#xff0c;老大留了点小作业&#xff0c;一直忘了写…偷偷补上 小作业目录unique_ptr vs shared_ptrunique_ptrshared_ptrpublisher/subscriber 1?boost::bindstd::bindthis? _1&#xff1f;TopicContextPtr?std::moveunique_ptr vs sh…...

Python基础 — lambda匿名函数

1、什么是匿名函数&#xff1f; 匿名函数&#xff0c;顾名思义&#xff0c;就是没有名字的函数&#xff0c;它主要用在那些只使用一次的场景中。如果我们的程序中只需要调用一次某个简单逻辑&#xff0c;把它写成函数还需要先定义、取函数名字等一些列操作&#xff0c;这种场景…...

MongoDB安装和使用过程常见问题

文章目录一、安装过程显示没有相应的权限二、pymongo无法使用&#xff0c;报错一、安装过程显示没有相应的权限 oh我的天&#xff0c;找了网上很多种方法都不行哈哈 不同的电脑对应不同的问题吧~ 我的这个问题是这样解决滴 先直接简述操作路径&#xff0c;不明白的可以看如下图…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

2.2.2 ASPICE的需求分析

ASPICE的需求分析是汽车软件开发过程中至关重要的一环&#xff0c;它涉及到对需求进行详细分析、验证和确认&#xff0c;以确保软件产品能够满足客户和用户的需求。在ASPICE中&#xff0c;需求分析的关键步骤包括&#xff1a; 需求细化&#xff1a;将从需求收集阶段获得的高层需…...

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...