1. 组件

1.1. 定义组件模板

在Vue中，所有组件的定义都从确定其模板即HTML结构开始。下面是一个简单组件定义的示例。

    const HelloWorld = {
       template: `<p>Hello, Vue 3!</p>`
    };

这里定义了一个名为HelloWorld的组件，其模板是一个包含文本“Hello, Vue 3!”的<p>标签。

1.2. 组件注册

定义好组件之后，需要在Vue应用中注册该组件，使Vue能够识别并使用它。以下是组件注册过程的代码示例。

    createApp({
       components: {
           'hello-world': HelloWorld
       }
    }).mount('#app');

在这段代码中，使用createApp()方法初始化了一个新的Vue应用，并通过components选项注册了HelloWorld组件。这使得可以在Vue实例的任何地方使用<hello-world>标签。

1.3. 使用组件

组件一旦注册，就可以在HTML中像使用普通HTML标签一样使用。

    <div id="app">
     <hello-world></hello-world>
    </div>

在这个示例中，<hello-world>组件被嵌入到应用的DOM结构中。这样，Vue实例在处理这个模板时会渲染HelloWorld组件的内容。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 省略的头部信息 -->
  </head>
  <body>
    <div id="app">
      <hello-world></hello-world>
    </div>
    <script>
      const { createApp } = Vue;
      const HelloWorld = {
        template: `<p>Hello, Vue 3!</p>`
      };
      createApp({
        components: {
          'hello-world': HelloWorld
        }
      }).mount('#app');
    </script>
  </body>
</html>

2. 单文件组件

单文件组件（single-file component，简称SFC）是Vue开发中的一个高级特性，它允许将Vue组件的模板、JavaScript逻辑和CSS样式封装在单个.vue文件中。每个.vue文件代表一个完整的组件，这种方式提供了更好的代码组织和模块化，特别适用于构建大型应用。

<template>
  <div class="hello-world">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup() {
      const message = ref('Hello, Vue 3!');
      return { message };
    }
  }
</script>
<style scoped>
  .hello-world {
    color: blue;
  }
</style>

[插图] <template>标签定义了组件的HTML结构。

[插图] <script>标签处理组件的逻辑，如这里的setup()函数创建了响应式数据message。

[插图] <style scoped>定义组件的样式，并且通过scoped属性确保这些样式只会应用于当前组件的元素。当使用scoped时，Vue会自动为组件的每个元素和样式添加一个独特的属性，使得样式不会泄露到组件之外。