Компоненты одного файла за две минуты

Single-File-Components или SFC — это функция Vue.js, которая позволяет нам собирать весь наш компонент — шаблон, логику и стили в одном .vueфайле.

Ниже приведен пример компонента, который отображает элемент абзаца со статическим текстом и динамическим победителем.

Шаблон и скрипт

Часть шаблона этого примера представляет собой элемент абзаца с некоторым синтаксисом шаблона, который позволяет нам отображать данные в DOM. Шаблоны в отдельных файловых компонентах должны быть заключены в один HTML-тег, поэтому, если мы хотим включить несколько элементов абзаца в нашем примере, нам нужно будет обернуть наши элементы в один divили аналогичный элемент контейнера.

Между тегами скрипта находятся наша логика и данные. Данные и DOM связаны между собой, что позволяет нам динамически изменять наши данные, поэтому, если бы мы изменили данные победителя на «я», DOM отреагировал бы на это изменение реактивно.

Стиль

В приведенном выше примере тег стиля имеет атрибут scoped. Этот атрибут позволяет нам стилизовать элементы только текущего компонента. Это означает, что если этот компонент размещен на странице с другими элементами абзаца, только элемент абзаца в этом компоненте будет окрашен в синий цвет, а остальные будут следовать тем правилам, которые были заданы по умолчанию для элементов абзаца.

0

Автор публикации

не в сети 3 часа

admin

10K
Комментарии: 0Публикации: 331Регистрация: 21-04-2017

Добавить комментарий

Войти с помощью: