Что такое Single File Component (SFC) в Vue и какие секции он может содержать (template, script, style)?

1️⃣ Как кратко ответить

Single File Component (SFC) в Vue — это файл с расширением .vue, который инкапсулирует в себе разметку, логику и стили компонента. Он может содержать три основные секции: <template> для HTML-разметки, <script> для JavaScript-кода и <style> для CSS-стилей.

2️⃣ Подробное объяснение темы

Single File Component (SFC) в Vue — это концепция, которая позволяет разработчикам объединять разметку, логику и стили компонента в одном файле с расширением .vue. Это упрощает организацию кода и делает компоненты более модульными и переиспользуемыми.

Структура SFC

SFC обычно состоит из трех основных секций:

1. <template>: Эта секция содержит HTML-разметку компонента. Она определяет, как будет выглядеть компонент на странице. Разметка может включать в себя директивы Vue, такие как v-if, v-for, и привязки данных.

2. <script>: В этой секции содержится JavaScript-код, который определяет логику компонента. Здесь можно объявлять данные, методы, вычисляемые свойства и жизненные циклы компонента. Обычно используется стандартный JavaScript или ECMAScript 6+.

3. <style>: Эта секция содержит CSS-стили, которые применяются к компоненту. Стили могут быть локальными (с использованием атрибута scoped) или глобальными. Также можно использовать препроцессоры, такие как SASS или LESS.

Пример SFC

<template>
  <div class="example">
    <h1>{{ title }}</h1>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      title: 'Hello, Vue!'
    };
  },
  methods: {
    changeTitle() {
      this.title = 'Title Changed!';
    }
  }
};
</script>
​
<style scoped>
.example {
  text-align: center;
}
​
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
</style>

Объяснение примера

• <template>:

  • <div class="example">: Контейнер для всего содержимого компонента.
  • <h1>{{ title }}</h1>: Заголовок, который отображает значение переменной title из данных компонента.
  • <button @click="changeTitle">Change Title</button>: Кнопка, которая вызывает метод changeTitle при клике.

• <script>:

  • export default { ... }: Экспорт объекта компонента, который Vue использует для создания экземпляра.
  • data() { return { title: 'Hello, Vue!' }; }: Функция, возвращающая объект данных компонента. Здесь объявляется переменная title.
  • methods: { changeTitle() { ... } }: Объект методов компонента. Метод changeTitle изменяет значение title.

• <style scoped>:

  • .example { text-align: center; }: Стили для контейнера компонента, выравнивающие текст по центру.
  • button { ... }: Стили для кнопки, включая цвет фона, цвет текста и другие свойства.

Зачем использовать SFC

• Инкапсуляция: Все, что связано с компонентом, находится в одном файле, что упрощает поддержку и переиспользование.
• Читаемость: Разделение на секции делает код более структурированным и понятным.
• Модульность: Легко добавлять и удалять компоненты, что способствует гибкости разработки.
• Поддержка инструментов: SFC поддерживаются многими инструментами и сборщиками, такими как Vue CLI, что упрощает настройку и сборку проекта.