RosettaJS: Comparativas de Vue, React y Angular

Logica de vista

Manejo de eventos

El manejo de eventos permite ejecutar una acción cuando el usuario interactúa con un elemento de la interfaz.

Ejemplo

Ejecutar una acción al hacer clic en un botón.

Vue@event

// ActionButton.vue
<script setup lang="ts">
function handleClick() {
  alert('Button clicked')
}
</script>

<template>
  <button @click="handleClick">
    Click me
  </button>
</template>

Usa directivas de eventos en el template para asociar interacciones del DOM con funciones del componente.

Vue docs

ReactonEvent

// ActionButton.tsx
function ActionButton() {
  function handleClick() {
    alert('Button clicked')
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  )
}

Gestiona eventos en JSX con manejadores como onClick u onFocus, asociados a funciones del componente.

React docs

Angular(event)

// action-button.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-action-button',
  standalone: true,
  template: `
    <button (click)="handleClick()">
      Click me
    </button>
  `,
})
export class ActionButtonComponent {
  handleClick() {
    alert('Button clicked')
  }
}

Usa event bindings en el template para asociar interacciones del DOM con métodos del componente.

Angular docs