当前位置: 首页 > 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;不明白的可以看如下图…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...