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

  • 全局污染 —— 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. Burnside引理&Pólya定理

    Burnside's lemma 引例 题目描述 一个由2*2方格组成的正方形,每个格子上可以涂色或不涂色, 问共有多少种本质不同的涂色方案. (若两种方案可通过旋转互相得到,称作本质相同的方案) 解 ...

  2. __init__初始化方法

    使用场景:多个对象(由同一个类产生)的属性同名且值都一样,这时就需要使用init()方法. # 多个对象(由同一个类产生)的属性同名且值都一样,这时就需要使用__init__()方法. # class ...

  3. 二分法的应用:最大化最小值 POJ2456 Aggressive cows

    /* 二分法的应用:最大化最小值 POJ2456 Aggressive cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: ...

  4. JavaScript做个时间表 Date()

    <span id="shiji"></span><script> window.setInterval("time()",5 ...

  5. MTT:任意模数NTT

    MTT:任意模数NTT 概述 有时我们用FFT处理的数据很大,而模数可以分解为\(a\cdot 2^k+1\)的形式.次数用FFT精度不够,用NTT又找不到足够大的模数,于是MTT就应运而生了. MT ...

  6. NX二次开发-UFUN创建表达式UF_MODL_create_exp_tag有TAG

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建一个新的表达式,无TAG UF_MOD ...

  7. NX二次开发-UF_MODL_ask_distance_tolerance获取建模的长度公差

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize() ...

  8. 数据结构C++版-树

    一.概念 树是节点的有限集合. 二叉树: 二.补充知识点 1.<二叉树编码实战二>课程笔记: 递归的基本概念:程序调用自身的编程技巧称为递归,是函数自己调用自己. 迭代:利用变量的原值推算 ...

  9. 杂项:ionic

    ylbtech-杂项:ionic ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS ...

  10. Centos6.5安装ruby2.2.3

    一.安装库 Yum install –y gcc* openssl* wget 二.安装ruby wget https://cache.ruby-lang.org/pub/ruby/2.2/ruby- ...