Guía de introducción a Vue 3

Data

El data es una propiedad de un componente Vue que se utiliza para almacenar los datos del componente. Estos datos se pueden utilizar para generar la plantilla HTML del componente, así como para responder a eventos del usuario.

El data se define como un objeto JavaScript. Por ejemplo:

Fragmento de código

export default {
  data() {
    return {
      nombre: "Juan",
      apellido: "Pérez",
    };
  },
};

En este ejemplo, el data del componente contiene dos propiedades: nombre y apellido. Estas propiedades se pueden utilizar para generar la plantilla HTML del componente, así como para responder a eventos del usuario.

Methods

Los methods son funciones que se definen dentro de un componente Vue. Estas funciones se pueden utilizar para realizar tareas específicas, como procesar datos o responder a eventos del usuario.

Los methods se definen como funciones JavaScript normales. Por ejemplo:

Fragmento de código

export default {
  methods: {
    saludar() {
      console.log("Hola, mi nombre es " + this.nombre);
    },
  },
};

En este ejemplo, el componente define un método llamado saludar(). Este método imprime un mensaje en la consola con el nombre del usuario.

Props

Los props son propiedades que se pueden pasar a un componente Vue desde su entorno. Los props se utilizan para compartir datos entre componentes.

Los props se definen como una propiedad del componente Vue. Por ejemplo:

Fragmento de código

export default {
  props: {
    nombre: String,
    apellido: String,
  },
};

En este ejemplo, el componente define dos props: nombre y apellido. Estos props son de tipo String.

Mounted

El mounted es un hook de ciclo de vida de un componente Vue que se ejecuta después de que el componente se ha montado en el DOM. El mounted se puede utilizar para realizar tareas que requieren que el componente esté montado en el DOM, como cargar datos o inicializar elementos DOM.

El mounted se define como una función JavaScript. Por ejemplo:

Fragmento de código

export default {
  mounted() {
    // Cargar datos
    // Inicializar elementos DOM
  },
};

Created

El created es un hook de ciclo de vida de un componente Vue que se ejecuta después de que se ha creado el componente, pero antes de que se haya montado en el DOM. El created se puede utilizar para realizar tareas que no requieren que el componente esté montado en el DOM, como inicializar variables o realizar cálculos.

El created se define como una función JavaScript. Por ejemplo:

Fragmento de código

export default {
  created() {
    // Inicializar variables
    // Realizar cálculos
  },
};

Computed

Los computed son propiedades que se calculan dinámicamente en función de los datos del componente. Los computed se utilizan para evitar que se genere la plantilla HTML innecesariamente.

Los computed se definen como funciones JavaScript. Por ejemplo:

Fragmento de código

export default {
  data() {
    return {
      nombre: "Juan",
      apellido: "Pérez",
    };
  },

  computed: {
    nombreCompleto() {
      return this.nombre + " " + this.apellido;
    },
  },
};

En este ejemplo, el componente define una propiedad calculada llamada nombreCompleto. Esta propiedad calcula el nombre completo del usuario.

Watch

Los watch son funciones que se ejecutan cuando cambia un dato del componente. Los watch se utilizan para reaccionar a cambios en los datos del componente.

Los watch se definen como una función JavaScript. Por ejemplo:

Fragmento de código

export default {
  data() {
    return {
      nombre: "Juan",
      apellido: "Pérez",
    };
  },

  watch: {
    nombre(valor) {
      // Actualizar la plantilla HTML
    },
  },
};

En este ejemplo, el componente define un watch para la propiedad nombre. Este watch se ejecuta cuando cambia el valor de la propiedad nombre.

Destroyed

El destroyed es un hook de ciclo de vida de un componente Vue que se ejecuta después de que se ha eliminado el componente del DOM