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. Java中判断String不为空的问题性能比较

    function 1: 最多人使用的一个方法, 直观, 方便, 但效率很低. function 2: 比较字符串长度, 效率高, 是我知道的最好一个方法. function 3: Java SE 6. ...

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

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

  3. 凝聚法层次聚类之ward linkage method

    凝聚法分层聚类中有一堆方法可以用来算两点(pair)之间的距离:欧式,欧式平方,manhattan等,还有一堆方法可以算类(cluster)与类之间的距离,什么single-linkage.compl ...

  4. 【LINK】手机Web开发框架

    LINK : http://www.oschina.net/project/tag/322/mobile-web AmazeUI : http://amazeui.org/

  5. perf使用示例2

    perf使用示例2 性能调优工具如 perf,Oprofile 等的基本原理都是对被监测对象进行采样,最简单的情形是根据 tick 中断进行采样,即在 tick 中断内触发采样点,在采样点里判断程序当 ...

  6. sulime代理设置、插件管理

    使用command palette或者package control,可以管理插件:安装.更新.启动.关闭插件.卸载插件等 配置Package Control 配置举例: { "bootst ...

  7. 0mq 入门 (转)

    最近做后台发现很多地方需要队列,我用东西一般有两个要求:     1) 够傻够简单.    2) 有源码,能看又能改.    最后相中了0mq,下面介绍如何安装和写个简单的例子.一. linux平台: ...

  8. CSDN日报20170226——《你离心想事成仅仅差一个计划》

    [程序人生] 你离心想事成仅仅差一个计划 作者:安晓辉 从目标怎样导出工作计划.我们会以"出版一本小说"为例来解说计划的形成过程. 在開始之前.我们先来说明一个概念:目标的两种类型 ...

  9. 转：无监督特征学习——Unsupervised feature learning and deep learning

    http://blog.csdn.net/abcjennifer/article/details/7804962 无监督学习近年来很热,先后应用于computer vision, audio clas ...

  10. linux命令学习——md5sum

    1.简介 MD5算法常常被用来验证网络文件传输的完整性,防止文件被人篡改.MD5 全称是报文摘要算法(Message-Digest Algorithm 5),此算法对任意长度的信息逐位进行计算,产生一 ...