Vue3 单文件组件

Vue3 单文件组件

引言

Vue.js 是一个流行的前端JavaScript框架，以其简洁、灵活和高效的特点而受到开发者的喜爱。Vue3是Vue.js的第三个主要版本，它引入了许多新特性和改进，使得开发体验更加优秀。在Vue3中，单文件组件（Single File Components，简称SFC）是一种常见的组件编写方式，它允许我们将组件的逻辑、模板和样式封装在一个文件中，从而提高代码的可维护性和可读性。

单文件组件的组成

一个标准的Vue3单文件组件通常由三个部分组成：模板（Template）、脚本（Script）和样式（Style）。

模板（Template）

模板部分定义了组件的HTML结构。在Vue3中，模板语法得到了进一步的优化，支持更多的指令和功能，如条件渲染、列表渲染、事件处理等。模板部分通常位于<template>标签内。

<template>
  <div>
    <h1>{
  { title }}</h1>
    <p>{
  { message }}</p>
  </div>
</template>

脚本（Script）

脚本部分包含了组件的JavaScript逻辑。在这里，我们可以定义组件的数据、方法、计算属性、生命周期钩子等。脚本部分通常位于<script>标签内。

<scr