精华内容
下载资源
问答
  • Scoped

    2021-04-28 20:08:31
    Scoped 在Vue文件中的style标签上有个特殊的属性,scoped。当一个style标签拥有scoped属性的时候,它的样式只能用于当前的Vue组件,可以使组件的样式不互相污染,如果一个项目的所有style标签都加上了scoped属性,...

    Scoped

    在Vue文件中的style标签上有个特殊的属性,scoped。当一个style标签拥有scoped属性的时候,它的样式只能用于当前的Vue组件,可以使组件的样式不互相污染,如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。、

    可以在组件中同时拥有scoped和非scoped样式

    <style>
    /* 全局样式 */
    </style>
    
    <style scoped>
    /* 本地样式 */
    </style>
    

    子组件的根元素

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

    深度作用选择器

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

    注意:

    Scoped样式不能代替class,考虑到浏览器渲染各种 CSS 选择器的方式,当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example { color: red },性能影响就会消除。

    在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说,如果匹配 .a 的元素包含一个递归子组件,则所有的子组件中的 .b 都将被这个规则匹配。

    展开全文
  • scoped

    2019-01-17 14:32:32
    vue中慎用style的scoped属性   javascript   vue.js  42.8k 次阅读 · 读完需要 19 分钟 45 本文发布在我的博客vue中慎用style的scoped属性 许可协议: 署名-非商业性使用-禁止演绎4.0国际 转载请保留原文...

    2017-11-27 发布

    vue中慎用style的scoped属性

     

     42.8k 次阅读  ·  读完需要 19 分钟

    45

    本文发布在我的博客vue中慎用style的scoped属性
    许可协议: 署名-非商业性使用-禁止演绎4.0国际 转载请保留原文链接及作者。


    在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。但是为什么要慎用呢?在实际业务中我们往往会对公共组件样式做细微的调整,如果添加了scoped属性,那么样式将会变得不易修改。初写这篇文章时,本人没有找到一个好的方法去解决这个问题,后来经过大伙的解答,才让我恍然大悟。

    何为谨慎使用

    谨慎使用不是不用,而是持一种审视的目光去看待它。scoped肯定是解决了样式私有化的问题,但同时也引入了新的问题---样式不易(可)修改,而很多时候,我们是需要对公共组件的样式做微调的。所以我才说要谨慎使用

    解决方案

    首先要说明的问题是,最开始我以为这是一个BUG或者说一个弊端(因为当时没有搞明白scoped的真正作用),就很英勇的去提了一个issue,然后理所当然的被关闭了,关闭的理由是:scoped设计的初衷就是让样式变得不可修改。但是由于我在业务中经常遇到需要修改有scoped属性的组件,我就写了一篇文章记录一下这个问题,希望大家谨慎的使用这个属性。
    然而事实再一次证明了我的愚蠢,在vue-loader的文档中已经详细的对这个问题做了分析,并且对我遇到这种问题给出了解决方法:vue-loader的深度作用选择器。
    因为我并没有去深入了解这些问题,所以注定这篇文章被大伙拍砖,??????

    解决方案:vue-loader之scoped-css

    鉴于此,虽然这篇文章没有什么价值,但为了提醒我自己深究的意义,我对后面的内容做了保留,以下内容是最开始文章的原文,请大家忽略,上面的内容才是正文,没错,正文就是这么少。

    --------------------------------正文分割线,以下是无营养的内容--------------------------------


    scoped实现私有化样式的原理

    为什么会说,会增加复杂度?那么我们先从的实现模块的原理说起。为了方便称呼,我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件
    通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的。具体的渲染结果是怎样的,通过一个例子来说明。

    公共组件button组件

    一个公共组件button,为了样式模块化,给其加上scoped属性,

    //button.vue
    <template>
        <div class="button-warp">
            <button class="button">text</button>
        </div>
    </template>
    ...
    <style scoped>
        .button-warp{
            display:inline-block;
        }
        .button{
            padding: 5px 10px;
            font-size: 12px;
            border-radus: 2px;
        }
    </style>
    展开全文
  • Vue中的scopedscoped穿透

    万次阅读 2020-09-07 08:49:21
    一、什么是scoped 在Vue文件中的style标签上有一个特殊的属性:scoped。当一个style标签拥有scoped属性时候,它的CSS样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了...

    文章摘自:https://segmentfault.com/a/1190000015932467

     

    一、什么是scoped

    在Vue文件中的style标签上有一个特殊的属性:scoped。当一个style标签拥有scoped属性时候,它的CSS样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。 

     

    二、scoped实现原理

    Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:

    <style scoped lang="less">
        .example{
            color:red;
        }
    </style>
    <template>
        <div class="example">测试案例</div>
    </template>

    转译后:

    .example[data-v-5558831a] {
      color: red;
    }
    <template>
        <div class="example" data-v-5558831a>scoped测试案例</div>
    </template>

    既:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,给CSS选择器额外添加一个对应的属性选择器,来选择组件中的DOM,这种做法使得样式只作用于含有该属性的DOM元素(组件内部的DOM)。
    总结:scoped的渲染规则:
    1、给HTML的DOM节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个DOM元素。
    2、在每句CSS选择器的末尾(编译后生成的CSS语句)加一个当前组件的data属性选择器(例如:[data-v-5558831a])来私有化样式。

     

    三、scoped穿透

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播),需要在局部组件中修改第三方组件库的样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
    1、stylus的样式穿透使用>>>

    外层 >>> 第三方组件 
            样式 
       .wrapper >>> .swiper-pagination-bullet-active
        background: #fff

    2、sass和less的样式穿透使用/deep/

        外层 /deep/ 第三方组件 {
            样式
        }
        .wrapper /deep/ .swiper-pagination-bullet-active{
          background: #fff;
        }
    
    

     

    四、在组件中修改第三方组件库样式的其它方法

    上面我们介绍了在使用scoped属性时,通过scopd穿透的方式修改引入第三方组件库样式的方法,下面我们介绍其它方式来修改引入第三方组件库的样式。包括如下几种方式:
    1、在vue组件中不使用scoped属性。
    2、在vue组件中使用两个style标签,一个加上scoped属性,一个不加scoped属性,把需要覆盖的css样式写在不加scoped属性的style标签里。
    3、建立一个reset.css(基础全局样式)文件,里面写覆盖的CSS样式,在入口文件main.js中引入。

     

     

    展开全文
  • scoped scoped穿透

    2020-10-09 08:20:38
    scoped 一、简单结构搭建 这里将要阐述一个简单的示例,父组件为App,子组件为Child。 子组件Child的定义文件Child.vue中代码如下: <template> <div id="child"> <h2>子组件h2</h2> <...

    scoped

    一、简单结构搭建
    这里将要阐述一个简单的示例,父组件为App,子组件为Child
    子组件Child的定义文件Child.vue中代码如下:

    <template>
      <div id="child">
        <h2>子组件h2</h2>
        <h3>子组件h3</h3>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Child'
    }
    </script>
    
    <style scoped>
    h3 {
      background-color: blue;
    }
    </style>
    <style>
    h2 {
      background-color: blue;
    }
    </style>
    

    可以看到,子组件Child有一个根元素div#child,根元素下有两个子元素h2和h3。在样式中设置h2和h3背景颜色也为蓝色,为便于比较,h3使用了scoped,h2则未使用scoped。

    现在来看父组件App,它将嵌套子组件Child,代码如下:

    <template>
      <div id="app">
        <Child/>
        <h2>父组件h2</h2>
        <h3>父组件h3</h3>
      </div>
    </template>
    
    <script>
    import Child from './components/Child'
    
    export default {
      name: 'App',
      components: {
        Child
      }
    }
    </script>
    
    <style scoped>
    h3 {
      background-color: red;
    }
    </style>
    <style>
    h2 {
      background-color: red;
    }
    </style>
    

    父组件App有一个根元素div#app,根元素中首先嵌套了子组件Child,然后是自有的h3和h2元素。在样式中设置h2和h3背景颜色为红色,同样,h3使用了scoped,h2则未使用scoped。

    二、执果索因:先看效果
    以上结构搭建完成后,我们很可能相当好奇:

    两个h3元素和h2元素分别显示何种背景颜色呢?他们的背景又是如何生效的呢?

    我们先来看浏览器显示的效果:
    在这里插入图片描述

    这个结果可能令我们相当意外。子组件显示了子组件自身定义的样式,然而父组件的h2显示了子组件中对h2设置的样式,父组件的h3显示了父组件自身对h3的样式设置。这可能相当令人困惑,事实上,这正是我们要探讨的是否加scoped引发的样式的作用域问题。

    三、html结构规律:data-v-x
    我们先在浏览器中查看实际生成的html代码,如下:

    <div data-v-04c2046b id="app">
    	<div data-v-10e5fd3c data-v-04c2046b id="child">
    		<h2 data-v-10e5fd3c>子组件h2</h2>
    		<h3 data-v-10e5fd3c>子组件h3</h3>
    	</div>
    	<h2 data-v-04c2046b>父组件h2</h2> 
    	<h3 data-v-04c2046b>父组件h3</h3>
    </div>
    

    对于结构,我们应该不会有什么疑问,重点是其中html元素增加的data-v-x属性(x是一串数字)。
    需要说明的是,这里的x不是特定的,可能随测试环境的不同而不同,上面是笔者测试时生成的情况。

    可以发现,父组件App的根元素及子元素都增加了一个特定的[data-v-04c2046b]属性,子组件Child的根元素及子元素都增加了一个另一个特定的[data-v-10e5fd3c]属性,并且子组件根元素同时增加[data-v-04c2046b]属性和[data-v-10e5fd3c]属性`。

    那么是否可以总结出结论:组件的根元素、子元素、子组件根元素都会增加data-v-x属性呢?

    首先,并非所有组件都会增加data-v-x属性,事实上是否会增加data-v-x属性是由组件自身是否存在含scoped的style标签决定的。
    也就是说,如果组件中不存在style标签或者虽然有style标签但是没有加scoped,那么组件的元素便不会增加data-v-x属性。因此,得出第1个结论:

    结论1:data-v-x属性的增加是由组件中包含scoped的style标签引发。

    第二个问题是,以上示例中,父组件和子组件都最多只有两层html结构,假使html元素嵌套得更深,那么组件的后代元素是否都会增加data-v-x属性呢,而不仅仅是子元素?
    答案是肯定的,即结论2:

    结论2:组件的根元素、组件自身的后代元素、子组件的根元素都会加上该组件特定的data-v-x属性。

    这里,之所以用了“自身”这个词,原因在于子组件的后代元素虽然也会编译成父组件的后代元素,却不会加上父组件的data-v-x属性(下同)。
    那么,子组件哪些元素会增加子组件特定的data-v-x属性呢?事实上,由结论2,只要将子组件看作一个没有子组件的父组件,那么不难得出:

    结论3:子组件的根元素、子组件的后代元素会加上子组件特定的data-v-x属性。

    四、CSS规律
    现在,我们来看CSS样式是怎样作用的。

    (一)不加scoped的style样式
    父组件和子组件都设置了h2元素的样式,对于父组件和子组件的h2元素,起作用的都是子组件的样式设置,即:

    h2 {
        background-color: blue;
    }
    

    同时,浏览器中可以看到,父组件中的样式设置被覆盖:

    h2 {
        background-color: red;
    }
    

    :首先,我们发现两者h2选择器后面都没有加上[data-v-x],即结论1:

    结论1:无论父子组件,不加scoped的style标签中的选择器不会增加[data-v-x]属性选择器。

    同时,由于父组件的样式被覆盖,因此得出第二个结论:

    结论2:对于同一个选择器,子组件不含scoped的style标签中的样式优先级高于父组件。

    (二)加scoped的style样式
    对于父组件的h3元素,起作用的是

    h3[data-v-04c2046b] {
        background-color: red;
    }
    

    对子组件的h3元素,生效的是

    h3[data-v-10e5fd3c] {
        background-color: blue;
    }
    

    我们发现,只有组件自身含scoped的style标签中对h3设置的样式生效。

    这不难理解,写在含scoped的style标签中的选择器都会加上形如[data-v-04c2046b]这样的属性选择器后缀。虽然在父、子组件含scoped的style标签中都对h3样式进行了设置,但h3加上的是不同的data-v-x属性选择器后缀,因此相互不能匹配,彼此毫无影响。
    因此,得出以下结论:

    结论3:无论父子组件,加scoped的style标签中的选择器都会增加[data-v-x]属性选择器。

    结论4:对于同一个选择器,父子组件含scoped的style标签中的样式互不影响。

    (三)同一个组件,加或不加scoped
    如果我们在子组件含scoped的style中增加:

    h2 {
      background-color: orange;
    }
    

    那么,最终效果如下:
    在这里插入图片描述

    现在,我们捋一捋为什么会是这个效果:
    首先,来看子组件的h3,父组件含scoped的style对h3的设置不会影响子组件(结论4),那么子组件的h3将显示蓝色。对于父组件的h3,同样由结论4,显示红色。对于父组件的h2,由结论2显示蓝色,并且子组件含scoped的style中对h2的设置影响不到父组件。
    对于子组件的h2,由结论2,本应显示蓝色,但是,子组件含scoped的style中对h2的设置将覆盖子组件不含scoped的style中对h2的设置,因此显示黄色。
    由上,我们得出新的结论:

    结论5:在同一个组件中,对于同一个选择器,含scoped的style中设置的样式优先级高于不含scoped的style中设置的样式。

    这不难理解,含scoped的style中的选择器会加上特定的data-v-x属性选择器后缀,优先级将超过不带后缀的选择器。

    五、小结
    html篇:
    1、某个组件自身的元素是否会加上data-v-x属性,看该组件是否有带scoped的style标签,而不论这个style标签中有无样式设置,写了什么样式。
    2、若某个组件有带scoped的style标签,则该组件的根元素、组件自身的后代元素、子组件的根元素都会增加data-v-x属性。
    3、子组件的根元素会受到父组件data-v-x属性影响,非根元素则始终不会。

    CSS篇:
    1、含scoped的样式:父子组件互不影响,原因是增加了属性选择器后缀,彼此不能匹配。
    2、不含scoped的样式:父子组件相互影响,但子组件优先级高于父组件。
    3、同一个组件:不含scoped和含scoped的样式,含scoped的优先级更高,原因也是含scoped的选择器增加了属性选择器后缀。

    scoped穿透

    普通css的样式穿透 使用>>>

      //外层 >>> 第三方组件   
       .wrap>>> .el-input__inner{
          height: 1rem;
        }
    

    sass和less的样式穿透 使用/deep/

       //外层 /deep/ 第三方组件
        .wrap /deep/ .el-input__inner{
           height: 1rem;
        }
    

    案例

    <template>
     <div class="box">
      <dialog></dialog>
     </div>
    </template>
    <!--使用 >>>或者 /deep/ 操作符(Sass 之类的预处理器无法正确解析 >>>,可以使用/deep/)-->
    <style lang="scss" scoped>
    .box {
     /deep/ input {
      width: 166px;
      text-align: center;
     }
    }
    </style>
    或者
    <style lang="scss" scoped>
    .box >>> input {
      width: 166px;
      text-align: center;
     }
    }
    </style>
    
    展开全文
  • Stylus - Scoped & Scoped 穿透

    千次阅读 2019-02-11 15:36:40
    什么是 Scoped? 在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了...
  • scoped slot

    2019-11-07 20:22:12
    scoped slot关于scoped slot自学 关于scoped slot自学 看了官方的例子,总是会报错firstName is undefined,原来不能在父级里面定义user,而是在子级里面定义user。例子如下: <current-user> <template v...
  • Scoped CSS

    2020-06-10 09:39:49
    Scoped CSS 当 <style scoped >标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素 混用本地和全局样式 你可以在一个组件中同时使用有 scoped 和非 scoped 样式 <style> /* 全局样式 */ </...
  • a3.sqlalchemy-scoped_session

    万次阅读 2019-08-23 16:14:05
    scoped_session防止内存泄漏,保护性session的创建。 SQLAlchemy 的 scoped_session 是啥玩意 通常我们用 SQLAlchemy 写数据的时候要创建 Session 对象来维护数据库会话,用完了再关掉。但是听说还有个叫scoped_...
  • scoped 样式

    2021-09-08 19:19:09
    一、加不加 scoped ? 加上之后组件之间互相独立 a 组件不能访问 b 组件定义的样式 <!-- a.vue --> <style lang="less" scoped> #bg-red { background-color: #f00; } </style> 不加,相当...
  • Vue scoped

    2019-11-24 20:28:57
    何为Scoped CSS 在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时,它的css只作用于当前组件中的元素。这样就可以使组件的样式不相互污染。它通过使用PostCSS来实现以下转换: ...
  • vue scoped

    2021-08-24 09:01:19
    scoped vue项目一般是单页面、多组件,整个项目共用一个css样式表,有时候我们在写组件的过程中并不希望组件的样式污染全局作用域(毕竟不同组件之间重名的class很正常),因此我们会在组件的样式标签上加上scoped,...
  • scoped与module.md

    2020-02-19 16:10:28
    房兴_scoped与module.md
  • scoped css

    2019-08-19 11:13:03
    标记具有该scoped属性时,其CSS将仅应用于当前组件的元素。这类似于Shadow DOM中的样式封装。它有一些警告,但不需要任何polyfill。通过使用PostCSS转换以下内容来实现: <style scoped> .example { color: ...
  • style scoped

    2019-09-28 17:41:43
    scoped: 只在父div和其内容内生效, 转载于:https://www.cnblogs.com/clm960227/p/7942214.html
  • vue中的scoped="scoped

    2019-10-30 14:12:30
    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有...
  • scoped_ptr是Boost库中的一个只能指针,它和auto_ptr非常类似,可以完成资源的自动释放。scoped_ptr与auto_ptr的区别在于,auto_ptr可以实现资源的转移,但是scoped_ptr禁止了资源的转移,它让一个对象拥有了对资源...
  • VUE scoped

    2018-08-16 22:12:33
    scoped三条渲染规则: 给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来...
  • vue scoped踩坑

    2021-01-05 14:34:30
    vue scoped踩坑记录 坑 【样式修改失败】前几天开发需求,遇到一个坑,我无论怎么修改样式都无法完成 对公司内部的一个基础组件样式进行修改。经过排查,因为我在style标签上加入了scoped属性,于是我需要对scoped...
  • scoped 属性原理

    2021-03-10 11:30:12
    scoped 属性 vue单文件组件是通过vue-loader来解析的。 vue-loader作用:解析单文件组件,在style中添加scoped 属性,会自动在该组件所有标签上添加以data-v开头的特性名,只有子组件的根节点标签会添加父组件以及子...
  • vue scoped style

    2019-01-21 11:02:41
    1. scoped的样式只对当前组件内的元素起作用,原理是会为当前组件的根元素添加一个属性,如data-v123 2. scoped的样式会对子组件的根元素起作用(子组件的根元素实际就在父组件的dom中) 3. 如果希望scoped的样式...
  • scoped样式穿透

    2020-09-22 09:38:01
    scoped虽然避免了组件间样式污染,但是很多时候我们需要修改组件中的某个样式,但是又不想去除scoped属性 使用/deep/ 使用两个style标签

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,816
精华内容 31,526
关键字:

scoped