1. Обзор

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

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

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

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

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

<custom1>
  This could be e.g. documentation for the component.
</custom1>

2. Соответствующие языковые блоки

<template>

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

`<script>`

Каждый файл может содержать не более одного блока. ( кроме случаев использования <настройки сценария> ) *.vue <script>
Этот блок кода скрипта будет выполняться как модуль ES.
Экспортом по умолчанию должен быть объект параметров компонента Vue, который может быть литералом объекта или возвращаемым значением функции defineComponent .

`<script setup>`

Каждый файл может содержать не более одного . (кроме общего ) *.vue <script setup><script>
Этот блок сценария будет предварительно обработан как setup() функция компонента, что означает, что он будет выполняться для каждого экземпляра компонента . <script setup> Привязки верхнего уровня будут автоматически отображаться в шаблоне. Дополнительные сведения см. в специальной документации для <script setup> .

`<style>`

Каждый файл может содержать несколько тегов. *.vue <style>
Тег может использовать атрибут или ( дополнительную информацию см. в разделе Функции стиля SFC ), чтобы помочь инкапсулировать стиль текущего компонента. Несколько тегов, использующих разные режимы инкапсуляции, могут быть смешаны в одном компоненте. <style>scopedmodule<style>

пользовательский блок

Дополнительные сведения см. в соответствующем руководстве по набору инструментов .

3. Автоматическое получение имени

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

Когда имя компонента необходимо отформатировать в предупреждающем сообщении о разработке;
При просмотре компонентов в DevTools;
Когда рекурсивные компоненты ссылаются на себя. Например, на FooBar.vue компонент с именем .можно ссылаться в шаблоне отдельно . (в случае одного и того же имени) Это имеет более низкий приоритет, чем явно зарегистрированные/импортированные компоненты. <FooBar/>

4. Препроцессор

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

<script lang="ts">
  // use TypeScript
</script>

lang Его можно использовать в любом блоке, например, мы можем использовать Pug в SASS<style> в тегах :<template>

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

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

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

5. Импорт источника

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

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

Обратите внимание, что src импорт следует тем же правилам разрешения пути, что и импорт модуля JS, что означает:

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

<!-- 从所安装的 "todomvc-app-css" npm 包中导入一个文件 -->
<style src="todomvc-app-css/index.css" />

src Импорт также работает для пользовательских чанков:

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

6. Примечания

В каждом чанке вы можете писать комментарии согласно синтаксису соответствующего языка (HTML, CSS, JavaScript, Pug и т.д.). Для комментариев верхнего уровня используйте синтаксис комментариев HTML. 

Компонент одного файла Vue3.0 — определение синтаксиса SFC