VUE单文件组件

         Vue是个支持组件化开发的框架。 在第1章中使用 Vite 创建Vue项目后，目录结构中包含一些扩展名为.vue的文件，每个.vue 文件都可用来定义一一个单文件组件。
         Vue中的单文件组件是Vue 组件的文件格式，每个单文件组件由模板、样式和逻辑3
个部分构成，下面分别对这3个部分进行介绍。

1.模板
        模板用于搭建当前组件的DOM结构，其代码写在<lemplate>标签中。<template>标签定
Vue提供的容器标签，只起到包裹作用，它不会被渲染为真正的DOM元素。每个单文件组
件最多可以包含一个 顶层<template>标签。
        在Vue3中,<template>标签中的DOM结构可以有多个根节点;而在Vue 2中,<template>
标签中的DOM结构只能有个根节点，即<lemplate>标 签中的所有元素最外层必须有唯一
的根节点进行包裹，否则会报错。

2.样式
        样式是指通过CSS代码为当前组件设置样式，其代码写在<style>标签中。 每个单文件
组件中可以包含多个<style>标签。如果当前组件不需要样式，则可以省略<style>标签。

3.逻辑
        逻辑是指通过JavaSeript 代码处理组件的数据与业务，其代码写在<script>标签中。每
个单文件组件只能包含.个<seripb>标签。 如果当前组件没有逻辑代码且存在<template>标
签，则可以省略<seript>标签。
        下面演示如何定义一个基本的单 文件组件，示例代码如下。

1 <template>
2 <!--此处编写组件的结构-->
3 </template>
4 ! <script>
5 /*此处编写组件的逻辑*/
6 </script>
7 <style>
8 /*此处编写组件的样式*/
9 </style>

        在上述代码中，<template><script><style>这 3个标签的先后顺序没有要求，可以自由
调整。