Какие методы верстки существуют в 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-синтаксиса:

<template>
  <div>
    <p v-if="isVisible">{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

Пример Render Functions:

import { h } from 'vue';

export default {
  props: ['message', 'items', 'isVisible'],
  render() {
    return h('div', [
      this.isVisible ? h('p', this.message) : null,
      h('ul', this.items.map(item =>
        h('li', { key: item.id }, item.name)
      ))
    ]);
  }
};

Пример Scoped CSS:

<template>
  <div class="container"></div>
</template>

<style scoped>
.container {
  color: blue; /* Применится только к div.container в этом компоненте */
}
</style>