vue style 的scoped 使用
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 使用的更多相关文章
- Vue中的scoped及穿透方法
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- Vue中的scoped和scoped穿透
1.什么是scoped 在Vue文件中的style标签上有一个特殊的属性,scoped.当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染 ...
- vue中的scoped分析以及在element-UI和vux中的应用
vue使用了单文件组件方式来解耦视图即.vue后缀文件名 单文件组件组成部分: <template> </template> <script> </scrip ...
- Vue中的scoped及穿透方法(修改第三方组件局部的样式)
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- vue自学入门-7(vue style scope)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- Vue style 深度作用选择器 >>> 与 /deep/(sass/less)
传送门:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html 你很可能会遇到的问题 vue组件编译后,会将 template ...
- vue中的css作用域、vue中的scoped坑点
一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class ...
- Notes about Vue Style Guide
A. Necessary Multiple-word for component’s name Data for component must be a function The definition ...
- vue组件样式scoped
1.vue组件中的样式如果没加scrped,样式代表的是全局样式(避免组件之间样式的冲突).加了属性代表是模块化的. 其他组件引用button组件 上面分析了单个组件渲染后的结果,那么组件互相调用之后 ...
随机推荐
- chkdsk 命令对Raid盘检测和查错、修复
C:\Documents and Settings\Administrator>chkdsk /?检查磁盘并显示状态报告. CHKDSK [volume[[path]filename]]] [/ ...
- css中根据不同分辨率设置不同样式
@media screen and (max-width: ) { .tab__content{width: %} }
- Java的HashMap是如何实现的?
以下内容转自:http://blog.csdn.net/vking_wang/article/details/14166593 1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储 ...
- python中的*arg和**kwargs
arg对应多出来的位置参数,把它们解析成tuple;kwargs把关键字参数解析成dict. def example(pram): print(pram) def example2(param, *a ...
- Number (int float bool complex)--》int 整型、二进制整型、八进制整型、十六进制整型
# ### Number (int float bool complex) # (1) int 整型 (正整数 0 负整数) intvar = 15 print(intvar) intvar = 0 ...
- Day1 Python基础学习——概述、基本数据类型、流程控制
一.Python基础学习 一.编程语言分类 1.简介 机器语言:站在计算机的角度,说计算机能听懂的语言,那就是直接用二进制编程,直接操作硬件 汇编语言:站在计算机的角度,简写的英文标识符取代二进制去编 ...
- Linux下samba服务搭建
参考: https://www.cnblogs.com/lxyqwer/p/7271369.html https://www.cnblogs.com/liulipeng/p/3406352.html ...
- 《Java程序设计》第一周学习记录(1)
目录 Windows安装JDK.Git Linux下安装JDK.Git.IDEA 参考资料 Windows安装JDK.Git 到官网直接下载JDK,双击安装程序就正常安装就行了. 下载完以后,可以看到 ...
- Dropout正则化和其他方法减少神经网络中的过拟合
1. 什么是Dropout(随机失活) 就是在神经网络的Dropout层,为每个神经元结点设置一个随机消除的概率,对于保留下来的神经元,我们得到一个节点较少,规模较小的网络进行训练. 标准网络和dro ...
- 监督学习之knn算法
1.1 KNN(K-Nearest Neighbor)工作原理: 存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类对应的关系.输入没有标签 ...