What are the types of layout methods in Vue?

• Template syntax: Using HTML-like syntax in <template> blocks of single-file components (.vue files) or in the template option of a Vue instance. Supports directives (v-bind, v-for, v-if, etc.) and interpolation ({{ }}).
• Render functions: Programmatic creation of virtual DOM using JavaScript. A more flexible approach for dynamic layouts or when template syntax becomes cumbersome. Uses the h function (hyperscript).
• JSX: Syntactic sugar for render functions, allowing writing virtual DOM in a form similar to HTML/XML directly in JavaScript. Requires additional build setup (e.g., Babel).
• Scoped CSS: Style rules defined within <style scoped> block of a component, applied only to elements of that component. Implemented by adding unique attributes to elements and matching selectors in CSS.

Example of Template syntax:

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

Example of 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)
      ))
    ]);
  }
};

Example of Scoped CSS:

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

<style scoped>
.container {
  color: blue; /* Will only apply to div.container in this component */
}
</style>