Basic Fragment Usage in Vue.js

Demonstrate how to use the Vue.js template syntax to group a list of children without adding extra nodes to the DOM.

<template>
  <div>
    <h2>Title</h2>
    <!-- Use of the Vue.js 'Fragment' (denoted by template tag) -->
    <template v-for="item in items">
      <li>{{ item.text }}</li>
      <!-- This comment will not show up as an extra node because it's inside a fragment. -->
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        // More items...
      ]
    };
  }
};
</script>

This example demonstrates how to use a Vue.js template tag as a fragment in order to loop over a list of items and render them as list elements without adding extra wrapper elements to the DOM. The 'template v-for' loop outputs each item directly within the parent div, without additional wrapping. This feature is very useful to keep the DOM structure clean and minimal.