scoped可以實現style只作用於當前的.vue檔案

<template>
  <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
  color:#333;
}
</style>

上面的檔案渲染出的dom結構會是這樣的

<div data-v-53795c54 class="user"></div>

css樣式是這樣的

.user[data-v-53795c54] {
  color:#333;
}

這樣就現實了樣式只作用於當前.vue檔案

注意：添加了scoped的父元件不能修子元件的樣式

           同樣添加了scoped的子元件不能影響父元件的樣式