Vue是一個(gè)流行的JavaScript框架，它提供了一種聲明式的方式來(lái)處理應(yīng)用程序的UI。Vue的CSS模塊使得將CSS與組件捆綁變得更加簡(jiǎn)單。Vue通過(guò)使用“scoped”屬性來(lái)限制CSS模塊的作用域，這使得它更加簡(jiǎn)單且易于維護(hù)。

<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
}
</style>

當(dāng)使用“scoped”屬性時(shí)，Vue會(huì)將組件中的CSS編譯成一個(gè)哈希值，該哈希值會(huì)被添加到CSS選擇器中。這將使得選擇器僅適用于當(dāng)前的組件，并且不會(huì)影響其他組件。這使得在創(chuàng)建復(fù)雜組件時(shí)，樣式隔離變得更加容易。

<template>
<div class="container">
<p>This is some text in the container.</p>
</div>
</template>
<style scoped>
.container {
background-color: #EEE;
padding: 20px;
border-radius: 5px;
}
p {
font-size: 16px;
}
</style>

除了限制CSS模塊的作用域之外，Vue還提供了一種使用“module”屬性將CSS模塊導(dǎo)出的方式。這使得在組件外部重用CSS樣式表變得更加容易。要在組件中導(dǎo)入CSS，可以使用“import”語(yǔ)句，類似于導(dǎo)入JavaScript模塊。

<template>
<div class="container">
<p class="text">This is some text in the container.</p>
</div>
</template>
<style module>
.container {
background-color: #EEE;
padding: 20px;
border-radius: 5px;
}
.text {
font-size: 16px;
}
</style>
<script>
import styles from './styles.module.css'
export default {
name: 'MyComponent',
computed: {
containerClass() {
return styles.container
},
textClass() {
return styles.text
}
}
}
</script>

在上面的例子中，組件會(huì)在導(dǎo)入CSS樣式表之后綁定一個(gè)計(jì)算屬性。這些計(jì)算屬性允許組件在渲染時(shí)使用類名，并且這些類名綁定到導(dǎo)入的CSS模塊的對(duì)應(yīng)類。這使得修改樣式表更加容易，并且使得在項(xiàng)目中重用樣式更加簡(jiǎn)單。