1、scoped

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

2、module

https://vue-loader.vuejs.org/zh/guide/css-modules.html#用法

3、原理

module：通过给样式名加hash字符串后缀的方式。

scoped：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一。

4、区别

（1）css优先级

scoped处理会造成每个样式的权重加重，因为除了使用类名还使用了标签选择器，如.demo-c[data-v-48baf84c]。module不会加重权重。

（2）渲染

scoped使用了标签选择器，渲染更慢。

（3）覆盖

若用户使用第三方库一样的类名，可能会影响到第三方组件的样式。

vue css 模块化编程 CSS Modules Scoped的更多相关文章

  1. css模块化及CSS Modules使用详解

    什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...

  2. Bulma CSS - 模块化

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma框架 ...

  3. Vue中CSS模块化最佳实践

    Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...

  4. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  6. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  7. 谈CSS模块化【封装-继承-多态】

    第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上,当时我还想,“哈,CSS也有模块化,我没听错吧?”事实上,我没听错,你也没看错,早就有CSS模块化这个概念了.之所以 ...

  8. Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  9. vue项目引入自定义.css的样式文件

    ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...

随机推荐

  1. CCLabelAtlas的宽度为奇数时的显示bug

    遇到一个很郁闷的bug,CCLabelAtlas设置文字内容在ipad上和android上正常,就只有iphone怎么显示都不正常.后来把它宽度 + 1,然后就正常了.发现以前宽度设置为21px.23 ...

  2. 实用ExtJS教程100例-001：开天辟地的Hello World

    ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验 ...

  3. parity 钱包

    数据快照路径 C:\Users\admin\AppData\Local\Parity\Ethereum\chains\ethereum\db\906a34e69aec8c0d\snapshot\res ...

  4. HttpURLConnection和HttpClient的简单用法

    HttpURLConnection的简单用法:先通过一个URL创建一个conn对象,然后就是可以设置get或者是post方法,接着用流来读取响应结果即可 String html = null; lon ...

  5. 解决 dotNetZip 解压乱码的问题，支持ZIP分卷解压缩

    using (ZipFile zip = ZipFile.Read("D:\\test\\2007.zip",System.Text.Encoding.Default)) { fo ...

  6. [Android Security] Smali和逆向分析

    copy : https://blog.csdn.net/u012573920/article/details/44034397 1.Smali简介 Smali是Dalvik的寄存器语言,它与Java ...

  7. libstdc++.so.6: version `GLIBCXX_3.4.21' not found

    问题: dotnet: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by dotnet)dotnet ...

  8. tf.transpose函数的用法讲解

    tf.transpose函数中文意思是转置,对于低维度的转置问题,很简单,不想讨论,直接转置就好(大家看下面文档,一看就懂). tf.transpose(a, perm=None, name='tra ...

  9. Benchmark简介

    一.Benchmark简介Benchmark是一个评价方式,在整个计算机领域有着长期的应用.正如维基百科上的解释“As computer architecture advanced, it becam ...

  10. Set a Room Mailbox to Show Details of a Meeting in its Calendar – Office 365

    You may notice that meetings with a ‘Room’ mailbox will by default only show a “Busy” status. Many, ...