浅谈关于.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 相关文章推荐
利用Jquery实现可多选的下拉框
Feb 21 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
Javascript基础之数组的使用
May 13 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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用户指南-cookies部分
2006/10/09 PHP
main.php
2006/12/09 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Selenium定位元素操作示例
2018/08/10 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
django的ORM操作 增加和查询
2019/07/26 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
航空大学应届生求职信
2013/11/10 职场文书
科技之星事迹材料
2014/06/02 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014年统计工作总结
2014/11/21 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书