vue组件中的样式属性scoped实例详解

Scoped CSS

Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。

vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素

它是通过使用PostCSS来改变以下内容实现的:

<style scoped>
.example {
 color: red;
}
</style>

<template>
 <div class="example">hi</div>
</template>

渲染结果：

<style>
.example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>hi</div>
</template>

混合使用全局属性和局部属性

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

关于子组件的根元素

使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，这么设计的目的是父组件可以对子组件根元素进行布局。
.vue模板中的样式是根据需要按需加载，访问一个页面该组件中的样式就会追加到head标签中，如果父子组件中都对某个子组件根节点元素进行了控制，则父组件里的样式会被后来的覆盖。

深选择器

如果想对设置了scoped的子组件里的元素进行控制可以使用'>>>'或者'deep'

<template>
 <div id="app">
  <gHeader></gHeader>
 </div>
</template>

<style lang="css" scoped>
 .gHeader /deep/ .name{ //第一种写法
  color:red;
 }
 .gHeader >>> .name{  //二种写法
  color:red;
 }
</style>

<div class="gHeader">
 <div class="name"></div>
</div>

一些预处理程序例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。

动态生成的内容

使用v-html动态创建的DOM内容，不受设置scoped的样式影响，但你依然可以使用深选择器进行控制

下面给大家补充下vue中使用v-html加载的富文本，css中定义样式不生效

如题，使用v-html加载一段富文本，富文本里包含图片，在手机上图片宽度可能会溢出

  <div v-html="htmlContent" class="rich"></div>
  <style scope>
  .rich>>> img{ display:block; max-width: 100%}
  </style>

注意：这里的>>>需要使用css语法，写在less里会报错

总结

以上所述是小编给大家介绍的vue组件中的样式属性scoped实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下: scoped可以实现style只作用于当前的.vue文件 <template> <div class="user"></div> </template> <script> </script> <style lang='less' scoped> .user { color:#333; } </style> 上面的文

  • Vue中对比scoped css和css module的区别

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分. 缺点 一.如果用户在别处定义了相同的类名,也许还是会影响到组件的样式. 二.根据css样式优先级的特性,scoped这种处理会造成

  • vue里面父组件修改子组件样式的方法

    在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式

  • Vue中的scoped实现原理及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp

  • .vue文件 加scoped 样式不起作用的解决方法

    浅谈关于.vue文件中的style的scoped属性 注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响. 1.在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块.但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度. 一.创建公共组件button: //button.

  • 浅谈vue中慎用style的scoped属性

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度. scoped实现私有化样式的原理 为什么会说,会增加复杂度?那么我们先从的实现模块的原理说起.为了方便称呼,我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件. 通过查看DO

  • 深入浅析Vue中的slots/scoped slots

    一直对Vue中的slot插槽比较感兴趣,下面是自己的一些简单理解,希望可以帮助大家更好的理解slot插槽 下面结合一个例子,简单说明slots的工作原理 dx-li子组件的template如下: <li class="dx-li"> <slot> 你好! </slot> </li> dx-ul父组件的template如下: <ul> <dx-li> hello juejin! </dx-li> <

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • Vue组件间的样式冲突污染问题详解

    默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 导致组件之间样式冲突的根本原因是: 单页面应用程序中,所有组件的dom结构,都是基于唯一的index.html页面进行呈现的. 每个组件中的样式,都会影响整个index.html页面中的dom元素. 给left.vue文件中的p标签添加一个字体样式 <template> <div> <p >left组件</p> <MyCount :num="4&quo

  • Vue组件和Route的生命周期实例详解

    先讲点实际的 实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容 关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat

  • Vue组件中使用防抖和节流实例分析

    在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字.窗口大小调整.滚动.Intersection Observer 事件. 这些事件总是被频繁触发,可能 几秒一次.如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的. 我们需要做的就是减缓事件处理程序的执行速度.这种缓冲技术就是 防抖(debounce) 和 节流(throttle) . 1. 观察者 防抖 我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台: <templat

  • jQuery中DOM 属性使用实例详解上篇

    目录 DOM属性(上) .addClass() .removeClass() .toggleClass() .hasClass() DOM属性(上) .addClass() 为每个匹配的元素添加指定的样式类名 值得注意的是这个方法不会替换一个样式类名.它只是简单的添加一个样式类名到元素上. 对所有匹配的元素可以一次添加多个用空格隔开的样式类名, 像这样: $("p").addClass("myClass yourClass"); .addClass() 方法允许我们

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • Angular7中创建组件/自定义指令/管道的方法实例详解

    组件 使用命令创建组件 •创建组件的命令:ng generate component 组件名 •生成的组件组成: 组件名.html .组件名.ts.组件名.less.组件名.spec.ts •在组件的控制器 @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) 手动创建组件 1.创建一个组件ts文件 2.在组件中设

  • jQuery中DOM 属性使用实例详解下篇

    目录 DOM属性(下) .html() .val() .attr() .removeAttr() DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取. $('div.demo-container').html(); html()方法还可以设置每一个匹配元素的html内容. 我们可以使用 .html() 来设置元素

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

随机推荐