Single-File-Components или SFC — это функция Vue.js, которая позволяет нам собирать весь наш компонент — шаблон, логику и стили в одном .vueфайле.
Ниже приведен пример компонента, который отображает элемент абзаца со статическим текстом и динамическим победителем.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <p>And the winner is: {{ winner }}</p> </template> <script> module.exports = { data: function () { return { winner: 'You' } } } </script> <style scoped> p { color: blue; } </style> |
Шаблон и скрипт
Часть шаблона этого примера представляет собой элемент абзаца с некоторым синтаксисом шаблона, который позволяет нам отображать данные в DOM. Шаблоны в отдельных файловых компонентах должны быть заключены в один HTML-тег, поэтому, если мы хотим включить несколько элементов абзаца в нашем примере, нам нужно будет обернуть наши элементы в один divили аналогичный элемент контейнера.
Между тегами скрипта находятся наша логика и данные. Данные и DOM связаны между собой, что позволяет нам динамически изменять наши данные, поэтому, если бы мы изменили данные победителя на «я», DOM отреагировал бы на это изменение реактивно.
Стиль
|
1 2 3 4 5 |
<style scoped> p { color: blue; } </style> |
В приведенном выше примере тег стиля имеет атрибут scoped. Этот атрибут позволяет нам стилизовать элементы только текущего компонента. Это означает, что если этот компонент размещен на странице с другими элементами абзаца, только элемент абзаца в этом компоненте будет окрашен в синий цвет, а остальные будут следовать тем правилам, которые были заданы по умолчанию для элементов абзаца.