【Vue知识点总结】style标签的 scoped 属性

在 Vue 中，scoped 是<style>标签的一个属性，用于限制样式的作用域，使其仅作用于当前组件，避免影响其他组件或全局样式。这是 Vue 通过 CSS 作用域实现的模块化方案。

一、核心作用

1. 样式隔离

添加 scoped 后，组件内的样式不会泄漏到其他组件，其他组件的样式也不会影响当前组件。

<style scoped>.button { color: red; } /* 仅作用于当前组件 */
</style>

2. 自动添加唯一属性

Vue 会为组件元素添加一个独特的属性（如data-v-f3f3eg9），并通过属性选择器实现样式隔离：

/* 编译后实际生效的样式 */.button[data-v-f3f3eg9] { color: red; }

 

3. 使用示例

未使用 scoped（全局样式）:

<template><button class="button">Click<