Categoría: JavaScript

Edición de registros con vue-router (SPA)

Duilio Palacios 15/09/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Edición de registros con vue-router (SPA)

En esta lección vamos a trabajar en la acción para editar registros pero esta vez utilizando vue-router y en formato de SPA. Para ello haremos que el formulario de edición de tareas sea una página aparte (con una URL) y agregaremos el enlace desde el detalle del registro a la página de edición y por supuesto la redirección con vue-router y navegación programática una vez que la tarea haya sido editada.

Acciones para completar y eliminar tareas con vue-router (SPA)

Duilio Palacios 15/09/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Acciones para completar y eliminar tareas con vue-router (SPA)

En esta lección vamos a seguir practicando lo aprendido hasta el momento mientras reconstruimos el módulo de tareas como una SPA (Single Page Application) usando vue-router y repasamos otros conceptos como las clases de CSS dinámicas y los componentes globales de Vue.js.

Componente para crear registros con vue-router (SPA)

Duilio Palacios 14/09/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Componente para crear registros con vue-router (SPA)

En la lección de hoy practicaremos parte de lo que hemos aprendido a lo largo del curso, mientras creamos un nuevo componente para la creación de tareas, esta vez en formato de SPA utilizando vue-router.

Modo de historia HTML5 con Vue.js y Laravel

Duilio Palacios 01/09/2017
JavaScript, Laravel 5.5, Videotutorial, Vue.js Comentarios desactivados en Modo de historia HTML5 con Vue.js y Laravel

Hasta el momento en todas nuestras URLs tenemos un simbolo de numeral (#) y esto es debido a que el modo por defecto de vue-router es hash mode o modo hash. Este hash es utilizado para simular una URL y de esta forma evitar que la página sea recargada cuando la URL cambia. Esto no quiere decir que siempre debemos tener este hash en nuestra URL, podemos hacer que todas nuestras URLs queden más limpías si utilizamos el modo de historia de HTML5.

Rutas con nombre en vue-router

Duilio Palacios 23/08/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Rutas con nombre en vue-router

Algunas veces necesitamos alterar las URL de nuestras rutas, pero al no tener una forma de identificarlas se pueden presentar inconvenientes al momento de cambiarlas. vue-router nos permite identificar nuestras rutas mediante un nombre. Esto nos da la posibilidad de cambiar la URL de una ruta (por ejemplo de /tasks a /tareas o /mis-tareas) sin afectar el funcionamiento de la aplicación.

Rutas anidadas o sub-rutas con vue-router

Duilio Palacios 21/08/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Rutas anidadas o sub-rutas con vue-router

La mayoría de las aplicaciones están compuestas por múltiples componentes anidados unos dentro de otros y estos componentes suelen compartir los mismos segmentos de una URL (/tasks y /tasks/1, por ejemplo). vue-router nos da la posibilidad de crear rutas anidadas o sub-rutas para cubrir esta necesidad de una forma muy simple y de esta forma poder organizar mejor nuestro código y nuestras rutas.

Instalación y uso de Vue Router en Vue.js 2

Duilio Palacios 09/08/2017
JavaScript, Videotutorial, Vue.js 0 comentarios

Crear una aplicación de una sola página o SPA (por sus siglas en inglés “Single Page Application”) es muy sencillo con Vue.js.

Esto es debido a que con Vue.js nosotros podemos “componer” nuestra aplicación de pequeños componentes independientes como hemos aprendido hasta ahora y también contamos con un paquete llamado vue-router que nos permite atar o enlazar una o más URLs a uno o más componentes específicos, indicarle a Vue dónde queremos mostrar las secciones y por supuesto también nos ayuda a generar los enlaces de las diferentes secciones.

Es por ello que a partir de ahora crearemos componentes con la intención de que estos representen secciones o sub-secciones dentro de nuestra aplicación y vamos a instalar y a utilizar vue-router para enlazar estos componentes a diferentes URLs. Vamos a comenzar con un ejemplo sencillo en el siguiente video:

Ver post

Organización de los componentes en Vue.js 2

Duilio Palacios 08/08/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Organización de los componentes en Vue.js 2

Si quieres crear un SPA con Vue 2, es posible que necesites agregar muchos componentes, por lo tanto sería conveniente organizarlos en diferentes subdirectorios y esto es lo que haremos en la siguiente lección, apoyándonos por supuesto de vue-cli y de webpack como ya hemos aprendido. Además veremos tips adicionales sobre cómo usar objetos globales, configurar PurifyCSS y más.

Reduciendo el tamaño del CSS en un 90% con PurifyCSS, webpack y vue-loader

Duilio Palacios 25/05/2017
JavaScript, Videotutorial, Vue.js 1 Comentario

Una de las desventajas de utilizar Bootstrap es que nuestro CSS se hace muy pesado (117Kb en su versión comprimida), así que en esta lección bonus del curso de Vue 2, vamos a utilizar la versión para webpack del plugin PurifyCSS para «purificar» el CSS eliminando así todos los selectores de Bootstrap que no se están utilizando. Con esto lograremos reducir el tamaño del CSS de 117Kb a tan solo 12Kb (aproximadamente un 90%).

Extraer CSS con webpack y vue-loader

Duilio Palacios 25/05/2017
JavaScript, Videotutorial, Vue.js Comentarios desactivados en Extraer CSS con webpack y vue-loader

Actualmente todo el CSS agregado en los componentes de Vue está siendo alojado en el archivo build.js y luego cargado en línea en el encabezado del HTML utilizando etiquetas <style>. En esta lección voy a utilizar un plugin de webpack para extraer todo el CSS definido en los componentes de Vue (incluyendo el código importado de Bootstrap) a un archivo aparte (style.css).