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. Material Designer的低版本兼容实现（九）—— Float Button & Small Float Button

    5.0一个新特性就是出现了这么一个圆形的悬浮指示按钮,这个按钮可以用来体现一个全局的重要功能,比如添加账户什么的.这个按钮有两种大小,一种是正常的按钮大小,一种是小型的按钮.官方文档中介绍的是小心的按 ...

  2. 利用Palette库来取得图片中的主要色彩

    其实就我对开源库的了解,有很多开源库都能实现自动计算出任意一张图片中的主要色彩的功能,这种看似神奇实则枯燥的技术很容易适用到手机的UI中.根据不同的背景定制不同的UI,这个在最新的Android Ma ...

  3. 拦截器通过Spring获取工厂类，注入bean对象

    // 这里需要注意一点,我们在拦截器内无法通过SpringBean的方式注入LoggerJPA,我只能通过另外一种形式. /** * 根据传入的类型获取spring管理的对应dao * @param ...

  4. 常用工具类系列之DateUtil

    Date.long.Calendar之间的相互转换 //当前时间 Date date = DateUtil.date(); //当前时间 Date date2 = DateUtil.date(Cale ...

  5. Orchard之在前台显式一个属于自己的列表

    一:当前现状 Orchard 并不提供筛选 Owner 的 Query,但是 Gallery 中有提供,那就是:Owner Queries. Install 之,然后在解决方案中引入该 Project ...

  6. mysqldump参数详细说明

    Mysqldump参数大全(参数来源于mysql5.5.19源码)   参数 参数说明 --all-databases  , -A 导出全部数据库. mysqldump  -uroot -p --al ...

  7. spring学习之@SessionAttributes

    一.@ModelAttribute 在默认情况下,ModelMap 中的属性作用域是 request 级别是,也就是说,当本次请求结束后,ModelMap 中的属性将销毁.如果希望在多个请求中共享 M ...

  8. 最近遇到了 timer1sec 定时调用的函数，出现了 时间久了，就不是每秒一次了，可能会慢的情况。如何解决呢？

    我想可以在timer1sec 调用四个线程,让四个线程来执行 具体代码,而不是在timer1sec一个线程 直接执行.这样,每个线程 不超过4s,那么没秒都会被调用到. 需要使用到的技术是 semap ...

  9. Parallels Desktop与VirturalBox对比

    笔者用了这两款产品,Parallels 和VirtualBox. 下面各讲下各自的优势吧. 先说说Parallels:Parallels和Mac的系统整合非常紧密,并且对于Mac系统,在性能上有很大的 ...

  10. CodeFirst体验之且行且珍惜

    CodeFirst作为一种新的开发理念和方式,EF  Code-First相对于MVC中的DataFirst,ModelFirst确实开发效率确实高点,至少数据库建表这一块,直接用类映射到数据中,标记 ...