Из каких секций состоит компонент Vue?

Компонент Vue состоит из трех основных секций:

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

Пример структуры компонента в однофайловом компоненте (.vue):

<template>
  <!-- HTML разметка компонента -->
  <div>
    <h1>{{ message }}</h1>
    <button @click="greet">Нажми меня</button>
  </div>
</template>

<script>
  // JavaScript логика компонента
  export default {
    data() {
      return {
        message: 'Привет, мир!'
      }
    },
    methods: {
      greet() {
        alert('Привет!');
      }
    }
  }
</script>

<style scoped>
  /* CSS стили компонента (scoped - ограниченные компонентом) */
  h1 {
    color: blue;
  }
</style>