Explication détaillée du style dans Vue2 (scoped)

1. L'attribut scoped de la balise style dans Vue indique que son style ne s'applique qu'au module actuel, qui est la privatisation du style.

2. Règles/principes de rendu : Ajoutez un attribut de données unique au nœud HTML DOM pour indiquer l'unicité. Ajoutez un sélecteur d'attribut de données du composant actuel à la fin du sélecteur CSS correspondant pour privatiser le style, par exemple : .demo[ data -v-2311c06a]{} Si less ou sass est introduit, il ne sera défini que sur le dernier élément

<template>
  <div class="demo">
    <span class="content">
      Vue.js scoped
    </span>
  </div>
</template>

<style lang="less" scoped>
  .demo{
    font-size: 16px;
    .content{
      color: red;
    }
  }
</style>

// 浏览器渲染效果
<div data-v-fed36922>
  Vue.js scoped
</div>
<style type="text/css">
.demo[data-v-039c5b43] {
  font-size: 14px;
}
.demo .content[data-v-039c5b43] { //.demo 上并没有加 data 属性
  color: red;
}
</style>

attribut profond

// 上面样式加一个 /deep/
<style lang="less" scoped>
  .demo{
    font-size: 14px;
  }
  .demo /deep/ .content{
    color: blue;
  }
</style>

// 浏览器编译后
<style type="text/css">
.demo[data-v-039c5b43] {
  font-size: 14px;
}
.demo[data-v-039c5b43] .content {
  color: blue;
}
</style>