Vue элемент-призрак template.

Зачем нужен элемент template?

Когда мы создаем какие-то элементы внутри нашего шаблона, иногда может возникнуть ситуация, что нам нужно создать некий технический элемент, который физически не будет выводить в DOM разметке документа, но условная логика и операторы цикла мы для этого элемента можем использовать.

Во vue есть такой элемент и он называется template.

Если просто добавить этот элемент в разметку без прикрепления к нему каких-либо директив, он отобразиться в разметке как неизвестный элемент.

<template></template>

Но, давайте посмотрим, что произойдет, если для этого элемента мы добавим условный оператор.

<template v-if="loading">Загрузка</template>

Если теперь посмотреть DOM разметку, элемента template просто физически не будет в DOM разметке, даже при условии, что loading = true.

Т.е. template - это псевдо - элемент (элемент призрак), который не создает никаких элементов в разметке, если к нему применяются какие-либо vue директивы.

Где может понадобиться элемент template?

Например, может быть следующая ситуация:

<div>

<template v-if="type==='post'">

  <h1>Title</h1>

  <p>Paragraph 1</p>

  <p>Paragraph 2</p>

</template>

</div>

Элемент div в разметке уже есть и вам не нужно создавать еще какой-либо элемент разметки вместе с условным оператором. Как мы обсуждали здесь:

https://webkyrs.info/page/vue-direktiva-v-if-uslovnii-rendering

Условный оператор обязательно должен прикрепляться к какому-либо элементу. 

Применение template с циклами

Часто этот элемент может использоваться с циклами. 

<ul>

  <template v-for="item in items">

    <li>{{ item.msg }}</li>

    <li class="divider" role="presentation"></li>

  </template>

</ul>

У нас есть массив каких-то элементов items. Мы могли бы взять и применить директиву v-for для элемента li. Но, логика отображения элементов li достаточно сложная. Поэтому мы прописываем директиву не для элемента li, а для его родительского псевдоэлемента template.

Элемент template - это элемент шаблона, который используется для каких-то технических задач, для циклов, для условий, для того, чтобы навесить на него какую-то логику и этот элемент не создает нам каких-либо элементов для DOM-разметки.

Вот такой интересный элемент и понимание работы с ним может значительно упростить вашу работу с фреймворком Vue.