Спецификация синтаксиса 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, предварительно скомпилировано в рендер-функции JavaScript и присоединено к экспортируемому компоненту в качестве его опции render.

<script> ​

• Каждый файл *.vue может содержать не более одного блока <script> (за исключением <script setup>).

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

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

<script setup> ​

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

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

<style> ​

• Один файл *.vue может содержать несколько тегов <style>.

• Тег <style> может иметь атрибуты scoped или module (подробнее см. в Особенности CSS SFC), чтобы помочь инкапсулировать стили для текущего компонента. В одном компоненте можно смешивать несколько тегов <style> с разными режимами инкапсуляции.

Пользовательские блоки ​

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

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

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

Автоматический вывод имени ​

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

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

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

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

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

lang можно применить к любому блоку — например, мы можем использовать <style> с Sass и <template> с Pug:

<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.html"></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: <!-- содержимое комментария здесь -->