vue3单文件组件中style特性的深入讲解

下面是一个关于“Vue3 单文件组件中 style 特性的深入讲解”的完整攻略：

什么是 Vue3 单文件组件？

在深入讲解 Vue3 单文件组件中的 style 特性前，我们需要先了解一下 Vue3 单文件组件的概念。

Vue3 单文件组件是指一种特殊的 Vue 组件，它包含了三个部分：模板、JavaScript 逻辑代码和样式，这三部分内容都在同一个文件中进行定义。一个典型的 Vue3 单文件组件通常以 .vue 作为文件后缀，例如 Example.vue。

Vue3 单文件组件中的 style 特性

在 Vue3 单文件组件中，我们可以使用 style 标签来定义组件的样式。与传统 HTML 中的 style 标签不同的是，在 Vue3 中，我们可以在 style 标签中使用 SCSS、LESS 等 CSS 预处理器，并且还支持 CSS 模块化，这为我们开发组件提供了更便利、更灵活的手段。

普通 CSS 样式

我们可以使用普通的 CSS 样式来定义组件的样式，例如：

<template>
    <div class="example">
        <h1>Hello World!</h1>
    </div>
</template>

<style>
.example {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.example h1 {
    font-size: 24px;
    color: #333;
}
</style>

上述代码定义了一个 .example 类的 DIV 容器，其中包含了一个 H1 标题。该容器具有白色背景、20 像素的内边距、灰色边框和淡淡的阴影效果，而标题的字号为 24 像素、颜色为黑色。

CSS 模块化

使用 CSS 模块化可以帮助我们更好地组织组件的样式，将样式局部化，避免了全局样式带来的命名冲突和污染。

具体来说，当我们在 style 标签中添加 module 属性时，Vue3 会自动将该样式文件编译成一个局部样式表，并且通过 .module 类配合我们定义的类名来进行类命名的约束。例如：

<template>
    <div class="example">
        <h1 class="title">Hello World!</h1>
    </div>
</template>

<style module>
.example {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.title {
    font-size: 24px;
    color: #333;
}
</style>

上述代码中，我们使用了 module 属性来定义一个局部样式表，其中的 .example 类不受影响，仍然具有上述的样式特点。而 .title 类则是我们额外添加的类名，经过 Vue3 编译后，它的类名将被修改为 .title.module，从而避免了全局样式表的命名冲突问题。

示例说明

接下来，我们将通过两个示例来进一步说明 Vue3 单文件组件中的 style 特性。

示例一：CSS 样式

在这个示例中，我们将展示如何使用 CSS 样式来美化我们的组件。

<template>
    <div class="example">
        <h1>Hello World!</h1>
    </div>
</template>

<style>
.example {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.example h1 {
    font-size: 24px;
    color: #333;
}
</style>

在该示例中，我们定义了一个 .example 类的 DIV 容器，其中包含了一个 H1 标题。该容器具有白色背景、20 像素的内边距、灰色边框和淡淡的阴影效果，而标题的字号为 24 像素、颜色为黑色。

示例二：CSS 模块化

在这个示例中，我们将展示如何使用局部样式表和 CSS 模块化来美化我们的组件。

<template>
    <div class="example">
        <h1 class="title">Hello World!</h1>
    </div>
</template>

<style module>
.example {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.title {
    font-size: 24px;
    color: #333;
}
</style>

在该示例中，与示例一相比，我们添加了 module 属性，从而将样式表定义为局部样式表。同时，我们使用 .title 类来为标题定义样式，而 Vue3 会自动处理该类的类名，从而避免了全局样式表的命名冲突问题。