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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
javascript实现标签切换代码示例
May 22 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
原生JS实现音乐播放器
Jan 26 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
js实现弹窗效果
2020/08/09 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
机电专业大学生求职信
2013/10/04 职场文书
中职生自荐信
2013/10/13 职场文书
2014全年工作总结
2014/11/27 职场文书
护士年终考核评语
2014/12/31 职场文书
大学生党员自我评价
2015/03/04 职场文书
小学德育工作总结2015
2015/05/12 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书