浅谈Vue的style scoped
style scoped
的作用
在使用Vue-Cli 开发时,我们都知道,在组件的<style></style>
加上 scoped
属性,可以让<style></style>
里的样式只在当前组件生效。
那,这是如何实现的呢?
Vue 对 scoped的渲染规则
- 对于所有的 Vue 组件,只要设置了
<style scoped></style>
,Vue就会给该组件生成一个唯一data值。 - Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点
- 如果组件内部包含子组件,这有两种情况
- 情况一:子组件没有设置
<style scoped></style>
,则只会给子组件的最外层标签加上当前组件的data属性 - 情况二:子组件设置了
<style scoped></style>
,则子组件会自动生成一个自己的唯一data值,然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
- 情况一:子组件没有设置
- 对于组件内写在
<style scoped></style>
里的样式,Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。
基于上面四点,Vue就实现的scoped
的功能。因为,组件scoped
里的样式都加了当前组件的唯一标识data属性。也就是说,即使当前组件的class跟其他组件重名,因为每个组件的data属性不一样,当前组件的样式也就不能再其他组件生效了。
渲染规则证明:
规则一:对于所有的 Vue 组件,只要设置了
<style scoped></style>
,Vue就会给该组件生成一个唯一data值。对于这一点的证明,很容易。我们知道,一般的,Vue 入口文件
App.vue
里的样式是默认全局样式的,也就没有添加<style scoped></style>
。所以,编译出来的结果如下图:
那在<style></style>
添加scoped
属性后呢?
可见App.vue
编译后,增加里data属性。由此可知,组件的data属性存在是依据scoped
来控制的。
规则二:Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点
规则三:如果组件内部包含子组件,这有两种情况
情况一:子组件没有设置
<style scoped></style>
,则只会给子组件的最外层标签加上当前组件的data属性情况二:子组件设置了
<style scoped></style>
,则子组件会自动生成一个自己的唯一data值,然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
规则二、三结合来证明:
用上面的例子来证,展开App.vue
组件得:
App.vue
全部HTML的DOM标签都添加的data属性。
仔细看上图,我们发现,<div class="home"></div>
标签有两个data属性而且App.vue
的data属性在后面。这是应为该标签为Home.vue
的最外层标签,而且也添加<style scoped></style>
。如下图:
由此可证,子组件设置了<style scoped></style>
,则子组件会自动生成一个自己的唯一data值,然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
去掉Home.vue
的<style scoped></style>
后,编译结果如下:
<div class="home"></div>
标签的data属性只剩下App.vue
的了。所以可证,子组件没有设置<style scoped></style>
,则只会给子组件的最外层标签加上当前组件的data属性
- **规则四:**对于组件内写在
<style scoped></style>
里的样式,Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。
对于这一点,我们直接看控制台可知:
参考文献
vue中style下scope的使用和坑
浅谈Vue的style scoped相关推荐
- 浅谈Vue.js的优势
写在前面 今天小梦跟小伙伴们简简单单聊一下Vue.js的优势.小梦也是刚刚接触Vue.js,在学习一门新的技术之前,我们当然要了解其优势,知道优势在哪更加有利于我们去学习并转换为自己的储备. 浅谈Vu ...
- 父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
- vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
- java get请求 数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
- anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用
如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (bi ...
- 浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型 为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
- 浅谈 Vue 项目优化
前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都 ...
- Vue 组件 style scoped
预防各个组件中的css样式出现相同的名称 而导致混乱. 例如 <style>.demo{background-color: #ffaa00;.h {font-size: 20px;colo ...
- 浅谈vue的前世今生
在近几年的web及项目开发中,从社会使用的普遍度以及受欢迎度,vue技术的使用越来越普遍,其各种资料.介绍以及使用攻略内容资料 非常多,那么vue到底什么?它的发展历程又是什么样,其中又有那些改变和优 ...
最新文章
- 揭晓你所不了解的第三代测序技术
- Tomcat的配置文件server.xml叙述
- vue 递归组件多级_Vue递归组件实现树形结构菜单
- JVM中GC小对象配置
- java jdbc(mysql)驱动源码分析_JAVA JDBC(MySQL)驱动源码分析(二)
- 常用于解决放缩问题的基本不等式及其几何直观证明
- LUN/PV/VG/LV
- Linux -- ×××服务简绍、配置及应用(2)
- UI自定义UITableView的右侧索引
- 各种边缘检测算子特点比较(canny)
- JDBC操作数据库的问题总结
- 单细胞数据高级分析之初步降维和聚类 | Dimensionality reduction | Clustering
- 排错解决:etcd节点掉线后(code=exited, status=1/FAILURE),如何加入
- 搭建php常用的集成软件包,常见php集成环境安装包_PHP
- 志金庸小说里,让你印象最深的是哪一段?
- 求x的n次方编程_C语言 用递归方法求X的n次方
- 基于昇腾AI异构计算架构CANN的通用目标检测与识别一站式方案初体验
- 着色Shading(1)(光照、着色)(笔记)
- C语言---函数介绍详解
- 我对refactoring的思考