tempalte
<template> 是 Vue.js 单文件组件中的一个标签，用于定义组件的模板部分。在这个模板中，你可以使用 HTML 标签来构建用户界面，并结合 Vue 的指令和数据绑定功能。
在 <template> 标签内，你可以放置各种 HTML 元素，并可以使用 Vue 提供的指令（如 v-if、v-for、v-bind、v-model 等）来增加动态功能和响应式特性。
每个 Vue 组件都必须有一个 <template>，虽然可以在组件中使用多个根元素，但通常在 <template> 中应该只有一个根元素，以确保组件的结构清晰和逻辑明确。在你的示例中，<template> 标签打开了一个组件的模板部分，后续的内容将定义该组件的 UI 结构。
script
<script> 是 Vue.js 单文件组件中的一个标签，用于编写组件的 JavaScript 逻辑。在 <script> 标签内，你可以定义组件的各种属性和方法，包括数据、计算属性、生命周期钩子、事件处理函数等等。
在你提供的代码中，<script> 标签开启了组件的逻辑部分。在这个部分，你会看到一个导出默认对象的语法（export default {}），这个对象通常包含以下几个部分：
- data()：用于定义组件的响应式数据。
data函数返回一个对象，里面的属性会成为组件的状态。 - methods：用于定义组件的方法，这些方法可以在模板中通过事件处理器调用。
- computed：可以定义计算属性，它们会根据依赖的数据自动更新。
- 生命周期钩子：如
created、mounted等，用于在组件的不同阶段执行特定代码。
通过 <script> 部分，开发者可以控制组件的行为和功能。
style
<style> 是 Vue.js 单文件组件中的一个标签，用于定义组件的样式。在 <style> 标签内，你可以编写 CSS 规则，从而控制组件中元素的外观和布局。
在 <style> 标签内，可以使用常规的 CSS 语法来定义样式，也可以使用 Scoped 样式（通过添加 scoped 属性）来确保样式只作用于当前组件。这意味着在使用 Scoped 样式时，样式不会影响到其他组件，避免了全局样式冲突的问题。
以下是 <style> 标签的一些常见用法：
- 全局样式：没有使用
scoped，样式将应用于整个应用程序中。 - Scoped 样式：使用
scoped属性，确保样式仅应用于当前组件。 - CSS 层叠：可以使用各种选择器和样式属性来设置元素的样式。
在你的代码中，<style> 标签为组件提供了样式定义的起始位置。