vue.js 单文件组件

Vue.js 的单文件组件（Single File Component，简称 SFC）是一种将 HTML、CSS 和 JavaScript 三者结合在一起编写的小型可复用模块的方式。它通常由三个部分组成：

1. **`.vue` 文件**：这是核心内容，文件扩展名为 `.vue`。在这个文件中，你书写HTML结构（`<template>`），定义数据绑定和计算属性（`data` 或 `computed`），以及处理组件的生命周期方法（如 `beforeCreate`, `created`, `mounted` 等）和自定义事件（`methods`）。

<template>
  <div>
    <!-- 组件模板 -->
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    sayHello() {
      this.message = 'Hi there!';
    }
  }
}
</script>

<style scoped>
/* CSS 内部样式 */
h1 {
  color: blue;
}
</style>

2. **`template` 标签**：用于定义组件的UI视图层次结构。
3. **`script` 标签**：包含JavaScript代码，包括组件的数据模型和逻辑。
4. **`style` 标签**：可选，可以嵌入内联样式或链接外部样式表，并通过`scoped`属性限制其作用域仅限于当前组件。

SFC的优点包括代码组织清晰、易于维护和分发，同时使得组件间的通信变得更加直观。此外，Vue的编译过程会把这种结构转化为高效的运行时组件，使得性能表现良好。