Как вы уже догадались, упомянутый выше файл App.vue представляет собой однофайловый компонент (SFC), один из
о великом вкладе Vue. В этом типе файла мы можем описать HTML, CSS и JavaScript.
который определяет компонент. Веб-страница затем состоит из иерархии компонентов, начиная
от точки входа (традиционно называемой App.vue) до последней настроенной кнопки, если хотите.
Мы подробно обсудим компоненты в Главе 4 «Композиция пользовательского интерфейса с компонентами», но
а пока имейте в виду, что это путь, предписанный структурой. Если у вас есть опыт
в объектно-ориентированном языке это может показаться знакомым (и вы не ошибетесь).
SFC — это обычный текстовый файл с расширением .vue, который содержит следующие разделы:
<script setup>
// Here we write our JavaScript
</scrip>
<template>
<h1>Hello World! This is pure HTML</h1>
</template>
<style scoped>
h1{color:purple}
</style>На первый взгляд может показаться странным хранить весь этот контент в одном месте, но именно это и делает его замечательным.
Вот описание каждого раздела:
Тег сценария, который окружает наш JavaScript и в зависимости от синтаксиса экспортирует объект.
с четко определенными полями. На практике это становится модулем, который представляет собой современный способ разделения
код на JavaScript. Обратите также внимание, что мы используем атрибут-модификатор setup. Это определит
интерфейс приложения, который мы собираемся использовать для написания нашего кода на Vue. Мы также могли бы объявить
атрибут lang="ts" для использования TypeScript вместо обычного JavaScript.
• Тег шаблона окружает HTML-код нашего компонента. Здесь мы можем использовать элементы HTML,
другие компоненты, директивы и т. д. Большим преимуществом Vue является то, что мы можем использовать простой
HTML для написания нашего HTML. Это может показаться очевидным, но другие библиотеки полностью с этим справляются.
по-другому и имеют для этого свой собственный синтаксис. Однако Vue 3 также позволяет использовать другие синтаксисы.
с помощью плагинов бандлера. Здесь мы не остались без вариантов.
• Тег стиля, куда мы поместим CSS для нашего компонента. В этом случае мы используем область видимости
атрибут, который инкапсулирует правила и ограничивает их нашим компонентом, тем самым предотвращая
от их «вытекания» в остальную часть приложения. Как и в предыдущих разделах,
мы также можем использовать другой синтаксис для написания стилей, если он поддерживается сборщиком
Лучшая практика
Всегда ограничивайте свои стили, если только вы не определяете стили для родительского компонента или переменных CSS.
который вы хотите явно передать всему приложению. Для стилей всего приложения
используйте отдельный файл CSS.
Важно помнить, что SFC содержит эти три элемента, которые определяют единый код.
компонент. Приложение-упаковщик сделает свое волшебство: отделит каждую часть и поместит ее туда, где она должна быть.
принадлежат, поэтому браузер может правильно их интерпретировать. Для этого мы будем использовать быстрый и новый Vite.
Глава 3 «Настройка рабочего проекта» и глава 4 «Композиция пользовательского интерфейса с компонентами»
мы углубимся в компоненты и способы управления потоком управления и информации между
их. Но сначала давайте посмотрим, как мы пишем наши компоненты.