框架集成：13 Vue样式与HTML - 详细教程与实战指南

<!-- SFC中的scoped样式 -->
<style scoped>
.card { padding: 20px; }  /* 只影响当前组件 */
</style>

<!-- 编译后 -->
<style>
.card[data-v-1a2b3c] { padding: 20px; }
</style>
<div class="card" data-v-1a2b3c>...</div>

<!-- 深度选择器：影响子组件 -->
<style scoped>
/* Vue 3推荐写法 */
.parent :deep(.child) { color: red; }

/* 旧写法（仍可用） */
.parent ::v-deep(.child) { color: red; }
.parent >>> .child { color: red; }
</style>

<!-- CSS Modules -->
<style module>
.card { padding: 20px; }
</style>
<!-- 使用 -->
<div :class="$style.card">
<div :class="styles.card">  <!-- 绑定到style module -->

<!-- 对象语法 -->
<div :class="{ active: isActive, disabled: isDisabled }">

<!-- 数组语法 -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- 数组+对象组合 -->
<div :class="['base', { active: isActive }]">

<!-- 绑定计算属性 -->
<div :class="classObject">

const classObject = computed(() => ({
  active: isActive.value,
  'theme-dark': theme.value === 'dark'
}))

<div :style="{
  backgroundColor: bgColor,
  color: textColor,
  fontSize: fontSize + 'px',
  borderRadius: radius + 'px',
  padding: padding + 'px',
  boxShadow: '0 4px 20px ' + bgColor + '66'
}">
  <h4>动态样式演示</h4>
  <p>通过style对象绑定实现实时样式变化</p>
</div>

<!-- 通过style绑定CSS变量 -->
<div :style="{ '--primary': primaryColor }">
  <p style="color: var(--primary)">使用CSS变量</p>
</div>

<!-- SFC中使用v-bind绑定CSS变量 -->
<style>
.text { color: v-bind(primaryColor); }
</style>

<script setup>
const primaryColor = ref('#42b883');
</script>

<!-- 不推荐：内联长样式对象 -->
<div :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '20px', backgroundColor: '#f0f0f0', borderRadius: '8px' }">

<!-- 推荐：提取样式对象 -->
<script setup>
const containerStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  padding: '20px',
  backgroundColor: '#f0f0f0',
  borderRadius: '8px'
};
</script>
<div :style="containerStyle">

<!-- 不推荐：过度使用:deep() -->
:deep(.child .grandchild .deep-element) { color: red; }

<!-- 推荐：通过props或CSS变量传递样式 -->
<!-- 父组件 -->
<ChildComponent :color="textColor" />
<!-- 子组件 -->
<span :style="{ color: color }">

<!-- 推荐：使用v-bind() in CSS (SFC) -->
<style scoped>
.text { color: v-bind(textColor); }
</style>