vue使用less识的scoped属性

scoped可以实现style只作用于当前的.vue文件
【scoped=>译：审视，仔细研究（scope的过去式与过去分词形式）;】

<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;
}

如果我们子组件添加scoped，同样的，如果子组件也用scoped标识了，那么在父组件中是不能设置子组件中的节点的;
若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式;