Vue.js

# Спецификация синтаксиса SFC

# Введение

Файл *.vue — пользовательский формат файла, использующий HTML-подобный синтаксис для описания компонента Vue. Каждый файл *.vue состоит из трёх типов языковых секций верхнего уровня: <template>, <script> и <style>, а также могут быть дополнительные пользовательские секции:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Привет мир!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  Это может быть например документация к компоненту.
</custom1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Языковые секции

# <template>

  • В каждом файле *.vue может быть не более одной секции <template> верхнего уровня.

  • Содержимое будет извлечено и передано @vue/compiler-dom, где предварительно скомпилируется в JavaScript render-функцию и присоединено к экспортируемому компоненту в качестве его опции render.

# <script>

  • В каждом файле *.vue может быть не более одной секции <script> (за исключением случаев использования <script setup>).

  • Скрипт выполняется как ES-модуль.

  • Экспорт по умолчанию должен быть объектом опций компонента Vue, либо обычным объектом, либо как возвращаемое значение defineComponent.

# <script setup>

  • В каждом файле *.vue может быть не более одной секции <script setup> (не считая обычных секций <script>).

  • Секция предварительно обрабатывается и используется в качестве функции компонента setup(), что означает, что она будет выполняться для каждого экземпляра компонента. Привязки верхнего уровня в <script setup> автоматически объявляются в шаблоне. Более подробную информацию можно найти на специальной странице документации про <script setup>.

# <style>

  • В одном файле *.vue может быть несколько секций <style>.

  • Секция <style> может иметь атрибуты scoped или module (подробнее см. в разделе возможности стилей SFC), для помощи в инкапсуляции стилей для текущего компонента. Несколько секций <style> с разными режимами инкапсуляции могут использоваться и совместно в одном компоненте.

# Пользовательские секции

Дополнительные пользовательские секции могут быть добавлены в файл *.vue для любых нужд, требуемых для проекта, например секцию <docs>. Некоторые реальные примеры использования пользовательских секций:

Обработка пользовательских секций зависит от инструментарий — если требуется создать собственные интеграции пользовательских секций, обратитесь к разделу инструментарий SFC для более подробной информации.

# Автоматическое определение name

Однофайловые компоненты автоматически определяют имя компонента по его имени файла в следующих случаях:

  • Форматирование предупреждений при разработке
  • Инспектирование в DevTools
  • Рекурсивная ссылка на самого себя. Например, файл с именем FooBar.vue может ссылаться на себя как <FooBar/> в своём шаблоне. Это имеет более низкий приоритет, чем явно зарегистрированные/импортированные компоненты.

# Пре-процессоры

В секциях можно объявить язык пре-процессора с помощью атрибута lang. Наиболее распространённый случай — использование TypeScript для секции <script>:

<script lang="ts">
  // используем TypeScript
</script>
1
2
3

Атрибут lang можно применить к любой секции — например можно использовать SASS (opens new window) в секции <style> и Pug (opens new window) в секции <template>:

<template lang="pug">
p {{ msg }}
</template>

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>
1
2
3
4
5
6
7
8
9
10

Обратите внимание, что интеграция с пре-процессорами может отличаться в зависимости от используемого инструментария. Смотрите примеры в соответствующих документациях:

# Импорты через src

Если предпочитаете разделять компоненты *.vue на несколько файлов, то можно использовать атрибут src для импорта внешнего файла для языковой секции:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
1
2
3

Импорты через src следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:

  • Относительные пути должны начинаться с ./
  • Можно импортировать ресурсы из зависимостей npm:
<!-- импорт файла из установленного npm-пакета "todomvc-app-css" -->
<style src="todomvc-app-css/index.css">
1
2

Импорты через src также работают с пользовательскими секциями, например:

<unit-test src="./unit-test.js">
</unit-test>
1
2

# Комментарии

Внутри секции следует использовать синтаксис комментариев используемого языка (HTML, CSS, JavaScript, Pug, и т.д.). Для комментариев верхнего уровня следует использовать синтаксис HTML-комментариев: <!-- какой-то комментарий верхнего уровня -->

← Инструментарий →