Vue的单文件组件中style标签有哪些作用？

vue单文件组件中

在 Vue 的单文件组件（SFC）中，

1. 定义组件样式

最基础也最常见的用途就是给当前组件添加 CSS 样式。比如你可以在

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

这种方式的好处是结构清晰，样式和模板写在一起，方便维护。

立即学习“前端免费学习笔记（深入）”；

2. 使用 scoped 避免样式污染

如果你不希望当前组件的样式影响到其他组件，可以加上 scoped 属性：

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

加了 scoped 后，Vue 会在编译时自动为这个组件的 DOM 添加一个唯一的属性（比如 _v-xxxxxx），并把样式选择器重写成类似 .content[_v-xxxxxx]，这样就实现了“局部样式”，不会污染全局。

block||||||||block

3. 使用 module 实现更严格的样式模块化

除了 scoped，还可以使用 module：

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

这时候，样式会被注入为一个对象，需要在模板中通过 $style 来引用：

<template>   <h1 :class="$style.title">标题</h1> </template>

这种写法比 scoped 更严格，适合大型项目中对样式隔离要求更高的场景。

4. 支持预处理器语言

Vue 的

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

这在现代前端开发中非常常见，特别是需要嵌套写法、变量、混合等功能的时候。

基本上就这些。