Puesto que dicen que «la práctica hace al maestro», en esta lección vamos a practicar lo aprendido hasta ahora, creando dos nuevos componentes: primero vamos a crear un componente para representar al listado de tareas (al cual llamaremos TaskList.vue) y luego crearemos otro componente que agrupará la lógica y la plantilla para crear nuevas tareas (y a este lo llamaremos TaskForm.vue). Así que en la lección de hoy podrás ver más ejemplos de cómo separar tu código usando componentes de un solo archivo (Single File Components), más uso de ES6 con Vue.js y todo esto de nuevo por supuesto de nuevo con la ayuda de webpack y vue-loader.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Una de las ventajas de este nuevo flujo de trabajo con webpack, es que ahora tenemos a nuestra disposición poderosos pre-procesadores como vue-loader que nos permite agrupar el código de nuestros componentes en archivos .vue entre muchas otras ventajas. Una de estas ventajas, que veremos en esta lección, es la eliminación de las restricciones del navegador impuestas cuando colocamos nuestras plantillas en el HTML final. Puesto que ahora las plantillas de Vue van a ser pre-procesadas y no leídas por el navegador no es necesario que mantengamos restricciones como por ejemplo definir sólo elementos <li> dentro de un elemento <ul>.
Con este nuevo flujo de desarrollo con Vue y webpack, obtenemos otra ventaja y es el uso de babel-loader. Babel nos va a permitir utilizar la sintaxis más moderna de JavaScript (ES6) sin tener que preocuparnos si ésta va a poder ser interpretada o no por el resto de los navegadores, puesto que este código se va a transpilar a una versión de JS que los navegadores modernos puedan interpretar. Así que en esta lección vamos a sacar provecho de esto y a refactorizar nuestro código para que quede aún más limpio:
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección aprenderemos cómo podemos separar nuestros componentes en diferentes archivos que permitan a cada componente agrupar sus plantillas y código de JavaScript en un mismo lugar. Estos archivos que tendrán la extensión .vue, se llaman «Single File Components» y podremos utilizarlos por supuesto gracias a webpack y vue-loader los cuales instalamos en la lección pasada haciendo uso de vue-cli. En esta lección también haremos uso de Hot Module Replacement (HMR) que nos permitirá hacer cambios en el código y poder verlos reflejados automáticamente en el navegador, sin necesidad de recargar la página.
En esta quinta parte del Curso de Vue.js 2, vamos aprender cómo es el flujo de desarrollo profesional con Vue. Para ello vamos a instalar y usar, npm (manejador de paquetes para Node), vue-cli (el cliente de Vue para crear proyectos), webpack, vue-loader, Babel y más. Si suena complicado, no te preocupes, puesto que Vue.js con la ayuda de su cliente vue-cli lo hace muy sencillo. Además a partir de la siguiente lección, vamos a explicar todo el proceso paso por paso:
En la lección anterior aprendimos cómo emitir y escuchar eventos personalizados en Vue para enviar mensajes desde un componente «hijo» hacia el componente «padre» ¿Pero qué sucede si queremos enviar y recibir mensajes entre dos componentes que «hermanos» o que no están relacionados en lo absoluto? Esto es lo que aprenderemos a hacer en esta lección, utilizando un objeto de Vue adicional que nos servirá como un «Event Bus» o «Event Dispatcher» para toda nuestra aplicación.
En esta lección aprenderemos cómo crear, emitir o disparar y escuchar eventos personalizados en Vue.js mientras que al mismo vamos a refactorizar nuestro componente de tarea, para que podamos eliminar una tarea sin necesidad de pasar todo el listado de registros a cada componente.
Esta es una lección muy interesante e importante del curso de Vue.js 2, puesto que aprenderemos cómo separar y diferenciar datos de nuestro modelo de aquellos datos que únicamente forman parte de la interfaz de usuario o vista. Además aprenderemos cómo asociar propiedades adicionales al modelo de forma reactiva, definir y usar la propiedad data dentro de los componentes y mucho más:
En esta lección vamos a trabajar en un componente un poco más complicado, será un componente para representar una tarea (es decir una fila o registro o «modelo»). Este componente agrupará las propiedades y acciones relacionadas con la tarea y nos permitiría limpiar aún más el código de nuestra plantilla principal.
En esta parte del curso, vamos a comenzar a aprender sobre la creación y uso de componentes en Vue.js, uno de los features más poderosos de este framework de JavaScript. Para ello, empezaré creando un sencillo componente de icono, que simplemente va a permitir limpiar un poco nuestra plantilla de Vue, evitando la repetición del código HTML necesario para imprimir iconos en Bootstrap. Sin embargo, este conocimiento te servirá como una pequeña introducción a la creación de componentes más avanzados que veremos a partir de la lección siguiente.
En esta lección del Curso de Vue.js 2 realizaremos el desarrollo de la funcionalidad faltante en nuestro pequeño módulo de CRUD: que es la de eliminar registros. Así que vamos a aprender cómo podemos eliminar registros de forma individual del listado o en lote basados en una condición (en nuestro ejemplo usaremos el estatus de la tarea).
Styde usa cookies para guardar tus preferencias y para seguimiento anónimo AceptarLeer más
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
