[Vue]Scoped Css与Css Modules的区别

均为解决CSS全局作用域问题(样式冲突(污染))的一个解决方案。

1.Scoped CSS

当 <style> 标签有 scoped 属性时,相当于在元素中添加了一个唯一属性用来区分

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

它通过使用 PostCSS 来实现以下转换,转换结果:

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

2.CSS Modules

通过给样式名加hash字符串后缀的方式,实现特定作用域语境中的样式编译后的样式在全局唯一。

<template><p :class="$style.gray">Im gray</p>
</template>
<style module>
.gray {color: gray;
}
</style>

使用module的结果编译如下:

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {color: gray;
}

由此可见,css module直接替换了类名,排除了用户设置类名影响组件样式的可能性。

推荐使用CSS Modules

详细见官方文档:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#混用本地和全局样式

转载于:https://www.cnblogs.com/vickylinj/p/9573395.html

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

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

相关文章

mysql数据库-mysql数据定义语言DDL (Data Definition Language)归类(六)

0x01 创建数据库并指定字符集和排序规则 -- 三种实例写法 create database temptab2 character set utf8 collate utf8_general_ci; create database temptab3 charset utf8 collate utf8_general_ci; create database temptab4 character setutf8 collate utf8_general_ci; 查…

vue antd admin怎么切换到basic分支_vue菜鸟从业记:前端如何与后端哥们进行接口联调...

最近我的朋友王小闰进入一家新的公司&#xff0c;正好公司项目采用的是前后端分离架构&#xff0c;技术栈是王小闰非常熟悉的vue全家桶&#xff0c;后端用的是Java语言。在前后端开发人员碰面之后&#xff0c;协商确定好了前端需要的数据接口(扯那么多&#xff0c;其实也就是关…

ASP.NET AntiXSS的作用

XSS跨站脚本攻击是指用户输入HTML编码对网站进行跨站攻击。通过使用FCKeditor、FreeTextBox、Rich TextBox、Cute Editor、TinyMCE等等Html编辑器&#xff0c;用户可以输入一些危险字符&#xff0c;注入到网站中&#xff0c;形式XSS。&#xff08;一般的解决办法是使用BBCode的…

p1358

这是一道二维树状数组模板题。 需要注意的可能只有这些xy有可能为零。那每次输入之后全部&#xff0c;相当于全部向右下角移了一位。 那就直接给代码了呦。 using namespace std; int c[1050][1050],n,m; int i,f; int a1,b1,a2,b2,tx,ty,tk; int ans; int lowbit(int x) {retu…

java中对象的生存期_深入理解Java虚拟机-判断对象是否存活算法与对象引用

我们知道Java中的对象一般存放在堆中&#xff0c;但是总不能让这些对象一直占着内存空间&#xff0c;这些对象最终都会被回收并释放内存&#xff0c;那么我们如何判断对象已经成为垃圾呢&#xff1f;这篇文章会提出两种算法解决这个问题。另外&#xff0c;本文还要谈一谈对象引…

大数据高效复制的处理案例分析总结

一个老客户提出这样的需求&#xff0c;希望将SQLServer中的某个表的数据快速复制到SQLite数据库里面以便进行定期的备份处理&#xff0c;数据表的记录大概有50多万条记录&#xff0c;表有100个字段左右&#xff0c;除了希望能够快速做好外&#xff0c;效率是第一位的&#xff0…

@autowired注解注入为null_Intellij IDEA中Mybatis Mapper自动注入警告的6种解决方案

相信使用Mybaits的小伙伴们一定会经常编写类似如下的代码&#xff1a;可以看到 userMapper 下有个红色警告。虽然代码本身并没有问题&#xff0c;能正常运行&#xff0c;但有个警告总归有点恶心。本文分析原因&#xff0c;并列出解决该警告的几种方案。原因众所周知&#xff0c…

五 Python之socket网络编程

<1>socket概念 socket通常也称作"套接字"&#xff0c;用于描述IP地址和端口&#xff0c;是一个通信链的句柄&#xff0c;应用程序通常通过"套接字"向网络发出请求或者应答网络请求。ocket本质上就是在2台网络互通的电脑之间&#xff0c;架设一个通道…

致敬2016,拥抱2017

