Компонент Vue состоит из трех основных секций:
<template>: Содержит разметку (HTML), которая определяет структуру и внешний вид компонента. В этой секции используется синтаксис шаблонов Vue для привязки данных, директив и отображения логики.<script>: Содержит JavaScript-код, который определяет логику компонента: состояние (данные), методы, вычисляемые свойства, хуки жизненного цикла и т.д.<style>: Содержит CSS-код для стилизации компонента. Стилизация может быть локальной (scoped) или глобальной. Стиль scoped гарантирует, что стили применяются только к элементам данного компонента, предотвращая конфликты.Пример структуры компонента в однофайловом компоненте (.vue):
vue