# Introducción
Nota
¿Ya conoce Vue 2 y solo quiere aprender sobre lo nuevo que hay en Vue 3? Visite la Guía de Migración!
# ¿Qué es Vue.js?
Vue (pronunciado /vjuː/, como view) es un framework progresivo para la construcción de interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser adoptable incrementalmente. La libreía base está enfocada solo en la capa de vista, y es fácil integrarla con otras librerías o proyectos existentes. Por otro lado, Vue es también perfectamente capaz de impulsar Single-Page Aplicaciones sofisticados cuando es utilizado en combinación con herramientas modernas y librerías de soporte (opens new window).
Si a usted le gustaría aprender más sobre Vue antes de adentrarse, nosotros creamos un vídeo que lo guiará a través de los principios básicos y un proyecto de ejemplo.
# Empezando
TIP
La guía oficial asume un conocimiento intermedio de HTML, CSS y JavaScript. Si usted es completamente nuevo en el desarrollo de frontend, puede que no sea la mejor idea saltar directamente a un framework como su primer paso, ¡aprenda lo básico y luego vuelva! La experiencia previa con otros frameworks ayuda, pero no es requerida.
La más facil manera de probar Vue.js es utilizar el Ejemplo Hola Mundo (opens new window). Siéntase libre de abrirlo en otra pestaña y sígalo mientras vamos a través de algunos ejemplos básicos.
La página de Instalación proporciona más opciones para instalar Vue. Nota: No recomendamos que los principiantes empiecen con vue-cli, especialmente si no está familiarizado con las herramientas de construcción basadas de Node.js.
# Renderización Declarativa
En el núcleo de Vue.js se encuentra un sistema que nos permite renderizar datos declarativamente en el DOM utilizando una sintaxis de plantilla sencilla:
<div id="counter">
Counter: {{ counter }}
</div>
2
3
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
2
3
4
5
6
7
8
9
¡Hemos creado nuestra primera aplicación Vue! Esto luce muy similar a renderizar una plantilla que contiene cadenas de caracteres, pero Vue ha hecho mucho trabajo detrás de escenas. Los datos y el DOM ahora están vinculados, y todo es reactivo. ¿Cómo lo sabemos? Vea el ejemplo siguiente donde la propiedad counter incrementa cada segundo y verá como cambia el DOM renderizado:
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
2
3
4
5
6
7
8
9
10
11
12
Counter: 0
Además de la interpolación de texto, podemos también vincular atributos de elementes así:
<div id="bind-attribute">
<span v-bind:title="message">
¡Pase el cursor sobre mí por unos segundos para observar el título mío vinculado dinámicamente!
</span>
</div>
2
3
4
5
const AttributeBinding = {
data() {
return {
message: 'Cargó esta página en ' + new Date().toLocaleString()
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
2
3
4
5
6
7
8
9
See the Pen Attribute dynamic binding by Vue (@Vue) on CodePen.
Aquí estamos encontrando algo nuevo. El atributo v-bind que ve es llamado una directiva. Las directivas son prefijado con v- para indicar que son atributos especiales proporcionados por Vue, y como habrá advinado, aplican comportamientos reactivos especiales al DOM renderizado. Aquí, básicamente estamos hablando de "Deja el atributo title de este elemento actualizado co la propiedad message en la instancia actual activa."
# Manejar la Entrada del Usuario
Para permitir a los usuarios interactuar con nuestro aplicación, podemos utilizar la directiva v-on para vincular eventos de escucha que invoquen métodos en nuestras instancias:
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Mensaje Invertido</button>
</div>
2
3
4
const EventHandling = {
data() {
return {
message: '¡Hola Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
See the Pen Manipulación de Eventos by Vue (@Vue) on CodePen.
Note que en este método actualizamos el estado de nuestra aplicación sin tocar el DOM, todas las manipulaciones del DOM son manejadas por Vue, y el código que usted escribe está enfocado en la lógica que hay debajo.
Vue también proporciona la directiva v-model que hace muy sencilla la vinculación de doble dirección entre formulario de entrada y el estado de la aplicación:
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
2
3
4
const TwoWayBinding = {
data() {
return {
message: '¡Hola Vue!'
}
}
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding')
2
3
4
5
6
7
8
9
See the Pen Vinculación de Doble Dirección by Vue (@Vue) on CodePen.
# Condicionales y Ciclos
Es sencillo también alternar la presencia de un elemento:
<div id="conditional-rendering">
<span v-if="seen">Ahora me ve</span>
</div>
2
3
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
2
3
4
5
6
7
8
9
Este ejemplo demuestra que podemos vincular datos no solo a texto y atributos, sino también a la estructura del DOM. Además, Vue proporciona también un poderoso sistema de transición de efectos que puede automáticamente aplicar transición de efectos cuando los elementos son insertados/actualizados/eliminados por Vue.
Puede cambiar seen de true a false en el sandbox que sigue para observar lo que ocurre:
See the Pen Renderización Condicional by Vue (@Vue) on CodePen.
Existen bastantes otras directivas, cada una con su funcionalidad especial. Por ejemplo, la directiva v-for puede ser utilizada para mostrar una lista de elementos empleando datos de un Array:
<div id="list-rendering">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
2
3
4
5
6
7
const ListRendering = {
data() {
return {
todos: [
{ text: 'Aprender JavaScript' },
{ text: 'Aprender Vue' },
{ text: 'Construir algo asombroso' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')
2
3
4
5
6
7
8
9
10
11
12
13
See the Pen Renderización de Listas by Vue (@Vue) on CodePen.
# Composición mediante Componentes
El sistema de componentes es otro concepto importante en Vue, porque es una abstracción que nos permite construir aplicaciones a gran escala compuestos de componentes pequeños, auto-contenidos, y usualmente reutilizables. Si lo pensamos, casi todo tipo de interfaz de aplicación puede ser abstraída en un árbol de componentes:
En vue, un componente es escencialmente una instancia con opciones predefinidas. Registrar un componente en Vue es sencillo: creamos un objeto componente como hicimos con el objeto app y lo definimos en la opción components en su padre:
const TodoItem = {
template: `<li>Esto es un todo</li>`
}
// Crea aplicación Vue
const app = Vue.createApp({
components: {
TodoItem // Registrar un nuevo componente
},
... // Otros props para el componente
})
// Montar la aplicación Vue
app.mount(...)
2
3
4
5
6
7
8
9
10
11
12
13
14
Ahora puede componenrlo en la plantilla del otro componente:
<ol>
<!-- Crea una instancia del componente todo-item -->
<todo-item></todo-item>
</ol>
2
3
4
Pero este va a renderizar el mismo texto para cada todo, lo cual no es muy interesante. Deberíamos ser capaces de pasar datos a los componentes hijos desde el padre. Vamos a modificar la definición del componente para que acepte un prop:
const TodoItem = {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
}
2
3
4
Ahora podemos pasar el todo en cada componente repetido utilizando v-bind:
<div id="todo-list-app">
<ol>
<!--
Ahora proporcionamos cada todo-item con el objeto todo
que está representando, por lo que su contenido puede
ser dinámico.
También necesitamos proporcionar cada componente con una "key",
lo cual explicaremos luego.
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const TodoItem = {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
}
const TodoList = {
data() {
return {
groceryList: [
{ id: 0, text: 'Verduras' },
{ id: 1, text: 'Queso' },
{ id: 2, text: 'Cualquiera otra cosa que se supone que coman los humanos' }
]
}
},
components: {
TodoItem
}
}
const app = Vue.createApp(TodoList)
app.mount('#todo-list-app')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
See the Pen Intro-Components-1 by Vue (@Vue) on CodePen.
Este es un ejemplo inventado, pero hemos logrado separar nos aplicación en dos unidades pequeñas, y el hijo está bien desacoplado del padre mediante el uso de la interfaz props. Ahora podemos mejorar nuestro componente <todo-item> con una plantilla y lógica más compleja sin afectar la aplicación padre.
En una aplicación grande, es necesario dividir toda la aplicación en componentes para hacer el desarrollo manejable. Hablaremos más sobre componentes más adelante en esta guía, pero aquí brinadamos un ejemplo(imaginario) de como se vería la plantilla de una aplicación con componentes:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
2
3
4
5
6
7
# Relación a Elementos Personalizados
Puede haber notado que los componentes de Vue son muy similares a los Elementos Personalizados, los cuales son una parte de la Especificación de Componentes Web (opens new window). en efecto, un parte del diseño del componente de Vue(por ejemplo el API de slot) son influido por la especificación antes de que fuera implementado nativamente en los navegadores.
La mayor diferencia es que el modelo del componente de Vue es diseñado como un parte de un framework coherente que proporciona muchas características adicionales necesarias para construir aplicaciones no trivales, por ejemplo el gestión de plantillas y estados reactivos - ninguno de los dos está cubrido por la especificación.
Vue también proporciona un gran soporte tanto para consumir como para crear elementos personalizados, por más detalles, visite la sección Vue y Componentes Web.
# ¿Listo para más?
Hemos introducido brevemente las características más fundamentales del núcleo de Vue.js - el resto de esta guía las cubrirá y otras características avanzadas con detalles más finos, así que asegúrense de leer todo!