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

Обзор ​

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

Каждый файл *.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>

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

<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>. Некоторые реальные примеры пользовательских секций:

• Gridsome: <page-query>
• vite-plugin-vue-gql: <gql>
• vue-i18n: <i18n>

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

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

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

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

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

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

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

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

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

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

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

• Vite
• Vue CLI
• webpack + vue-loader

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

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

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

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

• Относительные пути должны начинаться с ./
• Можно импортировать ресурсы из зависимостей npm:

<!-- импорт файла из установленного npm-пакета "todomvc-app-css" -->
<style src="todomvc-app-css/index.css" />

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

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

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

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

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