浅谈关于.vue文件中style的scoped属性


Posted in Javascript onAugust 19, 2017

本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下:

scoped可以实现style只作用于当前的.vue文件

<template>
  <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
  color:#333;
}
</style>

上面的文件渲染出的dom结构会是这样的

<div data-v-53795c54 class="user"></div>

css样式是这样的

.user[data-v-53795c54] {
  color:#333;
}

这样就现实了样式只作用于当前.vue文件。

问题:添加scoped属性后样式不起作用

原因是,css被构建成.user[data-v-53795c54] 但是doc节点依然是普通的<div class="user"></div>,导致样式不能作用在dom上而失效。

原因在引用的组件上,解决的方法是将scoped属性关闭。

scoped关闭时的使用建议

如果需要将scoped关闭,那么style就是作用于整个单页应用

可是我们仍然想要样式之作用于当前的.vue文件,减少对其他文件样式的影响

1、给template下的根节点加一个class,并基于这个class添加样式

<template>
<div class="user">
<p class="name">zaunk</p>
</div>
</template>
<script>

</script>

<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}
</style>

2、基于第一条建议,不要有定义两个相同class名称的根节点,因为都作用于整个单页会有一个失效。

3、不要使用 span {}这种做样式设置。因为

<template>
<div class="user">
<el-button class="name">zaunk</el-button>
</div>
</template>
<style lang='less>
.user {
color:#333;
span {
color:#122222;
}
}
</style>

上面的样式同样会作用于组件el-button,这是很危险的

在vue组件中style scoped中遇到的坑

浅谈关于.vue文件中style的scoped属性

在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识,当然也会给当前style的所有样式添加[data-v-1233]这样的话,就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件,同样的,如果子组件也用scoped标识了,那么在父组件中是不能设置子组件中的节点的。若父组件有scoped,子组件没有设置,同样,也是不能在父组件中设置子组件的节点的样式的,因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了,不会作用与其他的组件样式,我在用vue-quill-editor富文本编辑器的时候就遇到了这个坑,我只是想让内容区设置一个高度,这样的话,是必须在App.vue中设置的,我们App.vue相当于根容器,没有设置scoped,所以是可以设置的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
理解javascript对象继承
Apr 17 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 #Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 #Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 #Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 #Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
Vue自定义事件(详解)
Aug 19 #Javascript
You might like
php MySQL与分页效率
2008/06/04 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python多线程编程简单介绍
2015/04/13 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python实现加密的方式总结
2020/01/19 Python
Python Json数据文件操作原理解析
2020/05/09 Python
学生实习推荐信范文
2013/11/26 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
员工辞职信怎么写
2015/02/27 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python