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的数组的扩展实例代码
Jul 09 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
JS高级运动实例分析
Dec 20 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
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
PHP 进程锁定问题分析研究
2009/11/24 PHP
php数组转成json格式的方法
2015/03/09 PHP
教大家制作简单的php日历
2015/11/17 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
python中模块的__all__属性详解
2017/10/26 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python的等深分箱实例
2019/11/22 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Django之form组件自动校验数据实现
2020/01/14 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
JPA的特点
2014/10/25 面试题
微型企业创业投资计划书
2014/01/10 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
工程质量承诺书
2014/03/27 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
先进个人材料怎么写
2014/12/30 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
MySQL主从切换的超详细步骤
2022/06/28 MySQL