2016年5月10号加入现在的团队&#xff0c;到今天2016年12月31号&#xff0c;已经过去了接近8个月。这整个期间&#xff0c;我们团队都只有我一个前端工程师&#xff0c;我从刚开始的忐忑不安、压力极大&#xff0c;到现在基本上手&#xff0c;我们团队做的项目虽然不大&#xf…

你如何在java中获取线程堆_如何在Windows上获取未在控制台中运行的Java进程的线程和堆转储...

问题我有一个Java应用程序&#xff0c;我从控制台运行&#xff0c;然后控制台执行另一个Java进程。我想获得该子进程的线程/堆转储。在Unix上&#xff0c;我可以做akill -3 但是在Windows AFAIK上获取线程转储的唯一方法是在控制台中使用Ctrl-Break。但这只会让我转移父进程&am…

html ie乱码_Java 0基础入门(初识Html)

在学习Java之前&#xff0c;我们需要了解一定的前端知识。毕竟页面才是用户真正看到的&#xff0c;而且也是体现Java后端逻辑结果的地方。学习HTML后&#xff0c;能够制作界面美观大方的静态网站(更复杂的功能需要JavaScript脚本一起来实现)。HTML制作的网页。所需要的Html开发…

常用自动化框架简单的分析与介绍

目前常用的可用于APP自动化测试的框架有以下几个&#xff1a; 1、Monkey是Android SDK自带的测试工具&#xff0c;在测试过程中会向系统发送伪随机的用户事件流&#xff0c;如按键输入、触摸屏输入、手势输入等)&#xff0c;实现对正在开发的应用程序进行压力测试&#xff0c;也…

linux一步一脚印---more、less、head、tail

一、more 文件内容或输出查看命令more 是我们最常用的工具之一&#xff0c;最常用的就是显示输出的内容&#xff0c;然后根据窗口的大小进行分页显示&#xff0c;然后还能提示文件的百分比&#xff1b; [rootlocalhost ~]# more /etc/profile 1、more 的语法、参数和命令&#…

单片机检测stc没反应_我为什么不用STC单片机

写在2019.10.27这属于自己打自己脸&#xff0c;不过&#xff0c;我突然想试试 STC15W108.理由可能有点操蛋&#xff0c;因为STM8S没有 DFN8这样 3x3的封装&#xff0c;而PIC的仿真器太贵。我最后感兴趣的一个STC型号是 STC15F的8脚系列&#xff0c;那是在2010年&#xff0c;然而…

commons-pool

commons-pool组件是使用对象池时都要用到的。他的作用主要是管理对象池&#xff0c; 当我们要用这个组件时&#xff08;比如redis要用到时&#xff09;&#xff0c;只需要实现它的部分接口&#xff0c;比如PooledObjectFactory接口&#xff0c;实现它的创建对象&#xff0c;销毁…

JAVA中CyclLink怎么用_Java多线程基本使用一

1 多线程--初步【1进程比如&#xff1a;QQ、迅雷、360、飞秋...2线程的概念3线程的意义&#xff1a;4.Java程序的运行原理代码是运行在线程中的&#xff0c;如果一个进程没有线程&#xff0c;那么进程就结束了&#xff0c;也就是说一个进程至少要有一个线程当开启一个Java…

指针分析

int *a; int b 4; a &b; //a:b的地址 //*a 取b地址的值&#xff0c;为4 //&a为指针变量的地址 //*(&a)为指针变量储存的地址 即为a int **b &a; //b为指针变量a的地址 //*b为指针变量a所储存的地址 //改变*b(指针变量所储存的地址)即改变了*b的值转载于:http…

live server插件怎么用_分享几个我日常使用的VS Code插件

在这篇文章中&#xff0c;我想介绍一下自己日常使用中最喜欢的Visual Studio Code扩展。大多数时候&#xff0c;我用VS Code编写的是JavaScript应用程序(标准JavaScript、React、Angular、NodeJS……各式各样)。Bracket Pair Colorizer 2这个扩展很不错&#xff0c;可以帮助我搞…

Xtrabackup数据全备份与快速搭建从服务器

Percona Xtrabackup可以说是一个完美的数据备份工具。特别是当数据库的容量达到了一定数量级的时候且存在单表达到几十G的数据量&#xff0c; 很难容忍一些逻辑备份的漫长时间。如单个数据库约200G&#xff0c;单表最大为120G&#xff0c;mysqldump逻辑备份的时间长达20多小时。…