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 crear interfaces de usuario. Está construido sobre los estándares de HTML, CSS y JavaScript, y proporciona un modelo de programación declarativo y basado en componentes que te ayuda a desarrollar interfaces de usuario de manera más eficiente, ya sean simples o complejas.

Aquí tienes un pequeño ejemplo:

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++">
    El contador está en: {{ count }}
  </button>
</div>

Resultado

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

• El Renderizado Declarativo: Vue amplía el HTML estándar con una sintaxis de plantilla que nos permite describir de forma declarativa la salida HTML en función al 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 de alto nivel 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 eso en mente, Vue está diseñado para ser flexible y ser adoptado de forma incremental. Dependiendo de tu caso de uso, Vue se puede usar de diferentes maneras:

• Mejorar el HTML estático sin un paso de compilación
• Incrustar componentes web en cualquier página
• Aplicaciones de una sola página (SPA)
• Fullstack / Renderizado del lado del servidor (SSR)
• Jamstack / Generación de sitios estáticos (SSG)
• Orientación hacia aplicaciones de escritorio, móvil, WebGL o incluso de 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 estos.

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

A pesar de su flexibilidad, el conocimiento central sobre cómo funciona Vue se comparte en todos estos casos de uso. Incluso si ahora eres solo un principiante, el conocimiento adquirido en el camino seguirá siendo útil a medida que crezcas para abordar metas más ambiciosas en el futuro. Si eres un veterano, puedes elegir la forma óptima de aprovechar Vue en función de los problemas que estás tratando de resolver mientras mantienes la misma productividad. Es por eso que llamamos a Vue "El Framework Progresivo": es un framework que puede crecer contigo y adaptarse a tus necesidades.

Componentes de un Solo Archivo (SFC) ​

En la mayoría de los proyectos de Vue habilitados para herramientas de compilación, creamos componentes de Vue utilizando 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 sugiere el nombre, encapsula la lógica del componente (JavaScript), la plantilla (HTML) y los estilos (CSS) en un solo archivo. Aquí está el ejemplo anterior, escrito en formato SFC:

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

<template>
  <button @click="count++">El contador está en: {{ 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++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
  font-weight: bold;
}
</style>

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

Tipos de API ​

Los componentes de Vue se pueden crear con dos tipos de API diferentes: Options API y Composition API.

Options API ​

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

<script>
export default {
  // Las propiedades retornadas desde data() pasan a un estado
  // reactivo y serán mostradas en el `this`.
  data() {
    return {
      count: 0
    }
  },

  // Los métodos son funciones que mutan el estado y disparan
  // actualizaciones. Estos pueden ser ligados como manejadores de
  // eventos en las plantillas.
  methods: {
    increment() {
      this.count++
    }
  },

  // Los hooks del ciclos de vida son llamados en diferentes
  // etapas del ciclo de vida del componente.
  // Esta función será llamada cuando el componente sea montado.
  mounted() {
    console.log(`El conteo inicial es ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">El conteo es de: {{ count }}</button>
</template>

Pruébalo en la Zona de Práctica

Composition API ​

Con la Composition API, definimos la lógica de un componente utilizando funciones importadas de la API. En un SFC, la Composition API se usa normalmente con <script setup>. El atributo setup es una indicación que hace que Vue realice transformaciones en tiempo de compilación, lo que nos permiten usar la Composition API con menos repeticiones. Por ejemplo, las importaciones y las variables/funciones de nivel superior declaradas en un <script setup> se pueden usar directamente en la plantilla.

Aquí está el mismo componente, con exactamente la misma plantilla, pero usando la 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(`El conteo inicial es ${count.value}.`)
})
</script>

<template>
  <button @click="increment">El conteo es de: {{ count }}</button>
</template>

Pruébalo en la Zona de Práctica

¿Cuál elegir? ​

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

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

La Composition API se centra en la declaración de variables de estado reactivas directamente en el ámbito de una función y en la composición del estado de múltiples funciones para manejar juntas la complejidad. Tiene una forma más libre y requiere una comprensión de cómo funciona la reactividad en Vue para ser utilizada de manera efectiva. A cambio, su flexibilidad permite patrones más poderosos para organizar y reutilizar la lógica.

Puedes obtener más información sobre la comparación entre los dos estilos y los posibles beneficios de la Composition API en FAQ sobre la Composition API.

Si eres nuevo en Vue, esta es nuestra recomendación general:

• Para propósitos de aprendizaje, elige el estilo que te parezca más fácil de entender. Una vez más, la mayoría de los conceptos básicos se comparten entre los dos estilos. Siempre puedes tomar el otro estilo en cualquier momento.

• Para uso en producción:

  • Elije la Options API si no estás utilizando herramientas de compilación o planeas usar Vue principalmente en escenarios de baja complejidad; por ejemplo, para mejoras progresivas.

  • Elije la Composition API + Componentes de un Solo Archivo si planeas crear aplicaciones completas con Vue.

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

¿Aún tienes preguntas? ​

Echa un vistazo a nuestra FAQ.

Elije tu ruta de aprendizaje ​

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