Какие методы верстки существуют в Vue?

• Template-синтаксис: Использование HTML-подобного синтаксиса в <template> блоках однофайловых компонентов (.vue файлов) или в опции template экземпляра Vue. Поддерживает директивы (v-bind, v-for, v-if и т.д.) и интерполяцию ({{ }}).
• Рендер-функции (Render Functions): Программное создание виртуального DOM с помощью JavaScript. Более гибкий подход для динамической верстки или когда шаблонный синтаксис становится громоздким. Использует функцию h (hyperscript).
• JSX: Синтаксический сахар для render-функций, позволяющий писать виртуальный DOM в виде, похожем на HTML/XML прямо в JavaScript. Требует дополнительной настройки сборки (например, с Babel).
• Scoped CSS: Стилевые правила, определенные в <style scoped> блоке компонента, применяются только к элементам этого компонента. Реализуется добавлением уникальных атрибутов к элементам и соответствующим селекторам в CSS.

Пример Template-синтаксиса:

html

Пример Render Functions:

javascript

Пример Scoped CSS:

html