Introducción ​

Aprende Vue con tutoriales en video en VueMastery.com

¿Qué es Vue? ​

Vue (pronunciado /vjuː/, como view) es un framework de JavaScript para construir interfaces de usuario. Se basa en HTML, CSS y JavaScript estándar y proporciona un modelo de programación declarativo y basado en componentes que te ayuda a desarrollar de manera eficiente interfaces de usuario de cualquier complejidad.

Aquí tienes un ejemplo mínimo:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    La Cuenta es: {{ count }}
  </button>
</div>

Resultado

El ejemplo anterior demuestra las dos características principales de Vue:

• Renderizado Declarativo: Vue extiende el HTML estándar con una sintaxis de template que nos permite describir declarativamente la salida HTML basándose en el estado de JavaScript.

• Reactividad: Vue rastrea automáticamente los cambios de estado de JavaScript y actualiza de manera eficiente el DOM cuando ocurren cambios.

Es posible que ya tengas preguntas; no te preocupes. Cubriremos cada pequeño detalle en el resto de la documentación. Por ahora, sigue leyendo para que puedas tener una comprensión general de lo que ofrece Vue.

El Framework Progresivo ​

Vue es un framework y un ecosistema que cubre la mayoría de las características comunes necesarias en el desarrollo frontend. Pero la web es extremadamente diversa; las cosas que construimos en la web pueden variar drásticamente en forma y escala. Con esto en mente, Vue está diseñado para ser flexible y adaptable de forma incremental. Dependiendo de tu caso de uso, Vue puede utilizarse de diferentes maneras:

• Mejorando HTML estático sin un paso de construcción
• Incrustado como Web Components en cualquier página
• Aplicación de Una Sola Página (SPA)
• Fullstack / Renderizado del Lado del Servidor (SSR)
• Jamstack / Generación de Sitios Estáticos (SSG)
• Orientado a escritorio, móvil, WebGL e incluso la terminal

Si encuentras estos conceptos intimidantes, ¡no te preocupes! El tutorial y la guía solo requieren conocimientos básicos de HTML y JavaScript, y deberías poder seguirlos sin ser un experto en ninguno de ellos.

Si eres un desarrollador experimentado interesado en cómo integrar mejor Vue en tu stack, o tienes curiosidad sobre lo que significan estos términos, los discutimos con más detalle en Formas de Usar Vue.

A pesar de la flexibilidad, el conocimiento central sobre cómo funciona Vue se comparte en todos estos casos de uso. Incluso si eres un principiante ahora, el conocimiento adquirido a lo largo del camino seguirá siendo útil a medida que crezcas para abordar objetivos más ambiciosos en el futuro. Si eres un veterano, puedes elegir la forma óptima de aprovechar Vue basándote en los problemas que intentas resolver, manteniendo la misma productividad. Por eso llamamos a Vue "El Framework Progresivo": es un framework que puede crecer contigo y adaptarse a tus necesidades.

Componentes de un Solo Archivo ​

En la mayoría de los proyectos Vue que utilizan herramientas de construcción, creamos componentes Vue usando un formato de archivo similar a HTML llamado Componente de un Solo Archivo (también conocido como archivos *.vue, abreviado como SFC). Un SFC de Vue, como su nombre indica, encapsula la lógica (JavaScript), el template (HTML) y los estilos (CSS) del componente en un solo archivo. Aquí tienes el ejemplo anterior, escrito en formato SFC:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">La Cuenta es: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">La Cuenta es: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC es una característica distintiva de Vue y es la forma recomendada de crear componentes Vue si tu caso de uso justifica una configuración de construcción. Puedes aprender más sobre el cómo y por qué de los SFC en su sección dedicada, pero por ahora, solo ten en cuenta que Vue se encargará de toda la configuración de las herramientas de construcción por ti.

Estilos de API ​

Los componentes Vue pueden crearse en dos estilos de API diferentes: Options API y Composition API.

Options API ​

Con Options API, definimos la lógica de un componente usando un objeto de opciones como data, methods y mounted. Las propiedades definidas por las opciones se exponen en this dentro de las funciones, lo que apunta a la instancia del componente:

