详解template标签用法(含vue中的用法总结)

简介：

<template> 标签是一个通用的占位符元素，可以作为组件的模板，也可以作为一段代码片段，使你可以在渲染这段代码片段时，避免包含在页面中。这个标签在Vue的使用中尤其重要，在Vue的单文件组件中大量使用，尤其是作为组件的模板。

基本用法：

<template> 标记的作用就像一个占位符，可以放置需要被渲染的代码，但是不会直接输出到HTML中。当需要渲染<template>中的内容时，可以通过JS脚本中的语法来访问。例如：

<template id="example">
  <div>
    <p>{{message}}</p>
  </div>
</template>

const example = document.getElementById('example');
const template = example.content;
const p = template.querySelector('p');
p.textContent = 'Hello, World!';

在上面的例子中，我们改变了 <template> 中的 p 标签内容，但是<template> 中的代码片段却不会成为网页的直接一部分。

在 Vue 中使用：

在 Vue 中，<template>是一个重要的组件模板占位符，可以在Vue的单文件组件（.vue 文件）中充当一个根节点，可以自由组织下面的组件结构，不会对渲染结果影响。如果单文件组件中不包含<template>标记，则会有一个警告定义。例如：

<template>
  <div class="container">
    <h1>{{title}}</h1>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Welcome',
      message: 'Hello, World!'
    }
  }
}
</script>

在上面的例子中，<template>标记在单文件组件中作为根节点使用，其内部就是组件中可以包含的代码片段。

示例1：

例如，我们要在 Vue 中定义一个组件，这个组件叫做“Counter”，它是一个计数器类型的组件，可以增加或者减少计数值，并将计数结果显示在一个按钮上。这个组件可以通过以下方式来定义：

<template>
  <div>
    <button @click="incrementCounter()">+</button>
    <span>{{count}}</span>
    <button @click="decrementCounter()">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCounter() {
      this.count++
    },
    decrementCounter() {
      this.count--
    }
  }
}
</script>

在这个例子中，