【Vue】Vue3.0样式隔离

在这里记录一下Vue3.0里面的样式隔离特性,在项目开发过程当中,有时候将样式单独提到了一个文件当中再引入到单组件文件当中,会导致没有样式隔离

这里阅读Vue官方文档找到了解决办法。

一、scoped

我们了解到的最常见就是scoped,主要的原理是通过通过 PostCSS为元素添加自定义属性(data-xxx-xxx),它的形式如下:

<style scoped>
.example {color: red;
}
</style><template><div class="example">hi</div>
</template>

编译后的形式:

<style>
.example[data-v-f3f3eg9] {color: red;
}
</style><template><div class="example" data-v-f3f3eg9>hi</div>
</template>
1.1 深度选择器

形式::deep()伪类
作用:父组件的样式能够影响到子组件

1.2 插槽选择器

形式::slotted()伪类
作用:组件样式可以影响到插槽插入的元素样式

1.3 全局选择器

形式::global()伪类
作用:组件样式可以应用到全局

1.4 混合使用局部与全局样式

<style>
/* 全局样式 */
</style><style scoped>
/* 局部样式 */
</style>

二、CSS Modules

Vue会将一个 \<style module> 标签会被编译为 CSS Modules 并且将生成的 CSS class 作为 $style 对象暴露给组件:

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

得出的 class 将被哈希化以避免冲突,实现了同样的将 CSS 仅作用于当前组件的效果。

CSS Modules
css 模块化指的是就是:用url()或者@import导入的文件

在我们现在的构建工具里面,几乎都支持了对CSS Modules的处理,只要将文件命名改为xxx.module.css就可以,如果有预处理器改成相对应的名称即可。

三、CSS 中的 v-bind()

单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态:

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

这个语法同样也适用于 <script setup>,且支持 JavaScript 表达式 (需要用引号包裹起来):

<script setup>
const theme = {color: 'red'
}
</script><template><p>hello</p>
</template><style scoped>
p {color: v-bind('theme.color');
}
</style>

实际的值会被编译成哈希化的 CSS 自定义属性,因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上,并且在源值变更的时候响应式地更新。

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

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

相关文章

三维模型设计新纪元:3D开发工具HOOPS在机械加工行业的应用与优势

在当今快速发展的科技时代&#xff0c;机械加工行业正经历着巨大的变革&#xff0c;而HOOPS技术正是其中一项重要的创新。HOOPS技术不仅仅是一种用于处理和可视化计算机辅助设计&#xff08;CAD&#xff09;数据的工具&#xff0c;更是机械加工领域中提升效率、优化设计的利器。…

Mac安装及配置MySql及图形化工具MySQLworkbench安装

Mac下载配置MySql mysql下载及安装 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 根据自己电脑确定下载x86还是ARM版本的 如果不确定&#xff0c;可以查看自己电脑版本&#xff0c;终端输入命令 uname -a 点击Download下载&#xff0c;可跳过登录注册&…

js 项目中我们会先创建一个空对象 然后到了后面可能需要再对空对象进行判断 略显复杂

//判断是不是空对象isEmptyObject(obj) {return Object.keys(obj).length 0;}, 假如 我们把 let observeParams 设置为null呢 就可以直接通过判断 if(observeParams){...} 来做判断 而不是判断空对象

