这篇文章主要介绍了scoped样式属性怎么在vue组件中使用，此处通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下：

班戈网站建设公司创新互联公司,班戈网站设计制作，有大型网站制作公司丰富经验。已为班戈上千余家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的班戈做网站的公司定做！

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

Scoped CSS

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

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

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

.example {
 color: red;
}

渲染结果：

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

/* local styles */

关于子组件的根元素

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

深选择器

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

 .gHeader /deep/ .name{ //第一种写法
  color:red;
 }
 .gHeader >>> .name{  //二种写法
  color:red;
 }