Спецификация синтаксиса 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: <!-- комментарий верхнего уровня -->