scoped样式

通过给style标签添加scoped属性，可以做到样式隔断，避免样式污染

<template>
    <div class="box"></div>
    <span class="son"></div>
</template>

<style scoped>
    .box{
        width: 200px;
        height: 200px;
    }

    .son{
        color:#fff
    }
</style>

其原理是：

1.给style标签添加scoped属性后，会给当前组件每一个dom都添加一个格式为data-v-xxxx的属性，其中xxxx是一个唯一的字符串，并且在当前组件中每一个dom上都是相同的

2.然后编译之后的css会添加上属性选择器.box [data-v-xxx]{}

这样每个组件中的css都是在一个作用域，不会影响到其他组件中的元素

编译后dom以及css会像如下所示

<template>
    <div class="box"  data-v-7ba5bd90></div>
    <span class="son"  data-v-7ba5bd90></div>
</template>

<style scoped>
    .box [data-v-7ba5bd90]{
        width: 200px;
        height: 200px;
    }

    .son [data-v-7ba5bd90]{
        color:#fff
    }
</style>