<script>
export default {
  // Las propiedades retornadas desde data() se tornan
  // estado reactivo y se expondrán en `this`.
  data() {
    return {
      count: 0
    }
  },

  // Los métodos son funciones que mutan el estado y disparan actualizaciones.
  // Se pueden vincular como gestores de eventos en los templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Los hooks del ciclo de vida se llaman en diferentes etapas
  // del ciclo de vida del componente.
  // Esta función se llamará cuando se monte el componente.
  mounted() {
    console.log(`La cuenta inicial es ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">La Cuenta es: {{ count }}</button>
</template>

Pruébalo en el Playground

Composition API ​

Con Composition API, definimos la lógica de un componente usando funciones de API importadas. En SFC, Composition API se utiliza típicamente con <script setup>. El atributo setup es una indicación que hace que Vue realice transformaciones en tiempo de compilación que nos permiten usar Composition API con menos boilerplate. Por ejemplo, las importaciones y las variables/funciones de nivel superior declaradas en <script setup> son directamente utilizables en el template.

Aquí está el mismo componente, con la misma template, pero usando Composition API y <script setup> en su lugar:

<script setup>
import { ref, onMounted } from 'vue'

// estado reactivo
const count = ref(0)

// funciones que mutan el estado y disparan actualizaciones
function increment() {
  count.value++
}

// hooks del ciclo de vida
onMounted(() => {
  console.log(`La cuenta inicial es ${count.value}.`)
})
</script>

<template>
  <button @click="increment">La Cuenta es: {{ count }}</button>
</template>

Pruébalo en el Playground

¿Cuál Elegir? ​

Ambos estilos de API son completamente capaces de cubrir casos de uso comunes. Son interfaces diferentes impulsadas por el mismo sistema subyacente. De hecho, ¡la Options API está implementada sobre la Composition API! Los conceptos fundamentales y el conocimiento sobre Vue se comparten entre los dos estilos.

La Options API se centra en el concepto de "instancia de componente" (this como se ve en el ejemplo), lo que generalmente se alinea mejor con un modelo mental basado en clases para usuarios provenientes de lenguajes orientados a objetos. También es más amigable para principiantes al abstraer los detalles de reactividad y al hacer cumplir la organización del código a través de grupos de opciones.

La Composition API se centra en declarar variables de estado reactivas directamente en un ámbito de función y en componer el estado a partir de múltiples funciones para manejar la complejidad. Es más de estilo libre y requiere una comprensión de cómo funciona la reactividad en Vue para ser utilizada eficazmente. A cambio, su flexibilidad permite patrones más potentes para organizar y reutilizar la lógica.

Puedes aprender más sobre la comparación entre los dos estilos y los beneficios potenciales de Composition API en las Preguntas Frecuentes de la Composition API.

Si eres nuevo en Vue, aquí está nuestra recomendación general:

• Para propósitos de aprendizaje, opta por el estilo que te resulte más fácil de entender. De nuevo, la mayoría de los conceptos centrales se comparten entre los dos estilos. Siempre puedes aprender el otro estilo más adelante.

• Para uso en producción:

  • Opta por Options API si no estás usando herramientas de construcción, o planeas usar Vue principalmente en escenarios de baja complejidad, por ejemplo, mejora progresiva.

  • Opta por Composition API + Componentes de un Solo Archivo si planeas construir aplicaciones completas con Vue.

No tienes que comprometerte con un solo estilo durante la fase de aprendizaje. El resto de la documentación proporcionará ejemplos de código en ambos estilos cuando sea aplicable, y puedes alternar entre ellos en cualquier momento usando los interruptores de Preferencia de API en la parte superior de la barra lateral izquierda.

¿Aún Tienes Preguntas? ​

Consulta nuestras Preguntas Frecuentes.

Elige Tu Ruta de Aprendizaje ​

Diferentes desarrolladores tienen diferentes estilos de aprendizaje. Siéntete libre de elegir una ruta de aprendizaje que se adapte a tus preferencias, ¡aunque sí recomendamos revisar todo el contenido, si es posible!