scoped 在 Vue 中用于限制 CSS 样式只作用于当前组件及其内部元素，通过添加唯一前缀防止样式污染和冲突，并简化组件开发。
Vue 中 scoped 的作用
scoped 是 Vue 中一个属性，用于限制 CSS 样式只作用于当前组件及其内部元素。
如何使用 scoped
在组件模板中，使用 scoped 属性即可：
立即学习“前端免费学习笔记（深入）”；
作用原理
当使用 scoped 时，Vue 会将组件模板内的所有 CSS 样式自动添加一个唯一的前缀，确保这些样式只影响当前组件及其内部元素，而不会影响其他组件。
优点
使用 scoped 有以下优点：
- 提高 CSS 的可维护性：通过将 CSS 样式限制在组件内部，可以防止样式污染并提高代码的可重用性。
- 减少 CSS 冲突：尤其是在大型应用中，Scoped CSS 可以防止不同组件之间的 CSS 冲突。
- 简化组件开发：它允许开发者专注于当前组件的样式，而不用担心其他组件的影响。
示例
以下示例展示了如何使用 scoped：
注意：
-
scoped仅限于 CSS 样式，它不会影响 JavaScript 代码。 -
scoped样式仍然可以使用 Vue 的 CSS 变量和媒体查询。 - 如果需要在多个组件之间共享样式，可以使用全局 CSS 文件或 Vue 的 CSS 预处理功能（如 Sass 或 Stylus）。
