浅谈关于.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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
javascript html5实现表单验证
Mar 01 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
重学JS之显示强制类型转换详解
Jun 30 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连接sql server 2005环境配置及问题解决
2014/08/08 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
利用Python开发实现简单的记事本
2016/11/15 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
python和php哪个更适合写爬虫
2020/06/22 Python
python pip如何手动安装二进制包
2020/09/30 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
阳光体育活动方案
2014/02/16 职场文书
预备党员的自我评价
2014/03/12 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
初一语文教学反思
2016/03/03 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
业余无线电通联Q语
2022/02/18 无线电