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

  • 全局污染 —— 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. Vue开发实战

    递归组件 关键是组件在模板内能调用自身,关键是name属性 首先我们先定义数据格式 list: [ { title: '标题1' }, { title: '标题2', children: [ { ti ...

  2. VS 2019企业版激活码

    Visual Studio 2019 EnterpriseBF8Y8-GN2QH-T84XB-QVY3B-RC4DF

  3. Dart编程运算符

    表达式是一种特殊类型的语句,它计算为一个值.每个表达都由 操作数 - 表示数据 运算符 - 定义如何处理操作数以生成值. 考虑以下表达式 2 + 3.在该表达式中,2和3是操作数,符号+(加号)是 运 ...

  4. bzoj1070题解

    [解题思路] 考虑拆点,得到一个二分图:左边点<i,j>表示第i个技师按顺序第j辆修的车,右边点k表示第k个车主,连接左右的边表示第k个车主可能成为第i个技师的第j个客户. 因为是二分图, ...

  5. eclipse如何实现智能提示功能

    一直时候用idea很久没有使用eclipse了,idead的ctrl+鼠标滚轮是可以调节字体大小,这项功能是我的最爱. 早就忘记eclipse的智能助手设置,今天翻下以前的笔记,觉得还是做个博客方便今 ...

  6. git删除持久化存储的账号密码.git-credentials

    git在提交时,发现提交不了,个人信息不是自己的,通过 git config --list 看到邮箱和用户名都是自己的. 这时候就需要把以前记录过的信息都删掉. 1. 通过 git config -- ...

  7. 杂项:ionic

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

  8. 20140403 opencv GPU安装

    1.  查看本机配置,查看显卡类型是否支持NVIDIA GPU,本机显卡为NVIDIA GeForce 8400 GS: 2.  从http://www.nvidia.cn/Download/inde ...

  9. 如何在html中添加视频

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="445" heig ...

  10. php连接docker启动的mysql容器报错:(HY000/2002): Connection refused的解决办法

    vim libraries/config.default.php 查找到localhost/127.0.0.1字符[一般来说默认都是localhost] :/localhost 替换成容器名,例如我定 ...