Vue.js es un framework JavaScript de código abierto para construir interfaces de usuario y aplicaciones de una sola página. La curva de aprendizaje, es relativamente baja si manejas bien JavaScript. La página oficial (que cuenta con traducción al español) tiene una documentación bien explicada para dar tus primeros pasos.
Con la explicación que da la documentación vamos a incursionar en nuestra primera aplicación: una lista de tareas básico (que será la base para mejoras futuras usando este framework).
Esta aplicación consiste en una lista de tareas, abajo irá una caja de texto y un botón que al pulsarlo añadirá el texto a la lista. DEMO
Primer paso, hagamos referencia a la librería vue.js, la cabecera del documento HTML.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
Vamos a crear unos archivos para el Javascript, que nombraremos code_vue.js y el archivo HTML le nombraremos index.html.
El archivo index.html dentro de las etiquetas <body> tendrá esta estructura, que iremos explicando brevemente.
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
<input ref="item" v-model="message" placeholder="Escriba" />
<button v-on:click="addItem">Añadir item</button>
</div>
El el <div> especificamos el atributo id como app, este será el dominio o marco de trabajo de nuestro código con Vue.
Dentro de la etiqueta de lista <ol> hacemos uso de la directiva v-for, que nos permite mostrar una serie de elementos de un Array. En este caso estamos indicando que la etiqueta <li> se repetirá por cada elemento encontrado en el Array todos.
Ahora tenemos la caja de texto <input> que esta con un atributo ref con un valor, esto es un identificador, que usaremos más tarde. Y aquí trabajamos con otra directiva, v-model, que crea un enlace bidireccional entre el valor de la caja de texto y la variable que definimos, en este caso message.
Finalmente el botón Añadir item, tiene la directiva v-on que permite trabajar con eventos e invocar los métodos correspondientes. En este caso indicamos que usamos el evento click invocará al método addItem, que añadirá el texto de la caja al listado.
Ahora veamos el archivo code_vue.js, y explicaremos también:
var app = new Vue({
el: '#app',
data: {
message: '',
todos: [
{ text: 'Aprende JavaScript' },
{ text: 'Aprende Vue' },
{ text: 'Aprende Python' }
]
},
methods: {
addItem: function () {
this.todos.push({text: this.message});
this.message = "";
this.$refs.item.focus();
}
}
})
Vamos por partes, creamos una instancia de la clase Vue. La estructura que sigue tiene el formato de una colección de objetos.
El primer elemento el, tiene el valor #app, que es el identificador de la aplicación en el HTML.
El elemento data, contiene los valores con los que trabajaremos. La variable message define el valor que tendrá la caja de texto que pusimos en el HTML, y la variable todos es un Array que, cuyo identificador text, tendrá diferentes valores ya inicializados, y que contendrá luego el nuevo elemento que añadiremos.
Y el elemento methods, define la función addItem, que hará que el texto de la variable message, pase al Array todos. Como también borrar el valor de la caja una vez añadido al Array y colocar el cursor en esta (para ello usamos el valor del atributo ref en la caja de texto) listo para escribir el siguiente valor.
Si tienes conocimiento en HTML y Javascript te darás cuenta que el código es sencillo de entender. Es una de las ventajas que se consigue con Vue.js.
Mas adelante iremos mejorando nuestro lista de tareas, que nos permite editar o eliminar, y trabajar con un base de datos. Atentos a próximas entregas.