Vue的單文件組件中style標(biāo)簽有哪些作用？

vue單文件組件中

在 Vue 的單文件組件（SFC）中，

1. 定義組件樣式

最基礎(chǔ)也最常見的用途就是給當(dāng)前組件添加 CSS 樣式。比如你可以在

<template>   <div class="content">Hello Vue</div> </template>  <style> .content {   color: blue;   font-size: 20px; } </style>

這種方式的好處是結(jié)構(gòu)清晰，樣式和模板寫在一起，方便維護(hù)。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

2. 使用 scoped 避免樣式污染

如果你不希望當(dāng)前組件的樣式影響到其他組件，可以加上 scoped 屬性：

<style scoped> .content {   color: red; } </style>

加了 scoped 后，Vue 會(huì)在編譯時(shí)自動(dòng)為這個(gè)組件的 DOM 添加一個(gè)唯一的屬性（比如 _v-xxxxxx），并把樣式選擇器重寫成類似 .content[_v-xxxxxx]，這樣就實(shí)現(xiàn)了“局部樣式”，不會(huì)污染全局。

block||||||||block

3. 使用 module 實(shí)現(xiàn)更嚴(yán)格的樣式模塊化

除了 scoped，還可以使用 module：

<style module> .title {   font-weight: bold; } </style>

這時(shí)候，樣式會(huì)被注入為一個(gè)對(duì)象，需要在模板中通過(guò) $style 來(lái)引用：

<template>   <h1 :class="$style.title">標(biāo)題</h1> </template>

這種寫法比 scoped 更嚴(yán)格，適合大型項(xiàng)目中對(duì)樣式隔離要求更高的場(chǎng)景。

4. 支持預(yù)處理器語(yǔ)言

Vue 的

<style lang="scss"> .container {   background-color: #f5f5f5;    .text {     color: darken(blue, 10%);   } } </style>

這在現(xiàn)代前端開發(fā)中非常常見，特別是需要嵌套寫法、變量、混合等功能的時(shí)候。

基本上就這些。