vue的<template>作用

在 Vue.js 中，`<template>` 标签用于定义 Vue 实例的模板。模板是 Vue.js 中的一个重要概念，它描述了 Vue 实例的渲染结果。模板通常包含 HTML 标签和 Vue 的指令，它可以动态地生成页面。

使用 `<template>` 标签可以避免在 HTML 中写入大量的 Vue 模板代码，从而使 HTML 更加简洁易读。在 `<template>` 标签中，可以使用 Vue 的模板语法，包括插值表达式、指令、事件绑定等等。

下面是一个简单的 Vue 组件模板示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
    <button @click="add">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My List',
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  },
  methods: {
    add() {
      this.list.push({ id: this.list.length + 1, text: 'New Item' })
    }
  }
}
</script>

在上面的示例中，我们使用 `<template>` 标签定义了一个 Vue 组件的模板，并在其中使用了插值表达式、指令、事件绑定等 Vue 模板语法，实现了一个简单的列表组件。在 `<script>` 标签中，我们定义了 Vue 组件的数据和方法，用于控制模板的渲染结果。