Vue---style的scoped属性
在vue中组件开发时，我们希望组件理应有自己独特的样式，但是在components的组件文件里style样式默认为全局样式。
只在组件1中style里添加div样式同样会作用给 组件2还有app.vue中的div
<template>
<div >
BaseOne
<span>span</span>
</div>
</template>
<script>
export default {
}
</script>
<style >
div{
background-color: rgb(130, 238, 195);
border: 3px solid black;
margin: 10px;
}
</style>
组件理应有自己独特的样式，如果我们只想让style样式作用于当前的组件，我们在style中可以加上scoped属性
<style scoped>
div{
background-color: rgb(130, 238, 195);
border: 3px solid black;
margin: 10px;
}
</style>
这时我们可以看到样式仅仅只作用在BaseOne组件上，避免了作用于全局
-------------------------------------------------------------------------------------------
scoped原理
scoped会为当前组件中的所有元素添加自定义属性data-v-hash值
我们可以看到不仅仅是div加上了data-v-hash，并且span标签中也加上了data-v-hash，且其值都一样
-------------------------------------------------------------------------------------------
使用场景
组件隔离：防止组件样式影响全局或其他组件，尤其适合多人协作或第三方组件库。
局部样式：仅修改当前组件模板内的元素样式，避免全局污染。
通过合理使用scoped，可有效管理Vue组件的样式作用域，平衡隔离性与灵活性。
