Skip to content

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

Обзор

Однофайловый компонент Vue (SFC), условно использующий расширение файла *.vue, - это пользовательский формат файла, использующий HTML-подобный синтаксис для описания компонента Vue. Синтаксически Vue SFC совместим с HTML.

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

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

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

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

<custom1>
  Это может быть например документация к компоненту.
</custom1>

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

<template>

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

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

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

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

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

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>

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

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

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

vue
<template src="./template"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

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

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

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

vue
<unit-test src="./unit-test.js">
</unit-test>

Note

While using aliases in src, don't start with ~, anything after it is interpreted as a module request. This means you can reference assets inside node modules:

vue
<img src="~some-npm-package/foo.png">

Комментарии

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

Спецификация синтаксиса SFCУже загружено