Vue中对比scoped css和css module的区别


Posted in Javascript onMay 17, 2018

scoped css

官方文档

scoped css可以直接在能跑起来的vue项目中使用。

使用方法:

<style scoped>
h1 {
 color: #f00;
}
</style>

使用scoped划分本地样式的结果编译结果如下:

h1[data-v-4c3b6c1c] {
 color: #f00;
}

即在元素中添加了一个唯一属性用来区分。

缺点

一、如果用户在别处定义了相同的类名,也许还是会影响到组件的样式。

二、根据css样式优先级的特性,scoped这种处理会造成每个样式的权重加重了:

即理论上我们要去修改这个样式,需要更高的权重去覆盖这个样式。

所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改,而且要注意权重问题,0.0迫不得已再使用!important。

三、如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性:

所以一般父组件如果加了scoped,会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低,影响不到他们的样式。

不过也是可以通过如下方法影响到的:

Vue中对比scoped css和css module的区别

四、scoped会使标签选择器渲染变慢很多倍

官方给了一些注意事项如下:

Vue中对比scoped css和css module的区别

我们可以看到用标签选择器时scoped会严重降低性能,而使用class或id则不会。

css module

官方文档

css module需要增加css-loader配置才能生效,具体可看文档的实现。

注意

如果你使用的是style-loader,如果想让配置生效需要更换到文档所述的vue-style-loader。

二者区别可以从这里了找vue-style-loader

使用如下:

<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直接替换了类名,排除了用户设置类名影响组件样式的可能性。

这样$style.red就可以当做一个变量,并且可以在js中使用,如下:

<script>
export default {
 created () {
 console.log(this.$style.gray)
 // -> "gray_3FI3s6uz"
 // 一个基于文件名和类名生成的标识符
 }
}
</script>

我们可以看到,module在使用时多出了绑定和$style,如果你想更优雅,可以看一下这个vue-css-modules。

使用css module在keyframes中的问题

使用CSS modules处理动画animation的关键帧keyframes,动画名称必须先写。

animation: ani 1s;能正常编译,而animation: 1s ani;则会编译的不符合预期,所以平时养成良好的css参数书写顺序也很重要。

总结

综上所述,css module前期进行不麻烦的配置,实现的效果比scoped css更优,这里推荐使用css module。

以上所述是小编给大家介绍的Vue中对比scoped css和css module,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue引用js文件的多种方式(推荐)
May 17 #Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 #Javascript
浅谈webpack-dev-server的配置和使用
May 17 #Javascript
Node.js模块全局安装路径配置方法
May 17 #Javascript
create-react-app修改为多页面支持的方法
May 17 #Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 #Javascript
微信小程序自定义多选事件的实现代码
May 17 #Javascript
You might like
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python检测网站链接是否已存在
2016/04/07 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
预防传染病方案
2014/06/14 职场文书
三好学生个人总结
2015/02/15 职场文书
员工手册编写范本
2015/05/14 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书