还是刚刚的文件,App.vue和User.vue
现在两个里面都有style样式模块,我们在App.vue里面加入
<style>
h1
{
color:purple;
}
</style>
然后发现,App.vue和User.vue里面,h1标签的字体全部都变成了紫色
然后我们在User.vue里面加入
<style >
h1
{
color:green;
}
</style>
这个时候,两个文件的h1标签的字体全部都变成了绿色
为了能保证不同组件实现不同的css功能,要在style标签加入scope(范围)
<style scoped>
</style>
就可以保证,每个style功能只在该文件里面实现