1 原理

vue 可以通过在 style标签添加scoped这个属性来控制 组件内的css作用域

<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

也就是说组件内的html标签 会添加属性,css渲染是也会添加该属性;

2 注意

当组件使用了外部的组件库时,引用的组件的内部标签不会别添加类似于 data-v-21e5b78 的属性,如下图所示,

但是若想复写组件内部标签的样式时,设置的css样式会自动添加该属性,导致该复写的css样式不会生效...

vue style 的scoped 使用的更多相关文章

  1. Vue中的scoped及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  2. Vue中的scoped和scoped穿透

    1.什么是scoped 在Vue文件中的style标签上有一个特殊的属性,scoped.当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染 ...

  3. vue中的scoped分析以及在element-UI和vux中的应用

    vue使用了单文件组件方式来解耦视图即.vue后缀文件名 单文件组件组成部分: <template> </template> <script> </scrip ...

  4. Vue中的scoped及穿透方法(修改第三方组件局部的样式)

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  5. vue自学入门-7(vue style scope)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  6. Vue style 深度作用选择器 >>> 与 /deep/(sass/less)

    传送门:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html 你很可能会遇到的问题 vue组件编译后,会将 template ...

  7. vue中的css作用域、vue中的scoped坑点

    一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class ...

  8. Notes about Vue Style Guide

    A. Necessary Multiple-word for component’s name Data for component must be a function The definition ...

  9. vue组件样式scoped

    1.vue组件中的样式如果没加scrped,样式代表的是全局样式(避免组件之间样式的冲突).加了属性代表是模块化的. 其他组件引用button组件 上面分析了单个组件渲染后的结果,那么组件互相调用之后 ...

随机推荐

  1. chkdsk 命令对Raid盘检测和查错、修复

    C:\Documents and Settings\Administrator>chkdsk /?检查磁盘并显示状态报告. CHKDSK [volume[[path]filename]]] [/ ...

  2. css中根据不同分辨率设置不同样式

    @media screen and (max-width: ) { .tab__content{width: %} }

  3. Java的HashMap是如何实现的?

    以下内容转自:http://blog.csdn.net/vking_wang/article/details/14166593 1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储 ...

  4. python中的*arg和**kwargs

    arg对应多出来的位置参数,把它们解析成tuple;kwargs把关键字参数解析成dict. def example(pram): print(pram) def example2(param, *a ...

  5. Number (int float bool complex)--》int 整型、二进制整型、八进制整型、十六进制整型

    # ### Number (int float bool complex) # (1) int 整型 (正整数 0 负整数) intvar = 15 print(intvar) intvar = 0 ...

  6. Day1 Python基础学习——概述、基本数据类型、流程控制

    一.Python基础学习 一.编程语言分类 1.简介 机器语言:站在计算机的角度,说计算机能听懂的语言,那就是直接用二进制编程,直接操作硬件 汇编语言:站在计算机的角度,简写的英文标识符取代二进制去编 ...

  7. Linux下samba服务搭建

    参考: https://www.cnblogs.com/lxyqwer/p/7271369.html https://www.cnblogs.com/liulipeng/p/3406352.html ...

  8. 《Java程序设计》第一周学习记录(1)

    目录 Windows安装JDK.Git Linux下安装JDK.Git.IDEA 参考资料 Windows安装JDK.Git 到官网直接下载JDK,双击安装程序就正常安装就行了. 下载完以后,可以看到 ...

  9. Dropout正则化和其他方法减少神经网络中的过拟合

    1. 什么是Dropout(随机失活) 就是在神经网络的Dropout层,为每个神经元结点设置一个随机消除的概率,对于保留下来的神经元,我们得到一个节点较少,规模较小的网络进行训练. 标准网络和dro ...

  10. 监督学习之knn算法

    1.1  KNN(K-Nearest Neighbor)工作原理: 存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类对应的关系.输入没有标签 ...