En esta lección vamos entonces a comenzar con el desarrollo de nuestra pequeña aplicación CRUD con Vue: vamos a comenzar definiendo un listado de tareas de prueba en nuestro objeto VM y luego vamos a convertir nuestro HTML estático en una plantilla dinámica de Vue.js.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Notas

Recordemos que para añadir clases de CSS de forma dinámica a un elemento usamos: v-bind:class (o su versión corta :class).

En este caso las clases editing y completed se añadirán o eliminarán dependiendo del valor de task.pending y task.editing.

Repasa la definición de clases y estilos de CSS de forma dinámica con Vue.js 2.

Es importante ir probando poco a poco los cambios que añadimos a nuestro código, porque así será más fácil detectar posibles errores. Si agregamos un cambio y todo deja de funcionar podremos saber que el error se encuentra en este último cambio que realizamos. Esta filosofía la hemos aprendido en el curso Crea una aplicación con Laravel 5.3 y 5.4.

En lecciones anteriores vimos la etiqueta <template> que nos permite agrupar diferentes etiquetas sin alterar el DOM. En nuestra aplicación de tareas la usamos de forma dinámica para mostrar los campos de edición o simple texto y los diferentes iconos dependiendo del estado de la tarea.

Repasa el uso de la etiqueta template de Vue.js y el uso de las directivas v-if y v-else.

Podemos probar que el listado de nuestra aplicación ya es dinámico y funciona manipulando el array vm.tasks directamente desde la consola del navegador:

Puedes también (y es muy recomendado) utilizar Vue.js devtools para depurar tu aplicación de Vue, como aprendimos en la lección primeros pasos con Vue.js.

Para mejorar un poco el flujo de trabajo, en la siguiente lección usaré un archivo app.js donde estará todo el código de JavaScript y por supuesto haré referencia a dicho archivo desde index.html con <script src="app.js"></script>.

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Lección anterior Crea tu primera aplicación con Vue.js 2 Lección siguiente Creación de registros a través de formularios con Vue.js 2