springboot(ssm城市郊野公园管理系统 旅游景点预约系统Java系统

springboot(ssm城市郊野公园管理系统 旅游景点预约系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5…

[GXYCTF2019]禁止套娃(特详解)

刚打开页面什么都没有&#xff0c;抓包也什么都没有 那就dirsaerch扫一下&#xff0c;发现状态码都是429&#xff0c;访问太快了&#xff08;这里很多师傅都没有说明或者说清楚&#xff09; 这里改了一下线程&#xff08;kali自带的&#xff0c;如果用的脚本要加前面要加python…

关于如何将Win幻兽帕鲁服务端存档转化为单人本地存档的一种方法(无损转移)

本文转自博主的个人博客&#xff1a;https://blog.zhumengmeng.work,欢迎大家前往查看。 原文链接&#xff1a;点我访问 **起因&#xff1a;**最近大火的开放世界缝合体游戏幻兽帕鲁的大火也是引起了博主的注意&#xff0c;然后博主和周边小伙伴纷纷入手&#xff0c;博主也是利…

java中Filter的使用

1.1 Filter概述 Filter 表示过滤器&#xff0c;是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。Servlet 我们之前都已经学习过了&#xff0c;Filter和Listener 我们今天都会进行学习。 过滤器可以把对资源的请求拦截下来&#xff0c;从而实现一些特殊的功能。 如下图…

Python入门到精通(六)——Python函数进阶

Python函数进阶 一、函数的多返回值 二、函数多种传参方式 1、位置参数 2、关键字参数 3、缺省参数 4、不定长参数 &#xff08;1&#xff09;位置传递 &#xff08;2&#xff09;关键字传递 三、匿名函数 &#xff08;1&#xff09;函数作为参数传递 &#xff08;2&…

通过Demo学WPF—数据绑定(一)✨

前言✨ 想学习WPF&#xff0c;但是看视频教程觉得太耗时间&#xff0c;直接看文档又觉得似懂非懂&#xff0c;因此想通过看Demo代码文档的方式进行学习。 准备✨ 微软官方其实提供了WPF的一些Demo&#xff0c;地址为&#xff1a;microsoft/WPF-Samples: Repository for WPF …

day25 日期对象

日期对象 日期对象&#xff1a;用来表示时间的对象作用&#xff1a;可以得到当前系统时间 实例化 在代码中发现了new关键字时&#xff0c;一般将这个操作称为实例化创建一个时间对象并获取时间&#xff08;可以用于计算倒计时&#xff09; 获得当前时间const date new Date…

使用docker部署mongodb

1.创建目录 mkdir -p /opt/mongodb/{data,logs,config} 2.创建配置文件 进入目录 cd /opt写入配置 vim mongod.conf 内容如下 systemLog:# MongoDB发送所有日志输出的目标指定为文件destination: file# mongod或mongos应向其发送所有诊断日志记录信息的日志文件的路径path:…

QT 使用XML保存操作记录

文章目录 1 实现程序保存操作记录的思路2 XML文档基本结构3 QDomDocument实现XML读写3.1 QDomDocument实现生成XML文件3.2 QDomDocument实现读取XML文件 4 QXmlStreamWriter实现读写4.1 QXmlStreamWriter实现生成XML4.2 QXmlStreamWriter实现读取XML 1 实现程序保存操作记录的思…

【linux】-centos7版本前后-变化篇

1.centos7版本前后区别 首先文件系统变化&#xff0c;由EXT4&#xff0c;变为XFS格式。可支持容量500TB的文件&#xff0c;而6代仅能支持16TB。首个进程变为systemd, 替换了熟悉的init进程。它的特点是功能强大&#xff0c;体积也很强大。 systemd给我们带来了一个全家桶命令&…

【linux】磁盘空间不足-常用排查和处理命令

【linux】磁盘空间不足-常用排查和处理命令 1.通查一下 df -h #查看服务器磁盘空间情况 du -hs * 2>/dev/null #列出各目录所占空间大小 或 du -h -d 1 2>/dev/null #列出各目录所占空间大小 1.1情况一 df 磁盘空间和du 目录空间占用相等&#xff0c…

python17-Python的字符串格式化

Python提供了“%”对各种类型的数据进行格式化输出,例如如下代码。 # !/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2024/01# @Author : Laopiweight = 180print(老师傅的体重是 %s % weight) 上面程序就是格式化输出的关键代码,这行代码中的 print 函数包含三个部…

C# 二分搜索(Binary Search)

二分搜索概念 二分查找也称折半查找&#xff08;Binary Search&#xff09;它是一种效率较高的查找方法。但是&#xff0c;折半查找要求线性表必须采用顺序存储结构&#xff0c;而且表中元素按关键字有序排列。 二分搜索的背景 二分搜索法的概念和思想可以追溯到古代的中国和…

【python】求矩阵的特征值和特征向量

使用np.linalg.eig同时求特征值和特征向量 import numpy as np#输入矩阵 A np.array([[1, 1/2, 1/6, 1/9],[2, 1, 1/3, 1/5],[6, 3,1,1/2],[9, 5,2,1]])#求解特征值和其对应的特征向量 eigval,eigvec np.linalg.eig(A) for i in range(len(eigval)):print(f特征值&#xff1a…

STM32学习笔记一——初识STM32

目录 一、什么是ARM 二. Cortex 内核 三.什么是STM32 四.STM32核心板原理图&#xff1a; 五.STM32的内部结构&#xff1a; 六.stm32系统结构简化图 STM32基本原理分析&#xff1a; 七.典型型号——STM32F103ZET6 stm32——32位单片机&#xff08;数据总线是32位的&am…

mysql学习打卡day19

今日成果&#xff1a; update invoices set payment_total invoice_total *0.5,payment_date due_date where invoice_id 1; -- 更新单行记录 update orders set comments 金牌顾客 where customer_id in (select customer_id from customers where points > 3000); --…

文献速递:人工智能医学影像分割--- 深度学习分割骨盆骨骼:大规模CT数据集和基线模型

文献速递&#xff1a;人工智能医学影像分割— 深度学习分割骨盆骨骼&#xff1a;大规模CT数据集和基线模型 我们为大家带来人工智能技术在医学影像分割上的应用文献。 人工智能在医学影像分析中发挥着至关重要的作用&#xff0c;尤其体现在图像分割技术上。这项技术的目的是准…