Vue 开发必须知道的36个技巧(小结)

// 原始代码
<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>

36.2 deep 属性

// 上面样式加一个 /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>