vue样式叫什么

Vue样式叫做Vue的单文件组件（Vue Single-File Component，缩写为SFC）。

Vue的单文件组件将HTML模板、CSS样式和JavaScript代码封装在一个文件中，方便开发者编写和维护。在一个.vue文件中，可以同时编写Vue实例的模板、组件的样式和组件的逻辑代码。这种组件化的开发方式使得项目结构更加清晰，易于代码复用和维护。

在Vue的单文件组件中，样式部分可以使用以下形式：

1. 在.vue文件的style标签中定义样式，可以直接写原生CSS或使用CSS预处理器如Sass、Less等。示例：

<style>
  .container {
    padding: 20px;
    background-color: #f5f5f5;
  }
</style>

2. 使用
   

<style scoped>
  .container {
    padding: 20px;
    background-color: #f5f5f5;
  }
</style>

3. 通过引入外部样式表来定义样式，可以使用相对路径或绝对路径引入。示例：

<style src="./style.css"></style>

综上所述，Vue的样式是通过Vue的单文件组件来定义和管理的，可以在.vue文件中使用style标签定义样式，同时还支持限定样式作用范围和引入外部样式表。

Vue样式一般称为Vue组件样式或Vue组件中的样式。

1. 单文件组件中的样式：在Vue的单文件组件中，通常会将组件的样式写在组件的<style>标签中。Vue提供了一种独特的组件样式作用域，即通过给组件的<style>标签添加scoped属性，使得组件中的样式仅仅作用于该组件的模板中。

   <style scoped>
   /* 组件的样式 */
   </style>
   

2. 全局样式：除了在单文件组件中，我们也可以在Vue应用中使用全局样式。在Vue中，我们可以通过在Vue实例的根组件中引入全局样式文件，或者直接在HTML模板中添加<style>标签来定义全局样式。

3. CSS Modules：Vue也支持使用CSS Modules来管理组件的样式。CSS Modules是一种将CSS样式与具体的组件绑定的技术，它能够解决CSS全局命名冲突的问题。使用CSS Modules时，我们可以在组件的<style>标签中添加:module属性来启用CSS Modules。

   <style module>
   /* 使用CSS Modules的样式 */
   </style>
   

4. 预处理器：在Vue中，我们也可以使用预处理器（如Sass、Less、Stylus等）来编写组件的样式。Vue提供了对主流预处理器的良好支持，可以通过简单的配置来使用预处理器。

5. 第三方样式库：除了自定义样式，Vue也可以使用第三方的样式库。通过引入和使用第三方样式库，我们可以快速、简便地为Vue应用添加各种样式效果，如Bootstrap、Element UI等。在使用第三方样式库时，我们需要根据库的具体要求来引入和使用其提供的样式。

在Vue中，样式有几种不同的方式来应用和管理。在Vue中样式可以通过以下几种方式进行命名：

1. 内联样式（Inline Styles）：可以直接将样式写在HTML元素的style属性中。例如：

<div style="color: red;">This is a red text.</div>

在Vue中使用内联样式可以通过数据绑定的方式动态改变样式。例如：

<div :style="{ color: textColor }">This is a {{ textColor }} text.</div>

在Vue组件中使用内联样式可以通过使用计算属性的方式来动态改变样式。例如：

<template>
  <div :style="computedStyles">This is a {{ textColor }} text.</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  },
  computed: {
    computedStyles() {
      return {
        color: this.textColor
      }
    }
  }
}
</script>

2. 类绑定（Class Binding）：可以通过绑定一个对象来控制元素的class属性。例如：

<div :class="{ 'red-text': isRed }">This is a red text.</div>

在Vue中使用类绑定可以通过数据绑定的方式动态改变class。例如：

<div :class="{ 'red-text': isRed }">This is a {{ textColor }} text.</div>

在Vue组件中使用类绑定可以通过使用计算属性的方式来动态改变class。例如：

<template>
  <div :class="computedClasses">This is a {{ textColor }} text.</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  },
  computed: {
    computedClasses() {
      return {
        'red-text': this.textColor === 'red',
        'blue-text': this.textColor === 'blue'
      }
    }
  }
}
</script>

3. 样式模块化（CSS Modules）：可以通过使用样式模块化的方式来避免样式冲突和全局污染。在Vue项目中可以使用webpack等工具来配置支持样式模块化。例如：

<template>
  <div :class="$style.redText">This is a red text.</div>
</template>

<style module>
.redText {
  color: red;
}
</style>

在样式模块化中，样式类名会自动被转换成唯一的标识符，避免了类名冲突的问题。在组件中使用样式模块化时需要使用“$style”来引用样式。