在样式开发过程中,有两个问题比较突出:

  • 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;

  • 选择器复杂 —— 为了避免上面的问题,我们在编写样式的时候不得不小心翼翼,类名里会带上限制范围的标示,变得越来越长,多人开发时还很容易导致命名风格混乱,一个元素上使用的选择器个数也可能越来越多,最终导致难以维护。

vue 为我们提供了 scoped 可以很方便的解决上述问题,它给 css 加了一个域的概念。详细文档见 vue-loader

/* 编译前 */
.example {
color: red;
} /* 编译后 */
.example[_v-f3f3eg9] {
color: red;
}

注意⚠️:

1、只要加上 <style scoped> 这样 css 就只会作用在当前组件内了。

2、使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

3、如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,可以使用 >>> 操作,Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。

<style scoped>
.a >>> .b { /* ... */ }
</style>

 编译后为:

.a[data-v-f3f3eg9] .b { /* ... */ }

4、通过 v-html 创建的 DOM 内容不受 scoped 样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。

vue之样式问题的更多相关文章

  1. vue 绑定样式的几种方式

    vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...

  2. vue的样式绑定

    vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...

  3. Vue 将样式绑定到一个对象让模板更清晰

    Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...

  4. vue.js样式绑定

    vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...

  5. 10.Vue.js 样式绑定

    Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  7. $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

    一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段 ...

  8. vue 中样式的绑定

    1.class的对象绑定 //对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> & ...

  9. vue切换样式

    在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中 <template> <div id="main"> <l ...

  10. Vue初级-样式

    整个网页不仅有标签还有css进行渲染,所以,现在讲讲在vue里面加入你想加的css. 在不用vue的时候,有一种内联方式加入css(大概是<div style="..."&g ...

随机推荐

  1. Linux批量解压缩脚本

    #!/bin/bash # 批量解压缩脚本 # 作者: shaohsiung # 时间: // # Store all file names in the tmp directory with the ...

  2. python基础第9章 魔法方法、属性和迭代器(一)

    __getitem__和__setitem__: 这个方法返回与指定键想关联的值.对序列来说,键应该是0~n-1的整数,其中n为序列的长度.对映射来说,键可以是任何类型. class A : __ge ...

  3. Delphi实现屏幕截图、窗口截图、指定区域截图

    Use Jpeg procedure TForm1.snapscreen(a,b,c,d:Integer); var bmpscreen:Tbitmap; jpegscreen:Tjpegimage; ...

  4. VS卸载不干净,再次安装盘符不能更改问题(转载)

    下载文件,直接用. 链接:https://pan.baidu.com/s/1K1cbJUq_JC9DN2MoE6Z3RA 密码:cuad

  5. NX二次开发-对话框解锁UF_UI_unlock_ug_access

    VC/MFC调用UG Dialog要进入加锁状态 加锁 UF_UI_lock_ug_access ( UF_UI_FROM_CUSTOM ); 此处为UF_UI_select的函数 解锁 UF_UI_ ...

  6. Api:temple

    ylbtech-Api: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.cnb ...

  7. iOS开发静态库冲突——如何查看静态库(.O)中方法名

    1.bug产生 应用第三方静态库之后提示冲突错误: 2.bug分析 一般会提示哪两个库冲突: CameraShowGLView.o是自己创建的类编译生成的: libLechangeSDK.a是添加的静 ...

  8. 如何提高阿里云cdn命中率?原命中率极低。

    博客搬迁了,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/08/29/%E5%A6%82%E4%BD%95%E6%8F%90%E9%AB%98%E9 ...

  9. 15-Ubuntu-文件和目录命令-查看目录内容-ls-2

    4. ls和通配符的使用 通配符适用的地方:shell命令行或者shell脚本中. 正则表达式适用的地方:字符串处理时,一般有一般正则和Perl正则. 正则表达式与通配符有相同的符号但是意义不同!! ...

  10. 14-Ubuntu-文件和目录命令-查看目录内容-ls-1

    1.终端使用技巧 (1)tab键自动补全 (2)按上/下光标键查看使用过的命令 (3)退出当前命令,Ctrl C (4)缩小--Ctrl - ;放大--Ctrl shift + 2.ls 命令--查看 ...