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+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
javascript元素动态创建实现方法
May 13 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
vue实现公共方法抽离
Jul 31 Javascript
vue中div禁止点击事件的实现
Apr 02 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
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
鼠标图片振动代码
2006/07/06 Javascript
为数据添加append,remove功能
2006/10/03 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
理解Javascript闭包
2013/11/01 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python常用小技巧总结
2015/06/01 Python
python匿名函数用法实例分析
2019/08/03 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
python异常处理try except过程解析
2020/02/03 Python
python判断是空的实例分享
2020/07/06 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
初婚未育证明
2014/01/15 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
伦敦奥运会口号
2014/06/13 职场文书
音乐幼师求职信
2014/07/09 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
生日宴会祝酒词
2015/08/10 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python