# Однофайловые компоненты Vue
# Введение
Файл *.vue
это собственный формат 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>
Это может быть, например, документация для компонента
</custom1>
vue-loader
парсит файл, извлекает каждую из секций, обрабатывает их при необходимости другими загрузчиками webpack, и в итоге собирает всё обратно в ES-модуль где экспорт по умолчанию будет объектом настроек компонента Vue.js.
vue-loader
предоставляет возможность использовать нестандартные языки, например пре-процессоры CSS и языки шаблонов компилируемые в HTML, указывая атрибут lang
для секции файла. Например, вы можете использовать Sass для стилей вашего компонента:
<style lang="sass">
/* используем Sass! */
</style>
Подробнее на странице использования пре-процессоров.
# Секции файла
# Шаблон (template)
Каждый
*.vue
файл может содержать максимум один блок<template>
.Содержимое извлекается, передаётся в
vue-template-compiler
, где предварительно будет скомпилировано в JavaScript render-функции, и наконец внедряется в описываемый компонент в секции<script>
.
# Логика (script)
Каждый
*.vue
файл может содержать максимум один блок<script>
.Секция исполняется как ES-модуль.
Экспорт по умолчанию должен быть объектом опций компонента Vue.js. Экспортирование расширенного конструктора, созданного с помощью
Vue.extend()
также поддерживается, но обычный объект предпочтителен.Любые правила webpack, которые совпадут с форматом
.js
файлов (или расширения, указанного в атрибутеlang
) также будут применены к содержимому блока<script>
.
# Стили (style)
По умолчанию считается:
/\.css$/
.Может быть несколько тегов
<style>
в одном*.vue
файле.Тег
<style>
может иметь атрибутыscoped
илиmodule
(подробнее — Локальный (scoped) CSS и CSS модули) для возможности инкапсулировать стили в текущий компонент. Несколько тегов<style>
с разными режимами инкапсуляции могут быть использованы в одном компоненте.Любые правила webpack, которые совпадут с форматом
.css
файлов (или расширения, указанного в атрибутеlang
) также будут применены к содержимому блока<style>
.
# Пользовательские блоки
Дополнительные пользовательские блоки могут быть добавлены в *.vue
файл для любых потребностей проекта, например блок <docs>
. vue-loader
будет использовать имя тега для определения какими загрузчиками webpack требуется обрабатывать содержимое этой секции. Загрузчики webpack должны быть указаны в секции loaders
настроек vue-loader
.
Подробнее в разделе пользовательских блоков.
# Импорты из других файлов
Если вы предпочитаете разделять *.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>
# Подсветка синтаксиса / поддержка IDE
На данный момент есть поддержка подсветки синтаксиса для следующих IDE/редакторов:
- Sublime Text
- VS Code
- Atom
- Vim
- Emacs
- Brackets
- JetBrains IDE (WebStorm, PhpStorm, и т.п.)
Будем рады видеть разработки и для других редакторов и IDE! Если вы не используете никаких пре-процессоров в компонентах Vue, вы также можете использовать синтаксис HTML в вашем редакторе для *.vue
файлов.
# Комментарии
Внутри каждой секции вы можете использовать синтаксис комментариев, который соответствует используемому языку (HTML, CSS, JavaScript, Pug, и т.д.). Для комментариев на уровне секций, используйте синтаксис комментариев HTML: <!-- ваш комментарий -->