作用域样式
在组件的 <style> 标签中或 App.vue 中定义的样式实际上在所有组件中全局可用。
要将样式限制在组件本地，我们可以在该组件上使用 scope 属性：**<style scoped>**
全局样式
在任何 *.vue 文件的 <style> 标签中编写的 CSS 在全局范围内有效。
这意味着，如果我们例如在一个 *.vue 文件的 <style> 标签中将 <p> 标签设置为具有粉红色的背景颜色，这将影响该项目中所有 *.vue 文件中的 <p> 标签。
示例
在这个应用程序中，我们有三个 *.vue 文件：App.vue 和两个组件 CompOne.vue 和 CompTwo.vue。
CompOne.vue 中的 CSS 样式影响所有三个 *.vue 文件中的 <p> 标签
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style>
p {
background-color: pink;
width: 150px;
}
</style>
作用域样式
为了避免一个组件中的样式影响其他组件中元素的样式，我们在 <style> 标签上使用 'scoped' 属性
示例
CompOne.vue 中的 <style> 标签被赋予了 scoped 属性
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style scoped>
p {
background-color: pink;
width: 150px;
}
</style>
