Шаблон Vue. Его нахождения в разных вариантах подключения.

После того, как мы с вами развернули наш Vue проект, первым элементом с которым нам предстоит, как правило, повзаимодействовать - это элемент шаблона (template).

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

Понятие шаблона Vue

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

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

Шаблон Vue в SFC (Single File Component)

И если мы говорим об однофайловом компоненте, то здесь все достаточно просто. Шаблон находится в элементе template и в нем мы пишем нашу разметку.

<template>

<div>Разметка</div>

</template>

<script>

export default {

  name: "Test.vue"

}

</script>

<style scoped></style>

И далее эту разметку Vue смонтирует на элемент на веб-странице с id="app"

createApp(App).mount('#app')

Шаблон Vue для компонентов - объектов.

Если же мы говорим о том случае, когда мы подключаем наш в компонент другими способами, то шаблон у нас может находиться либо внутри прям самого элемента куда мы монтируем наше Vue

<div id="app"></div>

то есть смонтировали в элемент соответственно здесь будет наша разметка. 

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

Vue.createApp({

    data() {

      return {

        message: 'Текст'

}

    },

    template: `Разметка`

  });

Таким образом мы выносим разметку из корневого элемента. 

Имейте в виду, если мы монтируем, то шаблон автоматически находится в элемента с id="app", если у компонента есть свойство template, то шаблон будет выводится через это свойство.

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