¿Qué es Vue.js?
Vue (pronunciado /vjuː/) es un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde la base para poder adoptarse de forma incremental. La librería principal se centra sólo en la capa de visualización, y es fácil añadir e integrar otras librerías o proyectos existentes. Por otro lado, Vue es perfectamente capaz de ser el motor de aplicaciones de página única (Single-Page) cuando se usa en combinación con herramientas modernas y librerías de soporte.
Si quieres saber más acerca de Vue antes de continuar, hemos creado un vídeo (en inglés) sobre los principios del núcleo (core) y un proyecto de ejemplo.
Si eres un programador front experimentado y quieres saber como se compara Vue con otras librerías y frameworks, echa un vistazo a la comparación con otro frameworks (en inglés).
Empezando
La guía oficial asume un nivel medio de HTML, CSS y JavaScript. Si eres nuevo en el desarrollo front, puede que no sea una gran idea empezar directamente con un framework como primer paso. ¡Echa un vistazo a los fundamentos y retómalo después! Tener experiencia con otros frameworks te ayudará, pero no es necesario.
La manera más sencilla de probar Vue.js es usar el Ejemplo de Fiddle Hola Mundo. Puedes abrirlo en otra pestaña y continuar conjuntamente mientras vemos ejemplos básicos. O, puedes crear un fichero index.html e incluir Vue mediante:
|
1 2 |
<!--version de desarrollo, incluye avisos en consola útiles --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
o:
|
1 2 |
<!-- versión de producción, optimizada por tamaño y velocidad --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> |
La página de instalación (en inglés) ofrece más opciones para instalar Vue. No se recomienda a los principiantes empezar con vue-cli, especialmente si no están familiarizados con las herramientas de construcción (build) basadas en Node.js.
Renderizado declarativo
En el núcleo de Vue.js hay un sistema que nos permite renderizar datos en el DOM de forma declarativa, usando una sintaxis muy directa en la plantilla:
|
1 2 3 |
<div id="app"> {{ message }} </div> |
|
1 2 3 4 5 6 |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) |
¡Acabamos de crear nuestra primera aplicación Vue! Esto se parece bastante a renderizar una cadena, pero Vue ha hecho un montón de trabajo por detrás. Los datos y el DOM ahora están unidos, y ahora todo es reactivo. ¿Cómo lo sabemos? Abre la consola JavaScript del navegador (ahora mismo, en esta página) y cambia el valor de app.message.(Nota del traductor: sólo funcionará en la página original). El ejemplo debería actualizarse de acuerdo con el nuevo valor.
Además de la interpolación de texto, podemos vincular atributos tal que así:
|
1 2 3 4 5 6 |
<div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> |
|
1 2 3 4 5 6 |
var app2 = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date().toLocaleString() } }) |
Aquí encontramos una novedad. El atributo v-bind que vemos es lo que llamamos una directiva. Las directivas tienen el prefijo v- que indica que son atributos especiales proporcionados por Vue, y como habrás imaginado, aplican un comportamiento reactivo al DOM renderizado. Aquí, básicamente está diciendo «mantén el atributo title del elemento actulizado con la propiedad message de la instancia de Vue.»
Si abres una consola de JavaScript de nuevo y tecleas:
app2.message = 'nuevo mensaje', verás otra vez que el HTML vinculado – en este caso el atributo title – se ha actualizado.
Condicionales y bucles
Es sencillo hacer aparecer o desaparecer un elemento:
|
1 2 3 |
<div id="app-3"> <span v-if="seen">Now you see me</span> </div> |
|
1 2 3 4 5 6 |
var app3 = new Vue({ el: '#app-3', data: { seen: true } }) |
Introduce app3.seen = false en la consola. El mensaje debería desaparecer.
Este ejemplo demuestra que podemos vincular datos no sólo a texto y atributos, sino también a la estructura del DOM. Además, Vue también proporciona un sistema de efectos de transición que puede aplicar de forma automática efectos de transición cuando se eliminan/actualizan/añaden elementos.
Hay varías directivas más, cada una con su funcionalidad. Por ejemplo, la directiva v-for puede usarse para mostrar un listado de elementos usando los datos de un array:
|
1 2 3 4 5 6 7 |
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> |
|
1 2 3 4 5 6 7 8 9 10 |
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) |
En la consola, introduce app4.todos.push({ text: 'New item' }). Deberías ver como un nuevo elemento se añade a la lista.
Manejando las entradas de usuario
Para permitir a los usuarios interactuar con nuestra aplicación, podemos usar la directiva v-on para añadir escuchadores de eventos que invocan métodos en nuestras instancias de Vue:
|
1 2 3 4 |
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) |
Fíjate 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 escribimos está enfocado en la lógica subyacente.
Vue también proporciona la directiva v-model que hace que la vinculación bidireccional entre los datos del formulario y el estado de la aplicación sea muy sencilla.
|
1 2 3 4 |
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> |
|
1 2 3 4 5 6 |
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) |
Componiendo con componentes
El sistema de componentes es otro concepto importante en Vue, porque es una abstracción que nos permite construir aplicaciones a gran escala compuestas de componentes más pequeños, autocontenidos y a menudo reusables. Si lo pensamos, casi cualquier interfaz de aplicación puede ser abstraído en un árbol de componentes.
En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas. Registrar un componente en Vue es directo:
|
1 2 3 4 |
// Define un nuevo componente llamado todo-item Vue.component('todo-item', { template: '<li>This is a todo</li>' }) |
Ahora puedes usarlo en la plantilla de otro componente:
|
1 2 3 4 |
<ol> <!-- Crea una instancia del componente todo-item --> <todo-item></todo-item> </ol> |
Pero este renderizaría el mismo texto para cada elemento ‘todo’, lo cual no es demasiado interesante. Deberíamos ser capaces de pasar datos desde el padre hasta los componentes hijos. Modifiquemos la definición del componente para que acepte un ‘prop’ (en inglés)
|
1 2 3 4 5 6 7 |
Vue.component('todo-item', { // El componente todo-item ahora acepta un // "prop", que es como un atributo personalizado. // Este prop se llama 'todo'. props: ['todo'], template: '<li>{{ todo.text }}</li>' }) |
Ahora podemos pasar el ‘todo’ en cada iteración del componente usando v-bind:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="app-7"> <ol> <!-- Proporcionamos cada todo-item con el objeto 'todo' que representa, de forma que sus contenidos son dinámicos. También debemos proporcionar a cada componente una 'clave', que explicaremos después. --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) |
Con este ejemplo hemos conseguido separar nuestra aplicación en dos unidades más pequeñas, y el hijo esta razonablemente bien desacoplado del padre a través de la interfaz props. Podemos mejorar nuestro componente todo-item con una plantilla y una lógica más complejas sin afectar al padre.
En una aplicación grande, es necesario dividir la aplicación entera en componentes para hacer el desarrollo manejable. Hablaremos más acerca de los componentes más adelante, pero aquí tenemos un ejemplo del aspecto que podría tener la plantilla de una aplicación con componentes.
|
1 2 3 4 5 6 7 |
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div> |
Relación con componentes personalizados
Habrás notado que los componentes Vue son muy parecidos a los Elementos Personalizados, que es parte de la Especificaciones de Componentes Web (en inglés). Esto es porque la sintaxis de los componentes de Vue están ligeramente modeladas sobre estas especificaciones. Por ejemplo, los componentes de Vue implementan la API Slot (en inglés) y el atributo especial is. Sin embargo, hay unas pocas diferencias clave:
- La Especificación de los Componentes Web aún esta en estado borrador, y no está implementada de forma nativa en todo los navegadores. En comparación, los componentes de Vue no requieren ningún polyfill y funcionan correctamente en los navegadores soportados (IE9 y superior). Cuando es necesario, los componentes de Vue pueden ‘envolverse’ dentro de un elemento nativo personalizado.
- Los componentes de Vue proporcionan características importantes que no están disponibles en los elementos personalizados convencionales, siendo las más importantes el flujo de datos entre componentes, comunicación con eventos personalizados e integraciones de herramientas de construcción.
¿Listo para más?
Hemos introducido brevemente las características más básicas del núcleo de Vue.js – el resto de esta guía tratará el resto de estas y otras características más avanzadas con mucho más detalle, ¡así que asegúrate de no perderte nada!
Nota: puedes encontrar el artículo original en https://vuejs.org/v2/guide/