网站改版对用户的影响效果图制作教程

理解：

在 .vue 文件中，scoped 是 <style> 标签的一个属性，作用是让样式只作用于当前组件，避免样式污染其他组件
scoped 让样式只在自己的组件内生效，不会影响到其他组件的同名元素

举例

没有 scoped 的情况（样式全局生效）：

<!-- ComponentA.vue -->
<style>
p {color: red;
}
</style>

<!-- ComponentB.vue -->
<template><p>我是B组件的文字</p> <!-- 这里的文字也会变成红色，因为ComponentA的样式是全局的 -->
</template>

有 scoped 的情况（样式仅当前组件生效）：

<!-- ComponentA.vue -->
<style scoped>
p {color: red;
}
</style>
<!-- 只有ComponentA里的<p>会变红，ComponentB的<p>不受影响 -->

原理：

Vue 会给加了 scoped 的组件内所有 DOM 元素自动添加一个唯一的属性（比如 data-v-xxxxxx），同时给样式也加上这个属性选择器，让样式只匹配当前组件的元素。

编译后大概是这样：

/* 原样式 */
p { color: red; }/* 编译后（带scoped） */
p[data-v-xxxxxx] { color: red; }

注意：

如果需要在当前组件中修改子组件的样式，scoped 可能会限制效果，这时可以用 ::v-deep 穿透：

<style scoped>
/* 穿透scoped，修改子组件的样式 */
::v-deep .child-component-class {margin-top: 20px;
}
</style>