Academia Vue.js 2: Aprende Vue paso a paso

1. ¡Hola!: Bienvenido al curso Vue.js Academy. Me emociona tenerte conmigo. Mi nombre es Chris, y soy desarrollador web y también creador de cursos online con experiencia, dando clases a miles de estudiantes satisfechos. Vue.js es uno de los marcos JavaScript más arriba y venideros disponibles en la actualidad. También es uno de los más divertidos de aprender y está repleto de características increíbles que te permiten construir ambos sitios web pequeños directamente a través de aplicaciones complejas de una sola página. Entonces, ¿por qué elegir este curso sobre otros cursos de Vue.js disponibles? Bueno, este curso toma un enfoque basado en proyectos. Veremos exactamente cómo cada concepto que aprenderás encaja de inmediato en proyectos reales. El curso es amigable para principiantes también. Empezamos por construir una aplicación de lista de invitados donde comenzaremos con lo básico. He proporcionado una plantilla de iniciación [inaudible] para el primer proyecto para que podamos sumergirnos directamente en aprender lo que Vue.js tiene para ofrecer. Durante este proyecto, te pones seguro de cómo funciona Vue, y también de los conceptos básicos como datos de enlace, métodos, propiedades de la computadora, y mucho más. También aprenderás sobre las etapas del ciclo de vida del Vue en las que podemos aprovechar. El Proyecto 2 se basa en lo que ya hemos aprendido hasta ahora. Te presentamos para construir herramientas y también mejorar nuestro flujo de trabajo mediante el uso de las últimas tecnologías como la CLI Vue, Webpack, y Bubble también. Este proyecto será una aplicación de tarjeta de felicitación donde el usuario podrá editar y crear su propia tarjeta de felicitación personalizada. par de que esto sea un proyecto divertido de construir, aprenderás tantas técnicas, como el uso de componentes y cómo pasar datos entre ellos junto con la integración de tu app con Firebase para el almacenamiento de imágenes. Además, cubriremos la adición de animaciones y transiciones a tus apps para asegurarnos de que realmente destaquen. Todo lo que aprendas se pondrá en práctica de inmediato en los proyectos para realmente darte una mejor comprensión de cómo encajan todos en aplicaciones reales. ¿ A qué esperas? Presiona el botón Regístrate ahora y aprende uno de los marcos de JavaScript más calientes disponibles hoy. 2. ¿Qué es Vue.js y por qué debería utilizarlo?: Si no estás familiarizado con las bibliotecas y frameworks de vue.js o JavaScript en general, algunas de las preguntas que puedes estar haciendo es, ¿qué es vue.js y por qué debería aprenderlo en primer lugar? Bueno, vue.js es un framework JavaScript realmente divertido y fácil de usar para construir interfaces de usuario. El núcleo del framework es muy ligero y rápido, y se puede utilizar en proyectos de cualquier ciencia desde dejarlo caer fácilmente en un sitio web o aplicación existente hasta simplemente usarlo para controlar una parte pequeña, como agregar un nuevo componente, directamente a través de aplicaciones de una sola página medianas o grandes. Teniendo en cuenta el tamaño ligero del núcleo vue.js, todavía está repleto de muchas características sobre las que aprenderás durante este curso. El núcleo también se puede extender para agregar más características, como enrutamiento frontend y administración del estado. Si ya has construido sitios web antes, ya deberías estar familiarizado con HTML, CSS y JavaScript, que son los bloques de construcción de las aplicaciones vue.js. Esto significa que puedes hacer uso de tus habilidades existentes para [inaudible] subir y aprender aún más rápido. Vue.js maneja sólo la capa de vista, lo que significa que eres libre de integrarla con cualquiera de los back-ends de bibliotecas, por lo que es realmente fácil y flexible de adoptar. Si has utilizado otros frameworks o bibliotecas como React, muchos de los conceptos básicos serán familiares, como usar un DOM virtual y construir componentes reutilizables. React también es genial de usar también, pero a mi juicio, vue.js es mucho más fácil de empezar, y también se está viendo para superar a React en ciertas pruebas de rendimiento. Estas son solo algunas de las razones por las que vue.js ha visto un enorme aumento de popularidad y también mira para convertirse en un jugador aún más grande en el futuro. Ahora, conocemos algunos de los beneficios de usar vue.js, ahora vamos a obtener la configuración del código de Visual Studio, para que podamos saltar directamente a construir nuestro primer proyecto. 3. Instalación de Visual Studio: Para este curso, necesitaremos algunas cosas para ponernos en marcha. En primer lugar, necesitamos un editor de texto. Es posible que ya tengas una preferencia o una que ya uses. Para este curso, estaré usando Visual Studio Code, que es ideal para la codificación JavaScript, y además tiene un terminal incorporado el cual necesitaremos más adelante en el curso. Puedes usar cualquier editor de texto que te guste pero aquí tienes algunas opciones populares de editor de textos, como Atom, Brackets, WebStorm, y por supuesto, Visual Studio Code. Si ya tienes uno de esos y tienes un navegador web, siéntete libre de pasar al siguiente video. De no ser así, te recomendaría que pases a code.visualstudio.com y sigas las instrucciones de descarga de tu plataforma. Una vez que hayas hecho esto, vuelve y añadiremos algunos plug-ins para ayudarles a trabajar con Vue.js. Una vez completada la instalación, voy a agregar un plug-in para agregar Vue.js a fragmentos de código y también algo de resaltado de sintaxis. Si abres tu editor de texto y haces clic en el icono de extensiones en la parte inferior de las opciones, verás que ya tengo instalado Vue 2 Spppets. Para instalar esto, puedes hacer click en la barra de búsqueda y buscar Vue 2. Lo que voy a usar es Vue 2 Smppets, que es por [inaudible], luego da click en el botón de instalar y ya estás listo para ir. Por último, también necesitarás un navegador web. Te recomendaría Chrome de Google, pero puedes usar cualquier navegador web que te guste. Esto es todo para la configuración inicial. Ahora vamos a saltar a construir nuestra primera aplicación Vue.js. 4. Sección de introducción: Fundamentos de Vue: Al igual que con todos mis cursos, me gusta no perder tiempo en ensuciarnos las manos y en realidad construir proyectos reales. Este curso no es diferente y vamos a empezar construyendo una aplicación de lista de invitados, donde el usuario pueda registrar sus intereses en un evento y tener el nombre agregado a la lista de invitados. El proyecto será relativamente sencillo, pero cubriremos todos los conceptos básicos. Tendrás que empezar a construir vue.js-ups. Adelante y empecemos. 5. Descarga tu proyecto de inicio: Adjunto este video es un proyecto de inicio que vamos a utilizar para saltar directamente a vue js. Deseo descargar el mío y colocarlo en el escritorio para un fácil acceso. Pero puedes colocar el tuyo en cualquier lugar. Tan sólo como sea conveniente para ti. Ahora ya deberías tener tu editor de texto todo configurado. Voy a abrir Visual Studio Code y luego una vez que se abra, voy a arrastrar el iniciador del proyecto hacia el editor de texto. Entonces echemos un vistazo a lo que está incluido. Si abrimos el index.html, solo son datos básicos de un HMO. En sección de cabeza solo tenemos algunas metaetiquetas básicas, el título. También tenemos algunos enlaces a bootstrap. Simplemente vamos a usar esto para algún estilo y diseño básico. El cuerpo del proyecto inicia con un div principal, cual tiene un id de app. Este va a ser el contenedor principal y vamos a echar un vistazo a esto con más detalle cuando veamos la instancia de vista. Bueno entonces, solo tienes algunas filas y contenedores básicos y alguna información sobre la lista de invitados. Si abrimos la carpeta del proyecto y luego si hacemos doble clic en index.html. Se puede ver entonces la estructura básica de lo que tenemos. Tenemos una fila la cual tiene alguna información sobre los eventos, como la fecha del evento, el título del evento y una descripción. También tenemos una entrada de texto donde el usuario puede agregar su nombre y luego presentarlo para agregarlo a la lista de invitados. Entonces por debajo de eso tenemos otra fila y luego una general por debajo de ésta, que va a ser el lugar donde se agregan todos los nombres. Por el momento dice que aún no se agregan nombres. Pero añadiremos la funcionalidad a lo largo de esta sección para que esto funcione. Encima en el app.css solo tenemos poco de estilo básico solo para que se vea un poco más bonito. El app.js está vacío por ahora. Pero este es el lugar donde vamos a añadir la funcionalidad view JS a medida que pasamos por esta sección. Esto es sólo un resumen básico de lo que se incluye con el proyecto como paquete de puesta en marcha. Esto se volverá mucho más familiar a medida que pases por este apartado. A continuación veremos cómo instalar vue js y cómo agregarlo a los proyectos de inicio y luego comenzaremos a trabajar dentro de este app.js echando un vistazo a la instancia de vista. 6. Instalación de Vue.js: En el último video, deberíamos haber descargado el iniciador del proyecto, que he colocado en mi escritorio para un fácil acceso. También debes tener un editor de texto listo para usar. En mi caso, estoy usando Visual Studio Code. En este video te vamos a mostrar algunos ejemplos de cómo podemos empezar a instalar Vue.js. Voy a ir a mi navegador web y voy a estar usando Chrome para el resto de este curso. Entonces vamos a ir a Vue.js.org, que es la página oficial de Vue.js. Si haces clic en la guía en la esquina superior derecha, y luego una vez que se carga, deberías ver un menú de navegación a la izquierda. Para empezar, tenemos que ir al menú de instalación, y él te brindará algunas opciones de cómo empezar. El primero es cómo incluir Vue.js Dentro de las etiquetas de script, por lo que podemos hacer clic ya sea en la versión de desarrollo o en la versión de producción. La versión de desarrollo tiene el modo de depuración y también las advertencias. La versión de producción no tiene estos y está minificada. Todo lo que necesitamos hacer es hacer clic en uno de estos botones y luego obtenemos la descarga, luego podemos guardar estos archivos dentro de nuestra aplicación y enlazarlos usando etiquetas de script. Esta técnica es igual que incluir cualquiera de tus scripts como j-query. Otra opción es utilizar el enlace CDN, estaremos utilizando para este proyecto. Este es un enlace donde la biblioteca Vue.js se aloja externamente. Si hacemos clic en el enlace recomendado allí, no llevaría a una versión alojada de Vue.js, y esta es la última versión. Volverá a esto sólo en unos momentos. La siguiente opción es usar NPM o el Administrador de paquetes de nodos. Estaremos usando NPM En el próximo proyecto, pero por ahora solo quiero mantener las cosas simples, nos centraremos en Vue. js y luego en lo básico. También está el VUE.CLI, que es una manera fácil de andamiar proyectos Vue.js. De nuevo, usaremos esto más adelante, pero por ahora solo voy a subir al enlace CDN y luego dar clic en el enlace, y luego necesitamos que copie este enlace URL. Entonces si volvemos a tu editor de textos y luego abrimos los proyectos. Si pasamos al index.html, cuando vaya a la sección de cabecera justo debajo del título, y luego agregamos en las etiquetas de script, y luego podemos agregar los atributos de origen y luego pegar en el enlace al Vue. js biblioteca, y luego guarde eso. Así de rápido y fácil es agregar Vue.js como enlace CDN. Con Vue.js ahora agregado a nuestra aplicación, pasaremos ahora al siguiente video donde echaremos un vistazo a agregar el VUE.Instance. 7. La instancia Vue y el objeto de datos: Ahora tenemos acceso a la biblioteca Vue.js mediante el uso de ECD y link. Ya podemos empezar a trabajar con dentro de nuestro archivo app.js. App.js se incluye en proyecto de inicio. Ya debiste haberlo descárguelo. Este archivo puedes nombrar lo que quieras. Por lo que eres libre de elegir si lo prefieres. Empezaremos por acceder al objeto de vista, y esto nos permite crear una nueva instancia de vista escribiendo New View, seguido del paréntesis y un punto y coma. Esta nueva instancia de vista va a controlar básicamente nuestra aplicación y los datos HTML que se renderizarán a la pantalla. Después necesitamos pasar en unos objetos de opciones, que contiene diversas opciones, que exploraremos a lo largo de este curso, como la vista HTML, qué elemento HTML queríamos montar. También contiene todos nuestros métodos y datos. En primer lugar, echemos un vistazo a el. Esta palabra clave te dice qué elemento HTML controlar. En nuestro caso, queremos controlar la página index.html. Entonces voy a usar el contenedor div principal circundante, que daría una AID de hasta. Por lo que podemos establecer el valor de cadena de el para que sea igual a arriba con el prefijo hash porque es AID. Esto es igual que un selector CSS. Entonces si queríamos controlar un div con una clase en lugar de un ID, simplemente reemplazaremos el hash por un punto. Ahora hemos seleccionado nuestros elementos. Queremos estar trabajando con la propiedad de datos. Esto contiene un objeto el cual almacena todos los datos que queremos utilizar dentro de esta instancia de vista. Por el momento, todos los datos dentro de nuestra aplicación son simplemente HTML simple, que Vue.js Clooney no tiene control alguno. Por ejemplo, todos los datos sobre los eventos enumerados, como las fechas del evento, el título del evento y la descripción del evento están codificados a mano. Podemos cambiar esto agregándolo al objeto de datos dentro de nuestra instancia de vista. Entonces voy a empezar a transferir esta información codificada a mano a nuestra propiedad de fecha. Entonces, empecemos por incluir fechas. Entonces selecciona la fecha a partir de ahí, sácala HTML. Entonces si pasamos a nuestra propiedad de fechas, podemos establecer un nombre para estas fechas. Por lo que quiero llamar a la mía EventDate seguido de la columna, y luego dentro de una cadena, podemos agregar la fecha dentro de ahí. Podemos entonces hacer lo mismo con el título del evento. Entonces de vuelta en la página de índice, si pones el nombre de Summer Festival, y luego dentro de nuestros datos, nuevo en nuestro app.js, y luego siguiente llamaremos a esto el EventTitle. Entonces igual que antes con nuestros días como cuerda. Entonces pegando esto entre las cotizaciones. Entonces, por último, también haremos lo mismo para la descripción del evento. Así que vaya a la página de índice, ponga la descripción del evento, y luego justo debajo del eventTitle, crearemos el nombre de datos EventDescription, y luego peguemos esto como valor. Por lo que ahora necesitamos una forma de volver a agregar estos datos a nuestro HTML. Para insertar estos datos en nuestro código, lo hacemos con una sintaxis de plantilla especial de llaves dobles. También verás esto referido como sintaxis de bigote o interpolación de texto. Es así como vinculamos nuestros datos con el DOM. Esto también significa que los datos son reactivos y se actualizarán cuando haya un cambio con los datos. Dentro de estas llaves, podemos agregar el nombre de la propiedad de fecha que acabamos de crear. Entonces empecemos con los eventDates en el lugar de donde sacamos la fecha justo antes. Entonces guardemos eso y actualicemos el navegador, y ahora podemos ver la fecha está apareciendo de nuevo en la pantalla. Por lo que esta fecha ahora está funcionando porque está dentro de las llaves dobles. Así que Vue.js sabe buscar este nombre de propiedad dentro del objeto de fecha que acabamos de crear. También se actualizará cada vez que se cambie el valor de EventDate. Entonces lo que me gustaría que hicieran ahora es hacer exactamente lo mismo para el eventTitle y también el eventDescription. Así que pausa y dale una oportunidad a eso. Si es algo con lo que no te sientes cómodo, momento, no te preocupes. Seguiré ahora agregando el EventTitle. Entonces haz lo mismo igual que antes. En lugar del título, añadiremos las llaves dobles y luego agregaremos el EventTitle. Por último, en un lugar donde ponemos el eventDescription también agregará el eventDescription ahí dentro. Entonces guarde eso y haremos una actualización final solo para comprobar que todo está funcionando bien. Entonces no se ve genial. Tenemos las fechas, el título, y también la descripción, si [inaudible] de vuelta a la página. Pero esta vez tenemos Vue.js controlando los datos. Entonces, por fin, solo quiero terminar con una última cosa. Debido a que estas propiedades de datos libres están relacionadas, voy a agruparlas dentro de su propio objeto de eventos. Esto es totalmente opcional, pero tiene sentido sobre todo si nos extendemos creando más de un evento. Por lo que de nuevo dentro de la propiedad de datos, queremos crear el objeto de eventos. Entonces voy a cortar el EventDate, el EventTitle y EventDescription, y luego asegurarme de que estos pegados dentro del nuevo objeto de evento. Ahora de nuevo en el navegador, si hacemos una actualización, vemos que los datos desaparecen. Esto se debe a que necesitamos decirle a Vue que estas propiedades y ahora dentro de un objeto llamado eventos. Por lo que sólo significa hacer un cambio más dentro de la página de índice. Entonces todo lo que necesitamos hacer es nuestros eventos frente a EventDates, mismo con EventTitle, y luego finalmente lo mismo con EventDescription. Por lo que pega guardar. Ahora si volvemos al navegador y da una actualización, deberíamos ver que todos nuestros datos están de vuelta en la pantalla. Por lo que ahora hemos creado nuestra instancia de Vue y hemos mirado cómo utilizar el objeto de datos para controlar un texto dentro de nuestra aplicación. A continuación, echaremos un vistazo a cómo Vue JS maneja las plantillas y utiliza el DOM virtual. Te veré ahí. 8. Plantillas y el DOM virtual: En el último video, miramos cómo crear una instancia de Vue y también cómo agregar datos reactivos a nuestra aplicación. ¿ Cómo gestiona Vue js los datos para hacerlos reactivos y actualizar nuestra página cuando hay un cambio? Pero echemos un vistazo a lo que pasa en segundo plano. Si vamos a las herramientas de desarrollador del navegador dentro de Chrome, podemos acceder a éstas con un clic derecho y luego seleccionar “Inspeccionar”. Si luego seleccionará el Div con la clase de bloque de tarjeta, podemos echar un vistazo al contenido y podemos ver que el título del evento, las fechas del evento, y la descripción del evento se agrega entre etiquetas P o encabezamientos. Por lo que la salida HTML es diferente a lo que hemos escrito dentro del Editor. No tenemos ninguna de la sintaxis de doble rizado y no podemos ver los nombres de nuestras propiedades de datos, como título de evento. Esto se debe a que Vue.js toma nuestro código HTML y crea una plantilla basada en él detrás de bambalinas. Estas plantillas, que se crea no se utilizan para renderizar al DOM con código HTML válido. Usar una plantilla en lugar de actualizar directamente el DOM con nuestro código también proporciona beneficios adicionales. Cuando nuestros datos, por ejemplo, se actualizan dentro de la aplicación, Vue entonces resuelve qué partes de la plantilla se cambian. Dado que Vue sabe exactamente qué parte se cambia, sólo volverá a renderizar esta parte de cambio de la plantilla. Por lo que al sólo volver a renderizar la cantidad mínima de código al DOM real. Esto tiene el efecto de hacer que nuestras aplicaciones Vue.js sean realmente rápidas ya que manipular el DOM es típicamente una de las operaciones más caras de realizar. Si no estás familiarizado con el DOM, significa Document Object Model. Se trata de una representación estructurada de un documento. En nuestro caso, siendo el documento la página web. En la mayoría de los casos simples, el DOM, que se crea, se parece a nuestro código HTML, que tenían razón y aquí vemos una típica representación visual del DOM, que es como un árbol de objetos empezando por los elementos HTML en la parte superior y después tenemos la sección de cabeza y la sección de cuerpo, y luego todos nuestros elementos anidados contenidos dentro de la sección de cabeza de la sección de cuerpo. Por lo que esto te debería parecer familiar si has tenido alguna experiencia en HTML. Debido a que la necesidad obtenida elementos DOM lleva tiempo, Vue.js también utiliza lo que se llama el DOM virtual. Estas plantillas que Vue. js crea un compilado en funciones de render DOM virtuales. El DOM virtual es como una copia del DOM real y esto permite ver detrás de bambalinas para comparar el DOM real con el DOM virtual y solo actualizaciones donde y cuando sea necesario. Entonces, no te preocupes demasiado si no entiendes del todo lo que todo esto significa por ahora. Obtenemos mucha práctica con cómo funciona Vue y cómo renderiza plantillas a medida que vas por el curso. Entonces así funciona Vue.js con plantillas y también el DOM virtual. Solo quería darte un pequeño trasfondo de lo que está pasando entre bastidores cuando estamos escribiendo nuestro código. A continuación, veremos la minería de datos bidireccional utilizando una directiva modelo V. 9. Vinculación bidireccional de datos con v-model: Hemos mirado la creación de nuestra instancia de Vue y hemos agregado los objetos de datos. Quiero establecer una nueva propiedad de datos, pero esta vez la voy a utilizar con una directiva de vista llamada v-model. Las directivas tienen un prefijo -v, y las verás mucho a lo largo de este curso. Los atributos especiales proporcionados por Vue.JS, que agregan un comportamiento reactivo especial al DOM usando v-model configura el enlace de datos bidireccional. Si no está familiarizado con el enlace de datos bidireccional, solo significa que los datos se pueden pasar en ambos sentidos. En los ejemplos que hemos mirado hasta ahora, podemos actualizar las propiedades dentro de los objetos de datos, luego pasar estos cambios al Vue. Con el enlace de datos bidireccional, todavía podemos hacer esto, pero también podemos actualizar los elementos Vue como los campos de entrada y esto luego actualiza el valor de nuestros datos. Vue.JS hace que este flujo de datos bidireccional sea realmente simple, al proporcionarnos esta directiva llamada v-model. Comencemos configurando v-model en nuestros campos de entrada de texto. Si vas a nuestra página index.html, y luego localiza nuestras entradas de texto, podemos agregar v-model y luego establecer el nombre de la propiedad de datos a la que se quiere enlazar. Entonces en nuestro caso, “NuevaMetext”. A continuación necesitamos establecer NewNameText como una propiedad en los objetos de datos. De esta forma, podemos establecer el valor inicial si queremos, y debido a que es minería de datos bidireccional también podemos actualizar el valor con el campo de entrada. Por lo tanto, en app.js fuera del objeto de eventos agregue nuestra propiedad de NewNameText: Así que voy a establecer el valor inicial de NewNameText para que sea igual a una cadena vacía. Podemos agregar un valor inicial dentro de eso si queremos. Entonces para ver el valor de NewnaMEText solo necesitamos ir a la página index.html, y luego usar la sintaxis de doble rizado para generar el NewnameText. Ahora si escribimos algo dentro del campo de entrada, vemos el valor de NewnaMetext actualizado de inmediato. Es así como podemos usar el enlace de datos bidireccional con Vue.JS. Una cosa importante a recordar es que Vue.JS no se preocupa por el Marcador de posición o el valor inicial de los campos de entrada. El dato dentro de la instancia de Vue siempre será una prioridad y se considerará correcto sobre el valor inicial de los campos de entrada. Cubriremos utilizando modelo v pesado sobre tipos de entrada y áreas de texto más adelante en el curso. Por ahora, sin embargo, sigamos adelante y echemos un vistazo a los manejadores de eventos y cómo podemos tomar los nombres agregados a este campo de entrada y empujarlos a una matriz. 10. Manejo de eventos y métodos: Ahora hemos mirado el enlace de datos bidireccional. Ahora quiero pasar a capturar el valor ingresado en los campos de entrada y luego empujarlo a una matriz. Esta matriz mantendrá todos los nombres introducidos en el campo de entrada y luego podremos enumerar todos estos nombres dentro de la sección de asistencia a continuación. Queremos ir al app.js y crear nuestra matriz vacía. Voy a agregar una nueva propiedad de datos llamada nombre de invitado e inicialmente vamos a establecer esto en una matriz vacía. Ahora esto se crea más en index.html. Ahora necesitamos crear un manejador de eventos para empujar los nombres a esta matriz. Una vez presionado el botón de enviar, en vue.js, utilizamos la V sobre Directiva para escuchar eventos DOM. Estos eventos DOM y no específicos de view.js. Podemos utilizar cualquiera de los eventos DOM normalmente disponibles para nosotros, como OnClick, keyup, keydown, y muchos, muchos más. Nuevamente, al igual que en el último video donde usamos V-model, esta directiva también tiene el prefijo v dash. A continuación localizamos nuestros elementos de forma y luego como atributo, podemos agregar nuestro V sobre Directiva. Primero agregamos V encendido, y luego después de los dos puntos agregamos el nombre del manejador de eventos que queremos activar. En nuestro caso, vamos a escuchar el evento de envío y luego agregamos el nombre del método que queremos ejecutar una vez que se haya enviado el formulario. Después del nombre de los eventos, en nuestro caso de mitos, también podemos agregar modificadores de eventos. Un modificador de eventos común es evitar los valores predeterminados. Si utilizas JavaScript para trabajar con entradas y formas de todos, es posible que ya hayas usado event dot prevent default. Esto detiene el comportamiento predeterminado, que para el botón enviar es refrescar la página. Pocos simplemente hace que esto sea realmente fácil para nosotros abordar el comportamiento a nuestros manejadores de eventos simplemente agregándolo después del nombre del manejador de eventos así como este. Evitar que el valor predeterminado evitaremos que nuestros datos se pierdan cuando se actualice la página. Esto también sobre modificadores de eventos también, que cubriremos más adelante en este curso. Por ahora hemos agregado el formulario enviado como el nombre de nuestro método, pero aún no lo hemos creado dentro de nuestra instancia de vista. Hagámoslo ahora más en la app dot js. Al igual que cuando agregamos los objetos de propiedad de datos dentro de la instancia de vista, también podemos usar la palabra clave de métodos reservados. Métodos también toma un objeto, por lo que abriremos un conjunto de llaves. Dentro de aquí podemos agregar nuestro primer método de formularios presentados. Este método se activa cada vez que se envía el formulario. formulario enviado es una función y dentro esta función podemos comenzar agregando un registro de consola, solo para comprobar esto está funcionando bien. Queremos iniciar sesión en la consola el valor del nuevo texto de nombre, cual está vinculado al campo de entrada. Esta palabra clave nos permite acceder a todas las propiedades dentro de la instancia de vista. Para acceder a la nueva propiedad de texto de nombre, utilizamos este texto de nombre nuevo de punto. Esto lo hemos visto mucho a lo largo del curso. Ahora volveremos a la aplicación y luego entraremos dentro de la consola. Podemos escribir un nombre dentro del campo de entrada, y deberíamos ver el valor que aparece dentro de la consola. Ahora sabemos que este método se está activando bien. Ahora podemos terminar nuestro método empujando el nuevo valor de nombre a la matriz de nombres de invitado. Primero eliminemos el registro de la consola, y en el lugar de esto podemos seleccionar este nombre de invitado punto, que es el nombre de nuestra matriz. Debido a que se trata de una matriz, podemos usar el método push. Entonces dentro de los corchetes, le diremos a vue.js, Lo que queremos empujar a la matriz. En nuestro caso, queremos empujar el valor de los campos de entrada, para que podamos seleccionar nuestra palabra en este, dot new name text. Entonces para terminar este método, lo último que quiero hacer es una vez que se esté agregando un nombre a la matriz, queremos simplemente borrar el campo de entrada configurando este nuevo texto de nombre de punto para volver a establecer en una cadena vacía. Para ver los valores que están dentro de la matriz, podemos usar de nuevo la interpolación de textos, o la sintaxis de llaves dobles para generar esto dentro del index.html. Si buscamos el encabezado de nivel cuatro, que tiene el texto de ningún nombre agregado aún, podemos usar la sintaxis de la llave rizada para generar la matriz de nombres de invitado. Ahora vamos a guardar eso y nos dirigimos a Chrome y refrescamos el navegador. Ahora podemos agregar nombres al campo de entrada y ahora hemos pegado enviar. Esto ahora debería ser empujado a la matriz y luego enviado a la pantalla. Tenemos los nuevos nombres ahora agregados a la matriz, lo cual es genial. Los nombres solo se están mostrando ya que están dentro de la matriz, por lo que por el momento no se ve muy bien. Pero no te preocupes, lo arreglaremos en el próximo video. Echaremos un vistazo al renderizado de listas con For loops. 11. Procesamiento de la lista: Ahora tomamos las entradas de nombre de los usuarios y lo presionamos a una matriz cuando se presiona el botón de enviar. Esto lo hicimos agregando un oyente de eventos al formulario y luego llamando a un método cuando se envía el formulario. Este método dentro de la instancia Vue es algún código JavaScript que toma el contenido del campo de entrada almacenado dentro de los nuevos textos de nombre y luego lo empuja a esta matriz GuestName. Ahora tenemos la matriz GuestName que queremos recorrer estos nombres y luego renderizarlos a la pantalla. Vue.js, al igual que JavaScript normal puede hacer esto con un bucle for. No obstante, Vue hace que crear un bucle for sea mucho más simple y más limpio que usar Vanilla JavaScript. Todo lo que necesitamos hacer es crear una directiva v-for como esta. Si pasamos a la Página Index.html y luego nos desplazamos hacia abajo hacia la Bomba. Si buscamos el div con una clase de tarjetas-éxito redondeado y name-box, vamos a agregar nuestro for loop a este div. Por lo que agregar esto for loop es tan simple como agregar atributos, igual que antes cuando usamos v-model pero esta vez usamos v-for, y luego lo que se establece es ser igual a nombre en GuestName. Por lo que este nombre de pila depende totalmente de ti, puedes nombrarlo lo que quieras. Es solo un alias para cada elemento de matriz que va a recorrer, guestName es nombre de la matriz de origen por lo que es el que acabamos crear antes y es salida el contenido de este for loop, usamos nuevamente la interpolación. Entonces ves llaves dobles y luego escribimos en nombre, que hemos usado en el bucle for. Entonces ahora podemos guardar esto, refrescar el navegador y ahora si subimos a las entradas, podemos empezar a agregar nombres y ahora los vemos salidos a la pantalla pero esta vez usando un for loop v-for también se puede agregar a los elementos sobre. No nos limitamos a admitir a un div. Se puede agregar a un span, etiquetas de párrafo o cualquier cosa que te guste. Entonces ahora vemos el contenido de la pantalla de matriz dos veces, una vez usando el bucle for y luego una del último video, donde salimos el GuestName/ con el GuestName dentro de las llaves y guardamos eso y ahora nos quedamos con el contenido del bucle for. Entonces así es lo fácil que es crear un bucle for usando Vue.js. Ahora pasemos al renderizado condicional donde veremos si else sentencias usando Vue. 12. Procesamiento condicional en Vue: Nuestra aplicación ahora viene bien. Cuando agregamos un nombre al cuadro de entrada y presionamos “Enviar”, el nombre se agrega al div asistente abajo en la parte inferior. Como se puede ver ahí todavía tenemos el texto diciendo que aún no se han agregado nombres. Ahora queremos ver el renderizado condicional. El renderizado condicional no es tan complicado como puede sonar. Simplemente renderizará algún contenido dependiendo las circunstancias al igual que un JavaScript if-else declaraciones normales, si estás familiarizado con estas. En nuestro caso, si hay nombres dentro de la matriz de nombres de invitado, queremos mostrarlos en la parte inferior. Si no hay nombres dentro de la matriz, sólo queremos mostrar el texto diciendo que aún no hay nombres añadidos. Podemos agregar esto dentro de la página index.html. Si localizamos el div con la clase de bloque de tarjetas, dentro de nuestro div con la clase de bloque de tarjetas, tenemos dos divs dentro de ahí. El primero es donde queremos recorrer los nombres y mostrarlos dentro de las etiquetas div. Voy a agregar un if-statement a este div. Vue simplemente nos hace realmente fácil hacer con la directiva v-if. Una vez que agregue esto como un atributo, entonces queremos comprobar si la longitud de la matriz de nombres de invitado es mayor que cero. Si hay algún nombre dentro de la matriz, la condición se vuelve verdadera y el div se renderiza a la pantalla. De lo contrario, si la matriz está vacía entonces la condición es falsa. renderizará el siguiente div si agregamos una declaración v-else. Entonces agreguemos v-else al siguiente div. Para que el v-else funcione debe seguir inmediatamente los elementos con la directiva v-if. Si por ejemplo, hubiera otro div entre estos dos, la declaración else no funcionaría. Dale a eso un guardado y dirígete al navegador y dale una actualización a eso. Ahora veremos la declaración diciendo que aún no se agregaron nombres. Entonces si subimos a nuestro cuadro de entrada y agregamos un nombre, vemos que se agrega el nombre y también se quita el texto. Tales están funcionando bien y quiero agregar una declaración JavaScript if normal a nuestro método de formulario enviado y la razón de esto es si pasamos a nuestro formulario, y entramos un nombre, podemos ver agregado a la lista. Entonces eso está bien. No obstante, si simplemente vamos a la entrada y presionamos enter sin nombre todavía podemos ver que algo se agrega a la matriz. Aparte de esto, if-statement se asegurará de que nombre se debe ingresar antes de que se empuje a la matriz. Podemos hacer esto más en el método de formulario enviado en el archivo app.js. Dentro del cuerpo de la función construiremos el código existente con un if-statement y la condición que queremos comprobar es si esto.NEWNAMEText. La longitud es mayor que cero o si se han ingresado algunos caracteres, entonces queremos seguir adelante y empujar esto a la matriz. Vamos a darle a eso un guardado y probarlo en el navegador. Si presionamos “Enter” en la entrada del formulario, vemos que no se ha agregado ningún nombre nuevo a la matriz. Solo agreguemos un nuevo nombre y probemos que está funcionando bien. Ahí vamos así todo el p está bien. Lo último que quiero hacer en este video es mostrar cuántos invitados están atendiendo o cuántos nombres tenemos dentro de la matriz. Puedes ver si solo miras arriba los nombres, podemos ver que hay un div con la clase de cabecera de tarjeta con una sección de asistencia. Dentro de los corchetes voy a agregar las llaves dobles, luego averiguar cuántos nombres hay dentro de la matriz de nombres de invitado. Simplemente escribimos Guestname.Length y esto dará como resultado cuántos elementos hay dentro de la matriz. Guardemos eso y agreguemos algunos nombres a la matriz y veamos si esto funciona. Genial. Entonces vemos que aumentando en uno con cada nombre. Ahora esto funciona porque la longitud de punto es solo una propiedad de JavaScript y podemos agregar cualquier JavaScript que queramos dentro de estas llaves dobles. No nos limitamos a generar datos de nuestra instancia de Vue. Por ejemplo, si agregamos 8 más 10 también dentro de las llaves dobles, y luego pasamos a nuestra app podemos ver que se agrega 10 a cada número. Por lo que solo eliminaremos eso porque no es necesaria para nuestra app. Esperemos que ahora puedas ver que ahora podemos mezclar datos Vue y también Vanilla JavaScript y veremos esto más adelante en el curso pero por ahora así funciona la renderización condicional o las declaraciones if-else en Vue JS y ya puedes realmente ver lo sencillo que es trabajar con ellos. 13. Vinculación de elementos con atributos: Ahora quiero mostrarte cómo usar una directiva llamada v-bind. Utilizamos esta directiva para trabajar con atributos HTML normales como clase, fuente, y los atributos href. Todos estos son atributos HTML normales. No obstante, no podemos pasarles datos reactivos utilizando la sintaxis de doble rizado. Entonces en el index.html, si localizamos el evento date div con la clase de card-header, intentaría agregar una nueva clase con el nombre de [inaudible] y agregamos esto usando una sintaxis de doble rizado, esto en realidad no funcionará. Entonces para demostrar esto, agreguemos una nueva propiedad sobre en app.js dentro de los objetos de datos, justo debajo de la matriz GuestName. Entonces agreguemos 'FormSubmitClass'. Usaremos esto para agregar un nuevo nombre de clase cada vez que se envíe nuestro formulario. Para cambiar el color de fondo de la tarjeta div encabezada y también el botón azul a verde, inicialmente estableceré esto para que sea una cadena vacía. Para empezar, porque solo queremos agregar una clase cuando realmente se envíe el formulario, por lo que abajo en el método de formulario enviado, justo en la parte inferior, voy a agregar el formSubmitClass, y luego podemos establecer que esto sea algo nuevo cada vez que se presente el formulario. Por lo que voy a establecer esto para que sea una cadena de texto de Enviado. Por lo que ahora cada vez que se envíe un formulario, formSubmitClass se establecerá en el valor de Enviado. Ahora abajo en el CSS, podemos configurar la SubmittedClass para que tenga un color de fondo de verde. Entonces vamos a guardar eso e ir al navegador. Para que veas si actualizamos y luego presionamos el botón Enviar, que el color de fondo no cambia. Por lo que este es un comportamiento esperado porque mencionamos antes que las tarjetas agregan datos dinámicos como atributo. Entonces para aplicar esta clase en HTML, necesitamos hacer dos cosas. En primer lugar, necesitamos eliminar las llaves de la clase y solo tener la propiedad de datos dentro de las causaciones. Después en segundo lugar, necesitamos agregar el prefijo v-bind al nombre del atributo. Entonces ahora vale la pena señalar como se puede ver dentro de este elemento sí tenemos dos atributos de clase. Una es la clase HTML estática que todavía puedes usar y también la que acabamos de agregar con v-bind, que es reactiva y bajo el control de view.js. También podemos enlazar este atributo en más de un elemento, también. Por lo tanto, vamos a agregar el formSubmitClass al SubmitButton, también. Esto también significa que si nuestros datos cambian, la actualización también se reflejará en todas partes . Entonces ahora vamos a darle una oportunidad a esto. Si guardamos eso y luego actualizamos el navegador y agregamos un nombre, podemos ver una vez que se envíe el formulario que sí obtenemos el nuevo color de fondo. Entonces así como un resumen rápido de lo que hemos hecho ahí, entramos en la página HTML y luego agregamos una clase de FormSubmitClass. Entonces dentro de nuestros objetos de datos, establecemos esta FormSubmitClass para que esté vacía originalmente. Por lo que esto significa que inicialmente no se agregan nuevos estilos. Después cambiamos su cadena vacía para ser el texto de Submitted, justo debajo dentro del método FormSubmitted. Por lo que cada vez que se presenta el formulario, se agrega como clase el texto de Enviado. Por lo que no nos limitamos a vincularnos a clases, sino que también combinamos a cualquier atributo HTML normal, como podemos agregar un atributo fuente si estamos trabajando con imágenes y tenemos la ruta del archivo de imagen controlada por vista. Lo mismo con agregar los atributos de estilo, y esto es lo que veremos en el siguiente video. 14. Estilos de vinculación: Ahora sabemos usar la directiva v-bind para enlazar vue.js con atributos HTML. Ahora veamos cómo usar la misma directiva que el estilo atribuye. No, no podemos pasar en un doble tirantes ni la interpolación, que señalaste en el último video. No obstante, en esta ocasión podemos utilizar las llaves simples. Esto se debe a que estamos pasando en un estilo objetos y objetos dentro de un JavaScript que está rodeado de llaves. Al igual que nuestro objeto de datos dentro de la instancia de vista. Si has usado reaccionar. JS antes, esta forma de unos estilos en línea te resultará familiar. Entonces si pasamos a nuestro archivo CSS para la fila, y luego hacemos clic en el margen superior de 25 píxeles. Cuando quiero tomar esto fuera del CSS y colocarlo en nuestro HTML. Entonces en la página de índice, si localizamos el div con la clase de fila, que está justo por encima del encabezado nivel uno de lista de invitados. Voy a enlazar atributos de estilo a esta fila y luego también establecer el valor dentro de un objeto, y luego pegar en el margen superior. Simplemente lo copiará del CSS. Entonces vamos a guardar eso y darnos una oportunidad y ver qué pasa. Entonces si actualizamos el navegador, podemos ver que hay una página en blanco. Por lo que esto no parece estar funcionando. Si hacemos clic con el botón derecho y vamos a inspeccionar para abrir las herramientas de desarrollo, podemos ver dentro de la “Consola” que hay un mensaje de error rojo. Entonces obtenemos este error porque se trata de Javascripts, Entre las llaves y necesitamos nombrar las propiedades CSS usando caso camel. Esto significa que la primera palabra es minúscula, y luego cada palabra siguiente comienza con una letra mayúscula como esta. Por lo que el margen es minúscula, seguido de arriba con una T. Entonces también tenga en cuenta que el valor de 25 píxeles es una cadena. Para que podamos envolver esto dentro de nuestras cotizaciones y quitar el punto y coma. Veamos cómo se ve esto ahora. Así que guarda y luego pasa al navegador. Entonces todo se ve como debería, lo cual es genial. También hay otra forma de agregar estilos a nuestra app. También podemos declarar nuestro estilo dentro de la instancia de vista como una propiedad de datos. Por lo que de vuelta en la app. j s, debajo del formulario presentado clase que creamos en el último video. Voy a agregar una nueva propiedad de fecha llamada “AppStyles”. Esto se va a establecer en un objeto. Entonces dentro de este objeto voy a añadir la misma clase de margen top, otra vez usando la caja de camello y ajustada a 25 píxeles. Ahora como mencionamos, no podemos inyectar estos datos reactivos en nuestro HTML con las llaves dobles. No pudimos usar llaves dobles en absoluto con ningún tipo de atributos. Esto incluye los atributos de estilo. Entonces en cambio, sobre en el HTML, podemos incluirlo dentro de las citas. Eliminaremos el objeto existente y agregaremos nuestros nuevos estilos de aplicación dentro de ahí. Este HTML hace referencia a un dato dentro de nuestro objeto de estilos de aplicación. Por supuesto también podemos agregar más estilos dentro de estos objetos si queremos. O puedes usar este objeto varias veces dentro de nuestra app. Este estilo particular se aplica a todos nuestros div's gratuitos con la clase de fila. Entonces vamos a reutilizar esto en todos nuestros div's gratuitos para obtener el estilo correcto. Entonces voy a copiar la propiedad de estilo. Lo pego en la segunda fila. Entonces haz lo mismo para la tercera fila. Entonces vamos a probar eso. Golpea guardar y luego pasa al navegador. Podemos ver que la app vuelve a la normalidad. Entonces solo para doble comprobación, todo esto está funcionando bien. Voy a volver al objeto AppStyles y añadir un color rojo. Como puedes ver, cualquier cambio que realices en el objeto de estilo se cambia a lo largo de la app. Por lo que se trata de algunas formas diferentes de agregar CSS a nuestra aplicación. También volveremos a utilizar esto en el próximo proyecto. Pero por ahora, pasaremos al siguiente video. Echaremos un vistazo a la sintaxis taquigráfica. 15. Sintaxis abreviada de Vue: Conforme comienza a construir proyectos más grandes tanto más adelante en este curso como ojalá por su cuenta en el futuro. Vale la pena conocer algunas formas de hacer que nuestro código sea un poco más compacto. Incluso en la pequeña aplicación hasta el momento, hemos utilizado el V on y V se une bastantes veces ya. Por esta razón, view nos proporciona un pequeño atajo para hacer la sintaxis más compacta. Para el V por subactivo, todo lo que realmente necesitamos hacer es quitar ligas en V, dejando sólo el colon y el atributo que estamos vinculando. Abramos nuestro index.html y sigamos adelante y reemplacemos todos nuestros atributos de enlace con la sintaxis abreviada. Te mostraré el primero. Si vamos a la primera fila, lo encontramos el estilo de los estilos de app. Solo necesitamos quitar V bind, dejando solo el colon y el estilo, y por supuesto, esto es algo que podrías seguir adelante y hacerte tú mismo si quieres pausar el video e ir por la página de índice y darnos una oportunidad, y luego por supuesto volver cuando se haya completado. Voy a seguir moviéndome abajo el, arriba y cambiando esto. También tenemos la segunda fila justo debajo con los estilos de aplicación también. Cambiemos esto. No tenemos el “encabezado de tarjeta” con la clase de formulario “enviar clase”. Cambiemos eso, y luego desplazémonos hacia abajo. También tenemos la clase en el lado de entrada, y luego un poco más abajo, parece que la última es la última fila con la clase de “estilos de aplicación”. Cambiemos esto. Pero también es una taquigrafía para cuando se usa v-on. Utilizamos v-on dentro de los elementos del formulario para activar un método cada vez que se ha enviado el formulario. En lugar de usar v-on, podemos simplemente reemplazar esto por el símbolo at. Adelante y reemplacemos esto ahora. Digamos esto y solo verifíquelo aún funcionando en la app. Nuestro estilo parece estar funcionando también. Parece que las clases todavía lo están vinculando, y ahora si agregamos un nombre a la entrada del formulario, vemos que el nombre todavía se agrega a la lista de invitados, lo que significa que el botón de enviar sigue funcionando. La sintaxis taquigráfica es opcional y la forma malvada está totalmente bien. Como vista JS trata con siempre en segundo plano. Pero para el resto de este curso, estaremos usando la sintaxis más corta solo para mantener nuestro código más compacto. 16. Salida de texto y HTML: En lo que va de este curso, hemos generado datos reactivos usando la interpolación o la sintaxis de doble rizado. Ahora quiero presentarles algunas directivas más que pueden encontrarse con mucha utilidad a la hora de emitir datos. En primer lugar es uno simple llamado v-text. El texto en V se utiliza para obtener el contenido del texto de los elementos. Contenido de texto, establece o devuelve el contenido de texto de un elemento. Podemos usarlo como alternativa a las llaves dobles para ejecutar el texto así si pasamos a nuestra página de índice y localizamos el bloque de tarjetas, que tiene la información del evento. Dentro del nivel para encabezado, podemos agregar el v-text como atributos y también establecer esto igual al título event.event. Se puede notar que tenemos título event.event dos veces; uno está usando v-text y otro está usando la interpolación de texto original. No obstante, si vamos al navegador y actualizamos, sólo podemos ver este título mostrado una vez. Esto se debe a que el uso de título original necesita llaves dobles se reemplaza estableciendo los atributos de contenido de texto. Podemos demostrarlo pasando a v-text y cambiando esto a event.eventTitle2. Entonces si pasamos a app.js, podemos agregar nuestro eventTitle2, justo debajo del título original del evento y queremos establecer esto una cadena de salida de texto v para que podamos ver claramente la diferencia. Una vez que hayas sumado, pasemos al navegador y luego actualicemos. Todavía podemos ver que el v-text tomará prioridad a pesar de que las llaves dobles siguen en su lugar. La siguiente directiva que quiero ver es v-html. Textos en V, que acabamos de ver, actualiza el contenido del texto de los elementos. tanto que usando v-html, obtenemos los elementos en HTML. Es posible que estés familiarizado con ciertos en HTML si has usado JavaScript antes. v-html si has utilizado para generar HTML real. Si tratamos de agregar código HTML dentro de las llaves dobles, se interpretará como texto plano. Echemos un vistazo a esto en acción, si volvemos a la página de índice con nuestra información de eventos. Si recortamos el texto o agregamos nombre a la lista de invitados para ofertas exclusivas. También podría esto. Entonces si pasamos al app.js, podemos agregar una nueva propiedad de fechas de los textos de registro y luego pegar esto en forma de cadena, así que guarde eso y luego si agrega algún contenido, como agregar las etiquetas m alrededor de la palabra exclusividad. Ahora vamos y hacemos show text y HTML. Intentemos renderizar esto en la página de índice. Si volvemos a donde acabamos de cortar el texto e intentaremos dar salida a esto con las llaves dobles, así que event.SignupText y luego guarde eso. Si actualizamos el navegador, el HTML se genera como texto, por lo que podemos ver las etiquetas HTML. Esto no es lo que queremos. En cambio para mostrar esto correctamente, necesitamos agregar el texto de registro a la directiva v-html. Añadamos v html como atributo y luego eliminemos las llaves y ahora presiono “Guardar”. Ahora si actualizamos los datos se renderiza como HTML y ahora tenemos la palabra exclusiva enfatizada como pretendíamos. Sí tenemos que ser cautelosos, sin embargo, al usar v-html por razones de seguridad. En cualquier lugar donde se agregue HTML dinámicamente a nuestro sitio web, solo debemos usar v-html en contenido de confianza. No debemos permitir que se utilice cuando el contenido es proporcionado por un usuario final, ya que esto puede conducir a posibles ataques de scripting entre sitios, así que solo ten en cuenta esto. También si estamos trabajando con solo texto, usar v-text para obtener el contenido del texto puede ser más seguro y también ayudar contra estos ataques. También puede tener un mejor rendimiento para texto plano 2, ya que un texto no se pasa como HTML. Por último, la última directiva que quiero mostrarles en este video es v-once. Esto se puede usar para renderizar datos solo una vez. Una vez que los datos se renderizan usando vista, si los datos no cambian, los elementos o componentes no se actualizarán ni se renderizarán de nuevo. Esto se puede utilizar para optimizar el rendimiento de nuestra aplicación para evitar re-renderizado innecesario. Nuestro título de evento puede ser un buen caso de uso para esto, ya que podemos esperar que una vez creado un evento, el nombre siga siendo el mismo. Todo lo que necesitamos hacer para habilitar el único renderizado de éste es agregar la directiva v-once a los elementos. Quitemos este atributo v-text y luego lo reemplacemos por v-once. Esto ahora significa que los datos solo se cargarán una vez y no para ningún cambio de datos en el futuro. Actualmente no podemos demostrar ya que no estamos usando un servidor web para servir nuestra página en los momentos por lo que los datos no se actualizarán de todos modos desde la instancia de vista. Simplemente hemos abierto la página de índice para verla en el navegador. Podemos ver esto en acción en un video posterior, donde usaremos un servidor de desarrollo. Pero por ahora se puede ver que esto está disponible si es necesario. Es así como podemos utilizar las directivas v-text, v-html y v-once. A continuación, veamos una alternativa a v-if, que miramos desde el principio en este apartado. 17. V-if vs. v-show: Miramos anteriormente la directiva v-if en este apartado. Esto nos permitió mostrar nombres de invitados en el div en la parte inferior de la página si existen nombres. De lo contrario, se muestra el texto de ningún nombre agregado aún. También existe una sintaxis alternativa que Vue.js pone a disposición de nosotros llamada v-show. Esta es también una directiva que condicionalmente renderiza algún contenido, al igual que cuando se usa v-if. No obstante, hay algunas diferencias que veremos ahora. Primero si vamos a nuestra página de índice y buscamos las declaraciones v-if, eso cambia a v-show. Si guardamos eso y luego pasamos a nuestra aplicación y luego golpeamos refrescar, lo primero que veremos es que el texto dentro de la condición else se ha ido. Se espera este comportamiento. Por supuesto, una declaración v-else sólo puede seguir una declaración v-if. Si vamos a la consola, podemos ver que este error se resalta ahí dentro. También hay otra diferencia entre bastidores, que se relaciona con cómo se renderiza el elemento. Al usar v-if, el elemento al que está vinculado se agrega al DOM cuando la condición se vuelve verdadera, luego se destruye o se elimina completamente del DOM cuando la condición se vuelve falsa. Entonces, debido a que v-if solo se renderiza cuando es necesario, puede ahorrar en tiempo de render si esto es una preocupación. V-show funciona un poco diferente. El elemento v-show se adjunta a siempre se renderiza, independientemente de si la condición es verdadera o falsa para empezar. A continuación, se activa o desactiva cambiando la propiedad de visualización CSS. Echemos un vistazo a esto en acción. Si abrimos las herramientas Developer y vamos a Inspect, podemos ver esto en acción seleccionando el div dentro del div de tarjeta-bloque, que la propiedad display está establecida en ninguna, lo que tiene el efecto de ocultar los elementos. Si entonces agregamos un nombre al campo de entrada, vemos que la propiedad display de ninguno se elimina luego y ahora vemos que se agregan las etiquetas div con el nombre. Para el caso de esta aplicación en particular, también necesitamos utilizar la directiva v-else. Entonces me voy a quedar con el uso de v-if y v-else. No obstante, usar v-show es una buena alternativa si quieres mantener tus elementos dentro del DOM y simplemente ocultarlos, lugar de destruir por completo y volver a renderizar en el DOM cuando sea necesario. La diferencia de rendimiento entre alternar la propiedad de visualización frente al renderizado usando v-if puede que nunca sea un problema para usted, pero vale la pena conocer la diferencia, especialmente en aplicaciones de mayor escala. 18. Uso de expresiones de Javascript: Dentro de nuestra aplicación, hemos mostrado algunos datos interactivos agregando fechas propiedades en nuestra instancia de vista. Entonces los pondré usando las llaves dobles. Al usar estas llaves rizadas, podemos hacer algo más que simplemente agregar el nombre de la propiedad de fecha que desea mostrar dentro de nuestras plantillas. En realidad podemos hacer uso de expresiones JavaScript o incluso combinar nuestros datos de vista con JavaScript regular. En primer lugar, pasemos a nuestro app.js y agreguemos algunos nombres a nuestra matriz de nombres de invitados. Tan solo para mostrar inicialmente, puedes usar cualquier nombre que desees. Voy a añadir los nombres de James, Chris, y Sam. Si estás usando nombres diferentes, asegúrate de que estos nombres y se mezclan. No están en orden alfabético. Ya veremos por qué pronto. Guarda eso. Si pasamos al navegador, podemos ver que estos nombres se agregan inicialmente. Ahora pasemos a nuestra página de índice y echemos un vistazo a cómo podemos usar expresiones JavaScript dentro de nuestras llaves dobles. Actualmente dentro del bucle completo estamos dando salida al nombre. Podemos combinar esto con JavaScript, como usar dos minúsculas. Esto asegurará que cualquier cápsula como dentro del nombre se cambie a minúscula. Echemos un vistazo a esto dentro del navegador. Ahora podemos ver que la primera letra de cada nombre ahora es minúscula. Esta es una mezcla de usar vue.js y JavaScript regular. También podemos ir aún más allá y añadir una cadena hasta el final de esto. Nombre punto dos minúsculas, luego más una cadena de es impresionante. Dale una vuelta a eso. Después, en Chrome, actualicemos. Ahora tenemos la cadena añadida al final del nombre. Existe una limitación, sin embargo, que sólo podemos usar una sola expresión de JavaScript. No podemos usar cosas como una declaración if-else dentro de aquí. Tampoco es el camino a seguir si estamos usando el mismo código una y otra vez. Restringir la cantidad de JavaScript que podemos usar dentro de nuestras plantillas hace que nuestro código sea más manejable. Como entonces necesitamos mover toda lógica compleja dentro de la instancia de vista. Esto hace que nuestro código sea más reutilizable. Podemos reutilizarla en diferentes áreas de nuestra app cuando sea necesario. Veremos cómo manejar condiciones más complejas en el siguiente apartado. Pero esto es útil para realizar tareas simples. También tenemos acceso a todo el poder de JavaScript, incluso cuando no se usan datos vue.js. Agrega pequeños tirantes rizados justo debajo. Por ejemplo, podemos agregar un cálculo matemático. Cinco divididos por dos. Vamos a verlo en la pantalla. De acuerdo, y también soplar esto, si volvemos a la página de índice, podemos agregar un punto matemático aleatorio por ejemplo. Matemáticas punto aleatorio entre las llaves y luego guardar. Ahora también podemos ver el número aleatorio en la pantalla también, bueno, no solo restringido a la salida y este JavaScript usando llaves dobles. También puedes usarlo en cualquier lugar tengamos acceso a nuestra instancia de vista. Por ejemplo, también podemos usarlo dentro de nuestra directiva V HTML dentro de las cotizaciones. Subiremos a la directiva V HTML. Entonces dentro de las citas, podemos agregar punto matemático aleatorio y guardar eso. Ahora si actualizamos la página y comprobamos, vemos ahora un número aleatorio en pantalla. Sólo voy a cambiar rápidamente de nuevo a nombre y guardar eso. Es así como podemos usar todo el poder de JavaScript dentro de nuestras plantillas de vista. 19. Sección final: Fundamentos de Vue: Enhorabuena por llegar al final de este apartado. Esperemos que ya puedas ver lo divertido y fácil que es empezar con view JS. Ya has aprendido muchos conceptos nuevos, como cómo configurar la instancia de vista, enlace de datos bidireccional, manejo de eventos, manejo listas y mucho más. En la siguiente sección avanzaremos un poco las cosas cubriendo temas de vista aún más esenciales, junto con completar nuestra aplicación de lista de invitados. 20. Sección de introducción: Una mirada más profunda a Vue: Bienvenido a esta nueva sección. Empezaremos a echar un vistazo más profundo a lo que Vue.js tiene para ofrecer. Seguiremos construyendo nuestra lista de invitados agregando nuevas características y aprendiendo más sobre Vue.js, como propiedades computadas, relojes y filtros. Al final de esta sección, tendrás una buena comprensión de muchos de los elementos esenciales de Vue.js y cómo encaja todo después de completar tu primer proyecto. Empecemos de inmediato con la mejora de la nota agregando una barra de progreso. 21. Añadir una barra de progreso: En este video, vamos a agregar una barra de progreso a nuestra aplicación. También vamos a restringir el número de nombres que podemos agregar a nuestros eventos en la lista de invitados. Esta barra de progreso aumentará luego como porcentaje a medida que se llene la matriz de nombres de invitado. Esto nos dará la oportunidad de conseguir más práctica agregando datos reactivos a nuestra app, y también vincularemos en atributos de estilo que cubrimos en la última sección. Empecemos por quitar el color verde, cuando se presente el formulario ya que ahora tendremos una indicación visual con la barra de progreso. Más en el index.html, eliminemos las clases de enlace que se añadieron en la última sección. Seleccionar eliminar FormSubmitClass de todas las ubicaciones. También eliminemos esto del objeto de datos en app.js. Vamos a repasar y eliminar esto del objeto de datos. Entonces más abajo eliminemos la referencia FormSubmitClass de nuestro método. Entonces, por último, no necesitamos los estilos enviados más en app.css, también puedes eliminarlos. Ahora eso está cuidado podemos volver a la página de Índice y podemos empezar a sumar nuestra barra de progreso. Voy a agregar esto cerca de la parte inferior de la página. Si buscamos el texto que asiste, que muestra cuántos nombres hay en la lista. Justo debajo de eso, voy a agregar una etiqueta de break y luego agregar una barra de progreso HTML5. El cual viene a ser una barra de progreso llana por ahora. Podemos guardar y simplemente comprobar que eso está apareciendo en la pantalla. Genial, queremos que esta barra de progreso aumente cada vez que se agregue un nombre a la lista de invitados. Para ello necesitamos elaborar un porcentaje. Entérate en el app.js Voy a agregar dos nuevas propiedades de datos a los objetos de datos. El primero va a ser la capacidad del evento para que puedas establecer cuántos nombres quieres como máximo. Voy a decir, capacidad de evento para ser inicialmente 25. Entonces justo debajo de eso, también voy a establecer el EventCapacityPorcentaje. Esto sólo se va a establecer como cero inicialmente. Utilizamos esto para averiguar qué tan completo está el evento como porcentaje. Vamos a calcular esto dentro del método de formulario enviado. Si nos desplazamos hacia abajo a este método y luego justo debajo de este.NewNameText. Vamos a establecer esto.EventCapacidadPorcentaje, y aquí vamos a calcular el porcentaje. Esto va a ser igual a esto.nombre.longitud. El número de nombres en la lista de invitados dividido por esto.EventCapacity, dividiremos eso por 100 para convertirlo en un porcentaje. Ahora tenemos el porcentaje como valor entre cero y 100. Podemos tomar nuestro conocimiento de estilos de encuadernación de la última sección y usarlo establecer el ancho de la barra de progreso. Volvamos a la barra de progreso y luego agreguemos un atributo de estilo. Nuevamente, sabemos que necesitamos usar el colon porque se trata de datos dinámicos. Vamos a iniciar los estilos dentro de las llaves como objeto. El único estilo que necesitamos agregar es el ancho. El ancho se va a establecer en el EventCapacityPorcentaje que acabamos de crear antes. Por supuesto que esto subirá a medida que cambie la capacidad. Después hasta el final vamos a añadir una cadena, que es sólo el símbolo de porcentaje. Todo lo que estamos haciendo aquí es establecer la propiedad de ancho CSS, haciendo que el valor porcentual sea reactivo en lugar de simplemente codificar a mano en un número establecido. Guardemos eso y con esto en su lugar, pasemos al navegador y probemos su funcionamiento. Podemos agregar algunos nombres y muchas veces la barra de progreso aumenta con cada uno. Genial. Empieza a aumentar, por lo que todo parece estar funcionando bien. Por el momento tenemos el texto que asiste el cual muestra cuántas personas están acudiendo actualmente a los eventos. Yo quiero ahora también suma la capacidad para que podamos ver a cuántas personas también se les permite asistir. Ya tenemos todos los datos que necesitamos para completar esto, vuelta en la página Índice junto al texto que asiste. Ya tenemos el nombre.Longitud siendo de salida. Después de esto voy a agregar una barra inclinada hacia adelante y luego simplemente salida el EventCapacity. Ahora cuando vamos a la app, deberíamos ver uno de 25 y dos de 25, y esto va en aumento cada vez que agregamos un nuevo nombre. Esto está funcionando y también la barra de progreso parece funcionar en final. Pero hay un problema. Todavía podemos repasar el número total de nombres que establecemos, podemos ir más de 25. Esto provoca que una barra de progreso se salga de la pantalla y también el número en la sección de asistencia para seguir rebasando el máximo permitido. Simplemente agrega muchos más nombres y sube al máximo. Podemos ver que claramente podemos repasar eso. Esto se puede arreglar fácilmente agregando otra combinación para probar dentro de nuestro método enviado de formulario. De vuelta en el app.js. Sabemos que ya tenemos una declaración [inaudible] comprueba si hay un nombre ingresado. También podemos simplemente agregar una segunda comprobación para determinar si el EventCapacityPorcentaje es menor al 100 por ciento. Si no quiere seguir agregando nombres. Después de esto.NuevaMetext.La longitud es mayor que cero, esto.EventCapacidadPorcentaje es menor a 100. Si la capacidad es menor al 100 por ciento, aún podemos seguir agregando nombres a la matriz. Si el porcentaje es superior a 100 o igual a 100, entonces no se empujarán nuevos nombres a la matriz. Vamos a darle una oportunidad a esto si volvemos a la app y luego refrescamos, aún podemos agregar nombres a la lista de invitados, no hay problema. Una vez que lleguemos a 25, deberíamos ver que no se pueden agregar nuevos nombres. Ahí vamos, ahora golpeamos la capacidad y no se están aceptando nuevos nombres en la matriz. Ahora pasemos a echar un vistazo a cómo podemos manejar lógica más compleja mediante el uso de propiedades computadas. 22. Propiedades computarizadas: En lo lejos de este curso, dentro de la pocas instancia, hemos mirado cómo podemos trabajar con datos, utilizando un objeto de datos. También hemos analizado cómo podemos agregar un objeto de mensaje a, que puedes usar para agregar funcionalidad a nuestra aplicación. Ahora quiero mostrarles una tercera propiedad la cual no todos podemos ver instancia llamada propiedades computadas. Mencionamos en el último video que en demasiadas expresiones JavaScript dentro de nuestra plantilla, pueden hacer que el código sea menos reutilizable y más difícil de mantener. También nos limitamos el uso de una expresión JavaScript. Aquí es donde entran las propiedades computadas. Los agregamos a nuestra instancia de vista al igual que los datos y métodos objetos para agregar lógica más compleja. También hay otra gran diferencia que veremos pronto. Añadamos nuestra sección calculada, seguida de los dos puntos, y esto también es un objeto. Podemos agregar nuestras propiedades dentro del objeto computado, igual que lo hemos hecho dentro del objeto de métodos. Voy a usar una propiedad calculada para ordenar los nombres de los casos, en nuestra matriz y luego devolverlos en orden alfabético. Necesita tipo en el nombre. En este caso voy a llamar a este tipo de nombres, y esta es una función. Entonces dentro del cuerpo vamos a devolver algunos datos, y los datos que queremos devolver es este punto nombre de caso dot sort. uso de sal es el método de matriz JavaScript normal, al igual que cuando usamos el método push en formularios presentados anteriormente. Para que esto funcione, necesitamos cambiar una cosa dentro de nuestro índice de punto HTML. Ahora necesitamos mirar a través de los nombres de clasificación en lugar del nombre del invitado. Vaya a la página del índice, y cambie el nombre del caso para que sea nuestra propiedad informática de nombres de clasificación. Entonces echemos un vistazo a esto dentro del navegador y ahora deberíamos verlos ordenados en orden alfabético. Utilizamos una propiedad computada cuando nuestro código dentro se basa en la propiedad de intervalo, o cualquiera de los datos de nuestra instancia de vista, pocos JS observa contenidos y está al tanto del código de computadora y cualquiera de sus dependencias. En este ejemplo, utilizamos los datos del nombre del huésped, lo que significa que estará consciente de que está ahí. Se almacenará en caché los datos o el único renderizado cuando la dependencia del nombre del invitado haya cambiado. Aquí es donde radica la diferencia entre las propiedades computadas y los métodos. Los métodos por otro lado, siempre volverán a renderizar cuando algo cambie, aunque no haya ningún cambio en los datos que muestra. Echemos un vistazo a esto en acción iniciando sesión en la consola. nombre son el registro de consola al método de formulario enviado y simplemente la consola registra el texto del método. En la nueva propiedad computada que acabamos de crear. Queremos iniciar sesión en la consola los textos de computado. Si pasamos al navegador y luego hacemos clic derecho y abrimos la consola. Si entonces agregamos un nombre a nuestra lista de invitados y presionamos enviar, podemos ver que ambos método sin computar arriba ingresaron a la consola. Esto se espera porque hemos agregado a la matriz de nombres de invitado dentro de la propiedad de la computadora. Es ver la propiedad de nombre del huésped como una dependencia. Entonces vista es consciente de que los cambios ocurrieron y luego vuelve a renderizar un contenido. Tenemos el registro de métodos porque como mencionamos antes, los métodos siempre vuelven a renderizar, cuando algo cambia, aunque los datos dentro no hayan cambiado. Veamos este comportamiento en acción agregando un nuevo método. Voy a pasar a la página de índice y añadir un botón. Basta con soplar el hueso de entrada, en el botón HTML normal con el texto o llamar a un método. Entonces podemos agregar un oyente de clics usando la mano corta. Entonces al click, voy a establecer esto en una llamada de método. Ahora podemos ir y crear esta llamada de método dentro del app.js Asegúrate de que esto esté por debajo del método de formulario enviado y separado con una coma. Configuramos esta llamada de método, justo antes de toda esta función, y luego dentro del cuerpo, vamos a establecer los estilos. Todo lo que vamos a hacer es configurar estos estilos y luego cambiar el margen superior para ser de 50 píxeles. Este es un método que no tiene nada que ver con los datos del nombre del huésped. Veamos qué sucede cuando llamamos a este nuevo método. Volvamos a la App, escriba un nuevo nombre en el campo de entrada y luego haga clic en enviar. Vemos tanto los métodos como computados primero, que es un comportamiento que hemos visto antes, esto es lo que esperamos. No obstante, cuando llamamos al nuevo método presionando el botón nuevo, solo vemos el método registrado, esto se debe a que nuestra nueva llamada al método solo tiene efectos la propiedad de datos top margin y tener una propiedad computada es solo vigilando los cambios en la propiedad de nombre del huésped. Esto significa que, computado no se registrará porque no se ha realizado ningún cambio. No obstante, todavía obtenemos una llamada de método porque todos los métodos siempre se vuelven a renderizar, aunque los datos dentro de ellos no hayan cambiado. Esto significa que a menos que tenga una razón específica para volver a renderizar método cada vez, entonces las propiedades computadas serán una forma más eficiente de hacer las cosas. Para muchos casos. Usando una propiedad computada, método auto logrará los mismos resultados.Basta con tener en cuenta esta diferencia en el comportamiento detrás de bambalinas. Antes de que terminemos este video son algunos puntos clave que quiero mostrarles. En primer lugar, vamos a agregar una prueba a nuestros métodos objetos, para simplemente hacer un registro de consola. Volvamos atrás de los métodos y crea nuestro método de prueba, satisfaciendo de la misma manera que una función que hace un registro de consola y simplemente da salida a la consola, los textos del texto del método. Encima en la página de índice, voy a ir por debajo del botón que se crea y llamar a este método dentro de nuestras llaves dobles. En el nombre del método de prueba, guarde eso y pasemos al navegador. Podemos ver que vamos a obtener un error. Esto se debe a que al llamar a un método dentro llaves triples como expresión de JavaScript, necesitamos llamarlo usar el paréntesis. También lo son los paréntesis justo después del texto. Ahorremos y echemos un vistazo a eso y podemos ver en nuestros trabajos. No obstante, cuando los colonos como propiedad computada, no se utiliza el paréntesis. La acción de la serie, podemos mover nuestro método sobre en después de JS y configurar una propiedad computada en su lugar. Pongamos esto y luego lo peguemos a continuación como una propiedad calculada, y luego guardemos eso. Si eliminamos los paréntesis más en la página de índice, y luego decimos si podemos ir al navegador y podemos ver que esto ahora funciona, ahora obtendrá el log de la consola a. Un inconveniente al usar propiedades computadas es que, no podemos realizar tareas asíncronas. No obstante, podemos hacer esto mediante el uso de una opción de reloj, que es proporcionada por VGS. Esta también es una alternativa de propiedades computadas, y vamos a echar un vistazo a esto en el siguiente video. 23. Observadores: En el último video, miramos el uso de propiedades computadas, que son una gran manera de agregar funcionalidad a nuestra app. Las propiedades computadas vigilan el código y solo reaccionarán si alguno de los datos cambia. Como alternativa Vue.js también nos proporciona una propiedad de reloj, que podemos usar cuando queremos ver una propiedad de datos y reaccionar ante cualquier cambio. Usar Watch también nos permite realizar tareas asíncronas que no podemos usar con propiedades computadas. Nosotros configuramos los objetos de reloj en la instancia vue, igual que hicimos con los métodos y datos calculados. Para empezar, voy a empezar por eliminar los ejemplos del último video. Por lo que en app.js, podemos eliminar el método de prueba. También podemos eliminar la llamada de método. Así que quita esos dos y luego vuelve en index.html, también podemos eliminar el botón Ejemplo que agregamos también. Una vez hecho esto, volvamos al app.js y que configuraron nuestro objeto Watch. Esto por supuesto se agrega igual que los otros objetos que hemos mirado. Entonces agrega una coma justo después de la sección calculada, y luego agrega nuestro objeto de reloj. Dentro del objeto reloj, podemos establecer una propiedad de datos que desea observar. Este nombre debe coincidir con un nombre de datos existente. Entonces por ejemplo, necesitamos usar GuestName o algo como EventDate, que ya tenemos dentro de nuestra propiedad de datos. Voy a ver nuestra propiedad GuestName. A continuación especificamos una función que queremos ejecutar cuando hay un cambio a GuestName. Al cambiar Vue.js pasará el valor de este cambio a la función.Dentro de los paréntesis de función, podemos pasar en un nombre que queremos dar a los datos vue pasará. Este nombre puede ser cualquier cosa que quiera, pero voy a llamarlo datos, y luego dentro de la función, voy a iniciar sesión en la consola un mensaje cuando GuestName, que está siendo observado por el observador, se cambie. Entonces agreguemos el registro de consola del reloj activado. Entonces abramos la consola en el navegador, y luego agregamos algunos nombres a la lista de invitados. Por lo que una cosa que notarás es reloj disparado se imprime dos veces por nombre agregado. Esto se debe a que estamos observando la propiedad de datos de GuestName. GuestName se cambia dos veces. Se cambia una vez dentro del método de formulario enviado, y luego una vez más dentro de la propiedad calculada, para ordenar los nombres en orden alfabético. Entonces podemos ver que se están observando estos datos y la función se ejecuta en cada cambio.Por supuesto, este es un ejemplo básico, pero te da una idea de cómo se pueden utilizar. Usaremos un más después a medida que pasemos por los proyectos del curso. Por razones de rendimiento, generalmente es mejor usar una propiedad calculada siempre que sea posible debido a esta representación eficiente debido al almacenamiento en caché. Pero los observadores, como hemos comentado, son útiles para observar cambios en propiedades de los datos y también son útiles para tareas asíncronas, como el acceso a datos de API. 24. Eventos y modificadores clave: Anteriormente en el curso, miramos a los manejadores de eventos, usando el V on Directiva, luego cambiamos V on a una sintaxis más corta mediante el uso del símbolo @. Esto desencadenó el método de formulario enviado, cuando se detectó el evento de envío. También mencionamos que no nos limitamos a usar just submit. También tenemos acceso a toda la gama de eventos HTML, como on-click, on-change, y on-mode por nombrar algunos. Un largo camino para desencadenar eventos, también podemos usar el V on Directiva, el símbolo de taquigrafía @ para hacer algo cuando se presiona una tecla del teclado. Dentro de nuestras entradas, voy a agregar un evento de teclado a nuestra entrada de nombre. Podemos usar eventos de teclado estándar, como key-down. En este ejemplo, voy a usar key-up, seguido del código clave que queremos ver. Una vez liberada la clave número 32, que es la barra espaciadora, que es la barra espaciadora, activamos un método llamado tecla presionada. Todavía no hemos configurado el método de pulsación de teclas, así que hagámoslo ahora. Dirígete al Up.js, y luego agreguemos un nuevo método. Este método por supuesto se llama tecla presionada. Todo lo que quiere que hagamos es agregar un registro de consola, y dentro de este registro de consola, solo vamos a imprimir el texto de tecla presionada. Esto simplemente se conectará a la tecla de consola presionada una vez que se esté liberando la tecla de espacio. Entonces vamos a guardar esto y abrimos esto dentro de la consola. Si presionamos la barra espaciadora dentro del campo de entrada de nombre, podemos ver que nuestros eventos clave han sido detectados. Entonces para este ejemplo, utilizamos la clave número 32, que es la barra espaciadora. Podemos Google códigos clave JavaScript para una lista completa de números para todas las claves si queremos. No obstante, Vue.js también nos proporciona algunos alias para claves comunes. Podemos reemplazar la clave número 32 por la palabra espacio, y después darnos una oportunidad si actualizamos. Esto funciona igual, pero es más legible y más fácil de recordar. Vue.js también nos permite usar enter, tab, delete, escape, up-down, y también izquierda y derechos en el lugar de cualquiera de los códigos clave. Sólo intentemos una más. Podemos cambiar el espacio a la tecla de escape, así que digamos eso y presione la tecla de escape, y funciona igual que antes. Es así como podemos usar claves para desencadenar eventos, y cómo podemos usar modificadores de claves, o alias en nuestros proyectos de Vue. 25. Filtros: Vue JS también nos proporciona una propiedad llamada filtros, que también podemos agregar a nuestra instancia de vista. Los filtros están diseñados para aplicar formato o transformación de texto común, como cambiar cadenas a mayúsculas o minúsculas. No pretendían ser utilizados para tareas complejas. Si tienes algo más complejo entonces es malo usar una propiedad computada en su lugar. Agregar filtros se hace realmente simple. Podemos añadirlos incluso al usar v-bind, que miramos antes, o al usar la sintaxis de doble rizado. Para ver esto en acción, voy a pasar a nuestro bucle for en el index.html. Entonces dentro de las llaves dobles tendrán nombre. Mantenemos en su lugar la expresión de nombre y luego agregamos nuestro nombre de filtro después, separados por un símbolo de tubería. Si agregamos un filtro usando v-bind, podemos hacer exactamente lo mismo. Simplemente agregamos primero la expresión JavaScript, luego el nombre del filtro separado por la tubería. Después, en nuestra instancia de vista, agregamos nuestra propiedad de filtros. Aquí es por supuesto donde agregamos todos nuestros filtros. Añadamos nuestros dos filtros superiores que acabamos de agregar. El sintaxis es justo lo mismo que los vigilantes a los que mirábamos antes. Esta es una función que toma en el valor de los datos que se le pasan. Para nuestro ejemplo, será el valor del nombre. Al igual que cuando miramos el uso de vigilantes, podemos nombrar a este valor lo que nos guste. Después devolveremos el valor transformado a mayúsculas. Vea nuestra mayúscula. Es simplemente JavaScript simple y no nos lo proporciona Vue JS. Nuevamente, este es un buen ejemplo de cómo podemos hacer los datos de Vue JS con JavaScript simple. Guardemos esto y probemos en el navegador. Ve al campo de entrada, y si escribimos un nombre dentro de ahí con minúsculas y luego presionamos “Enter”, podemos ver que el nombre ahora se transforma en mayúsculas. También podemos usar múltiples filtros y encadenarlos juntos. Todo lo que necesitamos hacer es volver a las llaves dobles donde agregamos el primer filtro. Nuevamente, lo separas por una tubería agregamos el nombre de nuestro segundo filtro, el cual queremos aplicar. Esto funciona de izquierda a derecha. En este caso, entonces se pasará “nombre” a, filtro “TouPper”. A continuación, el valor del filtro TouPper se pasará a “FormatName”. Por lo que el orden es importante. Podemos ver este orden en acción si agregamos el filtro “FormatName” en el app.js. Justo debajo del filtro “TouPper” separado por una coma. Podemos añadir un “FormatName”. Nuevamente, esta función toma en el valor que se le pasa de “TouPper”. Entonces si simplemente en la consola registramos el valor que se le pasó, entonces ve al navegador y abre la consola. Podemos ver que el valor está en mayúsculas. Esto demuestra que estamos obteniendo el valor del nombre después de que haya pasado por el primer filtro. Esto es sólo un ejemplo, por lo que podemos quitar los dos filtros superiores y también retirarlo de nuestra página de índice. Ahora podemos agregar algo de formato a nuestro nombre y luego volver a nuestro filtro y quitar el registro de la consola. El formato en el que vamos a aplicar va a tomar el nombre que escriba el usuario, va a rebanar la primera letra y luego transformarlos para que sean mayúsculas. Todos los caracteres restantes después se transformarán en minúsculas. Para ello, vamos a devolver el “valor.rebanada”. Vamos a rebanar nuestra posición cero, que es la primera letra. Nosotros sólo queremos la rebanada esta primera letra, por lo que esto sólo va a ser para un puesto. Esta primera letra, luego vamos a transformarnos en mayúsculas. Entonces vamos a sumar al final de esta letra mayúscula, de nuevo, el “valor.rebanada”. Este va a ser el resto de los personajes desde la posición uno en adelante. Todo lo demás es que los personajes se van a establecer en minúsculas. Añadamos esto al final y luego guardemos eso. Ahora si voy al navegador. Añadamos un nombre con una mezcla de mayúsculas y minúsculas y luego pulsamos “Enter”, y podemos ver que el nombre está correctamente formateado ahora. Por supuesto, un formato más complejo como si el usuario agrega un nombre con un apellido o incluso nombres gratuitos, necesitamos hacer un poco más de trabajo para evitar esto. Este puede ser un buen caso para cambiar a un valor computado en lugar del filtro. Tanto para el formato de texto simple, uso de filtros es una forma ideal de hacerlo. 26. Más sobre el bucle: claves y números de índice: En este video, vamos a echar un poco de una mirada más profunda sobre el uso de fore-loops. Te vamos a mostrar cómo agregar claves y también cómo agregar números de índice a cada elemento. En ocasiones cuando recorremos una matriz, al igual que cuando recorremos todos los nombres de nuestros invitados y los mostramos a la pantalla, posible que tengamos la necesidad de agarrar el número de índice de cada elemento dentro de la matriz. El número de índice es la posición de cada ítem. Por ejemplo, el primer nombre agregado es la posición cero porque las matrices siempre comienzan en la posición cero. El segundo nombre agregado estará en la posición uno, y así sucesivamente. Tenemos acceso a este número de índice en VUGS al usar un bucle v-for. Todo lo que necesitamos hacer es agregar un segundo argumento al bucle v-for como este. Asegúrate de estar en el index.html. Si nos desplazamos hacia abajo hasta la parte inferior, tenemos el bucle v-for para recorrer los nombres de los invitados. El interior de este v-for loop, podemos sumar nuestro segundo argumento. Tenemos que raparlos dentro de los corchetes. El primer argumento sigue siendo el nombre que le damos a cada valor dentro del bucle. Entonces el segundo es un nombre que queremos dar al número de índice. Ambos nombres nos toca totalmente a nosotros. Podemos elegir lo que queramos, pero lo mejor es mantenerlos más descriptivos si es posible. Ahora se establece el nombre del índice. Podemos añadir esto usando las llaves dobles. Justo después de nuestro nombre formativo, vamos a generar dentro de los paréntesis el valor de nuestro índice. Ahora si guardamos y pasamos al navegador, podemos ver la posición de índice de cada nombre. Aprendimos temprano que también podemos agregar JavaScript dentro de esta sintaxis de doble rizado. Aprovechemos esto volviendo al índice y agregando más uno al número de índice. Esto significa que nuestro índice ahora comienza en la posición uno en lugar de cero. Agregamos índice más uno, y guardamos eso. Ahora si volvemos a nuestra aplicación y agregamos algunos nombres, ahora tenemos el número de índice que coincide con el número de invitados. A continuación, quiero echar un vistazo a agregar claves a nuestros bucles. También podemos permitir que la vista realice un mejor seguimiento nuestros valores de matriz al proporcionar una clave única para cada uno de los ítems. Se recomienda utilizar una llave única con v-for siempre que sea posible. La vista de comportamiento predeterminada que utiliza al actualizar una lista de elementos, como una matriz, es el parche y el elemento en su lugar en un número de índice determinado. Si [inaudible] agrega una matriz, este elemento extra en su lugar en la posición de índice designada en lugar mover elementos [inaudibles] al orden correcto. Esto hace que sea una forma eficiente de hacer las cosas, pero podemos ir una mejor. Podemos asegurarnos de que cada elemento de la matriz tenga un identificador único, que podemos hacer referencia si necesitamos hacer un cambio. View puede entonces realizar un seguimiento de cada elemento y puede mover cosas al actualizar, e incluso reutilizar elementos cuando sea necesario. En cualquier clave única significa que la vista ahora está al tanto de los ítems, en lugar de simplemente saber qué posición de índice necesita parchear en un nuevo valor. Esto hace que el comportamiento sea más seguro y predecible al cambiar valores en una matriz. Podemos agregar clave yendo a nuestro for-loop. Utilizamos colon para encuadernación dinámica, y el nombre que le damos a esta clave también es importante. Debe vincularse a algunos datos reactivos existentes. Si tratamos de agregar un nombre aleatorio que no se declara en la instancia de vista, obtendremos un error. Solo tecleemos en nombre aleatorio y luego guardemos eso. Entonces si vamos a la aplicación y agregamos un nombre a la lista de invitados, abre la consola, veremos un error. Podemos utilizar un dato existente como nuestro nombre de huésped. Escribamos un nombre dentro de la clave. Ahora si guardamos eso y pasamos al navegador. Si tocamos refrescar, ahora podemos ver que se está eliminando el mensaje de error. Ahora vista reconoce este nombre como una propiedad de fecha. Ahora bien esto puede no ser ideal porque puede que tengamos más de una persona con el mismo nombre. Podríamos configurar un objeto para sostener un ID único con el nombre de cada huésped. También abra nueva propiedad de fecha para mantener un valor único, y luego utilízala como clave. Por ahora, sólo me voy a ir y volver a esto en unos cuantos videos tiempo. Lo principal a entender es que al crear un for-loop, realmente es la mejor práctica agregar una clave a una lista de valores siempre que sea posible. 27. Uso de múltiples instancias en Vue: En nuestra aplicación de lista de invitados, actualmente, solo utilizamos una instancia de Vue js para controlar toda nuestra aplicación. Esto está bien y pequeño como éste. Pero en aplicaciones grandes, posible que nos resulte más conveniente dividir cierta funcionalidad o ciertos datos en múltiples instancias. Usar múltiples instancias está perfectamente bien de hacer, puede incluso tener sentido en algunos casos, donde queremos que el código se contenga en secciones. Hacemos esto igual que antes. Creamos una nueva instancia de Vue y también una nueva sección HTML, como el div para enlazar a nuestros datos. Empecemos con esto ahora. Si pasamos al index.html, actualmente tenemos la primera instancia de vista vinculada a este div con el id de app. Lo primero que quiero hacer es cortar el div contenedor de apertura y luego mover esto a la parte superior. Esto es así que contiene nuestro contenido existente y también el nuevo div de navegación, que ahora voy a agregar. Vamos a crear un nuevo div con un id de navegación. Este id enlazará a nuestra instancia de Vue usando la propiedad el y lo crearemos pronto. Entonces voy a cortar la primera fila de nuestra app y luego pegar esto dentro de la sección de navegación que acabamos de crear. Ahora, tenemos esta nueva sección de navegación. Voy a pasar a app.js y podemos crear una nueva instancia de Vue justo debajo de la última. Si vas a la parte inferior, ahora podemos escribir “Nueva Vista”, y luego de nuevo sólo tienes que introducir el objeto dentro de los paréntesis. El primer inmueble de nuevo, hay que añadir es el. Este es un ID de navegación. Añadamos esto en la parte superior. Entonces podemos agregar nuestros objetos de datos. Vamos a agregar algunos datos reactivos aquí, como el nombre de la aplicación. Voy a establecer el nombre de la aplicación para que sea igual a lista de invitados, que es lo que tenemos actualmente. Entonces si volvemos a nuestro div de navegación, entonces podemos usar unas llaves dobles para reemplazar el texto de la lista de invitados por el nombre de nuestra aplicación. Guarda eso y si probamos esto en el navegador, no deberíamos ver ninguna diferencia. lo que significa que todo está funcionando bien. Hay un inconveniente para hacer esto sin embargo, los datos contenidos en cada instancia de Vue están separados entre sí. Esto significa que solo podemos usar esta palabra clave para acceder a los datos dentro de la instancia de vista en la que se utiliza. Si vuelve a la primera instancia de Vue y luego agrega un registro de consola. Voy a agregar esto dentro del método de formulario enviado y quiero registrarme este nombre.app. Recuerde que el nombre de la aplicación es una propiedad de datos de nuestra segunda instancia. Guardemos esto y veamos qué pasa. Si pasamos al navegador, abrimos la consola, abrimos la consola, y hacemos clic en el botón “Enviar formulario”, obtenemos un mensaje de advertencia rojo que dice que la propiedad de los estilos de aplicación no está definida. Esto es por el mismo problema. El objeto de estilos de aplicación es una propiedad de datos dentro de la primera instancia. Aquí, también tratamos de acceder a esto dentro del index.html dentro del control de sección por la segunda instancia de navegación. Sabemos ahora cómo enlazar estilos. Retrocedamos los estilos en la hoja de estilo para poder acceder a una en todas partes. Podemos pasar a la instancia de Vue y eliminar el objeto de estilos de aplicación. Ahora, estos se borran. Podemos volver al app.css y luego volver a introducir el margen superior de 25 píxeles. Este margen se agrega a todas las filas, así que usa la fila como selector y luego agrega en el margen superior de 25 píxeles, y luego guarda eso. Entonces si volvemos a la página index.html, podemos eliminar la propiedad de estilo de los estilos de la app en todas las ubicaciones. Ese es el primero y luego el segundo. Entonces, por fin, quitemos la tercera y última. Entonces también podemos eliminar el registro de la consola del método. Volvamos al app.js y bajemos al método de formularios enviados y luego eliminemos esto. Ahora bien, si guardamos esto y volvemos al navegador y actualizamos, deberíamos ver que todo está funcionando bien de nuevo. Dividir secciones en múltiples instancias Vue está perfectamente bien de hacer y también es práctico si el código contenido en cada instancia no está relacionado o no hay razón para requerir datos de otras instancias. Hay datos de accesos de residuos de instancias superiores con otros métodos. Pero lo cubriremos más adelante en este apartado. Continuaremos a continuación agregando algunos enlaces de navegación a nuestra nueva instancia y también utilizando estos enlaces para ver cómo podemos recorrer objetos. 28. Bucle con objetos: Ya hemos cubierto el bucle a través de matrices durante este proyecto. En este video, quiero continuar con nuestra nueva instancia vue, agregando un nuevo array objetos de enlaces de navegación, que también podemos recorrer. Los valores en este objeto también contienen AID. Por lo que también puedes usar esto para agregar una clave única. Por lo que la vista puede realizar un seguimiento de los artículos enumerados dentro de nuestro app.js. Empecemos a crear nuestra matriz de objetos, hacia nuestros enlaces de navegación. Debajo del nombre de la aplicación. Voy a empezar con el nombre de NavLinks. Esto va a ser una matriz. Cada elemento de matriz es un objeto que tiene un par de valor clave de nombre e ID. Abramos las llaves para el primer enlace. Voy a poner el nombre como la clave, y el hogar como el valor. Entonces sepárense por una coma. También vamos a añadir una identificación. Entonces voy a mantenerlo sencillo y empezar con ID de uno, y luego separarlo por una coma, podemos iniciar nuestro segundo enlace. Entonces voy a copiar y pegar el primer elemento. Cambie el nombre a próximos eventos, y luego también cambie el ID al número 2. Entonces una vez más, pega lo mismo, y llamaremos a este uno beneficios para huéspedes. Danos una identificación de tres, y luego el enlace final, vamos a sumar las últimas noticias, luego hacer que sea ID número 4. Entonces vayamos también a nuestra página web index.html, y veamos cómo podemos recorrer este array de objetos. Voy a crear un nuevo div para esto, justo debajo de la etiqueta div de cierre para el nombre de la aplicación. Crea el div circundante, y luego dentro aquí voy a crear una lista desordenada, para mostrar todos los enlaces desde la navegación. Entonces dentro de esto, queremos agregar una etiqueta de plantilla HTML. Esta etiqueta de plantilla se puede utilizar con V4 y también VF2. Para renderizar un bloque de múltiples elementos. Plantilla es solo un contenedor, igual que un div ordinario. Pero este elemento de plantilla no se renderizará al DOM. Entonces tendríamos dentro de esta plantilla podemos crear el bucle V4. Entonces voy a llamar a este NavLink en NavLinks. Por supuesto, NavLinks es el nombre de la propiedad de fecha que hemos creado. Entonces no alineamos artículos, vamos a crear nuestros ítems de lista. Esto lo usamos con las llaves dobles. El primero va a ser Navlink.name. Voy a crear un elemento de lista más a continuación, que va a ser Navlink.id Esto seleccionará el nombre y el id de cada objeto individual. Por lo que ahora tenemos el contenido dentro de la plantilla. Si pasamos a las herramientas div, podemos seleccionar el div que hemos creado. Seleccionamos la lista desordenada. Podemos ver que las etiquetas ul está ahí, y luego es seguido por el contenido dentro de las etiquetas de plantilla. Por lo que en realidad no vemos el elemento de plantilla renderizado en la pantalla. Pero sí vemos en la pantalla el nombre y también el id de cada objeto dentro de nuestra matriz. También podemos mostrar los pares de valor clave de cada herramienta de objeto. Tecla tanto el nombre como también el id del objeto. Siendo el valor después de la clave, como el hogar y uno. Podemos simplificar lo que ya tenemos en un solo elemento de lista. Entonces si eliminamos el segundo elemento de lista, y luego podemos agregar un segundo bucle V4. Este va a ser valor en NavLink. El valor del nombre es opcional. Esto puede ser cualquier cosa que queramos, pero el nombre NavLink también es opcional, pero debe coincidir con el nombre dentro del bucle externo. También añadiremos una regla horizontal, por lo que se puede separar cada elemento de la lista. Ahora si agregamos valor a las llaves dobles, puedes ver esta salida a la pantalla. Entonces pasa al navegador, e imprime las claves y los valores de los objetos como par. También podemos separarlos para trabajar con ellos de forma independiente. Si rodeamos valor dentro de los corchetes. También podemos agregar una clave, lo que significa que tenemos tanto la clave como el valor disponible para usar de forma independiente. Entonces después del valor, agregue una coma y luego clave. Ahora en lugar de simplemente emitir el valor, también emitirá la clave separada con la tubería, y luego volver al navegador. Podemos ver esto en acción. Contamos con la clave y el valor impreso para cada objeto. También podemos agregar un tercer argumento es clave y valor. Recuerda agregamos un número de índice al bucle V4 para imprimir los nombres en nuestra lista de invitados. Bueno, también podemos hacer lo mismo aquí con los terceros argumentos. Voy a llamarlo índice otra vez, porque tiene sentido nombrar esto. Por lo tanto separados por coma agregar índice como tercer argumento. Entonces como tercer argumento dentro de las llaves dobles, también vamos a imprimir el índice. Así que ahorra y luego pasa a nuestro proyecto y luego refresca. Ahora también podemos ver el índice impreso junto a cada ítem. Ahora sabemos bucear a través de objetos. Pongamos en práctica su técnica en el siguiente video. Por nuestros enlaces de navegación, cómo queremos que se vean dentro de nuestra app. 29. Añadir nuestros enlaces y claves de navegación: Ahora sabemos trabajar con bucles a través de objetos, estructuremos esto para que sea más adecuado a nuestra aplicación. También agregaremos una clave única a cada elemento y nos aseguraremos de que cada elemento de navegación tenga una URL a la que enlazar. Para empezar, voy a eliminar el ítem de lista completa del último video. Después reemplaza esto por un elemento de lista estándar, que genera el nombre de punto NavLink. Esto simplemente mostrará los nombres de nuestros enlaces, y debido a que se trata de una barra de navegación, también queremos hacer estos enlaces. Adelante y rodeemos el enlace de navegación con unas etiquetas. Añadirlos dentro de los elementos de la lista. En el a tag con el href, y solo deja esto vacío por ahora y luego cierra la a tag. Ahora agreguemos algunos enlaces a nuestro objeto para enlazar, vuelta en los enlaces de navegación en la App dot js. Después de la ID más quieres agregar una URL a la que enlazar. Este solo va a ser un enlace ficticio solo para probar su funcionamiento, después de la coma agregaremos la URL y agregaremos un enlace, solo voy a usar Google para este ejemplo. Escriba H-T-T-P-S dos puntos barra hacia adelante, barra hacia adelante, y luego www dot google dot com. Entonces podemos copiar esto y pegar esto en, en los cuatro enlaces. Pondré el segundo para ir a Amazon dot com, el tercero para ir a eBay, y luego la cuarta forma vamos a añadir como Facebook. Ahora tenemos una URL para agregar a nuestras etiquetas a en HTML. Recuerda de la última sección dijimos que no podemos usar las llaves dobles para agregar datos reactivos a atributos HTML como este. Podría agregar las llaves dobles, y luego agregar la URL de punto de navegación. Para que esto funcione, necesitamos usar la directiva V bind para agregar a nuestra URL, o voy a usar la técnica taquigrafía de solo el colon. También necesitamos quitar las llaves dobles para que esto funcione dentro de un atributo. Guardemos esto, y si pasamos a nuestros enlaces de navegación en el navegador, podemos hacer click en los enlaces y probar el trabajo. Todos parecen estar funcionando bien. Sólo intentaremos uno más. Genial. Ahora los enlaces funcionan como queremos. Es hora de agregar ahora algo de estilo a los enlaces. Desde ya tenemos a Bootstrap vinculado a nuestro proyecto. Podemos agregar algunas clases de Bootstrap a nuestra navegación. En primer lugar, si abrimos la etiqueta URL, podemos agregar una clase Bootstrap de nav, y luego en los ítems de la lista también podemos agregar un cluster también. De nuevo, se trata de una clase Bootstrap de elemento de guión nav. Entonces dentro de los enlaces agregará una clase de NavLink, y luego si quieres agregar algunas líneas horizontales en su lugar solo para romper nuestra app. El primero que voy a agregar justo debajo del encabezado nivel uno de nuestro nombre de aplicación, así que agrega hr dentro de ahí. El segundo es justo antes del div de cierre con el ID de navegación y esto agregará una línea por encima y también por debajo de nuestros enlaces de navegación. Lo último que quiero hacer a nuestra navegación es agregar una clave única a cada ítem de la lista. Tocamos esto hace unos videos. Pero esta vez ahora tenemos acceso a un ID dentro de nuestro objeto de enlaces de navegación. Esto hace que sea una clave ideal porque tenemos cada valor conjunto para ser único. Ahora volvamos a nuestro HTML. Ahora agreguemos esta clave dentro del elemento de plantilla justo después del bucle for. Enlaza la clave y establece esto igual a NavLink dot ID. En teoría deberían funcionar. Pero sin embargo, habrá un pequeño problema, que veremos si pasamos a las herramientas de desarrollo. Haga clic derecho e inspeccione. Vemos la plantilla diciendo de advertencia roja no se puede teclear. Coloca clave en los elementos reales en su lugar. Recibimos la advertencia de que necesitamos usar esto en un elemento real porque plantilla se utiliza como contenedor para sus contenidos templados. Actúa como un contenedor en lugar de un elemento HTML. Para solucionar esto, podemos cambiar las etiquetas de plantilla por otra cosa, como un div y guardarlo. Ahora si volvemos a la consola y actualizamos, ahora va y tenemos una clave única trabajando en nuestra navegación. Esa es ahora nuestra navegación completada y también nuestra segunda instancia de vista. Nos basaremos en esto en el siguiente video, donde veremos cómo podemos acceder a una instancia de vista externamente desde otra instancia de vista. 30. Acceso a instancias Vue externas: Ahora sabemos que podemos usar múltiples instancias de Vue para controlar unas secciones particulares de nuestra aplicación. Discutimos cómo puede ser útil para hacer esto, para agrupar la funcionalidad relacionada con el agrupamiento, como agrupar toda la funcionalidad Navbar, como en nuestro ejemplo, o incluso una barra lateral tal vez podría usar caso. No podemos acceder directamente a cosas como nuestros datos y métodos desde una instancia, desde dentro de una instancia diferente usando esta palabra clave; sin embargo, hay otra forma de sortear esto. Si desea acceder a los datos desde una instancia externamente, podemos darle a cada instancia un nombre de variable. Si pasa a nuestro app.js y éste hace que esto sea un poco más legible haciendo clic en el botón de colapso de la izquierda. Haremos eso para nuestra primera instancia. En segunda instancia. Justo antes de llamar a New Vue, y queremos agregar un nombre de variable de vm1 y establecer esto igual a nuestra nueva instancia de vista; y luego hacer lo mismo para la segunda; So variable vm2. A menudo verás estas variables llamadas vm. Distancia para el modelo vue, ya que Vue se inspiró en el patrón de diseño MVVM. Puedes leer más sobre esto con el enlace al final de la sección si quieres. Este nombre de variable depende totalmente de ti sin embargo. Se puede nombrar lo que quieras. Entonces puedo hacer referencia a nuestra instancia fuera de la instancia usando JavaScript normal. Entonces si quisiéramos cambiar de datos en primera instancia de vm1, como la capacidad del evento. Podemos hacerlo así. Si nos aseguramos del exterior tanto vm1 como vm2, podemos seleccionar vm1. EventCapacidad'. Entonces voy a poner esto para que sean 15. Ahora si pasamos a la app, podemos ver el cambio. Podemos ver Asistentes ahora es 0 o 15, en lugar de o de 25. Se están haciendo sus cambios con JavaScript normal y desde fuera de la instancia de vista. También podemos hacer lo mismo, pero desde dentro de nuestra segunda instancia. Añadamos un método a nuestra instancia vm2. Este método voy a llamar 'capacidad cambiada. Entonces dentro de aquí podemos cortar el JavaScript que usamos antes. Por lo tanto cortar 'VM1.eventCapacity. Ahora pega esto dentro de la función. Después, en HTML, podemos llamar a este método agregando un nuevo botón. Añadamos un nuevo botón dentro de la sección de navegación. Justo después de la línea horizontal, voy a agregar un botón con un manejador de clics. Esto va a desencadenar el método de cambio de capacidad. Entonces, cuando se llama a este método, el método se ejecuta dentro de la instancia vm2. No obstante, está cambiando los datos de capacidad de eventos de nuestra instancia vm1. Guarda eso. Si refrescamos el navegador y luego hacemos clic en el botón, la capacidad debería volver a cambiar a 15. Este es un ejemplo realmente simple de cómo podemos acceder a instancias, tanto usaría JavaScript externamente como también desde dentro de instancias. Es importante saber cómo hacerlo, si alguna vez necesitamos tener acceso a nuestras instancias desde fuentes externas. Dejaremos ahí este video y nos vemos la próxima vez. 31. Propiedades y métodos de instancia en Vue: Durante la construcción de este proyecto, hemos agregado nuestras propias propiedades y nuestros propios métodos a la instancia de Vue junto con estos, que ahora deberíamos tener una mejor comprensión de cómo trabajar con ellos. Vue también nos proporciona algunas propiedades y métodos a los que tenemos acceso. Si vamos a vuejs.org, que nos lleva a la Página Principal del Vue. Entonces si hace clic en el enlace de la API en la parte superior, podemos ver la documentación de la API. Si nos desplazamos hacia abajo usando la navegación de la izquierda, podemos ver algunas cosas de aspecto familiar, como nuestras opciones de datos, calculadas sobre métodos. Más abajo está lo que llamamos propiedades de instancia y métodos de instancia. Todas estas propiedades son métodos, también tienen un prefijo $ signo, por lo que podemos distinguirlas fácilmente de otras. Si pasamos a nuestra app, podemos ver estos como parte de nuestras instancias. Pasemos a app.js. Tienes que ir justo al fondo podemos crear un registro de consola. Simplemente voy a la consola log el contenido de vm1 que es nuestra primera instancia de Vue. Ahora pasemos al navegador y abrimos esto en la consola. Podemos ver que tenemos el contenido de la instancia Vue. Parte de esto ya reconocerás, como la propiedad 'el', que puedes ver es administrar nuestro div con la idea de app, que establecimos antes. Podemos utilizar estas propiedades y métodos, prefijo con un símbolo $, para acceder a los datos que necesitamos. Por ejemplo, podemos cambiar nuestro registro de consola para mostrar la propiedad 'el' agregando un $el después de vm1. Entonces dentro de la consola, podemos ver el div con la clase de app, que nuestra instancia está gestionando. Solo eliminemos esta propiedad el y echemos un vistazo a la instancia completa de nuevo. Aquí está pasando mucho y vamos a echar un vistazo a más de estos a medida que pasemos por el curso. Algo sobre lo que quiero llamar su atención es hacia abajo cerca del fondo, se puede ver que hay muchos getters y setters. Estos se utilizan para obtener valores y establecer valores y significa que Vue puede observar y reaccionar ante los cambios. Estos getters y setters se añaden al crear la instancia Vue. Se puede ver que estas todas nuestras propiedades de datos, que Vue proxies para nosotros y también nuestros métodos computados. Tenemos formularios enviados y KeyPressed encima de ellos, que no tiene ningún getters ni setters. Esto se debe a que son nuestros métodos. Como sabemos, los métodos no miran y reaccionan ante los cambios, simplemente vuelven a renderizar cuando hay cambio en la aplicación. Además, si agregamos una nueva propiedad a una instancia de Vue después de crearla, no es proxied por Vue.js, lo que no es reactiva. Por lo tanto, no vigilar ningún cambio. Podemos ver esto en acción agregando una nueva propiedad a vm1. De vuelta en app.js, si agregamos vm1.title, que aún no existe, y pondremos eso en una cadena de texto de nuevo título. Ahora bien, si vamos a la instancia vm1 en la consola, podemos ver que hemos agregado una nueva propiedad llamada title para los getters o setters de Arnold. El inmueble no es reactivo. Por lo tanto, si tiene algún dato en nuestra aplicación el cual desea reaccionar ante los cambios, debe estar ahí al crearse en lugar de añadirlo después. No necesitamos este código para el proyecto así que voy a quitar el botón y también el método de cambio de capacidad. Adelante y hagamos eso ahora. En el índice deberíamos mover el botón y luego en los métodos en app.js, podemos eliminar el método de capacidad cambiado. medida que pasemos por el curso, veremos más de estas propiedades y métodos de instancia de Vue con más detalle. A partir del siguiente video, echaremos un vistazo a usar refs. 32. Referenciación de elementos con ref: En el último video, miramos algunas propiedades y métodos que están disponibles para nosotros en la instancia de Vue. Una de estas propiedades que puede ver se llama refs. Podemos utilizar refs registrar una referencia a un elemento. Podemos colocar un ref sobre cualquier elemento que queramos. Voy a pasar al índice a la página HTML. Si buscamos el título de la página, voy a empezar por quitar unas llaves dobles. Entonces simplemente reemplazando esto con lista de invitados. Entonces en la etiqueta de apertura h1, voy a agregar un atributo ref. La respuesta es a un nombre. Este no es un atributo HTML estándar, nos lo proporciona Vue.js. También somos libres de elegir cualquier nombre de ref que le guste. Ahora ten esta referencia a los elementos. Podemos trabajar con ello en nuestra instancia Vue. Voy a agregar un manejador de clics a este nivel en el encabezado, cual puedes engancharte a esta referencia. Añadiría click. Voy a establecer esto para que sea un nombre de método de cambio de título. Todo este elemento no es importante, aún podemos recuperar este método cuando se hace clic. Entonces agreguemos nuestro método en app.js. Tenemos que añadir esto en vm2. Añadamos nuestros métodos y utilizamos un nombre o cambio de título. Seguidamente seleccionamos la ref con este título asignar refs. Entonces desde antes las todas las propiedades de la vista nativa tienen el prefijo signo de dólar. Después agregamos el nombre. Entonces punto en un texto que es solo JavaScript. Esto no es algo proporcionado por Vue.js. Esperemos que ahora puedas empezar a ver el Vue.js y JavaScript de vainilla normal funciona juntos casi a la perfección. Podemos mezclar en JavaScript con propiedades y métodos Vue donde necesitemos. Ahora si guardamos eso y pasamos al navegador, si hacemos clic en el título, deberíamos ver que ahora se está cambiando el título. Junto con usar refs de signo de dólar para establecer datos, también podemos acceder a los datos utilizándolos. Si agregamos un log de consola para mostrar este signo de dólar dot refs, podemos ver qué devolvió. Dentro del método de cambio de título en un registro de consola y este signo de dólar refs. Después ve al navegador. Podemos ver que se devuelve un objeto. También podemos ver que es un h1 que hemos seleccionado. Si abrimos estos objetos, tenemos acceso a todos los datos asociados dentro de ellos. Podemos ver el HTML interno al que has restablecido y también todas las demás propiedades a las que podemos acceder. Por ejemplo, si miramos oculto, vemos que está establecido en falso por defecto. Podemos utilizar accesos de signo de dólar refs y cambiarlo dentro de nuestro método. Dentro del método ChangeTitle, podemos seleccionar este punto refs, nombre de punto. Dentro del método podemos quitar el texto interior y reemplazarlo por punto oculto. Que podemos establecer que esto sea cierto. Ahora si guardamos esto y volvemos a nuestra app, si hacemos click en el título. Oculto se establece en verdadero, por lo que los elementos desaparecen. Es así como podemos usar la propiedad de signo de dólar refs para hacer referencia y elementos y el conjunto o datos de acceso. Vale la pena mencionar también que podemos usar esta propiedad refs tanto dentro como fuera de la herramienta de instancia de vista. Hay algo que tener en cuenta aunque al usar refs, eso es refs y no reactivo. No se crean en el render inicial. Se crean como resultado de la función de render. Estamos cambiando el elemento en el DOM, pero no en la plantilla Vue.js. Por lo tanto, cambiamos algo que puede ser anulado por Vue.js en un día posterior cada vez que hay un re-render, como algo de lo que tener cuidado. No obstante, el uso de refs puede ser útil a veces y tal vez mejor utilizado para obtener datos en lugar de establecer datos debido a la falta de reactividad. 33. Uso de plantillas de cadenas: Durante este proyecto, hemos creado nuestras instancias de vista y luego montamos en elementos HTML mediante el uso de la propiedad L. También hay una forma alternativa que es crear una plantilla de cadena dentro de la instancia de vista. Vamos a seguir adelante y crear una nueva instancia de vista para almacenar el título de nuestra app dentro. Dentro de aquí podemos usar la propiedad de plantilla, así que voy a bajar hasta el fondo y crear una nueva variable, esta vez llamada vm3. Entonces esto va a contener nuestra nueva instancia de vista, y como siempre, toma en nuestro objeto opciones. Dentro de aquí, vamos a añadir una nueva propiedad de plantilla. Esta propiedad tomará en una cuerda, por lo que necesitamos rodear la marca arriba que proporcionamos dentro de las cotizaciones. Aquí vamos a crear el título. Al igual que nuestro título existente, vamos a abrir las etiquetas h1 y luego otro título de Lista de invitados, y luego se cierra. Ahora bien, si volvemos a la página de índice, podríamos quitar el título de nuestro HTML, fin de venir por nuestra nueva instancia de vista. Ahora, si guardamos eso, si actualizamos el navegador, podemos ver que el título ahora se retira de la página. Esto se debe a que hemos creado una nueva instancia de vista, pero no tenemos ninguna propiedad L, por lo que la plantilla está actualmente desmontada. Podemos montar manualmente la instancia usando $ montajes de signo. Este es un nuevo método de instancia que aún no hemos mirado, porque tenemos nuestra plantilla se almacena dentro de una variable llamada vm3. Si volvemos al app.js, podemos montarlo así. Vamos a escribir vm3. $ montar, y luego dentro del soporte podemos agregar los elementos a los que queremos montar. Voy a usar el div con el ID de navegación. Como una cadena que va a pasar en el # y luego navegación, esto monta nuestras plantillas al div de navegación, que ya tenemos en nuestro HTML. Guardemos eso y veamos qué efecto tiene esto. Si volvemos al navegador y luego actualizamos, ahora tenemos el título h1 de nuevo, que configuras dentro de la plantilla, pero puedes ver que hemos perdido los enlaces de navegación y también el estilo. Abramos las herramientas de desarrollador haciendo clic derecho y vamos a inspeccionar, echemos un vistazo a lo que está pasando. Tenemos nuestro contenedor en la parte superior, que está bien, luego inmediatamente después de eso es nuestro título h1, seguido del div con el ID de app. Puedes ver que no hay filas de Bootstrap ni ninguno de los divs de cuadrícula de 12 columnas Bootstrap, que tienes dentro de nuestro HTML. Además, nuestra lista desordenada para los enlaces de navegación tampoco está ahí, entonces ¿por qué es eso? Bueno, la razón es porque cuando montamos una plantilla a un elemento, esta plantilla reemplazará cualquier marcado existente. Esto significa que todos nuestros enlaces de navegación y clases de Bootstrap, simplemente usará el contenido de nuestra plantilla como un nuevo marcado. Podemos agregar estos divs y clases extra dentro de la cadena de plantilla. Si volvemos a nuestras plantillas dentro de la app, y luego dentro de la cadena, podemos comenzar a agregar nuestras clases de Bootstrap que rodean el encabezado de nivel 1. Antes de esto, podemos agregar un div con una clase de col-sm-12, y también podemos agregar text-center para alinear esto en medio de la página. Después del encabezado de nivel 1, queremos cerrar este div y luego guardar eso. Si volvemos al navegador, podemos ver que esto se vuelve a introducir el estilo Bootstrap, que teníamos antes. Pero como puedes ver, las cosas pronto comenzarán a verse bastante desordenadas dentro de la plantilla. También, hay otra limitación. No podemos dividir esto en múltiples líneas para que sea aún más legible. Si movemos el nivel 1 rumbo a su propia línea y luego justo después del día añadiremos el div de cierre también en su propia línea. Guarda eso y vuelve al navegador. Podemos ver que esto no funciona. Hay una manera de evitarlo, si pasamos a las plantillas, podemos colocar cada línea en su propia cadena. Agrega la cotización al principio y al final de cada línea, y luego podemos sumar éstas junto con el símbolo más. Guarda eso y refresca, para que podamos ver que todo está en nuestro trabajo de nuevo. Esta solución todavía se ve un poco desordenada sin embargo, por lo que podemos ser los mejores para poseer usos con código simple. También, ya que view JS nos proporciona esta propiedad L para integrar nuestra sintaxis de plantilla dentro del HTML. Esto a menudo se ve como una mejor alternativa. Voy a volver a nuestra app.view y luego una vez que quites esta nueva instancia de vm3, solo para devolver el proyecto de nuevo a cómo era. Elimina esta variable vm3, quita la montura, y finalmente, si volvemos a la página de índice, podemos volver a introducir el título de la Lista de Invitados en el HTML. Guarda eso y ahora nuestra app está de vuelta a cómo era antes de usar la propiedad L. Así es como crear una plantilla de pantalla. Es importante saber esto ya que es posible que lo encuentres en aplicaciones y también al pasar por la documentación, también puedes ver al trabajar con componentes. A continuación terminaremos esta sección mirando el ciclo de vida de la instancia de vista. 34. El ciclo de vida de Vue: Ahora deberíamos tener una mejor comprensión de cómo Vue.js crea una plantilla y gestionarla al DOM. Sin embargo, a la hora de crear instancias de Vue, hay algo importante pasando detrás de bambalinas, que aún no hemos mirado y este es un ciclo de vida de instancia de Vue. Podemos engancharnos a diversas etapas del ciclo de vida, como antes de que se cree la instancia o antes de que haya una actualización, por ejemplo y podemos decirle a Vue qué código ejecutar en cada uno de estos puntos específicos del ciclo de vida. Hay una serie de estos ganchos del ciclo de vida que podemos usar, así que vamos a echarles un vistazo ahora. Ahora deberíamos estar familiarizados con la creación de una nueva instancia de Vue utilizando la nueva Vue, que podemos ver está en la parte superior de este dibujo. Este es el punto de inicio del ciclo de vida antes de observar datos e inicializar cualquier evento. El escenario también debe tener sentido ahora porque sabemos por videos anteriores que al crear la instancia de Vue, Vue.js está al tanto de los datos dentro de ella y crea el efecto observador. Entre estas dos primeras etapas, podemos llamar al primero de nuestros ganchos de ciclo de vida, que se llama beForecreate. BeforeCreate, como su nombre lo indica, es un método que podemos utilizar para definir cualquier código que queramos ejecutar antes de que se observe cualquiera de nuestros datos o se haya inicializado algún método. Si queremos ejecutar el código después de inicializar los datos y métodos, entonces necesitamos usar el gancho creado. Esto significa que se está creando nuestra instancia, se están configurando todos los datos como observadores, propiedades computadas, y cualquier método, aunque aún no se ha montado en el DOM en esta etapa. La siguiente etapa del ciclo de vida está relacionada con las plantillas. Hemos utilizado tanto la propiedad de plantilla como también creado plantillas dentro de nuestro código HTML en esta sección, aquí es donde Vue.js buscará estas opciones y luego compilará estas plantillas cuando sea necesario. Después de que las plantillas hayan sido compiladas mediante el uso de la propiedad de plantilla o buscando las plantillas en HTML con la propiedad el, se ejecuta nuestro siguiente gancho de ciclo de vida. Este gancho se llama BeforeMount. BeforeRemount se llama justo antes de que comience el montaje de la instancia, y justo antes de la función de render se llamará por primera vez. A continuación se reemplaza el con plantilla, ahora Vue.js tiene nuestras plantillas listas. Tiene todo el HTML preparado el cual puede ser leído por el navegador. Las llaves o la interpolación que vemos en el editor serán reemplazadas por los valores de datos corresponsales. Es por ello que no podemos ver las llaves dobles cuando echamos un vistazo dentro de las herramientas de desarrollo. Esto significa que los elementos que especificamos usando el serán reemplazados por nuestra plantilla compilada. Ahora todo está en su lugar para montar nuestra plantilla al DOM. No terminamos aunque una vez que se haya alcanzado nuestra etapa de montaje de instancia. Hemos discutido la reactividad durante este curso y cómo Vue observa los cambios y luego reacciona a estos cambios al obtener el DOM. Este es el efecto que podemos ver sobre el extremo izquierdo, que es el rerender y parche DOM virtual. Este es un ciclo continuo y el rerender y parche DOM virtual se activa cuando se cambian algunos datos reactivos o tantos. A continuación, tenemos antesUpdate. Este ciclo de actualización nos proporciona dos nuevos ganchos de ciclo de vida. Primero es BeforeUpdate, y esto como suena, se llama antes de que cualquier dato cambie. En segundo lugar, está el gancho actualizado. Aquí es donde podemos agregar cualquier código que queramos ejecutar cuando se ha detectado un cambio de datos, lo que provoca que se vuelva a renderizar el DOM virtual. Vue.js recomienda evitar este gancho en la mayoría de los casos, ya que se nos proporciona la propiedad de la computadora y también vigilantes los cuales deben ser referidos siempre que sea posible. Siguiente arriba está el anzuelo BeforeDestroy. Esto se llama justo antes de que se destruya una instancia de Vue. Por el momento se llama, la incidencia sigue siendo totalmente funcional, nada ha comenzado aún para la fase de destrucción. Entonces Vue prepara la instancia para ser destruida eliminando todos los relojes, oyentes de eventos, y también cualquier componente secundario. Todavía no hemos cubierto los componentes, pero lo haremos pronto. Por último, hemos destruido, así que estas son todas las etapas del ciclo de vida de la instancia Vue y en la instancia que se está destruyendo. Cuando esto sucede, se llama al gancho destruido final. No hay nada mágico pasando detrás de bambalinas, solo una serie de etapas de la instancia Vue, que ahora puedes ver que podemos aprovechar usando estos ganchos. En realidad hay dos ganchos más llamados activados y desactivados. Estos no suelen estar disponibles en esta instancia regular, sino que se ponen a disposición cuando se utiliza un componente kept-alive. Cubriremos los componentes kept-alive en la sección de componentes más adelante, pero por ahora, pasemos al último video. En este apartado, pondremos en práctica estos ganchos del ciclo de vida para verlos en acción. 35. Hooks del ciclo de vida de Vue en acción: Ahora, sabemos cómo funciona el ciclo de vida Vue y cómo podemos aprovechar cada una de estas fases del ciclo de vida usando Hooke que nos proporcionó Vue js. Estos ganchos son bastante sencillos de agregar a nuestra aplicación. Ahora les voy a mostrar un ejemplo básico de estos en acción. Todo lo que vamos a hacer es crear cada uno de estos ganchos que vimos en el último video y luego simplemente hacer un registro de consola una vez que se llame a cada uno de estos ganchos. Esto es útil como podemos ver, el orden en el que están conectados a la consola. Durante el ciclo de vida de la instancia, estos ganchos se agregan a la raíz de la instancia de vista en lugar de dentro de cualquiera de los métodos o propiedades de datos. Vayamos a nuestro app.js. Entonces si nos desplazamos hacia abajo hasta la parte inferior de vm1 y luego agregamos una coma justo después de los filtros, aquí, podemos agregar nuestro primer gancho, que va a ser BeForecreates. El sintaxis es bastante similar a los métodos. Esta es una función. Entonces dentro del cuerpo de la función, podemos preguntar a nuestro registro de consola. voy a simplemente en consola log el texto de BeForecreates. Si bien este es un ejemplo sencillo con un registro de consola, dentro de este cuerpo de función, podemos agregar cualquier código que queramos ejecutar antes de que se haya creado la instancia. Voy a agregar una coma al final y luego solo copiar esto antes de crear gancho. Entonces voy a pegar esto en siete veces más para que puedas ver todos los ocho ganchos en acción, así que 1, 2, 3, 4, 5, 6, 7. Ahora, voy a quitar la coma de la última. El segundo es el gancho creativo. A continuación, cambie el texto para que se cree dentro del registro de la consola. Tenemos entonces BeforeMount. Entonces por supuesto, el siguiente trabajo está montado, así que cambia el nombre por el gancho montado y luego agrega el texto dentro del registro de la consola. Después pasamos a las fases actualizadas. En primer lugar, tenemos BeforeUpdate, seguido de actualizado. Entonces, por último, los dos últimos es una fase destruida, por lo que el segundo que dura es antesDestroy. Entonces finalmente, el último gancho es la fase destruida. Guarda eso. Si ahora vamos al navegador y luego hacemos clic derecho y “Inspeccionar” para abrir las herramientas del desarrollador. Selecciona la consola y podemos ver que se llaman los primeros cuatro ganchos, tenemos BeForecreates, creados, BeforeMount y también montados. Esto tiene sentido porque la instancia ha sido creada y también montada. Pero no hemos provocado que ningún cambio de datos se actualice ni que la instancia aún se destruya. Si subimos al campo de entrada y escribimos algo dentro de ahí, podemos ver ahora tenemos las actualizaciones antes y actualizaciones activadas por cada pulsación de tecla que hacemos. Tenemos este comportamiento porque tenemos la propiedad de datos de nueva configuración de texto de nombre dentro de nuestros objetos de datos. Además, agregamos esto al campo de entrada con enlace de datos bidireccional utilizando el modelo V. Recuerde también que cualquier configuración de propiedad de datos, escogido en la creación de la instancia de vista es entonces observada por Vue js y las actualizaciones desencadenan un re-render. Esto sólo deja un antesDestruir y destruidos ganchos del ciclo de vida para ser activados. Si recuerdas del video usando plantillas de cadena, usamos el método de instancia Vue proporcionado herramientas llamadas $ Mounts para montar la plantilla al div seleccionado en el lugar de la propiedad el. Vue js también nos proporciona otro método de instancia llamado $Destroy. Esto tal como suena, destruye una instancia de Vue y hace todo el trabajo de limpieza, como eliminar todos los oyentes de eventos y en enlazar todas las directivas que configuramos. Si volvemos a la página de índice y localizamos el formulario, ya tenemos un manejador de eventos en enviar. Podemos usarlo fácilmente para llamar al método de destruir, así que si solo agregamos $ Destruye dentro de ahí. Ahora bien, si actualizamos el navegador y luego escribimos algún texto para activar una actualización. Entonces, finalmente, presiona el botón que se llama el “Método Destruir”, ahora podemos ver todos los ganchos del ciclo de vida ahora se activan dentro de la consola. Ahora, nuestra instancia vm1 ha sido destruida. Vue ya no tiene el control de nuestra sección de registro. Podemos ver esto tratando de agregar un nuevo nombre a nuestra lista de invitados. Sabrás que está dentro de la consola a medida que escribimos, no se activan actualizaciones. Nuestra instancia de Vue ha sido desconectada y ahora no tiene control sobre las salidas. El HTML sigue en su lugar. Simplemente ya no se actualizará. Terminemos volviendo a la página de índice y volvamos al método de envío. Podemos eliminar el método de destruir y luego reinstalar la aplicación para que funcione en orden agregando nuestro método de formulario enviado. Es así como funciona el ciclo de vida Vue js en la práctica y cómo podemos engancharnos en cada etapa. Obviamente, cada gancho de ciclo de vida se puede usar para realizar tareas más complejas que un simple registro de consola. Pero solo quería mostrarles qué etapa se llama cada gancho y también mostrarlos en acción. 36. Sección final: Una mirada más profunda a Vue: Espero que hayan disfrutado de esta sección y construyendo su primer proyecto. A estas alturas, deberíamos estar familiarizándonos mucho más con cómo funciona Vue.js y lo que puede hacer. Si aún te sientes un poco abrumado, no te preocupes. Esto es completamente normal y obtendrás mucha más práctica de lo que has aprendido hasta ahora. Ahora vamos a pasar a una nueva sección donde no sólo comenzaremos un nuevo proyecto, sino que también veremos cómo podemos usar las herramientas de compilación y cómo pueden mejorar nuestra configuración de proyectos junto con nuestro flujo de trabajo. Te veré ahí. 37. Sección de introducción: Herramientas de construcción y flujo de trabajo: Esta sección está enfocada y cómo podemos usar herramientas de construcción para mejorar nuestros proyectos. También, cómo podemos mejorar nuestro flujo de trabajo, haciéndolo más adecuado para aplicaciones de movilidad a mayor escala. Vamos a utilizar estas nuevas herramientas de compilación para configurar nuestro próximo proyecto, que se llama Tarjetas Creativas. En este proyecto, construiremos una aplicación de tarjetas de felicitación donde el usuario pueda crear su propia tarjeta de felicitación personalizada con sus propios textos e imágenes personalizados. Espero que estés deseando ponerte en marcha con el nuevo proyecto. Comencemos instalando tanto Nodo como NPM. 38. Instalación de nodos y NPM: Durante esta sección, estaremos configurando nuestro próximo up de una manera ligeramente diferente a la última vez. Estaremos utilizando una herramienta llamada View CLI. Veremos la vista CLI y qué puede hacer por nosotros en el siguiente video. Pero por ahora necesitamos instalar Node JS y NPM, que ambos requerimos para que se ejecute la vista CLIT. Voy a ir a mi navegador web. Entonces voy a ir a nodejs.org, y te llevará a la página principal del nodo J-s. Nodo JS básicamente nos permite usar JavaScript en el servidor en lugar de solo dentro del navegador donde se ha utilizado históricamente. Se puede utilizar para crear fotos de un servidor web, pero en su lugar se mezclará en la vista CLI maneja estas fotos. descarga de Nodo JS también incluye NPM. NPM es un gestor de paquetes Node. Iremos a npmjs.org. Este es el sitio web del gestor de paquetes de NPM. Esto nos permite tener acceso a miles de paquetes JavaScript de código los cuales podemos agregar a nuestro proyecto. Entre lo que se debe en este proyecto estará el uso de paquetes como paquete web y burbuja, que veremos con más detalle pronto. También usamos Firebase para nuestro almacenamiento de fotos, que cuenta con un paquete NPM para instalar. Incluso la vista misma se instala como un paquete. Primero volvamos a Node JS, comenzaré la instalación. Voy a ir a las Descargas, y luego si eliges una descarga para tu sistema en particular, si no estás seguro de cuál ir, la página de inicio normalmente detectará automáticamente qué sistema estás usando, así que deberiamos tener disponible la descarga correcta. Voy a instalar la última versión. Voy a dar click en Corrientes. Da unos segundos para descargar. Una vez hecho eso y solo abre e instala de la manera habitual. Estoy usando un Mac pero podría ser ligeramente diferente en Windows. Pero no deberías tener ningún problema. Simplemente voy a seguir adelante y acordar la licencia y luego golpear Instalar. Tan solo dales un momento para terminar la instalación. Después tendremos instalado Node y NPM en nuestra máquina. Vamos a comprobar que esto se ha instalado con éxito, voy a dirigirme a la terminal. Estoy usando un Mac para este curso pero si estás usando una máquina Windows, también tendrás acceso a un programa de línea de comandos, como el Windows PowerShell. Dirígete a eso si estás usando una máquina Windows. Todos los comandos que utilizamos en este curso deben ser aplicables a ambos. Vamos a hacer eso un poco más grande, y cuando comprobamos tenemos instalado Node y NPM, con algunos comandos simples. Primero voy a escribir en Node y luego -v. Si ves la visualización del número de versión justo debajo, eso significa que Nodo un instalado con éxito, lo mismo con NPM. NPM -v actualmente es 5.0.3. Si como yo tienes los números de versión mostrados así, has instalado con éxito Node y NPM y ahora estás listo para pasar al siguiente video, donde veremos la vista CLI y cómo usarlo para configurar nuestro proyecto. 39. Proyectos de andamiaje con vue-cli: En el último video instalamos con éxito node.js y el gestor de paquetes del nodo. En este video, vamos a utilizar una herramienta llamada Vue CLI para andamiar nuestros proyectos. CLI es sinónimo de interfaz de línea de comandos y nos permite crear un nuevo proyecto con la mayor parte de la configuración común ya atendida por nosotros. Los proyectos de JavaScript pueden volverse bastante complejos a la hora de configurar todas estas herramientas de compilación nosotros mismos junto con todos los paquetes de NPM que a menudo vemos. Pasemos a Google y vamos a buscar el Vue CLI y necesitamos el primero que es el enlace GitHub para la CLI Vue. Selecciona esto y luego nos llevan a la página oficial de GitHub. Si nos desplazamos hacia abajo, en primer lugar podemos ver la instalación pero vamos a ir por eso en tan solo un momento. Si bajamos a las plantillas oficiales, podemos ver las plantillas disponibles actuales las cuales incluyen las más complejas que es una versión webpack completamente equipada la cual incluye todo el hot reloading y testing que comúnmente necesitaremos para proyectos. Hay una versión más sencilla de este webpack 1 y lo estaremos usando para estos proyectos. Si prefieres browserify sobre webpack, también hay un estándar y una versión simple para estos dos también. Pero me voy a quedar con webpack para el resto de este curso. También hay una versión simple que es sólo un único archivo HTML que se parece más a la aplicación de lista de invitados que creamos antes. Estas plantillas nos ahorran mucho tiempo a la hora de crear nuevos proyectos porque lo contrario tendríamos que instalar y configurar todo lo que necesitamos manualmente. Para el próximo proyecto estaremos usando la plantilla simple de webpack ya que no necesitamos la configuración de webpack más compleja con las pruebas. Para instalar esto, volvamos a la terminal y luego instalamos el Vue CLI con el gestor de paquetes del nodo y esto se hace con NPM install y luego dash G para instalar este paquete globalmente y luego el nombre de el paquete es el Vue CLI y luego pulsa “Enter”. Si estás en un Mac y esto no funciona puede que tengas que usar la pseudo palabra clave antes. Esto se instala con los privilegios de administrador y también es necesario agregar una contraseña. Agregar pseudo NPM instalar dash G Vue CLI. Alternativamente, si quieres cambiar tus privilegios sin usar pseudo, también añadiré un enlace al final de esta sección. Esto le permitirá configurar su máquina como administrador sin necesidad de teclear pseudo cada vez que instale un nuevo paquete. Esto instala la Vue CLI a nivel mundial, por lo que podemos usarlo para todos nuestros proyectos en lugar solo esté disponible para el proyecto que estamos creando actualmente. Una vez que eso esté instalado, lo último que quiero hacer es navegar a la zona donde queremos crear el proyecto. Voy a agregar el mío al escritorio. Para volver al directorio de inicio, escribimos en CD. Utilizamos LS para mostrar el contenido del directorio actual. Podemos ver que tenemos el escritorio disponible, por lo que para cambiar a esto podemos usar CD de nuevo, seguido de escritorio. Entonces podemos ver que ahora estamos dentro del escritorio. Ahora, cuando configuremos el proyecto se instalará en esta ubicación. Ahora inicialicemos el proyecto dentro de la terminal. Para configurar un nuevo proyecto Vue CLI, usamos Vue en él seguido del nombre de la plantilla que queremos utilizar. Voy a estar usando webpack simple. Entonces le damos un nombre al proyecto, por lo que este nombre de este proyecto va a ser tarjetas creativas. Una vez que eso haya hecho hit “Enter”. Entonces una vez que eso esté instalado y una vez que se descargue la plantilla, entonces tendremos que contestar alguna simple serie de preguntas. El primero es el nombre del proyecto. Actualmente está configurado en tarjetas creativas que ya escribimos. Entonces si queremos esto podríamos simplemente darle “Enter”. También podemos agregar una descripción del proyecto pero solo voy a entrar para esto. Agrega el nombre del autor, por lo que agrego mi nombre ahí. Usar SASS? No voy a usar ningún SASS para estos proyectos, así que voy a golpear “Enter”. Como puedes ver ya está configurado en no. Ahora nos da una lista de los pasos que necesitamos dar sólo para terminar esto. En primer lugar, necesitamos CD para cambiar el directorio en el proyecto de tarjetas creativas que acabamos de configurar. Voy a golpear “Enter”. Una vez que hayas hecho eso el siguiente paso es ejecutar la instalación de NPM y esto descarga todos los paquetes de NPM que se requieren. Todos estos paquetes están listados dentro de un archivo llamado paquete.json y pronto exploraremos el contenido de este archivo. Esto puede tardar un poco de tiempo dependiendo de cuántos módulos NPM tengas. El paso final es NPM run dev y esto es ejecutar el servidor de desarrollo dentro del navegador. No voy a ejecutar esto todavía porque voy a ejecutar esto dentro del código de Visual Studio. Acabemos de cerrar estas ventanas y ahora deberíamos ver que nuestro proyecto de tarjetas creativas está ahora en el escritorio. Voy a abrir esto dentro de un Visual Studio, así que abramos eso y luego arrastramos sobre los proyectos de tarjetas creativas hacia eso. Entonces ahora si pasamos a ver y luego bajamos a la terminal integrada, entonces podremos iniciar nuestro servidor de desarrollo. NPM ejecuta dev y luego presiona “Enter”. Entonces ojalá esto se abra en el navegador y debiera tomar un momento para abrirse. Si ven esto entonces estamos bien para irnos. Nuestro servidor de desarrollo ya está configurado. Entérate en la terminal podemos ver donde se está ejecutando el proyecto, por lo que podemos ver esto se está ejecutando en el puerto 8080. Es posible que tengas que copiar este enlace y pegarlo en el navegador si no se abre automáticamente. No siempre se requiere un servidor de desarrollo pero tiene sentido usar uno ya que nos permite crear nuestra aplicación y condiciones de prueba similares a un entorno de servidor real. También tiene beneficios adicionales como recarga en vivo. El navegador actualizará los cambios sin que necesitemos actualizar la página. Ahora tenemos el proyecto creado y nuestro servidor web en funcionamiento. Exploremos estos archivos y carpetas que nos han proporcionado con la CLI de Vue. 40. Explorar el diseño de nuestros proyectos y las herramientas de construcción: En el último video, creamos con éxito nuestros nuevos proyectos de tarjetas creativas utilizando la CLI de Vue. Ahora tengo abierto el proyecto en Visual Studio, y el servidor de desarrollo en funcionamiento. Ahora solo quiero tomarme unos momentos para mirar la estructura del proyecto, que en realidad hemos creado. Si miramos los archivos y carpetas del lado izquierdo, podemos ver que la primera carpeta son los módulos de nodo. Esta carpeta es donde se instalan todos los módulos MPM cuando ejecutamos el comando de instalación de MPM en el último video. Aquí es donde se ubican cosas como la Biblioteca View Call, y ahora tenemos eso como paquete, no necesitamos usar los enlaces CDN, como hicimos en los primeros proyectos. A continuación, tenemos la carpeta fuente. El directorio fuente será donde hagamos la mayor parte de nuestro trabajo. Aquí es donde estaremos agregando la mayor parte de nuestro código para los proyectos. Esto contiene todos los archivos fuente de nuestros proyectos, y estos están todos almacenados en el servidor en lugar de estar disponibles para que el público los vea. A continuación, tenemos el archivo dot babelrc. Este es el archivo de configuración de una herramienta que hemos instalado llamada babel. medida que vayamos por el curso, aprovecharemos algunas de las nuevas características de JavaScript de la última versión de JavaScript, que se llama ES6 o ES2015. Tanto ES6 como ES2015 son lo mismo. ES6 es la versión, ES2015 es el año del lanzamiento. El ES, que está en ambos, significa ECMAScripts. ECMAScript es un estándar o especificación para lenguajes de scripting, mientras que JavaScript es el lenguaje de scripting real, que se basa en el estándar. Cuando hablamos de ES6 o ES2015, estamos hablando de lo mismo. No obstante, el navegador no puede entender este nuevo código. Aquí es donde entra un babel. Toma nuestro código y lo compila para ser convertido de nuevo a ES5, que luego puede ser leído por el navegador. Volveremos a esto más adelante. Gitignore es para el sistema de control de versiones git. Aquí es donde podemos enumerar cualquier archivo o carpeta que no quieras que te rastree git. Entonces tenemos nuestro familiar archivo index.html. Esto funciona como en el último proyecto, donde aún tenemos nuestro principal contenedor de aplicaciones. También tenemos una etiqueta de guión abajo en la parte inferior. En el primer proyecto, sólo teníamos un archivo JavaScript, que es nuestro archivo app.js, que tenía todo nuestro código de view js dentro. Este proyecto funcionará de manera diferente porque tendremos muchos archivos, principalmente porque estaremos escupiendo nuestra base de llamadas en módulos separados llamados componentes. Después usaremos webpack, que se instala con la Vue CLI, donde pack es un bundler de módulos, que básicamente toma todo nuestro código que escribes, junto con cualquier dependencias como babel, y luego agrupa todo en un solo archivo. Este archivo de paquete, que tendremos en la parte inferior aquí, no lo lee el navegador. El resultado de su archivo compilado es el archivo build.js, que se puede ver aquí. También puede notar que no hay carpeta dist en el árbol del proyecto. La carpeta Dist sólo se crea cuando construimos para producción, y aún no lo hemos hecho. Solo estamos trabajando con el servidor de desarrollo por ahora. También tenemos el archivo package.json, que es posible que reconozcas si has trabajado con el nodo en el pasado. Este archivo contiene información sobre nuestra aplicación, y también incluye cualquier dependencia de módulo que pueda tener. Simplemente cerraré esta terminal solo para que puedas ver un poco más. El Vue CLI ya está poblado, el nombre y la descripción, y también alguna información sobre estos proyectos. Esta es la información que proporcionamos durante el proceso de instalación. Los scripts de ASM proporcionados como dev y built. Utilizamos dev antes al ejecutar el servidor de desarrollo, mediante el uso de npm run dev, ejecutando npm rebuilt, construirá nuestra producción de aplicaciones. También creará la carpeta de distribución para nuestro paquete. Esta construcción de producción también minifica nuestro núcleo 2. Entonces tenemos una lista de cualquier dependencia, los proyectos, como view js. También podemos especificar cualquier dependencias que solo queremos usar para desarrollos en los objetos de dependencias dev como babel porque solo queremos usar esto durante el desarrollo para luego convertir nuestro código listo para la producción. Después tendremos un archivo README también con las instrucciones para ejecutar y construir nuestra aplicación y luego un archivo webpack.config, esto como su nombre indica es donde podemos configurar webpack. No entraré en todo aquí en detalle ya que webpack puede ser un tema del curso por sí mismo pero una de las cosas principales son las rutas del archivo de entrada y salida, que se pueden ver justo aquí. El punto de entrada es nuestro archivo fuente, que es main.js, que se encuentra dentro de nuestra carpeta fuente. A pesar de que tenemos muchos archivos fuente a la hora de crear componentes, todos todavía se renderizan a través este archivo main.js y lo veremos con más detalle pronto. El resultado es nuestro archivo build.js y este es el archivo final que se ejecuta dentro del navegador con todo nuestro código de compilación. Entonces podemos sumar cosas como cargadores. Como mencioné antes, estamos usando babel para convertir cualquier código ES6 en Javascripts regulares y aquí está el cargador babel, que busca cualquier archivo con extensión the.js. A menudo aquí también veremos una lista de lo que se llama presets 2 pero debido a que tenemos el archivo babel.rc, tenemos todos nuestros presets activos ahí en su lugar. presets son un poco como agregar plugins. Son presets disponibles no solo para convertir código ES6, sino también cosas como el código jsx y la biblioteca de reaccionar. Si nos dirigimos a nuestra carpeta fuente y luego hacemos clic en main.js, este es un archivo principal para usar webpack. Este archivo importa tanto la biblioteca vista como también el archivo de aplicación principal llamado App.vue. Se puede pensar en actualizar App.vue como el contenedor principal o el archivo padre a todos los componentes en los que creamos. Es por ello que el punto de entrada de webpack es main.js, porque renderiza App.vue y luego este archivo App.vue contiene todo el resto siga código en la aplicación. También verás el familiar el inmueble, que es el ID dentro de la página de índice donde queremos renderizar nuestro contenido. Si exploramos App.vue, esto es lo que se llama componentes de un solo archivo. Tiene una extensión.v y los contenidos se dividen en tres secciones. En primer lugar, tenemos la sección de plantillas. Una plantilla es el contenido principal del componente. Aquí podemos crear nuestro marcado html que querremos usar dentro de los componentes. También podemos mezclar en nuestra vista los datos con las llaves dobles al igual que lo hemos hecho anteriormente. Debajo de eso, entonces tenemos nuestra sección de guiones. Por lo que mucho esto le resultará familiar desde la última sección. El script tags donde queremos incluir nuestras vuejs fechas propiedades, nuestros métodos, propiedades computadas y todo el resto que hemos mirado hasta ahora y también cualquier JavaScript simple también. Esto lo veremos con más detalle durante los proyectos. Más abajo, tenemos la tercera y última sección de nuestro componente, que es la sección Estilo. También podemos agregar estilos a esta plantilla. Tenemos las opciones para hacer que estos estilos se apliquen al conjunto de nuestra App. Simplemente los voy a contener a esta plantilla en particular. Dividir nuestro código así en una sola plantilla de archivo se hace posible mediante el uso de herramientas de factura como webpack, que agrupa todo junto para nosotros en un archivo de salida agrupado al final. Por lo que se trata de una visión general de la estructura de nuestra nueva aplicación, cual fue configurada usando la CLI Vue. Ahora sé que las cosas pueden parecer un poco complicadas por el momento si este tipo de configuración te resulta desfamiliar pero estaremos usando esta estructura para el resto del curso. Por lo que al final, deberías estar mucho más cómodo después de un poco más de práctica. 41. Uso del objeto de datos con plantillas de archivos individuales: En el último video, comenzó a mirar las plantillas de vista de archivo único. Ahora quiero echar un vistazo a la forma en que funcionan los scripts, particularmente usando la propiedad de datos que ya has utilizado durante este curso. En primer lugar, asegurémonos de que nuestra nueva aplicación se esté ejecutando. Si tu servidor se va a ejecutar, genial, puedes simplemente dirigirte a tu navegador, y ver la aplicación funcionando así. Si regresa después de un descanso y el servicio no se está ejecutando, necesitamos reiniciar el servidor de desarrollo. Vaya a Visual Studio Code y luego vaya a la terminal integrada. Si utiliza el terminal estándar, no es usar el suyo dentro de Visual Studio o su editor de texto. Es posible que necesite usar Cd para cambiar al directorio actual, y ejecutar mpm, ejecutar dev desde allí. Dentro de la terminal, mi servidor de desarrollo sigue en ejecución. Soy lanzamiento cierra plazo, tenemos control y luego c, y luego nos llevan de vuelta al directorio del proyecto. Para llegar al frente y de nuevo, necesitamos ejecutar mpm run dev, y luego golpear enter. Entonces, una vez que consigues reabrir el navegador, si el servidor está funcionando bien pero no se abre en el navegador, puedes abrir escribiendo localhost: 8080 dentro del navegador ahí, y luego debería ejecutarse. El homepage que ves está conformado por el logo, los enlaces esenciales, y también los enlaces ecosistémicos. Podemos ver estos si pasas al proyecto y luego abres el archivo app.vue. Siempre el código debe estar contenido dentro de las etiquetas de plantilla, que es la sección superior, para que tengamos el enlace de imagen arriba por arriba. Tenemos entonces el rumbo del ecosistema seguido de los vínculos que hemos visto antes. Todo esto es html simplemente normal, e incluso puedes mezclar en vista datos igual que lo hemos hecho anteriormente. En el siguiente script, si vamos a nuestra instancia de vista, tenemos la propiedad de datos de mensaje, que dice, bienvenido a su aplicación vue.js. Podemos ver si pasamos al navegador, no tenemos estos mostrados en la página. Podemos añadir esto fácilmente a nuestra plantilla. Voy a añadir esto justo sobre la parte superior, sólo por abrir las llaves dobles. Entonces podemos agregar la propiedad de fechas de mensaje allí, y guardar eso. Entonces ahora si pasamos al navegador, podemos ver que dice bienvenido a tu vue. Aplicación Js. Es posible que hayas notado que no necesitábamos hacer una actualización de página esta vez. Esta es la recarga en caliente, que es proporcionada por paquete web. Si vamos al package.js en archivo, cuando ejecutamos el mpm run def. Podemos ver que también ejecuta el comando dash hot, y aquí es de donde viene la recarga en caliente. De vuelta en la app. vue, si solo tenemos una pequeña app, podemos crear toda nuestra aplicación dentro de esta sola plantilla. Estaremos rompiendo esta app en componentes más pequeños en la siguiente sección. Para hacer las cosas más autónomas y manejables, sabrás que es el interior de nuestras etiquetas de script, nuestra instancia de vista se ve un poco diferente a lo que hemos utilizado en los últimos proyectos. Todavía podemos incluir todos los mismos métodos, propiedades computadas, y relojes, por ejemplo. No obstante, la propiedad de datos funciona un poco diferente. No se requiere que se ejecuten los scripts y también la sección de estilo. Incluso podemos eliminarlo y luego refrescar el navegador. Se puede ver que el absoluto se ejecuta, pero sin que se muestren los datos del mensaje, por supuesto. Vamos a añadirlo de nuevo y podemos echar un vistazo a las diferencias. En primer lugar, necesitamos crear nuestras etiquetas de script. El primero que tenemos que hacer es hacer una exportación, por defecto, y luego alrededores en el código plantea. Esto forma parte del sistema de módulos ES6. Exportar el módulo básicamente significa que ahora estará disponible para su uso como importación, dentro de archivos. Podemos ver esta importación dentro de los js principales. El archivo app.vue se importa especificando una ruta de archivo, y también se le da el nombre del archivo, en este caso de app. Exportaremos todos los módulos o componentes durante este proyecto e importaremos donde sea necesario, por lo que obtienes mucha práctica de hacer esto. Volvamos a la app.vue. Ahora si tratamos de volver a agregar nuestra propiedad de mensaje, si tratamos de agregar nuestros datos, al igual que hicimos en el último video, creando nuestros objetos de datos, y luego configuramos el mensaje igual a una cadena, solo lo haré agregar bienvenida a eso. Si guardamos esto y pasamos al navegador, echemos un vistazo. No tenemos la propiedad de mensaje de bienvenida mostrada en la pantalla. Abramos las herramientas de desarrollador y luego entramos a la consola. Tenemos algunos errores. En primer lugar vemos que la opción de datos necesita ser una función. Entonces esto también provoca la segunda advertencia diciéndonos que la propiedad del mensaje no está definida. Para solucionar esto, necesitamos incluir la propiedad de datos como una función que luego devuelve algunos datos. Para ello, devuelva la propiedad de datos a una función igual a esta. Entonces justo dentro de eso, necesitamos devolver algunos datos. Abre las llaves dobles y luego dentro de esta declaración de retorno, podemos agregar nuestra propiedad de datos, así como así. Ahora si guardamos esto y pasamos al navegador, ahora perdemos los mensajes de error, lo cual es genial, y ahora tenemos el mensaje de bienvenida mostrado. Existe una buena razón por la que necesitamos devolver los datos dentro de una función, al usar componentes. Esto se debe a que los componentes están destinados a ser reutilizables. Si tiene más de un componente compartiendo exactamente la misma propiedad de datos, todos los componentes necesitaré compartir el mismo valor de los datos, también todos se actualizarán juntos, cuando haya un cambio. Agregar datos como una función permite a todos los componentes mantener sus propios estados internos. Usando nuestro ejemplo, podríamos tener múltiples componentes los cuales todos necesitan una propiedad de mensaje, pero usando una función, el mensaje ahora puede ser diferente para cada componente. Esto permite que los componentes compartan una plantilla común que aún realiza un seguimiento de sus propios datos o estados internos si es necesario. 42. Sección final: Herramientas de construcción y flujo de trabajo: Este es el final de una sección bastante segura, pero sin embargo, importante. Ahora contamos con una nueva configuración de proyecto, que es más escalable y nos permite trabajar con nuevas características como los componentes. Esta estructura de componentes será el tema de nuestra siguiente sección, por lo que espero verlos allí. 43. Sección de introducción: Introducción a los componentes: A medida que nuestras aplicaciones crecen más grandes y más complejas, una configuración como nuestra aplicación de lista de invitados puede no ser ideal. Nuestro archivo de vista de punto de aplicación única puede crecer rápidamente y hincharse, lo que dificulta su mantenimiento y prueba. Usando una configuración como la que tenemos ahora, usando Webpack, ahora podemos romper nuestro código en módulos o componentes más pequeños. Esto hace que nuestro archivo sea más pequeño, más fácil de mantener y probar, y también nos permite reutilizar componentes más de una vez. Tenemos mucho que cubrir en esta sección, así que saltemos directamente a los componentes de aprendizaje. 44. ¿Qué son los componentes?: Una de las grandes características de vue.Js es la capacidad de utilizar componentes. Se puede pensar en un componente como un bloque de construcción para nuestra aplicación. Los usamos para dividir nuestro código en piezas más pequeñas, más mantenibles. También se puede reutilizar un componente varias veces, desde su aplicación para evitar la repetición de código. Mantener secciones de código en componentes autónomos también ayuda a depurar y mantener nuestro código más organizado y mantenible. Echemos un vistazo a cómo se pueden aplicar los componentes a nuestro proyecto. Esta es nuestra aplicación de tarjeta terminada. Podemos ver que hay algunas áreas que se repiten. Tenemos los campos de entrada de texto en el lado izquierdo, y los tres son exactamente iguales. Lo mismo se aplica en una tarjeta misma donde se muestra el texto. Este es un caso de uso ideal para usar componentes. Ya sabemos por explorar los archivos en nuestra aplicación que hay un contenedor principal llamado el archivo app.vue. Sabemos que podemos usar esta envoltura para contener el resto de nuestra aplicación, que todos pueden anidarse por dentro. Dentro de esta envoltura app.vue, podemos comenzar a crear más componentes, como un encabezado. Este encabezado se colocará dentro de su propia plantilla de archivo único, como el archivo app.vue. Al nombrar archivos de componentes, lo mejor es ser lo más descriptivo posible. Esto ayuda en la construcción de aplicaciones de mayor escala con muchos componentes. Podemos ver claramente dónde encajarán los componentes. En este proyecto he llamado a este archivo el header.vue. También he colocado el pie de página en un archivo footer.vue. Tanto los archivos de encabezado como de pie de página se llaman desde dentro del contenedor principal. En el caso de esta aplicación, no es esencial tener el encabezado y el pie de página en componentes separados. Podríamos haberlo codificado a mano dentro de nuestra plantilla app.vue, ya que solo los usaremos una vez. No obstante, nos da más práctica en la creación de componentes. Todavía dentro de la app.vue principal, tenemos la sección principal del cuerpo controlada por un componente envoltorio. Para cada lado de la tarjeta tenemos el frente de la tarjeta. Tarjeta dentro de la izquierda, tarjeta dentro de la derecha, y el dorso de la tarjeta. Cambiamos entre estos componentes utilizando los enlaces de navegación, dentro del encabezado. Estos componentes actuarán como contenedor principal para todos los componentes secundarios dentro de ellos, como los componentes de texto e imagen. Como componente principal, esto se utilizará para pasar datos entre componentes los cuales cubriremos pronto. Esto ahora nos deja con los componentes reutilizables. A la izquierda se encuentra el área para editar la tarjeta, y esta sección en particular, el frente de la tarjeta tiene áreas de entrada de texto libre, dentro de un archivo llamado text-input.vue. El carácter de los componentes significa que sólo tenemos que crear este componente una vez y luego podemos agregar esto tantas veces como queramos. El texto ingresado en estas áreas de texto, luego se muestra dentro de las áreas de salida de texto en el lado derecho. Recuerda cómo hablamos al usar propiedades de datos en componentes, que la propiedad de datos debe ser una función. Bueno, aquí es donde entra la importancia de esto. Si nunca tuvimos datos como función, como hicimos en el primer proyecto, cuando se editaron cualquiera de las entradas de texto. Los tres de estos textos salidas de la derecha se actualizarán con el mismo texto. Por supuesto, esto no funcionaría bien en todo momento porque queremos que las áreas de texto libre sean independientes. Pueden compartir visualmente la misma plantilla, pero queremos que los datos no se compartan con otros. Tener conjuntos de datos funcionan como de función, permite a los componentes mantener su propio estado, que puedan trabajar de forma independiente. También hacemos lo mismo para las imágenes, hay dos componentes. Uno para el área de carga de imágenes luego uno a la derecha para mostrar la imagen. Pasando a la parte posterior de la tarjeta que simplemente tiene los mismos dos componentes de imagen porque ahora son reutilizables. Entonces sólo el texto de copyright a continuación. Es así como funcionan los componentes y cómo podemos reutilizarlos varias veces. Dividir nuestra aplicación así es posible con herramientas como webpack, que agrupa todos estos módulos, los archivos, y todas sus dependencias juntas en un solo archivo de factura para producción. Esperemos que ahora puedas ver los beneficios de usar componentes. Ahora pasemos a ponerlos en práctica. 45. Registro de componentes globales: Ahora tenemos una mejor comprensión de qué son los componentes y cómo vamos a romper nuestra aplicación en estos componentes. Pongamos a trabajar en crearlos realmente. Si tu proyecto aún no se está ejecutando, necesitarás bajar a la terminal y ejecutar npm, ejecutar dev y deberían abrir el servidor de desarrollo en el navegador. Vemos en esta página y todo está funcionando bien. Para empezar, limpiemos el código de muestra de arriba en el archivo app.vue. Dirígete a app.vue. Lo primero que queremos hacer es eliminar todo el código de entre las etiquetas de plantilla. Entonces todo desde el div con el id de app, hasta el final, hasta la etiqueta de plantilla de cierre. Entonces quítate eso. Lo mismo para los contenidos del guión y también para los estilos, así otros estilos propios y script en cuando los necesitamos. Esta es nuestra plantilla vacía de un solo archivo. Entonces voy a agregar alguna estructura HTML simple para la aplicación. Recuerda que este archivo app.vue terminará siendo el envoltorio principal para nuestra app. Así que tenga sentido agregar nuestros contenedores y filas de bootstrap dentro de aquí. Las plantillas también necesitan tener un elemento externo principal, por lo que todo el contenedor bootstrap cubrirá esto. Por ejemplo, esto no funcionará, si agregamos algún HTML como una etiqueta de imagen y luego un segundo elementos como la etiqueta API. Si guardamos esto y luego pasamos al navegador, vemos que tenemos una pantalla en blanco. Si entramos en las herramientas de desarrollador y luego abrimos la consola, vemos que recibimos un mensaje diciendo que plantilla de componentes debe contener exactamente un elemento raíz. Para solucionar esto, podemos usar un div, por ejemplo, como elemento raíz para rodear nuestro código. Añadamos un div dentro aquí y peguemos la etiqueta de cierre hacia abajo en la parte inferior y luego “Guardar” y ahora cuando actualicemos, vemos que los mensajes de error se han ido y ahora tenemos nuestro mensaje hola. Sigamos agregando nuestras filas bootstrap. Podemos quitar los textos y también la etiqueta de imagen y luego continuar creando una clase, una clase bootstrap de contenedor. Entonces aquí podemos crear nuestra fila. Por lo que bootstrap clase de fila que rodeará todo el contenido que vamos a agregar dentro. Por último, un tercer y último div para la sección, que va a tener una clase de col-sm-12. ¿ Harías la app vue completa 12 columnas de ancho. Para que esto funcione, necesitamos agarrar el bootstrap para CDN link. Si pasamos al navegador, entonces una vez que Google y luego hacemos la búsqueda de bootstrap para CDN y luego desplázate hacia abajo. Podemos ver bajo el título de descarga tenemos el salto a la sección CDN bootstrap. No necesitamos el JavaScript justo ahora, así que solo voy a copiar el enlace CSS, que es la línea superior. Copia eso y luego podemos agregar esto en nuestra página de índice justo debajo del título. Entonces dale a eso un “Guardar” y luego podremos echar un vistazo a usar componentes globales. Este es el primer tipo de componente que te voy a mostrar y esto significa que el componente no está restringido para ser utilizado solo en una instancia o componentes en particular. Básicamente podemos tener acceso a cualquier lugar donde lo necesitemos. Si pasamos al archivo main.js, podemos empezar a trabajar en nuestro primer componente justo encima de la instancia vue. Asegúrate de que el componente esté por encima de esto ya que necesitamos registrarlo antes de que se instancie la instancia vue, para que funcione correctamente. Registramos este componente global llamando a vue.components dentro de aquí, luego le damos a los componentes un nombre de etiqueta dentro de una cadena. Se trata de un nombre que solía referirse a los componentes. Voy a llamar a esto la entrada de texto. Los formatos de nombre de minúsculas separados por guiones se consideran buenas prácticas, aunque no esenciales, luego separados por una coma y dentro de llaves, pasamos en las opciones, igual que una instancia vue normal. Vamos a empezar por crear una plantilla y esta plantilla dentro de una cadena va a contener un solo área de texto. Vamos a salir nuestro HTML dentro de aquí. El área de texto de la etiqueta de apertura y cierre. Para que esto funcione correctamente, necesitamos asegurarnos de crear la biblioteca vue JS importada correctamente, lo cual ya hacemos en la parte superior de la página con la vista de importación desde vista. Si importamos módulo de la carpeta de módulos de nodo justo por aquí, sólo podemos referirnos a él por el nombre del módulo, como vue. Si se importara algo más que no esté en la carpeta de módulos de nodo, necesitamos especificar la ruta del archivo para el archivo, como se puede ver con la importación arriba en la línea dos y luego guardar eso. Entonces todo el en el archivo index.html, ahora podemos agregar el componente a nuestra div aplicación principal, igual que un elemento HTML. Para localizar nuestro div con el id de app y luego dentro de aquí, lo voy a agregar igual que un elemento normal, así que texto, entradas, etiqueta de apertura y luego nuestra etiqueta de cierre. Tenga en cuenta que este nombre de elemento debe marchar el nombre de la etiqueta de componentes, que sólo lo hará antes dentro de los componentes vue. Estos son componentes reutilizables y podemos añadirlos tantas veces como queramos, así que si fuéramos a copiar y pegar esto en unas cuantas veces más, deberíamos poder ver tres componentes. Si guardamos eso y luego pasamos al navegador, deberíamos ver tres componentes de área de texto pero solo vemos una pantalla en blanco. Esto se debe a main.js. Nuestra instancia vue está anulando el contenido al renderizar el contenido de nuestro archivo app.vue. Este comportamiento es normalmente lo que queremos pero para este ejemplo, voy a comentar la función de render para que podamos ver nuestros componentes. Por lo que hay comentarios fuera la sección y luego ahora si actualizamos, vemos nuestras tres áreas de texto aparecen en la pantalla. También debido a que están registrados globalmente, podemos añadirlos a las plantillas vue dentro de nuestra app. De la misma manera con nuestros elementos HTML, nuestro objeto de opciones dentro del componente vue, no se limita solo a agregar una plantilla de cadena como estamos usando actualmente, podemos de hecho usar otras opciones que tenemos disponibles en el instancia vue, como agregar datos y métodos. Sabemos por la última sección usando la propiedad de datos en componentes, es un poco diferente. Tenemos que agregarla como función. Añadamos algunos datos para cambiar el texto de marcador de posición del área de texto. En primer lugar, vamos a vincular el marcador de posición, a una propiedad de fecha o valor de texto. Entonces a un [inaudible] al final de nuestras plantillas para agregar nuestra propiedad de datos. Esta es una función como sabemos, que luego toma un objeto y luego regresamos un objeto que contiene nuestros datos. Vamos a crear nuestro valor de texto, propiedad de fecha y establecer esto en una cadena, simplemente de tipo aquí. Guarde eso y ahora deberíamos ver el valor del tipo aquí dentro de las tres áreas de texto. También, podemos agregar métodos a los cambios de texto marcador de posición cuando hacemos clic en él. Entonces justo debajo de la sección de datos, agrega una coma y luego podemos agregar nuestros métodos. Métodos agregaron justo lo mismo que ya sabemos. Voy a agregar un método llamado cambiar texto y luego todo lo que quiero que haga este método es seleccionar este valor.text, que es este dato que establecemos aquí y sólo vamos a configurarlo en una nueva cadena de textos cambiados. Para activar este método, necesitamos agregar un oyente de clics en el área de texto, por lo que cualquier etiqueta de apertura, podemos agregar la taquigrafía de al clic y luego usarlo para activar la función de cambio de texto. Guardemos eso. Si comprobamos esto en el navegador, notarás que los tres componentes actuarán de forma independiente, por lo que si hacemos click en el primero, vemos el texto cambiado. Para el texto dentro del segundo y tercer componente es igual que antes. Es así como podemos agregar componentes a nuestra aplicación a nivel mundial y ahora podemos pasar al siguiente video y echar un vistazo al registro de componentes localmente. 46. Registro de componentes locales: En el último video, aprendimos a crear un componente que quieres poner a disposición globalmente en toda nuestra app. Ahora, vamos a ver cómo podemos registrar un componente local, que sólo está disponible en el ámbito de instancias o componentes. En primer lugar, voy a eliminar el componente global del último video. Entonces si pasas al main.js y este componente que registramos, voy a quitar esta sección completa y también podemos quitar los componentes de entrada de impuestos libres desde dentro del index.html. Así que quita los tres de los elementos de entrada de texto y luego guarda eso. Voy a reemplazar este componente global por dos componentes simples separados, que solo mostrará algún texto del componente 1 y también del componente 2. De vuelta en el main.js, los componentes locales se crean de manera diferente a los componentes globales. Todavía necesitamos crear nuestro objeto de opciones pero esta vez, necesitamos almacenarlo dentro de una variable así como esta. Añadamos nuestra variable llamada component1 y establecemos esto en un objeto, y luego una vez que agrego una plantilla simple, que van a ser algunas etiquetas p para generar algún texto de component1 y luego cerrar la etiqueta p off y luego voy a hacer el mismo con un segundo componente. Nuevamente, esto necesita ser una variable como llamamos component2 con ocho plantillas y esta cadena también va a ser etiquetas p con el texto de component2 así. Abajo en la parte inferior, todavía podemos dejar la función de render comentada Alpha ahora, ya que todavía no estamos trabajando con el archivo App.vue. Entérate en el index.html, luego en medio de la app podemos agregar nuestro component1, la etiqueta de cierre, y luego también podemos hacer lo mismo por nuestro component2. Copiemos esto y añadamos esto a continuación. Cambia eso para que sean los segundos componentes y luego guarde. Ahora bien, si pasamos al navegador y luego nos refrescamos, vemos que hay un problema. Abramos la consola y veamos qué está pasando. En la pestaña de la consola, y vemos dos mensajes de advertencia rojos, que tiene un mensaje de elementos personalizados desconocidos para component1 y también component2. Nos da una pista de lo que hemos hecho mal. Dice: “¿registraste correctamente el componente?” Esto se debe a que como los componentes locales, necesitamos registrarlos donde queremos que estén disponibles. Vamos a la instancia de vista en el archivo main.js y luego registremos los componentes que desea utilizar. Hagamos esto justo debajo de la propiedad L. Podemos agregar nuestra opción de componentes y este es un objeto. Por lo que podemos empezar con el nombre de cadena de component1. Este es el nombre que le damos al componente y luego separados por el colon. Somos el verdadero nombre de los componentes. Entonces es componente1. Si pasamos al navegador y luego nos refrescamos, aún vemos los mensajes de error. Esto se debe a que le hemos dado a este nombre component-1 un alias con un guión intermedio. Entonces vamos a añadir este guión para los primeros componentes y ahora deberíamos ver el primer componente se muestra en la pantalla. Se acabó la advertencia y la consola ahora sólo muestran que component2 es desconocido. Ahora, hagamos el mismo componente2. En el main.js, podemos agregar una coma y luego agregar nuestro nombre y este va a ser component2 y este puede ser cualquier nombre que queramos usar. El segundo coincidió con el nombre real del componente sin embargo, que es su nombre variable que le dimos. Component2 agregará el guión dentro la página de índice y luego ahora deberíamos dar una actualización y vemos ambos componentes en la pantalla. Entonces así es cómo usar los componentes localmente y cómo ponerlos a disposición en un ámbito particular. A continuación, vamos a empezar a construir nuestra aplicación con componentes de un solo archivo. Estos son los componentes contenidos en su propio archivo, como la App.vue y los echaremos un vistazo a estos a continuación. 47. Creación de componentes de un archivo único: En los últimos videos que hemos buscado están registrando componentes tanto a nivel global como local. Aquí vamos a ver una forma diferente de utilizar los componentes creándolos en su propio archivo único. De hecho, para recrear en el proyecto completo de esta manera. Los componentes de un solo archivo permiten tener todo lo relacionado con los componentes en un solo lugar. Es un gran [inaudible] crear un componente mediante el uso de vue.Component. El archivo App de Vue es un solo componente de archivo también. Al igual que esto, tenemos una sección para crear nuestra plantilla en HTML. Hace con cualquier vista datos como unas llaves dobles, o un evento. Esta plantilla también es mucho más fácil de trabajar con que usar una sola plantilla de cadena. Al igual que hemos mirado hasta ahora. También tenemos la sección de script por encima de cualquier lógica relacionada con Vue GIS, como datos y métodos, junto con cualquier JavaScript Vanilla que podamos querer agregar. Después abajo en la parte inferior, también tenemos nuestros estilos. También podemos especificar si los estilos son globales, o si sólo se aplican a este componente. Tenemos esta flexibilidad, por lo que antes de empezar, podemos eliminar el componente del último video. Dejemos el componente 1 y el componente 2. Entonces no pudimos quitar la sección de componentes de la instancia vue. Vamos a estar usando el archivo app.vue como nuestro envoltorio principal. Eso es propio comenta la función de render. Entonces finalmente en la página de índice, eliminemos los elementos del componente 1 y 2. Para empezar, quiero agregar una carpeta de componentes dentro de la carpeta de origen. Seleccione una nueva carpeta llamada componentes. Asegúrate de que esto esté justo debajo de la carpeta de origen. Dentro de la carpeta de componentes, voy a crear un nuevo archivo. Este archivo se va a llamar Header.vue. También podemos crear subcarpetas para nuestros componentes, lo cual es una buena idea para que las aplicaciones grandes mantengan las cosas más organizadas. Este archivo de encabezado será un componente simple. Nos acostumbraremos a construirlas dentro de nuestra app. Empecemos. Si abre el archivo Header.vue, podemos agregar la estructura básica. Al igual que en nuestro archivo app.vue. Empecemos por crear la plantilla. Esto necesita la etiqueta de apertura, y cierre. Entonces podemos agregar nuestras etiquetas de script, y luego finalmente abajo en la parte inferior, podemos preguntar las etiquetas de estilo. Ahora dentro de la sección de plantillas en la parte superior, voy a empezar agregando un menú para nuestra app. Si recuerdas de antes que necesitamos tener un div circundante, o unos elementos circundantes para nuestras plantillas. Entonces dentro de aquí voy a añadir un título de nivel 1, que va a ser el título de las tarjetas creativas. Agregaremos una clase bootstrap de text-center. Entonces bajo este rubro, podemos comenzar a crear nuestra lista de órdenes ul, que será nuestro menu.o un elemento circundante para nuestras plantillas. Entonces dentro de aquí voy a añadir un título de nivel 1, que va a ser el título de las tarjetas creativas. Agregaremos una clase bootstrap de text-center. Entonces bajo este rubro, podemos empezar a crear nuestra lista de órdenes ul, que será nuestro menú, o un elemento circundante para nuestras plantillas. Entonces dentro de aquí voy a añadir un título de nivel 1, que va a ser el título de las tarjetas creativas. Agregaremos una clase bootstrap de text-center. Entonces bajo este rubro, podemos empezar a crear nuestra lista de órdenes ul, que será nuestro menú. [ inaudible] Bueno también puede tener una clase Bootstrap, y éste va a ser nav, luego justify-content-center. A continuación, asigne elementos de lista de pedidos ul. Los elementos de lista tienen una clase Bootstrap también de elemento de nav. El primer enlace que voy a añadir es para el frente de la tarjeta. Después muestra el [inaudible] que va a copiar este elemento de la lista, y luego pega en tres veces más. El segundo eslabón está dentro de la izquierda. Este es el interior izquierdo de nuestra tarjeta. Entonces dentro de la derecha, y luego finalmente el cuarto enlace es para el reverso de la tarjeta. Esto funcionará perfectamente bien sin ninguno de los scripts, ni ninguna de las secciones de estilo añadidas. No se requiere el consentimiento de estos para que los componentes funcionen. Si pasamos al navegador, y luego actualizamos, aún podemos ver que ningún encabezado es visible. Esto se debe a que primero necesitamos dar unos pasos. Sabemos que el archivo app.vue es un envoltorio principal. Tenemos que decirle a este archivo App que queremos utilizar los componentes del encabezado. Dentro de las etiquetas de script de app.vue, podemos comenzar agregando una declaración de impulso. Lo que queremos hacer es importar el encabezado, y este es el alias que le damos al componente. Este nombre depende de nosotros. Entonces queremos importarlo desde la ruta del archivo, por lo que usamos./, y luego vamos dentro de la carpeta de componentes. El archivo se llama Header.vue. Este es nuestro archivo de cabecera importado. Entonces como miramos en el video de componentes locales, necesitamos registrar el componente para que esté disponible para su uso dentro de esta plantilla. Después agregamos nuestros valores predeterminados de exportación, que va a contener todos nuestros datos vue. Entonces podemos registrar nuestros componentes igual que hicimos en el video de componentes locales. Agregamos NavHeader, es el encabezado.Hay algunas cosas que debes saber aquí dentro de la propiedad de componentes. El primer nombre de la izquierda es el nombre de la etiqueta. A esto se le puede nombrar cualquier cosa que desee, y es cómo hacer referencia a nuestros componentes. El nombre de la derecha, sobre todo el nombre dado de las declaraciones de importación justo arriba. Podemos entonces agregar los componentes a nuestra plantilla usando el nombre de la etiqueta que le dimos a todo NavHeader. De acuerdo con lo que hablamos desde el principio en este apartado. A pesar de que el nombre que le dimos al componente es CamelCase, es una práctica recomendada agregar el nombre del elemento como minúscula dentro de la plantilla. Si subimos a nuestra plantilla, podemos agregar nuestro NavHeader en minúsculas separados por guiones, y luego cerrar esto. Ahora podemos probar esto en el navegador. Si tu aplicación no se está ejecutando, asegúrate de qué ejecución npm run dev en la terminal primero. Entonces si pasamos al navegador, ahora vemos que tenemos el título principal de las tarjetas creativas, y también los enlaces de navegación. El título está atado contra la parte superior de la página. Podríamos arreglar esto con un poco de CSS simple. Si volvemos al archivo header.vue, y luego bajamos a las etiquetas de estilo. Todo lo que tenemos que hacer es agregar nuestro estilo para el H1, y solo añadir un poco de Margin-top.Vamos a agregar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y basta añadir un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y basta añadir un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.Ahora podemos ver que se empuja fuera de la parte superior suficiente.Así es como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y solo añadir un poco de margin-top. Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y basta con añadir un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Agregaremos más a esto en los próximos videos, y solo agregaremos un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y solo añadir un poco de margin-top. Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que se empuja por la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y basta con añadir un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y basta con añadir un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y basta con añadir un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.y basta con añadir un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.Ahora podemos ver que está empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos.. Este es nuestro archivo de cabecera importado. Entonces como miramos en el video de componentes locales, necesitamos registrar el componente para que esté disponible para su uso dentro de esta plantilla. Después agregamos nuestros valores predeterminados de exportación, que va a contener todos nuestros datos vue. Entonces podemos registrar nuestros componentes igual que hicimos en el video de componentes locales. Agregamos NavHeader, es el encabezado.Hay algunas cosas que debes saber aquí dentro de la propiedad de componentes. El primer nombre de la izquierda es el nombre de la etiqueta. A esto se le puede nombrar cualquier cosa que desee, y es cómo hacer referencia a nuestros componentes. El nombre de la derecha, sobre todo el nombre dado de las declaraciones de importación justo arriba. Podemos entonces agregar los componentes a nuestra plantilla usando el nombre de la etiqueta que le dimos a todo NavHeader. De acuerdo con lo que hablamos desde el principio en este apartado. A pesar de que el nombre que le dimos al componente es CamelCase, es una práctica recomendada agregar el nombre del elemento como minúscula dentro de la plantilla. Si subimos a nuestra plantilla, podemos agregar nuestro NavHeader en minúsculas separados por guiones, y luego cerrar esto. Ahora podemos probar esto en el navegador. Si tu aplicación no se está ejecutando, asegúrate de qué ejecución npm run dev en la terminal primero. Entonces si pasamos al navegador, ahora vemos que tenemos el título principal de las tarjetas creativas, y también los enlaces de navegación. El título está atado contra la parte superior de la página. Podríamos arreglar esto con un poco de CSS simple. Si volvemos al archivo header.vue, y luego bajamos a las etiquetas de estilo. Todo lo que necesitamos hacer es agregar nuestro estilo para el H1, y solo añadir un poco de margin-top. Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que se empuja por la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Agregaremos más a esto en los próximos videos, y solo agregaremos un poco de Margin-top.Vamos a sumar 10 píxeles a ahí. Ahora podemos ver que es empujado fuera de la parte superior justo lo suficiente. Es así como podemos usar componentes de una sola página. El encabezado es bastante simple. Vamos a sumar más a esto en los próximos videos. 48. Añadir el componente del frente de la tarjeta: Ahora sabemos cómo crear y mostrar componentes de un solo archivo. Ahora podemos seguir adelante y realmente hacer que nuestro proyecto se mueva. Voy a ir a nuestro proyecto y organizar la carpeta de componentes agregando una subcarpeta llamada tarjeta. Entonces dentro de esta carpeta de tarjetas, voy a crear un nuevo archivo llamado CardFront con la extensión de vista. Si recuerdas de las diapositivas al inicio de esta sección, vamos a tener un solo componente de archivo para cada lado de la tarjeta. Será el CardFront, CardBack , y tanto el interior, izquierdo y derecho. Estos componentes actuarán como raperos donde podrás caer en los componentes de texto e imagen donde los queramos. También son las secciones que cambiarán para cambiar de vista cuando se haga clic en un enlace de menú. Pero más sobre eso en unos cuantos videos sin embargo. Simplemente cambia la ortografía ahí. Si volvemos a la CardFront.vue, esta es configurada igual que antes con una plantilla, lo que las etiquetas de apertura y cierre ahí, y luego seguidas de las etiquetas de script y luego finalmente las etiquetas de estilo. Dentro de la plantilla, recuerda necesitaremos un div circundante. Añadamos esto dentro de ahí. También puedes hacer de este div una fila de bootstrap agregando la clase de fila dentro de allí. Entonces necesitamos agregar algunas columnas bootstrap, seis a la izquierda y también seis a la derecha. Crearemos la sección izquierda para empezar. Podemos agregar las clases bootstrap de col sm 6. Esta será la mitad del ancho de la página. También añadiremos una clase bootstrap de tarjeta, y luego una clase CSS personalizada de área de ediciones. Usaremos esto en tan solo un momento para darle estilo a las secciones. Copia este div izquierdo y luego pégalo justo debajo, pero aún así lo haría dentro de esta fila. Todo lo que necesitamos hacer es agregar nuestra clase personalizada en este momento de visualización de tarjetas. Una vez que tengas eso en su lugar, podemos bajar a las etiquetas de estilo y luego otra vez, cambiar estos estilos personalizados. Comienza con el área de ediciones, que es un lado izquierdo de la tarjeta. Vamos a darle a esto un color de fondo, un color personalizado de d2f9f9, y luego también algún relleno de 20 píxeles. Después para darle algo de altura a la tarjeta, añadiremos la propiedad CSS high de 800 pixels. Ese es el editorio de la izquierda. El lado derecho es la sección de exhibición de tarjetas. Añadamos algunos estilos para esta sección. Todo lo que vamos a hacer aquí es igualar la altura de 800 píxeles, y luego también mantener el relleno consistente con 20 píxeles ahí. Como siempre, este componente no se mostrará todavía. Para que esto funcione, necesitamos registrarlo e importarlo también dentro del archivo en el que lo desea utilizar. Todos nuestros componentes que son los hijos de App.vue, por lo que nos registramos e importamos dentro de ahí, igual que hicimos con el encabezado. Si te sientes seguro dándole un go a esto, adelante y pausa el video y dale a esto un go tú mismo. Si necesitas una pista, solo tienes que seguir los mismos pasos que hicimos para registrar el archivo Header.vue. De lo contrario, no te preocupes, y sígueme. Dentro de la app.vue, sigamos adelante y sumamos las declaraciones de importación. Esta vez, necesitamos importar el CardFront. No obstante, este es un nombre que depende de nosotros, pero voy a llamarlo CardFront para mantenerlo descriptivo. CardFront de y luego la ruta del archivo es barra de puntos, va a la carpeta de componentes. Recuerda, esta vez, tenemos la carpeta de tarjetas dentro de los componentes. Asegúrese de agregar eso ahí dentro. El nombre del archivo es CardFront. Con eso registrado, ahora podemos desplazarnos hacia abajo y luego agregar esto a nuestra sección de componentes. Yo lo voy a llamar CardFront. Recuerde, este nombre también es opcional porque el de la derecha de CardFront debe coincidir con la declaración de importación anterior. El último que hay que hacer es agregar este archivo dentro de nuestra plantilla, así que justo debajo del encabezado nav. Añadamos los componentes del frente de la tarjeta. Esto significa que App.vue es padre tanto del encabezado como también de la tarjeta de componentes. Esto es todo lo que necesitamos hacer ahora para pasar al navegador y ojalá ver nuestro componente mostrado. Tenemos el área de ediciones en el lado izquierdo con los fondos azules. También tenemos la sección de exhibición de tarjetas en el lado derecho. Si no ves esto funcionando, y solo tienes una página en blanco, es posible que tengas un error, así que comprueba dentro de la consola. También es posible que necesite reiniciar el servidor de desarrollo. Si necesitas hacer eso, voy a presionar Control C para cerrarlo y luego ejecutar npm run dev, y luego debería estar de nuevo en funcionamiento. Por último, solo para terminar esta sección, tengo algunos estilos básicos para aplicar a la app dentro del archivo App.vue. Vuelve a App.vue y desplázate hacia abajo hasta la sección de estilo. El primero que queremos hacer es agregar algunos estilos al cuerpo. Voy a cambiar la familia de fuentes para que sea Verdana Ginebra, y luego finalmente, un sans-serif genérico como el retroceso. Agrega un color de texto para que sea el valor de 333. Entonces si actualizamos, ahora deberíamos ver que las fuentes personalizadas ahora han entrado en vigor. Entonces, por último, quiero cambiar estos elementos de menú en enlaces. Si pasamos al encabezado, y luego dentro del elemento de lista, podemos simplemente agregar nuestras a-tags dentro de ahí, con una clase bootstrap de nav link, y luego cerrar la a-tag. Yo sólo voy a copiar esto, y pegarlo frente al segundo, tercero y cuarto ítem. Haz lo mismo con la etiqueta de cierre, pega esos en y guarde, y luego actualiza. Entonces podemos cambiar el cursor para que sea un puntero a medida que pasa por encima. El estilo final es para las a-tags. Este va a ser el cursor, este va a ser el tipo de puntero, y luego guarde eso. Ahora, vemos si vamos por encima de los enlaces de navegación, ahora tenemos el puntero. Ahora eso se ve un poco mejor. Ojalá, ahora deberías estar consiguiendo el ahorcamiento de agregar componentes. Si no, no te preocupes, todavía tenemos mucho más para crear para es app. Tenemos mucha más práctica a medida que avanzas por el curso. A continuación, echaremos un vistazo a cómo podemos pasar datos de un hijo a un componente padre. 49. Emitir datos a los componentes principales: Ahora vamos a echar un vistazo a pasar datos entre componentes, más específicamente datos de un hijo a un componente padre. En primer lugar, necesitamos entender la relación padre-hijo con los componentes. App.vue es el envoltorio principal, y todo el contenido está contenido dentro de él. Está efectivamente en el nivel superior. Esto significa que todos los componentes que agregamos aquí dentro, como el nav-header y los fronts card-. Todos son componentes hijos de este archivo app.vue. También pronto en este proyecto crearemos unos componentes de entrada de texto, y cuando hagamos esto dentro de la tarjeta desde archivo, también añadiremos un componente así como este. Una vez que lo hayas creado, también añadiremos las entradas de texto al igual que lo hemos hecho antes. Nuestra tarjeta de componentes dot-vue, ahora es aparente a esta entrada de texto. Una entrada de texto son los componentes hijo. Ahora vamos a pasar datos de nuestro archivo de cabecera a la app.vue. Con este conocimiento, ahora sabemos que esto es pasar datos del niño a los componentes padre. Podemos hacer esto con lo que llamamos eventos personalizados. Si pasamos al archivo de cabecera dot vue, queremos pasar al archivo padre, que es app.vue qué página del menú ha sido seleccionada. Nosotros queremos hacer esto, por lo que app.vue sabe qué componente mostrar, como la parte frontal de la tarjeta o la parte posterior. El primero que queremos hacer es crear una propiedad de datos para realizar un seguimiento de la página seleccionada. Añadamos nuestro valor predeterminado de exportación, y quiero crear la propiedad de datos que recuerden, esta es una función cuando se usan componentes balanceados. Voy a devolver el nombre de propiedad de datos de la página seleccionada. Para empezar, esta va a ser una cadena vacía. Ahora podemos configurar un oyente de clics en cada uno de los enlaces del menú para cambiar el valor de la página seleccionada. Vuelve a subir a las plantillas y dentro de los enlaces, ve a agregar un nuevo atributos de arte click. Cuando se haga clic en esto, vamos a establecer página, seleccionarla para que sea igual a una cadena de frentes de tarjeta. Una vez que se hace clic en esto, spade seleccionado ya no será una cadena vacía. Será reemplazado por este valor de texto de frentes de tarjeta, y luego tenemos que hacer lo mismo para los enlaces más libres. Copie el oyente de clics y luego péguelo. Esta vez, esta va a ser tarjeta dentro de la izquierda. El tercero es para la tarjeta dentro de la derecha. Entonces el final va a ser para el dorso de la tarjeta. El componente al que vamos a estar llamando esto es tarjeta de vuelta. Hasta el momento sólo hemos creado los componentes del frente de la tarjeta, pero vamos a crear el sobre pronto. También los nombres que agregamos aquí, la mayoría los nombres de componentes que les dimos cuando los registramos para que esto funcione correctamente, como los frentes de tarjeta que has agregado en app.vue. De vuelta en la cabecera, ahora voy a crear un vigilante. Esto va a estar atento a cualquier cambio en los datos seleccionados de la página, decir, cuando seleccionamos un nuevo manualmente. Vuelva a bajar al script, y justo debajo de la propiedad de datos, puede agregar una coma, y luego crear nuestra sección de reloj y luego crear nuestras propiedades de reloj. Por lo que queremos ver los datos seleccionados de la página. Cuando se cambia la página seleccionada, entonces activará una función. Dentro de esta función, vamos a emitir un evento personalizado a los padres. Esto en realidad es más simple de lo que suena, solo necesitamos usar este signo de dólar de punto emita. Al principio del curso miramos refs, y los accedemos usando la propiedad vista nativa de signo de dólar refs. Bueno, usar emisor de signo de dólar también es nativo de la instancia de vista. Se trata de un método de instancia nativo, lo que significa que está integrado en la instancia de vista. Después pasamos en dos argumentos. El primero es el nombre del evento, que se elige bios, así que voy a llamarlo, página se cambió, y separarlo por coma. El segundo es qué datos queremos pasar a los padres. Queremos enviar el nombre de la página en el que se hizo clic, y podemos acceder a esto con esta página de puntos seleccionada, que es el valor de esta propiedad de datos. Esta es la primera parte del envío de los datos. El segundo ha terminado en los padres, que es app.vue. Guarda eso y dirígete a app.vue. Si volvemos a nuestra plantilla y buscamos la sección de cabecera nav, que es un componente char. Aquí necesitamos escuchar los eventos que hemos creado dentro de los elementos componentes, así que así como esto, podemos añadir un V encendido. Después escucharemos el evento que le diste un nombre de página fue cambiado, o incluso podemos usar la taquigrafía, que era el símbolo at. Ahora estamos escuchando que los eventos se pasen entonces necesitamos decirle a ver qué hacer con este evento. Obtenemos la página seleccionada, seleccionamos crear nueva propiedad de datos para almacenar este evento valorando cuando hay un cambio, desplazándose hacia abajo al script justo debajo del valor predeterminado de exportación. También voy a agregar la propiedad de datos dentro de aquí, no olvides agregar la coma. Voy a crear una nueva propiedad de página actual. Voy a poner esto igual a frentes de cartas. Por el momento sólo tenemos el componente frontal de tarjeta graduado. Esto está bien porque tiene sentido tener la parte frontal de la tarjeta mostrada por defecto de todos modos. Esto ahora nos permite establecer la página actual al valor de los eventos así como este. Para que la página actual sea igual al evento de signo de dólar. Ahora cada vez que se hace clic en el enlace de navegación, esto luego se pasa a los componentes principales con los eventos llamados página se cambió. Después cambiamos la página actual del frente de la tarjeta al valor de los eventos. Podemos probar esto está funcionando bien al emitir el valor de la página actual con las llaves dobles. Justo después de la cabecera nav. Voy a abrir las llaves dobles y dar salida al valor de la página actual, así que guarde eso. Ahora podemos ir al navegador. En primer lugar, queremos detener el servidor de desarrollo con npm run dev. Ahora vemos el valor de los frentes de cartas, que es lo que esperamos porque este es un valor por defecto. Si seleccionamos un enlace de navegación diferente, ahora vemos que el valor se cambia cada vez que seleccionamos un nuevo elemento de menú. Si ve el valor de la página seleccione el cambio, al hacer clic en un enlace de menú, esto significa que ahora está emitiendo con éxito datos de un componente hijo a padre. Si no, solo revisa todo el código hasta que llegue al escenario, y entonces estamos listos para pasar a crear el resto de los componentes de la tarjeta. También utilizando componentes dinámicos para cambiar entre cada vista. 50. Componentes dinámicos: En esta aplicación, queremos crear componentes para mostrar los diferentes lados de nuestra tarjeta de felicitación, como la parte delantera y la trasera. También queremos cambiar entre estos componentes. Cuando un usuario hace clic en los enlaces del menú. El uso de Componentes Dinámicos nos permite lograr este efecto. Podemos cambiar entre Componentes Múltiples y colocarlos en los mismos puntos de montaje. Todo lo que necesitamos hacer es utilizar los Elementos Componentes de Reserva. Se puede ir en lugar de los Componentes Delanteros de Tarjeta. Entonces si pasamos a la app.vue, continuarás con esta salida de página actual, así que empecemos. Entonces si eliminamos el frente de la tarjeta y lo reemplazamos por componentes, asegúrate de que esto esté en las etiquetas de apertura y cierre. Por lo que ahora en lugar de renderizar el frente de la tarjeta, los elementos componentes renderizarán cualquier sección en la que haga clic. Por lo que ya haciendo un seguimiento de la página seleccionada utilizando los Datos de Página de Columna. Ahora podemos usar los atributos de facilidad para enlazar dinámicamente los datos de la página actual a estos nuevos elementos componentes. Por lo que dentro de la etiqueta de apertura, podemos usar la directiva v-bind y luego une los atributos de is. Dentro de aquí podemos agregar la propiedad de datos de Página Actual. Recuerda también podemos usar la sintaxis taquigráfica, que es sólo el colon. Ahora cada vez que se hace clic en una página en el menú, los datos se pasan a los componentes del archivo app.vue padres y escucha este increíble evento, para luego actualiza los datos de la página actual. A continuación, los elementos componentes cambian el componente que muestra. En base a esto. Podemos ver esto en acción en el navegador. Si guardamos eso y luego refrescamos. Ahora si hacemos click en el frente, esto está bien porque sí tenemos disponible el componente frontal de tarjeta. No obstante, si seleccionamos alguna de las otras tres secciones, verías una página en blanco. Entonces esto está bien esto significa que todo está funcionando. El resto de estos enlaces trabajarán desde un crear, el resto de los componentes de la tarjeta. Esto lo haremos en el siguiente video. 51. Creación de los componentes adicionales de la tarjeta: Estamos avanzando bien con nuestro conocimiento de cómo funcionan los componentes. En este video, quiero crear los componentes adicionales de la tarjeta. Ya tenemos la tarjeta de componentes, pero aún necesitamos crear los archivos CardinSideLeft, dentro de la derecha, y también los archivos CardBack. Si te sientes seguro haciendo esto, siéntete libre de seguir adelante y crear estos componentes de un solo archivo por ti mismo. Por ahora el contenido solo necesita ser el mismo que el archivo CardFront.vue. Puedes copiar esto para empezar a hacerlo. Además, deberá importar estos al archivo App.vue, luego también registrarlos como componentes. Asegúrate de que cuando registramos los componentes, los nombramos igual que les hemos dado en la navegación del menú o en el archivo header.vue. De lo contrario, no enlazarán a la página correcta. Para empezar, voy a pasar al archivo CardFront.vue, seleccionar todo, y luego copiar, y luego si vamos a nuestro menú, a la izquierda, y luego dentro de la carpeta de tarjetas, voy a crear un nuevo archivo, y éste se va a llamar CardinsideLeft, con la extensión dot vue, y luego pegarlo en el contenido aquí, guarde eso. No necesitamos preocuparnos demasiado por el contenido por ahora, los vamos a construir con componentes hijo según lo necesitemos, solo para poder ver qué página se seleccionó. Simplemente voy a agregar algo de texto dentro de la primera sección solo diciendo CardinsideLeft, y esto es para que sepamos qué sección ejecutamos al hacer clic en los componentes dinámicos. Ahora, podemos importar los componentes dentro de la App.vue y luego registrarlo. Si bajas al script, y luego podemos importar el CardinsideLeft, y luego sacamos esto de la carpeta de componentes. Dentro de aquí, tenemos una carpeta de tarjetas y el nombre del archivo es CardinsideLeft, y luego por supuesto abajo en la sección de componentes, separada por una coma, agregamos el CardinsideLeft y ponemos esto con el mismo nombre que hemos llamado aquí, de CardinsideLeft. Recuerda que no necesitamos añadir estos elementos dentro de la plantilla, como hemos hecho con el encabezado nav. Porque este componente va a cambiar entre todas estas páginas sigue cuando las seleccionamos dentro del menú. Ahora, todo lo que necesitamos hacer es repetir el mismo proceso y crear dos secciones más o dos componentes de un solo archivo más. Voy a empezar con el componente CardinSideright. Dentro de la carpeta de tarjetas crearemos CardinSideright, nuevo con la extensión dot vue. Esto también puede tener el mismo contenido del interior izquierdo, así que vamos a seleccionar todo, copiar, y luego pegarlo en los contenidos. Tan solo para que puedas decir la diferencia, voy a cambiar el texto a adentro derecha y luego guardar eso, y luego finalmente también tenemos el CardBack, que necesitamos agregar. Cardback.vue, y luego pegar en el mismo contenido y cambiar el texto a CardBack. Volver a la App.vue, y solo voy a copiar esta declaración de importación y luego pegar esto en dos ocasiones. El segundo está dentro de la derecha. Cambiando dentro del nombre y también dentro de la ruta del archivo, y luego finalmente tenemos CardBack, y luego abajo dentro de la instancia podemos agregar dentro de la sección de componentes nuestros nuevos componentes. CardInsideright, y luego finalmente los componentes CardBack. Eso debe ser ahora hecho. Con los cuatro componentes de tarjeta ahora en su lugar, podemos asegurarnos de que nuestro servidor dev se esté ejecutando, y luego ir al navegador. Si todo está funcionando correctamente, ahora deberíamos poder hacer clic en cada uno de los enlaces de menú y ver nuestros nuevos componentes mostrados. Podemos ver esto está trabajando con los textos que agregamos dentro de cada uno. Genial, por lo que ahora con eso en su lugar, estamos haciendo buenos avances con nuestra aplicación. Ahora, es el momento de seguir adelante y comenzar a crear los componentes de entrada de texto. 52. Creación del componente de entrada de texto: Tenemos nuestras secciones de tarjetas terminadas ahora, y podemos cambiar entre las diferentes vistas haciendo click en los enlaces de menú. Ahora es el momento de crear los componentes de entrada de texto. Estos componentes serán nuestros primeros componentes reutilizables. Por lo que podemos crearlos una vez y luego usar un múltiplo de veces en la app, como puedes ver aquí. El componente en sí es bastante sencillo. Básicamente consiste en un área de texto entradas. Utiliza enlace de datos bidireccional con V-model para actualizar una propiedad de datos cuando un usuario escribe. Esta propiedad de datos se anima a los necios del componente padre a los recintos. Cuando lleguemos al texto, pondré componente. Todo lo que hacemos por este componente ya sabemos y lo hemos cubierto hasta ahora en este curso. Comencemos por crear los componentes llamados texto inputs.view. Si pasas a la sección de conteo. Podemos sumar nuestros nuevos componentes dentro de aquí. Entonces entrada de texto, con la extensión.view. Entonces necesitamos agregar nuestras plantillas habituales. Por lo tanto, agrega estos en la parte superior con las etiquetas de apertura y cierre. También puedes agregar nuestras etiquetas de script a continuación, y las usamos muy pronto. No necesitamos las etiquetas de estilo en estos componentes en particular. Ya que las clases de Bootstrap se encargarán de todas las fotos de estilo. Nuestra plantilla te sencillo. Todo lo que necesitas hacer es agregar algunos divs de Bootstrap para el diseño, un encabezado y luego un área de texto. Entonces comencemos por crear nuestro primer div, que va a tener la clase de fila. Entonces dentro de esta fila, vamos a sumar nuestra cuadrícula de 12 columnas. Entonces agrega un div anidado dentro de ahí, y luego podemos agregar algunas clases más de Bootstrap de carbón, SM 12 para que sea el ancho completo de la página, y luego dentro de aquí podemos agregar nuestro contenedor para el área de texto. Entonces vamos a agregar un div Bootstrap con la clase de grupo de formulario. Esto sólo te dará un poco de estilo agradable en. En la parte superior de este componente, queremos agregar una h para encabezamiento, y esto va a agregar el texto de texto de edición. Es así como usamos, podemos ver claramente que este es el área de edición mientras que las necesidades escriben en algún texto, y luego podemos agregar nuestro área de texto. Por lo que solo voy a eliminar el nombre y el ID reemplazarlo por una clase Bootstrap de control de formulario. Por lo que las columnas van a hacer esto un poco más grande y hacer de estas 50 columnas, y sólo necesitamos cuatro filas. Entonces voy a agregar un placeholder, y el texto que vamos a agregar es justo, agrega texto aquí. Tan solo para darle al usuario algunas instrucciones. Después necesitamos una propiedad de datos para almacenar el texto ingresado por el usuario. luego podamos emitirlo a los componentes principales estos datos, usaremos enlace de datos bidireccional para ser actualizados desde esta área de texto. Abajo en nuestro guión, podemos crear nuestros objetos. Exportar valores predeterminados, y vamos a crear nuestra propiedad de datos de la manera habitual, y voy a devolver la propiedad de datos de las entradas de cuadro de texto. Inicialmente voy a establecer esto en una cadena vacía. Ya que todavía no se agrega texto dentro de aquí. Ahora ten estas entradas de cuadro de texto como una propiedad de datos. Podemos añadirlo a nuestra área de texto usando el modelo para vincularlo. Entonces justo después del atributo placeholder queremos agregar esto en una nueva línea. Entonces modelo V, y esto va a ser entrada de cuadro de texto. Por lo que ahora tendremos la configuración de enlace de datos bidireccional. Ahora podemos emitir el valor de esta área de texto a los padres. Esto se puede lograr agregando un método que se llama On Each Keyboard Events. Todavía dentro de esta área de texto, voy a agregar un oyente de eventos para activar un nuevo método llamado Texto cambiado. Cada vez que se ha liberado una llave. Entonces agregamos el símbolo @ y luego los eventos de key-up. Por lo que cada vez que se libera una clave, podemos desencadenar un evento llamado texto cambiado. Entonces podemos crear nuestro método a continuación para activar los eventos de emita personalizados. Entonces abajo dentro del script, debajo de los objetos de datos agregan una coma, y luego podemos agregar nuestros métodos. Este método por supuesto necesita ser el mismo en, lo que tenemos aquí de texto cambiado, y luego dentro del cuerpo de función queremos emitir estos datos. Por lo que este signo. $ emite. Entonces recuerda de antes, necesitamos pasar dos argumentos. El primero es un valor de cadena, y este es el nombre de nuestros eventos. Voy a llamar a este texto de visualización cambiado. Puedes usar un nombre diferente si lo prefieres. Bueno, creo que este nombre describe lo que hacemos bien, y entonces el segundo parámetro es el valor que se desea enviar. Por lo que esto inicia la entrada de cuadro de texto, que tenemos aquí. Entonces al final como segundo argumento. Por lo que ahora tenemos los eventos personalizados llamados texto de visualización cambiado. Podemos agregar el componente al archivo de conferencia dot v como componentes infantiles y escuchar el evento. Pero volveremos a las diapositivas como podemos ver aquí. Utilizamos el mismo componente tres veces. Si abrimos los frentes de tarjeta, el archivo de vista, podemos agregar estos componentes dentro de aquí. En primer lugar, necesitamos importar los componentes dentro del script. Entonces al igual que lo hemos hecho antes, podemos impulsar los componentes de entrada de texto y luego agregar la ruta del archivo que es la slash de puntos. Este sólo va a ser entradas de texto. Entonces esto se debe a que la entrada de texto está en la misma carpeta que los frentes de tarjeta. No necesitamos entrar en la carpeta de tarjetas o componentes porque ya estamos ahí. Entonces necesitamos crear nuestros componentes, fecha propiedad. Entonces exporta, por defecto, luego agrega nuestros componentes. Entonces voy a añadir un prefijo CC, que significa tarjetas creativas. Esto es para asegurarnos de que el nombre sea un poco menos genérico, más adaptado a nuestra aplicación. Por lo que las entradas de texto CC, que es alias para la entrada de texto. El CC también puede evitar cualquier conflicto de nomenclatura con cualquier vista JS Plugins o bibliotecas, que podríamos sumar en el futuro. Entonces vamos a guardar eso y luego pasar a la sección de plantillas. Entonces dentro del área de edición, vamos a sumar nuestros componentes. Por lo que CC entrada de texto. Entonces si te aseguras de que tu servidor de desarrollo esté en funcionamiento, guarda, y luego ve y ve al frente. Ahora deberíamos ver que el componente de área de texto ahora se agrega a nuestra app. Dejaremos ahí este video y volveremos y continuaremos con estas entradas de texto en el siguiente video. 53. Recibir datos de la entrada de texto: En el último video, creamos y registramos con éxito nuestros nuevos componentes de entrada de texto. Ahora vamos a seguir sumando este componente al frente de la tarjeta dos veces más. Pasemos a la vista de puerta frontal de la tarjeta y aquí donde creamos las entradas de texto CC, vamos a copiar esto y pegarlo en dos veces más. Deberías estar viendo un poco de un patrón en mi [inaudible] para mostrar los componentes que lo agregamos como elementos HTML. Todo lo que tenemos que hacer es agregar esto tres veces, y luego se puede ver cómo se exhibieron tres veces dentro del frente de la tarjeta. Ahora tenemos nuestros tres componentes, también necesitamos agregar el oyente de eventos que agregamos dentro de la entrada de texto. Actualmente estamos emitiendo el evento denominado Mostrar texto cambiado. De [inaudible] a esto dentro de los componentes usando @ texto display cambiado y luego también necesitamos agregar esto a nuestros componentes segundo y tercero. Sólo tienes que copiar y pegar esos encima. Aquí tenemos tres componentes agregados los cuales todos escuchan el evento de cambio de texto de visualización que se le pasará. Ahora necesitamos agregar propiedades de datos gratuitas para almacenar el valor de texto recibido para que esa sea una para cada componente. Bajemos a nuestro script y podemos agregar nuestra propiedad de datos. El primero que queremos agregar va a ser un nombre del valor de caja de texto 1 el cual va a ser inicialmente una cadena vacía. Porque tienes tres componentes separados, también voy a agregar lo mismo para el número 2 y 3. Valor de caja de texto 2, nuevamente configurado para ser una cadena vacía por ahora y luego valor de caja de texto 3. Con esto ahora en su lugar, ahora podemos actualizarlos con el valor de los eventos pasados desde los componentes [inaudibles]. Haremos esto tal como miramos previamente dentro del oyente de eventos. Podemos comenzar agregando el valor de caja de texto 1 al primer componente y ciertamente es igual al valor del evento y luego hacemos exactamente lo mismo para los componentes segundo y tercero. Text-box value 2 y luego text-box 3. Con esto ahora en su lugar, todo lo que necesitamos hacer es comprobar si los datos se están recibiendo de cada uno de nuestros componentes, es simplemente emitir valores utilizando la interpolación de texto. Empecemos por la salida de un valor de caja de texto 1 y luego el valor de caja de texto 2, luego lo mismo para el valor 3, guarde eso. Asegúrate de que el servidor de desarrollo esté en funcionamiento y luego si pasamos al navegador. Ahora si empezamos agregando algo de texto al primero, podemos ver que el texto se muestra abajo en la parte inferior, esa es nuestra área de texto 2. Ahora tenemos el área de texto 2 mostrada también. Probemos con el tercero. El área de texto 3 también está apareciendo allí. Ahora podemos ver que tenemos tres de los mismos componentes mostrados en la pantalla. Ahora reutilizaremos nuestro componente tres veces. No obstante, los datos se almacenan de forma independiente por lo que cada uno cuando escribimos tiene su propio valor de datos correspondiente. Si logras que todo esto funcione, felicidades. Deberías estar consiguiendo el ahorcamiento de los componentes ahora y ya estás listo para pasar al siguiente video. Empezaremos a crear las áreas de salida de texto. 54. Creación del componente de salida de texto: Ahora tenemos los componentes de entrada de texto creados y también se muestran en la pantalla también, ahora voy a crear el archivo de salida de texto. Este va a ser el componente que muestra el texto en la tarjeta. Nuevamente, al igual que las entradas, estaremos usando tres de estos componentes para mostrar el texto en la tarjeta. En primer lugar, podemos eliminar los campos de valor del cuadro de texto del archivo frontal de la tarjeta. Eliminemos TextBoxValue1, 2 y 3. Ya probamos estos y sabemos que no funciona. Al igual que hicimos con los componentes de entrada, vamos a crear un nuevo archivo de componentes, esta vez llamado TextOutput. Vaya a la carpeta de tarjetas, cree un nuevo archivo llamado TextOutput, con la extensión.veu. Ahora podemos añadir nuestra plantilla. Por ahora esta plantilla va a ser bastante simple, todo lo que voy a hacer es crear un div como envoltorio, y luego dentro del div, solo agrega algo de texto, solo de texto de muestra para que podamos ver los componentes en la pantalla. Justo debajo de la plantilla, también podemos agregar nuestras etiquetas de script, y solo voy a crear un valor predeterminado de exportación vacío por ahora, seguido de las etiquetas de estilo. Una vez que hagas eso, tendremos que importar y registrar el componente dentro de la CardFront.vue. Estamos abajo a la sección de guiones y luego solo voy a copiar estas declaraciones de importación, y luego pegarla a continuación. Pero esta vez cámbialo a TextOutput. Lo mismo para la ruta del archivo. Abajo en la sección de componentes, añadir un coma. Estoy mirando nuestro CCTextOutput. Dale una caja fuerte a eso. Ahora tenemos acceso al componente en este archivo. Es tiempos ahora agregarlo al área de visualización de tarjetas dentro de la plantilla. Pasa a la sección de visualización de tarjetas, y luego podemos añadir ccTextOutput y, la etiqueta de cierre. Como se mencionó, vamos a estar exhibiendo esto tres veces. Eventualmente estas secciones de salida mostrarán el texto de estas tres secciones de entrada de texto. Guarda eso, y luego inicia los servidores con npm run dev. Si es necesario, entonces podemos ir al navegador, y vemos el componente en acción, pero pasaremos el texto a los tipos de usuario al componente en el siguiente video, echaremos nuestro primer vistazo al uso de utilería. 55. Pasar datos con accesorios: Entonces así es como se ve nuestra estructura hasta ahora. Contamos con componentes de entrada y salida de texto dentro de un componente padre llamado CardFront. Los datos se pueden pasar entre dos componentes hermanos. Por lo que no podemos mover el texto de los componentes Input a Output directamente. En cambio, tenemos que comunicarnos a través del componente padre, que es Card Front. Ya sabemos cómo pasar datos de un niño a un componente padre. Hacemos esto emitiendo un evento personalizado y ya lo estamos haciendo en nuestra app, por lo que tenemos esta parte cubierta. A continuación, necesitamos una forma de hacerlo todo el camino. El componente principal necesita volver a pasar estos datos a un componente secundario. En nuestro caso, al componente Salida de texto. Podemos hacer esto con utilería, que es abreviatura de propiedades. Los apoyos son atributos personalizados para pasar datos a componentes secundarios. Si vienes de un fondo react.js, funciona de la misma manera. El primero que hay que hacer es declarar dentro del componente infantil los apoyos que esperamos recibir. Entonces si pasamos al archivo Textoutput.vue, y luego bajamos al Script. Podemos entonces agregar nuestros Props dentro de aquí. La opción de props es una matriz de nombres de prop, que esperamos que se pasen como una cadena. He llamado a este prop el Texto Display para reflejar los datos que le transmitirán. Podemos volver a subir a nuestras plantillas y quitar el texto de muestra. Entonces en el lugar de esto podemos agregar el nombre de la prop, que es Display Text. Por lo que una vez que se transmitan estos datos, éstos se mostrarán dentro de nuestra plantilla. Ahora podemos agregar este prop sobre en el componente padre, que es CardFront.vue. Por lo que para empezar, agregamos un atributos personalizados dentro del componente Output, que es el nombre de la prop. Entonces voy a agregar, Mostrar texto aquí dentro. Por lo que esta prueba sólo se va a agregar una cadena de, Hola. Así que ahora asegúrate de que el servidor de desarrollo se esté ejecutando. Ahora si nos repasamos, ahora deberíamos ver el valor de la prop en la pantalla. Por lo que este valor se está pasando al componente secundario de Salida de texto. Entonces le decimos a vue.js qué apoyos esperamos recibir, y luego podemos enviarlos dentro de nuestras plantillas. No obstante, en este caso, esto sólo funciona porque hemos usado una cadena. Si tratamos de utilizar datos dinámicos, como nuestro TextBoxValue1. Entonces copiamos eso y pegamos eso en. Vemos que esto no funcionará. Simplemente obtenemos el valor de cadena en lugar de los datos dinámicos. Si los datos son dinámicos, necesitamos usar v-binds o la sintaxis abreviada. Entonces justo antes de Display Text, podemos agregar la sintaxis corta de los dos puntos, ahora guarde eso. Ahora si pasamos al navegador, y empezamos a escribir texto dentro del primer cuadro de entrada de texto. Podemos ver ahora los cambios se reflejan sobre en el lado derecho. Intentamos esto con el segundo. Vemos que no pasa nada porque aún no hemos agregado ningún apuntalamiento al segundo o tercer componente. Entonces pasemos al CardFront y podemos hacer esto ahora para el segundo y tercer componentes. Por lo tanto, copia los apoyos y agrega esto en los componentes segundo y tercero. Para que estos sean únicos necesitamos agregar a la propiedad date o TextBoxValue2 y TextBoxValue3. Entonces guarde eso. Ahora deberíamos tener tres componentes independientes. Entonces box1, box2, y finalmente box3. Por lo que todos estos están trabajando de forma independiente con sus propios datos. Las tres áreas de texto funcionan forma independiente porque tienen una fuente de datos diferente. Es así como podemos usar los apoyos para pasar datos a los componentes secundarios. Es importante que entendamos que los apoyos formen un enlace hacia abajo unidireccional, lo que significa que si los datos de los padres se actualizan. Los datos pasarán automáticamente al niño. No obstante, no debe funcionar al revés. No debemos cambiar el valor de la prop dentro del componente secundario, debemos tratarlos como de sólo lectura. Si necesitamos cambiar el valor de un prop que se está pasando, no debemos hacerlo directamente. Si queremos usar un prop y luego cambiar el valor, primero deberíamos configurar una propiedad de datos dentro de los componentes secundarios. Deberíamos entonces asignar la propiedad dates como el valor inicial de la prop y luego cambiar sus datos en lugar de cambiar directamente el valor de la prop. 56. Mantener los componentes vivos: Al usar componentes dinámicos y cambiar entre ellos como estamos aquí, se crea un pequeño problema que puede que tengamos que abordar. Si escribimos algo en uno de los cuadros de entrada de texto como éste, vemos el resultado en el lado derecho. El problema ocurre cuando cambiamos el componente activo utilizando los enlaces manuales. Si seleccionamos unos componentes diferentes, como Inside Left, luego regresamos al Frente. Vemos que el texto que agregamos está perdido. También tarde en el proyecto cuando agregamos entradas de texto e imagen a todas las páginas. Lo mismo sucederá con todos estos componentes también. ¿ Por qué sucede esto? Bueno, al principio del curso, miramos el ciclo de vida de la vista, que es las etapas de vista que la instancia pasa desde la curación hasta ser destruida. Cuando cambiamos los componentes dinámicos, componente o alejamos de, entonces se destruye y se retira de la memoria. Ver proveedores de jazz con una solución sencilla a esto. Todo lo que necesitamos hacer es envolver nuestros componentes dinámicos con elementos reservados ANOVA llamados keep life. Si volvemos a nuestro editor de texto y luego pasamos a la vista de punto de la app, tenemos un componente que está registrando la página activa actual. Envolvamos esto dentro de la envoltura Keep-Alive para agregar la etiqueta de apertura, y después del componente, también podemos agregar la etiqueta close. Yo no guardé eso. Ahora si pasamos al navegador, podemos empezar agregando algunos datos dentro del primer área de texto, y un ahora si nos alejamos y luego volvemos al frente, veremos que ahora se están conservando los datos. Esta es una solución realmente simple que ve a los proveedores de GS para mantener datos de componentes dinámicos dentro de la memoria. 57. Estilos CSS de alcance: Al principio de esta sección, creamos todos los componentes de las tarjetas. Creamos la tarjeta mi copia de archivo. Este archivo ya tenía algún estilo dentro de las etiquetas de estilo. Si bajamos a la parte inferior del Frente de Tarjetas, podemos ver entre etiquetas de estilo, tenemos el área de edición y estilos de visualización de tarjetas. Al duplicar este archivo también se agregaron los mismos estilos a todos los archivos de tarjeta. Por ejemplo, si vas a Card Back y desplaza hacia abajo hasta el estilo, podemos ver que tenemos código duplicado. Si vamos a eliminar los estilos de este archivo Cardback.vue, vamos a guardar eso y ver qué pasa. Vamos al navegador y luego si vamos al “Atrás”, todavía podemos ver que el estilo aún aplica porque tenemos el color de fondo, el relleno, y también la altura de 800 píxeles aplicando. Esto se debe a que cualquier estilo en el que añadamos dentro del archivo de componentes seguirá aplicándose en todas partes de nuestra app. Para reducir el código dentro de nuestra app, podemos eliminar todos los estilos del Card Back, que ya hemos hecho. El CardinSideLeft, así que mueve estos a secciones de estilo. Entonces finalmente desde el CardinSideright. Esto ahora solo deja nuestro estilo dentro del área CardFront original. Dejando los estilos sólo en el archivo CardFront porque se aplicarán a todo el resto. Pero ¿y si tuviéramos un caso donde queremos contener el CSS a un solo componente en particular? Para este caso, podemos agregar “ámbito” a la etiqueta de estilo de apertura así como esto. Agrega los atributos de ámbito y guarda eso. Ahora pasamos al navegador. Si vas al Frente, podemos ver que el estilo aplica dentro del Frente de Tarjetas. Probemos por dentro Left, InsideRight, y también por el Back. Ahora podemos ver que el estilo está restringido a un solo componente de archivo. Voy a volver al Frente de Tarjetas y quitar “alcance”. Esto se debe a que quieres que se aplique a todas las demás páginas. No obstante, sí tenemos algunos usos para usar alcance dentro de nuestra aplicación. Por ejemplo, sobre en el archivo TextOutput, podemos generar el texto dentro de las etiquetas HTML p. Entonces podemos darle estilo a este texto y tener el estilo solo se aplique al texto que se muestra en la tarjeta real, que es esta área dentro de nuestras plantillas. Bajemos al estilo y añadamos “alcance” aquí dentro. Esto sólo se aplica al TextOutput. Entonces voy a establecer una nueva familia de fuentes para que se aplique sólo a la sección de tarjetas. Voy a ir a Google y seleccionar una fuente de Google. Voy a buscar Google Fuentes Tangerine y luego seleccionaré eso. Esta es la fuente que voy a usar para este proyecto. Por supuesto puedes cambiarlo si lo prefieres. Una vez que hayas seleccionado tu fuente, haz clic en el símbolo más en la parte superior, y luego podremos expandirnos. Aquí nos dan algunas instrucciones sobre cómo agregar las Fuentes de Google. Lo primero que quieres hacer es copiar el enlace en la parte superior. Este es el enlace para las hojas de estilo. Después pasa al index.html, y luego agregaremos esto justo debajo del enlace bootstrap. Pega eso ahí dentro y dale a eso un guardar y volver a Google Fonts. Después podemos copiar la línea de CSS. Copia esto y luego podemos añadirlo a nuestro archivo TextOutput dentro del CSS para los elementos P y luego pegarlo en el código que acabas de copiar. Guarde eso, asegúrese de que el servidor de desarrollo esté en funcionamiento y luego vuelva al proyecto. Empezaremos a escribir dentro de los componentes de entrada. Podemos ver que el texto se está aplicando, aunque es realmente pequeño por ahora pero está funcionando, y podemos ver que se están aplicando las fuentes. Para solucionar esto, voy a volver al archivo y añadir un poco más de estilo. Voy a establecer el tamaño de fuente predeterminado para que sea de 42 píxeles. También voy a igualar la altura de línea de 42 píxeles. Tan sólo para darle un poco de una mejor mirada, voy a añadir la sombra de texto de dos píxeles, dos píxeles, dos píxeles para los tres lados; y luego el color de aaa. El color del texto, voy a agregar el mío como 4d4d4d. También va a agregar algún margen, cinco píxeles en la parte superior e inferior, y cero en la izquierda y la derecha, solo para darle un poco de espaciado. También voy a añadir una frontera y ya veremos por qué pronto. Tan solo un píxel punteado y un color gris. Entonces la propiedad de espacio en blanco de pre-línea. Pre-línea preserva los saltos de línea, lo que detiene todos los textos que aparecen en la misma línea. Si el usuario pulsa “Enter” y comienza a escribir en un cuadro de texto en la siguiente línea, mismo se aplicará en el lado de salida para que todo no esté en la misma línea. Entonces finalmente vamos a desbordar de oculto, si acaso el usuario escribe demasiado texto que no puede caber en el área. Eso lo guardamos y vemos cómo se ve eso. Ahora vemos que el texto es un poco más grande, y también tenemos algunas sombras de fuentes. No parezco ver lo punteado, voy a cambiar eso para ser punteado y ahí vamos. Te das cuenta de que tenemos unas lindas líneas punteadas de aspecto feo. Esto se debe a que sin el texto, el borde de la línea punteada no tiene altura. Podemos ignorar estos por ahora porque vamos a pasar apoyos a estos componentes en el siguiente video, que establecerá la altura de los componentes. Después tendremos un bonito borde punteado alrededor de cada sección. El principal es un texto para la tarjeta es estilo ahora. Estos estilos tienen ámbito para que se apliquen únicamente a estos componentes. 58. Validación de apoyos: Al pasar datos a componentes secundarios a través de apoyos, a veces se quiere asegurarse de que enviamos el tipo correcto de datos a utilizar. Por ejemplo, si los componentes secundarios esperan que un número pase a él o en su lugar recibe una cadena, entonces esto puede causar problemas. uso de la validación de la prop es una forma de establecer los requisitos para la prop a recibir. Si falla la validación y VGS enviará un error de consola durante el desarrollo. En primer lugar vamos a pasar al archivo v frontal de la tarjeta y añadir un nuevo prompt para pasar a los componentes de salida de texto probablemente utilizados para establecer la altura de los contenedores fiscales en la tarjeta. Causa latente haremos lo mismo con la visualización de la imagen. Podemos reorganizar las alturas de los componentes, para que encajen correctamente la tarjeta. Necesitamos y esta sonda dentro de los componentes de salida de texto CC. Voy a llamar a este prop las alturas de contenedor y pondré esto en un valor de 130. Por lo que este valor de 130 se utilizará como propiedad CSS. Hagamos lo mismo para el segundo, tercer componente, copie esto y luego pegarlo en dos veces. Entonces una vez que esto se hace más en el texto output.file, podemos agregar el nombre propio a la matriz. Ya tenemos nuestra configuración de utilería. Podemos separarlos con una coma y también agregar nuestro segundo prop, altura de contenedor a apoyos a la matriz, como esto funciona bien. Pero queremos agregar algunas validaciones componente tele. ¿ Qué tipo de datos esperamos recibir? Para hacer esto cuando es tristes apoyos ser un objeto. Podemos establecer el tipo de fechas que queremos recibir dentro de una matriz. Tenga en cuenta que se puede utilizar más de un tipo de datos, como un número de cadena, función booleana, un objeto o incluso una matriz. Entonces agreguemos en nuestro prop de texto de visualización. Vamos a añadir esto de nuevo. Agregue esto es un tipo de cadena a la matriz. Podemos probar esta validación pasando una nueva autopista y ver qué pasa. Entérate en el frente de la tarjeta, en lugar de enviar el valor del cuadro de texto gastado, va enviar un valor de cadena. Digamos 12. Ahora si abres la consola, podemos ver que hay un error. Dice esperado libro de cuerdas consiguió un número. Entonces eso significa que la validación está funcionando. Entonces ahora cambiemos esto de nuevo al volumen del cuadro de texto. Es así como podemos agregar validación básica de datos. También hay más cosas que podemos hacer, separadas por una coma. Añadamos ahora el segundo apuntalamiento de altura de contenedor. Debido a que esto tendrá más de un tipo de validación, necesitamos establecer esto para que sea un objeto y luego añadirlo como un tipo de número. También podemos declarar si queremos que se requiera este prop. Este es un valor booleano que voy a poner en verdadero. Esto le dice a VGS este prop mayormente presencia de lo contrario recibirá una advertencia de consola. Podemos probar quitando cualquier contenedor de alta prop de los padres de dibujos animados, luego dirigirnos a la consola. Dentro de aquí recibimos el mensaje de advertencia diciendo que faltan apoyos requeridos de altura de contenedor. Ahora vamos a añadir esto de nuevo y luego guardar. Por lo que de vuelta en nuestras indicaciones en la salida de texto. Además, podemos agregar un valor predeterminado si no se pasa ningún valor. Obviamente esto no tendría sentido agregarse con requerido, lodo reemplazar requerido por defecto, y quieren venderlo a un valor de 200, que por supuesto es un número.Así que ahora si no se pasa ningún prop a través de un componente, se utilizará en su lugar el valor predeterminado de 200. Ahora tenemos estos datos validados siendo pasados como prop validado. Utilizamos en el siguiente video para establecer alturas de un contenedor agregándolo al objeto de estilo. 59. Pasar datos de accesorios a un objeto de estilo: Nuestra aplicación ahora se está pasando un prop validado, que es un número. Podemos usar este número para establecer desde el exterior la altura que queremos que sea el cuadro de texto del lado derecho, que es esta área de aquí. Este prop se llama contener alturas, y vamos a pasar el valor a un objeto de estilo para establecer la altura del contenedor usando CSS. Para ello, vamos a configurar una propiedad calculada dentro del archivo de salida de texto. Sólo volveremos a renderizar cuando haya un cambio en la prop de altura del contenedor. Añadamos nuestra sección calculada justo debajo de los apoyos, separados por una coma. Voy a llamarlo una propiedad computada nuestro StyleObject y luego vamos a devolver la altura. Voy a fijar las alturas para que sean iguales a esto.ContainerHeight, que es nuestro prop al que se está pasando. Entonces debido a que se le pasó un número y quería ser un valor CSS, también podemos agregar px para píxeles al final. Este objeto de estilo agregará una propiedad CSS alta, establece el valor de la prop, que actualmente es 130, que estableces aquí. Entonces dentro del objeto, agregamos px para declarar que este es un tamaño de píxel. Ahora se crea nuestro objeto de estilo Podemos añadirlo a nuestra p-tag de apertura como atributo de estilo. Desplázate de nuevo hasta nuestras plantillas y dentro de la etiqueta de apertura, usa los dos puntos para enlazar los estilos ya que estos son dinámicos. Esto va a ser igual a nuestra propiedad computada, que es StyleObject. Añadamos esto a una línea separada. Guárdalos. Si volvemos a la tarjeta, podemos ver que tenemos las cajas de salida de texto libre establecidas a una altura de 130 píxeles, y es por ello que antes fijamos el borde punteado. Podemos ver claramente qué sección es cuál. Pasemos a las herramientas de desarrollador y también deberíamos poder ver esta propiedad CSS. Si seleccionamos el cuadro de salida de texto, podemos ver dentro de los elementos p, tenemos el estilo establecido en una altura CSS de 130 píxeles. Es así como podemos trabajar con nuestros apoyos, que se transmiten al componente. Tenga en cuenta que esto está bien de hacer ya que no estamos modificando el valor de la prop directamente. Solo estamos usando el valor de la prop para luego agregarlo a un objeto CSS. 60. introducción a los slots: Ahora sabemos cómo analizar datos del componente padre al hijo usando Props. También podemos pasar datos al componente hijo utilizando un método llamado Slots. Las ranuras se utilizan para lo que se llama distribución de contenido. A menudo necesitamos mezclar el componente de padres e hijos de forma contenta alguna vez. En nuestra app hasta el momento, si pasas a la app.vue, podemos ver tenemos el encabezado en la parte superior y luego abajo tendrá los elementos de componentes dinámicos. No siempre tenemos nuestros componentes perfectamente apilados uno encima del otro, como lo hacemos hasta ahora en esta app. Los componentes se pueden anidar uno dentro del otro, o incluso podemos anidar contenido HTML entre la etiqueta de apertura y cierre de componentes. Por ejemplo, digamos que queríamos que nuestros elementos componentes se anidaran dentro del componente de cabecera. Abramos el nav-header y luego si cortamos el contenido del componente, incluyendo las etiquetas keep-alive y luego lo pegamos ahí. Ahora tenemos una situación en la que las cosas se ponen un poco desordenadas. El componente nav-header tiene su propio archivo de plantilla al igual que el componente dinámico como conferencia. Necesitamos una forma de decirle a Vue js dónde dentro del nav-header se agregarán nuestros componentes dinámicos. Este archivo de encabezado tiene sus propias plantillas. Entonces, ¿se renderizará el componente dinámico antes o después de esta plantilla? Bueno, esto en realidad depende de nosotros. Aquí es donde entra Slot. Ranura nos permiten controlar la distribución de este contenido. Declaramos una ranura dentro de la plantilla para colocar el contenido dentro. Actualmente, si pasamos al navegador ahora, sólo vemos el encabezado en la parte superior y no hay señal del contenido que hemos anidado dentro de la app. Justo aquí. En realidad solo ves esta sección de encabezado y nada más. Para mostrar el contenido anidado, sobre en el archivo Header.vue, podemos agregar el elemento de ranura especial dentro de la plantilla padre. Justo debajo del div-wrapper, quiero agregar la ranura, la apertura y la etiqueta de cierre. Guarda eso. Entonces ahora podemos ver que el contenido ahora se coloca dentro. Este es el componente dinámico que está en la parte superior y luego abajo tenemos el encabezado. Esto se debe a que hemos colocado una ranura por encima de la sección de cabecera, que está aquí. También podemos añadir la ranura en cualquier lugar que nos guste. Podemos recortar eso con la plantilla y luego añadirlo debajo los enlaces de menú y ahora vemos que nuestra app ha vuelto a la normalidad. No nos limitamos a anidar solo componentes. También podemos anidar elementos HTML dentro de componentes. En primer lugar, regresemos nuestra app de nuevo a cómo fue. Si quitamos estas ranuras, entonces otra vez en App.vue, si movemos los componentes fuera de la sección de cabecera. Voy a crear un nuevo componente de pie de página, y luego pasar el contenido a esto a través de elementos HTML anidados. Echemos un vistazo a esto en acción. Encima en los componentes, vamos a añadir un nuevo archivo. Esta vez vamos a sumar fuera de la sección actual. Así que asegúrate de que esto esté al lado del encabezado.vue. Este es el archivo Footer.vue. He guardado esto fuera de la subcarpeta de tarjetas para mantener allí solo los componentes relacionados con la tarjeta organizados dentro. Añadamos nuestra plantilla familiar. Necesitamos un elemento raíz para rodear nuestro contenido. Podemos usar el elemento de pie de página del archivo HTML en lugar de un div. Como ya sabemos, necesitamos importar y registrar el componente para asegurarnos de que este esté disponible. En el archivo App.vue, hagámoslo ahora. Simplemente voy a copiar una declaración de importación y pegar la misma y luego cambiarla para que sea el Pie de página, también lo mismo para la ruta del archivo. Asegúrate de que esto sea solo componentes/pie de página, no necesitamos la carpeta de tarjetas. Abajo en los componentes, podemos registrarlo separado por una coma. Voy a llamar a la mía CCFooter, que es un archivo Footer. Ahora esto está registrado, podemos subir a la plantilla aún dentro de App.vue. Justo debajo del componente kept-alive, va a agregar estos elementos de CCFooter. Nuestro componente Footer actualmente no tiene contenido dentro de la plantilla, por lo que no veremos ningún cambio en la app. Esto se debe a que vamos a agregar el contenido Footer como elementos HTML anidados dentro de este componente Footer. En lugar de tener nuestro contenido dentro del archivo Footer, podemos añadirlo entre estas dos etiquetas. Voy a empezar agregando algún texto de Tarjetas Creativas. Voy a agregar la entidad HTML para el símbolo de copyright, que es el ampersand y una copia con punto y coma al final. Entonces quiero agregar una clase bootstrap para algún estilo de text-center. Ahí llegamos a trabajar agregando algunos enlaces de navegación. Abre los elementos nav-y ahí podemos crear nuestra lista desordenada. Voy a agregar algunas clases a la lista desordenada de nav y luego justificar content-center. Entonces podemos agregar algunos ítems de lista. Simplemente voy a ir al encabezado y agarrar uno de estos ítems de la lista, solo para que podamos mantener las clases consistentes y luego pegar esto dentro de la ul. Tenemos la clase de nav-item. Tenemos el enlace, que se muestra con este click ahora. El primero que voy a agregar como Inicio y luego cuando agrego un par de enlaces más, copia eso y pega en dos veces más. Ahora tenemos nuestros tres enlaces. El primero es Home. El segundo me voy a cambiar a About Us y luego el tercer y último enlace, voy a cambiar a Contáctenos y luego darle a eso un ahorro. Si pasamos al navegador y actualizamos, vemos que no se han aplicado cambios. Sabemos por nuestro ejemplo anterior que el contenido anidado no se mostrará. Necesitamos agregar nuestro elemento de ranura al componente padre, que es footer.vue, así que agreguemos esto dentro de aquí. Con el elemento slot agregado, Vue js ahora sabe dónde queremos distribuir contenido que hemos agregado entre las etiquetas de pie de página. Asegúrate de que eso esté guardado y luego ve al navegador, y luego abajo en la parte inferior tenemos nuestro contenido de pie de página. Es así como podemos usar Slots para distribuir contenido a donde queremos que aparezca. Esta es una mirada básica al uso de Slots. Hay algunas cosas más que cubrir al usar estas, y seguiremos viendo estas en el próximo video. 61. Alcance del slot y contenido predeterminado: Ahora vamos a seguir buscando más profundo unas ranuras y entender más sobre ellas. En el último ejemplo, utilizamos un único elemento de ranura en nuestros componentes de pie de página. Si sólo hay un solo elemento de ranura, como tenemos aquí, todo el contenido que se agregaron entre las etiquetas de componentes, que es todo esto, se insertará dentro de esta ranura. Encima en el pie de página también podemos agregar contenido entre los elementos de ranura así como este. Entonces agreguemos algo de texto dentro de aquí. Todo el texto de pie de página, y esto es lo que llamamos contenido de respaldo. Si pasamos al navegador y nos desplazamos hacia abajo hasta el pie de página, podemos ver que el texto no se muestra hacia abajo en la sección de pie de página. Esto se debe a que el contenido entre las etiquetas de ranura se considera contenido de respaldo. Esto significa que sólo se mostrará si no hay contenido para insertar. Entonces para comentarios fuera los elementos anidados en los componentes padre, que es app.vue. Comentario sobre este apartado, hasta la etiqueta de navegación de cierre. Ahora es volver al pie de página y podemos ver que tenemos el contenido de respaldo barras de texto de pie de página a comentario largo. Esta sección retrocede. Esto es sólo algo a considerar si el contenido no está disponible de inmediato. A lo mejor queremos usarlo con visual por ejemplo, y podríamos mostrar el contenido de retroceso hasta que lo visual se haga realidad. Otra consideración es el alcance del contenido. En la actualidad tenemos una sección de navegación dentro del pie de página la cual está anidada. Entonces, ¿todo el código dentro de aquí se compila en los padres o dentro del ámbito infantil? Bueno, echemos un vistazo y averiguarlo. Entonces digamos que nuestros textos de tarjetas creativas en el pie de página, que está justo en la parte superior aquí, fueron dinámicos. Entonces, en lugar de tener esta sección aquí, si esto fuera dinámico teníamos alguna propiedad de datos, como AppName, ¿se restauraría esta propiedad de datos AppName en la sección de script de los componentes padre o hijo? Bueno, la respuesta está dentro de los componentes de los padres. Si bajamos a la sección de script, y dentro de la sección de datos, agreguemos nuestro AppName. Yo puse esto para ser, Tarjetas Creativas. Ve al navegador, vemos que las tarjetas creativas han aparecido abajo en la parte inferior, y que consiguieron una calibración extra ahí así que vamos a quitar eso. Ahora estamos viendo el navegador que el texto aparece al pie de página. Ahora podemos ver que el AppName funciona dentro de la sección padre. No obstante, si tratamos de mover esta propiedad de datos al pie de página. Eliminemos AppName y luego queremos copiar solo esta sección de datos y luego añadirle esto dentro del pie de página. Por lo tanto, agrega las etiquetas de script, los predeterminados de exportación, y luego pega en nuestra sección de datos. Aquí podemos agregar nuestro AppName como una cadena de, “Tarjetas creativas”. Entonces guarde eso y volvamos a la app, y podemos ver que ya no tenemos el texto apareciendo. Podemos ver el alcance está dentro del archivo app.vue de los padres. Solo eliminemos la etiqueta de script del pie de página, y añadamos esto de nuevo a la app.vue. Por lo que todo dentro de los padres simplemente está dentro del ámbito de los padres. Todo dentro de los componentes hijo está dentro del ámbito del niño. Tan sólo unas pocas cosas en las que pensar al usar ranuras. A continuación, echaremos un vistazo al uso de ranuras para nombres. 62. Slots nombrados: Hasta el momento, sólo hemos utilizado un único elemento de ranura. Esta sola ranura tal como está se utilizará para recibir toda la sección de contenidos, cual le pasamos. Tal como toda la sección entre el pie de página aquí. A modo de nota al margen, si no había presencia de elemento ranura. Si lo comentamos o movemos la sección de ranura y la guardamos, si pasamos al navegador, vemos el todo el contenido que se le está pasando. A continuación se descarta dentro de los componentes principales. Acabemos de deshacer esta sección de ranura y añadirlas de nuevo. En lugar de simplemente usar una sola ranura para aceptar el contenido completo. También podríamos usar uno o más elementos de ranura con un nombre especial atributos. Dentro del footer.vue, podemos agregar un atributo de nombre a nuestra ranura. Este es el nombre de nuestra elección, nombre de alguien, este nombre de aplicación. Ahora podemos ir a los componentes padre y emparejar su nombre con el contenido que queremos pasarle usando el atributo slot. El apartado de nombre de la aplicación, que está arriba en la parte superior aquí. Voy a añadir unos atributos dentro de la pieza de apertura. En la ranura atributos y vendrán partidos a la ranura de salida con el nombre que acabas de darle todo “app-name”. Veamos cómo se ve esto. Ahora abajo en la parte inferior, sólo se muestra el nombre de la aplicación dentro del pie de página porque sólo hemos distribuido este contenido. Voy a añadir el símbolo del copyright justo antes de un dato dinámico, así y firmar copia y el punto y coma, y luego veremos el símbolo del copyright de nuevo en la pantalla. Como se puede ver, el resto de los elementos desaparecen. Ya no tenemos los enlaces suficientes. Para que se muestre el resto de esto, tenemos algunas opciones. En primer lugar, podemos seguir agregando más ranuras. También con los atributos de nombre, como hemos hecho aquí. O podemos atrapar todo el resto del contenido de nombre propio y distribuirlo para invertir elemento slot, esta vez sin atributo de nombre. Si quita el texto del pie de página. Yo estoy trayendo esto allá arriba, y también podemos agregar un segundo elemento de ranura, igual que se hicieron anteriormente, pero sin atributos de nombre, y ahora si vamos al navegador, deberíamos ver aparecer el resto del contenido del pie de página. Ahora tenemos nuestro texto, que son las ranuras de nombre. Entonces todo el contenido adicional, que son los enlaces de navegación, ahora se renderizan a través de nuestros elementos de ranura sin nombre. Este es un caso sencillo de distribuir contenido con slots. Si nuestro pie de página hubiera permitido más código HTML, utiliza ranuras para colocar el contenido exactamente donde queríamos, es herramienta realmente útil para tener. 63. Sección final: Introducción a los componentes: Hola. Es Chris otra vez. Yo sólo quiero tomar un respiro rápido en esta etapa. Ya hemos cubierto muchos terrenos y hemos aprendido mucho sobre los componentes, y cómo se pueden comunicar entre sí. Nuestro proyecto también viene muy bien ahora, también, pero aún tenemos muchas características y mejoras que añadir en la siguiente sección, como usar Firebase para almacenar nuestras imágenes, y también permitir que los usuarios establezcan el estilo del texto. Te veo en la siguiente sección, donde al final, tendrás una aplicación de tarjeta de felicitación completamente funcional completada. 64. Sección de introducción: Componentes continuados y almacenamiento Firebase: Bienvenido a esta nueva sección, donde vamos a seguir trabajando con componentes. También vamos a estar integrando con Firebase, Para almacenar nuestras imágenes cargadas. También hay muchas mejoras que hacer en nuestra app, como permitir a los usuarios dar estilo a los textos en la tarjeta, y también hacer que las imágenes sean arrastrables a ellos y reposicionarlas. También aprenderemos algunas cosas nuevas, como usar el eventbus y también agregar mixins también. Hay mucho por recorrer en este apartado. Entonces, empecemos. 65. Configuración de FireBase: En esta sección, vamos a continuar con nuestra app y permitir que los usuarios suban imágenes para mostrar en la tarjeta. Estas imágenes necesitan algún lugar para ser almacenadas. Para esto, voy a estar usando Firebase, que forma parte de Google. Usaremos una de las características de Firebase, que es el almacenamiento. Si bien se puede utilizar para mucho más, incluyendo bases de datos y autenticación para plataformas como iOS, Android, y web. Si te diriges al navegador web y te diriges a Google, hagamos una búsqueda de Firebase. Acceso actual Firebase en firebase.google.com, que es el resultado máximo. Firebase es libre de usar y tiene límites de uso generosos con los que probar. Hay planes de precios para, pero solo necesitarás estos si tu app crece para requerirlos. Si quieres saber más sobre Firebase, siéntete libre de mirar por encima de este sitio web, y entonces voy a empezar por ir a la consola. Es posible que tengas que iniciar sesión en Google primero para llegar a esta etapa, así que he iniciado sesión con tu cuenta de Google. Si tienes uno, si no, es sencillo configurar uno. Simplemente sigue las instrucciones, y luego haz clic en Ir a consola. Entonces una vez que te lleven a la pantalla, podemos hacer clic en Agregar proyectos, y luego agregar un nombre de proyecto, voy a llamar a la mina Aplicación de Tarjetas Creativas, y luego seleccionar tu país, haz clic en Crear proyecto, y sólo dales un momento para configurarlos. Después nos llevan a una pantalla de bienvenida, y justo como nota al margen, sitios web como estos tienen el hábito de cambiar los diseños con el tiempo, así que si tu versión se ve un poco diferente a la mía, no te preocupes, solo suele significar se ha movido un botón o enlace de menú, ambas cosas generalmente funcionan igual. Después para empezar, podemos o bien agregar nuestro proyecto a iOS, Android, o web, así que vamos a dar clic en Agregar Firebase a tu aplicación web. Como que copiamos el conjunto completo de código, pero no voy a hacerlo, porque esto incluye una etiqueta de script para Firebase, y voy a estar agregando Firebase como paquete npm, así que no necesitamos esta sección. Todo lo que necesitamos es la sección inicializada desde dentro del segundo script, por lo que copiamos esta sección sin las etiquetas de script, y luego si volvemos a nuestra app. Vamos a crear un nuevo archivo dentro de nuestros proyectos, y este archivo contendrá todo este código de configuración de Firebase. Voy a llamar a esta firebase Config, y esto se va a crear en la raíz de nuestra fuente. Entonces abre un nuevo archivo llamado firebaseConfig.js, dentro de su archivo vacío podemos pegar en la inicialización que acabamos de copiar de Firebase y guardar eso. Por lo que estas son las secciones que necesitamos para usar Firebase, contiene nuestra clave API única. Por lo que Firebase sabe quién está accediendo a la información, junto con enlaces a la ubicación de nuestros proyectos. Entonces necesitamos agregar el paquete Firebase a nuestro proyecto con el Node Package Manager. Si abres la terminal, asegúrate de estar en la carpeta del proyecto si usas una consola separada. Si usa Visual Studio Code, simplemente dirígete a la parte inferior, y asegúrate de que el servidor esté cerrado pulsando Control C, entonces podemos instalar Firebase usando npm install dash, dash, save, to save is as a dependenciar, y el nombre del paquete es simplemente Firebase, y pulsa Enter. Entonces solo dale a eso unos momentos para instalarlo, no debería tardar demasiado. Una vez hecho, podemos pasar al archivo package.json, y ahora vemos dentro del objeto dependencias, tenemos Firebase junto a la vista. Entonces lo primero que tenemos que hacer ahora es importar Firebase dentro del archivo firebase.config. Entonces en la parte superior, podemos importar Firebase desde Firebase, y recuerda, no necesitamos agregar la ruta completa del archivo a Firebase cuando se trata de un módulo Node. mí me gusta usar una letra mayúscula para el nombre del módulo, así que voy a cambiar éste justo en la parte inferior para que coincida. Ahora tenemos nuestro archivo de configuración también, ábrelo para agregar esto a la raíz de nuestro proyecto, que es App.vue. Desplázate hacia abajo hasta las etiquetas de script, y luego podemos importar esta sección, así que importa FireBaseFig, así es. /FirebaseConfig.js. Para asegurarse de que todo esté bien configurado, probablemente tenga sentido ahora iniciar el servicio, así que baje a la terminal y ejecute npm, ejecute dev. Entonces podemos entrar al proyecto, y podemos abrir la consola. Por lo que haga clic derecho e inspeccione. Si entras a la consola y no tienes flechas rojas, esta es una buena señal de que todo está funcionando bien, si sí tienes alguna flechas rojas, asegúrate de volver atrás y arreglarlas antes de seguir adelante. Esto es todo lo que necesitamos ahora para agregar Firebase a nuestra app. No hace nada por el momento, pero en el siguiente video, veremos crear la imagen, subir componentes para empujar imágenes de nuevo a Firebase. 66. Creación del componente ImageUpload: Esperemos que ahora debas tener Firebase inicializada en tu aplicación sin errores de consola. Si lo haces, entonces estás listo para crear la imagen con componentes de flujo. Este componente se encargará de hacer algunas cosas. Tendrás una entrada de archivo HTML para permitir a los usuarios seleccionar una imagen de un sistema. También empujará la imagen seleccionada a Firebase. Tendrás una barra de progreso para mostrar el progreso de la subida a Firebase. Serán una miniatura de vista previa de imagen. También tener un hueso para luego confirmar queremos utilizar esta imagen seleccionada. Entonces, finalmente, emitirá el nombre de la imagen seleccionada a los componentes padre. Posteriormente, este nombre de imagen se pasará al componente de salida de imagen para descargar el archivo desde Firebase. Empecemos por crear los componentes. Entonces vuelve a los proyectos. Entonces dentro de la carpeta de tarjetas, vamos a crear un nuevo archivo llamado carga de imágenes. Con la extensión de vista de puntos, el componente utilizará primero la tarjeta del archivo. Pasemos al frente de tarjetas e importemos y registremos. Abajo en el guión, vamos a copiar las declaraciones de importación luego los cambios a la subida de imágenes. Lo mismo con la ruta del archivo. Después registró esto hacia abajo en la parte inferior como componentes. En algún lugar combinar CCImageupload. Ahora podemos insertar los componentes como elementos donde queramos. Quiero colocar la mía justo después del primer cuadro de texto. Desplácese de nuevo hasta las plantillas. Justo después de esta primera entrada de texto cc, voy a añadir ccimageupload y la etiqueta de cierre. También voy a añadir una línea horizontal sólo para mantener estos separados. Entonces guarde eso. Ahora podemos agregar algún contenido HTML dentro del archivo de componente. Volvamos a la imagen upload.view, y podemos añadir nuestras plantillas. Nuevamente, con nuestro contenedor circundante, que es nuestro div, y vamos a añadir algunas clases de bootstrap para el estilo. Esto va a ser una fila, y vamos dentro de este div podemos agregar un segundo div, que va a tener la clase de col-sm-12 para que esto sea el ancho completo. Entonces queremos agregar h4 con un texto de subir imagen. Esto se va a mostrar en la parte superior de la sección de subida. Se puede ver exactamente en qué sección se encuentran. Entonces queremos agregar otro div, que va a ser para la forma. Este div va a tener una clase bootstrap de grupo de formulario. Entonces dentro de aquí podemos agregar nuestras entradas de archivo. Esta es la zona en la que podemos seleccionar un archivo de todo sistema para subir a Firebase. El tipo de entrada es de archivo, vamos a agregar algunos estilos de forma, archivo de control, también necesitará el ID que usaremos más adelante de carga de archivos. Después de esta sección, vamos a añadir una etiqueta de break. Sólo tienes que añadir algo de espacio en. Entonces podemos agregar para agregar nuestros elementos de imagen. esto le voy a dar un DNI de imagen. ¿ Cuál es la fuente de imagen vacía? Porque tuvimos esto más tarde con JavaScript y lo haremos en el siguiente video. Esto es efectivamente un elemento vacío hasta que se ha seleccionado una imagen utilizando la entrada. Entonces por fin podemos agregar un botón en la parte inferior. Este botón se va a utilizar para establecer la imagen. Una vez que el usuario pueda ver la vista previa, este botón presionará luego la imagen de la Firebase. Añadamos un tipo, un tipo de botón y también un ID el cual usaremos más adelante de set image button. Entonces podemos sumar las etiquetas de guión. Ahora no hay preajustes de exportación. El núcleo estaba vacío por ahora. Entonces por fin, nuestras etiquetas de estilo para rematar estas plantillas. Ahora si guardamos eso y vamos al navegador, si no vemos errores, ahora deberíamos ver los nuevos componentes en la pantalla. Tenemos el borde para título, tenemos la sección de subida de imágenes, que podemos hacer click y elegir una imagen de una máquina. También tenemos el botón set image. Todo esto está funcionando bien. Si no ves los componentes o tienes una pantalla en blanco, comprueba si llamas algún error, y también comprueba en la terminal y en la consola las pistas de dónde puede estar el error. Esta es ahora la configuración básica de los componentes. A continuación, seguiremos con estos componentes para mostrar la miniatura de la imagen y también permitir que la imagen seleccionada sea empujada a Firebase. 67. Subir imágenes a FireBase: Ya hemos configurado el botón Componente, que permite al usuario seleccionar un archivo de su sistema. También necesitamos empujar esta imagen a Firebase para su almacenamiento. Esta funcionalidad se puede agregar a un método al que se llama cuando se activa la entrada del archivo. Podemos detectar esto con un manejador de eventos onchange. Añadamos esto más en nuestra plantilla para la subida de imagen. Si localiza las entradas de archivo, vamos a agregar un manejador de eventos onchange. Entonces usa el at change y voy a establecer esto en un método llamado UploadFile. Ahora podemos bajar al guión y configurar nuestros datos y métodos requeridos. Dentro del Default de Exportación, podemos agregar nuestra propiedad de datos solo de la manera habitual, y en la propiedad de datos lo que voy a configurar es para el Nombre de Archivo. Inicialmente esta será una cadena vacía hasta que el usuario cargue una imagen. Entonces debajo de esta sección de datos, podemos configurar nuestros métodos que acabamos de llamar UploadFile. Entonces configura los métodos y luego agrega nuestro nombre de método de UploadFile. Debido a que se trata de un evento, tenemos acceso a los datos del evento pasando en un nombre dentro de los paréntesis. Este puede ser un nombre de tu elección, pero voy a llamar a este evento de nombre. Para empezar, queremos agarrar el archivo seleccionado y pasarlo a nuestra propiedad de datos de archivo. Hagamos un registro de consola, y luego podremos anotar el valor de los eventos y ver cómo podemos agarrar los datos de este archivo de este evento. Guarde eso, y luego si pasamos a la Consola, haga clic con el botón derecho en Inspeccionar y luego vaya a la Consola. Voy a subir un archivo con nuestra sección de subida de archivos. Para seguir esta parte, necesitarás encontrar una imagen, si aún no tienes una almacenada en tu computadora, hay un montón de sitios gratuitos disponibles donde puedes descargar una imagen para utilizarla. Tengo una guardada en el escritorio, así que voy a pasar al escritorio y hacer clic en Beach.JPEG, y luego hacer clic en “Abrir”. Todavía no pasa nada dentro de la app, lo cual está bien. Pero más en la consola tenemos el valor del evento. Dentro de aquí se puede ver que tenemos los objetivos, que podemos abrir, y luego si nos desplazamos hacia abajo, necesitamos buscar nuestra lista de archivos, luego abrir esto. Si hace clic en cero, que es el primer elemento, podemos ver los detalles del archivo que acabamos de subir. Podemos ver cosas como el nombre, el tamaño, y también el tipo de imagen. Solo estamos subiendo una imagen a la vez por lo que siempre podemos usar la posición cero. Ahora sabemos dónde se almacenan los datos del archivo, podemos pasarlos a nuestra propiedad de datos de archivo. Pasemos al método y eliminemos el registro de la consola. Ahora podemos seleccionar este archivo dot, que son nuestros datos, y vamos a establecer esto igual al event.target.files, y luego como acabamos de ver, necesitamos seleccionar la posición cero. Para empujar esto a Firebase, necesitamos agregar una referencia de almacenamiento de Firebase. Esta referencia es la ubicación dentro de la Firebase donde queremos agregar nuestros archivos. Configuramos la referencia de almacenamiento así. Seleccionemos Firebase.storage.ref. Ya que nos referimos a los métodos de almacenamiento y ref que son partes del módulo Firebase, también necesitaremos importar Firebase al archivo. Hagámoslo en la parte superior del guión. Por lo que importa Firebase de Firebase. Abajo en la ref, vamos a hacer dos cosas. En primer lugar, le decimos a Firebase el nombre de la carpeta en la que almacenar las imágenes. Si la carpeta no existe actualmente, se creará. Este es el primer argumento que se pasa como una cadena. Vamos a crear un nuevo archivo llamado user_uploads, seguido de la barras inclinadas hacia adelante. Podemos entonces agregar la ruta del archivo después de ella. Agregamos al final de esto el Nombre de Archivo, que actualmente tenemos como propiedad de datos. Vamos a añadir al final esto.file.name. Este nombre de carpeta más este Nombre de archivo creará la ruta del archivo para almacenar la imagen dentro de una Firebase. Podemos entonces instalar esta línea de código dentro de una variable llamada StorageRef. Ahora tenemos la referencia de almacenamiento. Podemos llamar al método Firebase put, para realmente subir la imagen a Firebase. Por lo que la imagen que desea agregar es este archivo.file. Ahora esto es configuración, podemos seguir adelante y probar esto. Si volvemos a la Consola Firebase. Vaya a Firebase y luego haga clic en la Consola para ser llevada a esta página. Selecciona la app Tarjetas Creativas, y luego en el lado izquierdo deberíamos ver la opción de almacenamiento, haz click en eso. Este es el contenido de nuestro almacenamiento. Actualmente no hay imágenes listadas aquí, así que vamos a darle una oportunidad a esto. Si pasamos a nuestra app, podemos intentar empujar una imagen a esta carpeta. Seleccione la imagen Subir y, a continuación, elija la imagen y haga clic en Abrir. Entonces volvamos a Firebase y actualicemos. Podemos ver después de la actualización que no pasa nada. Todavía no tenemos ninguna imagen listada en el almacén. Si volvemos a la app y abrimos la Consola, y veamos qué pasa aquí. Podemos ver que tenemos un error en la consola. El motivo por el que obtenemos este error es porque de forma predeterminada, seguridad de Firebase requiere autenticación. Para los efectos de esta demostración, voy a desactivar esto sólo por nuestro ejemplo para que podamos enfocarnos en view js. Por supuesto, para las apps de nivel de producción, no debemos hacer esto. Para que las reglas sean públicas, tenemos que ir a la pestaña Reglas y cambiar esto. Selecciona reglas desde dentro de la sección de almacenamiento, y luego lo que tenemos que hacer es cambiar la sección de escritura, y luego necesitamos cambiar esto para permitir leer y también escribir. Elimine esto y solo deje permitir leer, escribir, y luego haga clic en “Publicar”. De acuerdo, así que ahora pasemos a nuestra aplicación y luego actualicemos, y luego elijamos Nuevo archivo. Voy a volver a seleccionar la imagen de playa y hacer clic en “Abrir”. Esa es una buena señal, no vemos ningún mensaje de error en la consola. Vayamos y luego vayamos a los archivos. Está bien, genial. Ahora podemos ver que se ha agregado una nueva carpeta llamada useruploads. Este es el archivo que agregamos dentro de nuestra referencia de almacenamiento, y luego podemos volver a pasar a Firebase y abrir esta carpeta. Ahora también vemos que tenemos agregado el archivo de Beach.JPEG. Si esto no funcionó al instante para ti, es posible que tengas que darle unos momentos solo para que los nuevos ajustes surtan efecto. Enhorabuena si has logrado llegar al escenario. Esta es una gran parte de nuestra app atendida. Ahora pasaremos al siguiente video, añadiremos una miniatura de vista previa de imagen para que el usuario pueda ver qué imagen ha seleccionado. 68. Vista previa de la imagen en miniatura: Estamos haciendo buenos avances con nuestra tarjeta de felicitación arriba. El siguiente paso que queremos dar es tomar los datos del archivo de imagen, que ahora recibimos, almacenados en la propiedad de datos del archivo, que está justo aquí, y mostrarlos dentro de una vista previa de imagen en la pantalla. Para ello, vamos a aprovechar el objeto lector de archivos JavaScript. Utilizaremos File Reader para leer el contenido del archivo de imagen, que proporcionamos. Después pasaremos los resultados de los eventos a nuestra etiqueta de imagen como atributo fuente dentro de aquí. Entonces echemos un vistazo a cómo podemos usarlo. Vamos a añadir esto dentro de nuestro método de subida de archivos. Por lo tanto, asegúrese de que esto esté dentro de la base de código. Por lo que esto significa que esto se activará cada vez que se haya subido un archivo. Para poder crear un objeto de lectura de archivos recién construido, instálelo dentro de una variable llamada lector. Por lo que se trata de un nuevo FileReader. Entonces dentro de esta variable podemos acceder a un nuevo método llamado ReadasDataUrl. Este método lee contenidos del archivo en el que le pasamos. Por lo que el archivo que queremos leer es este objeto de fecha aquí, que se puede acceder con este archivo dot. El manejador de eventos A's y onload, que también podría usar. Entonces lector.onload. Este evento onload desencadena una función. Cada vez que la operación de lectura se haya completado con éxito, esta función tomará en el evento como un parámetro que contiene los datos del archivo. Esta vez llamé al evento E. Simplemente no confundirlo con el nombre del evento que hemos usado antes. Por lo que aquí serán buenos lugares en la fuente de imagen donde queremos mostrar la miniatura. Ya tenemos la etiqueta de imagen dentro de nuestras plantillas, que usted acaba de aquí, que no tiene atributos de fuente. En momentos. Podemos seleccionarlo por el ID de la imagen y establecer las tiendas de imágenes para que sean iguales a los resultados objetivo de eventos. Por lo que retrocede, podemos seleccionar esta imagen usando JavaScript. Por lo que documents.getElementById, e ID le dimos la imagen o simplemente la imagen, y podemos usar fuente de punto para establecer la fuente igual a estos eventos. Entonces haz eso con e.target.result. Para terminar las cosas, podemos agregar un ancho máximo a esta imagen para asegurarnos de que las imágenes grandes no se metan con nuestro diseño. Entonces dentro del mismo expediente, voy a bajar a las startups, y esta vez va a ser alcanzada, por lo que sólo se aplica a esta final. Después podemos apuntar a la imagen y luego establecer el ancho máximo de la imagen para que sea de 200 píxeles. Entonces esto debería ser todo lo que necesitamos hacer ahora. Seleccione iniciar el servidor si aún no se está ejecutando con npm, ejecute dev. Una vez que se abra, deberíamos poder seleccionar una imagen de archivo y ver aparecer como una vista previa. Alguien elige mi imagen de playa una vez más y ábrela. Está bien, genial. Por lo que ahora el lector de archivos está todo funcionando y podemos ver la vista previa de la imagen que se muestra en la pantalla configurando la fuente de la imagen. Por lo que a continuación vamos a añadir una barra de progreso de subida de imagen, y también hacer estos datos de archivo a los padres. 69. Barra de progreso de carga y datos del archivo $emit: Ahora podemos seleccionar una imagen de la computadora de los usuarios y subirla con éxito a Firebase. Además, tenemos una pequeña vista previa de imagen debajo del lector de archivos justo aquí. Yo quiero hacer dos cosas en este video. En primer lugar, crear una barra de progreso HTML para mostrar al usuario el progreso de la carga de la imagen a Firebase. Hacer un seguimiento de este avance de subida será importante más adelante. Después en segundo lugar, queremos emitir el nombre del archivo al componente padre. Esto también es importante porque cuando creamos los componentes para mostrar la imagen en la tarjeta de allá, necesitamos pasarle el nombre de la imagen a través de apoyos. Podemos descargar la imagen correcta de Firebase. Empezamos dentro del archivo de carga de imagen agregando los elementos de progreso HML dentro de las plantillas. Voy a añadirlo justo encima de la etiqueta de rotura. Agregar una barra de progreso. Entonces dentro de aquí, vamos a establecer el valor inicial a cero. Este es el punto de partida para la barra de progreso. Porque queremos trabajar en como porcentaje, vamos a establecer el valor máximo para ser 100. También puedes agregar un ID de barra de progreso. Esto nos permitirá seleccionar estos elementos más adelante con JavaScript. Para que esto funcione entonces necesitamos crear un manejador de eventos cambiado de estado en el método put, que ya tenemos. Nos desplazamos hacia abajo hasta el método de subida del archivo. Tenemos un método [inaudible] justo aquí, que voy a almacenar dentro de una variable para que podamos acceder a esto con el nombre de Upload. Vamos a utilizar esta variable para monitorear los eventos de cambio de estado usando un observador de cambio de estado proporcionado por Firebase. Todavía dentro de este método de subida de archivos, vamos a añadir este observador. Solo voy a agregar esto debajo de la función reader.onload. Podemos acceder a ella con este nombre de variable de subida, que acabas de darle, etcétera. Entonces el primer parámetro es estado de alarma cambiada. Esto lo proporciona Firebase. Esto se activará cada vez que se haya producido un cambio de estado. Esto llama a una función. Esta función toma en las instantáneas de tareas. Se trata de un objeto proporcionado por Firebase. El snapshot contiene propiedades que podemos usar para monitorear la subida. En nuestro caso, vamos a utilizar las propiedades bytes transferidos y bytes totales para crear el porcentaje del progreso. Entonces podemos almacenar este porcentaje dentro de una variable. Voy a llamar a esta variable Progreso. Vamos a acceder a las instantáneas. El inmueble es de bytes transferidos. Este es el número de bytes que actualmente se están transfiriendo divididos por los snapshots.totalBytes. Este es el número total de bytes del archivo. Hagamos esto en un porcentaje. Multiplicamos esto por 100. Esto nos dará un valor entre cero y 100 y lo almacenará dentro de una variable llamada Progreso. Ahora tenemos este valor de subida como porcentaje. Podemos entonces enviar esta información a la barra de progreso para actualizarla. Para hacer eso, solo sé que es variable, voy a acceder a la barra de progreso con un document.getElementById. Obtenemos la barra de progreso o una barra de id o progreso en este extremo de la cadena. Entonces todo lo que quiero hacer es establecer el valor para que sea igual a esta variable de progreso, etc. Ahora vamos al navegador y comprobemos si esto está funcionando. Podemos ver todos los elementos de progreso. Ahora elijamos un archivo del cargador y seleccionemos Abrir. Tan apaciguados, estamos trabajando bien. Vemos que el cambio de estado de subida se provoca en una barra de progreso para aumentar. Eso todo se ve bien por ahora. Genial. Esta es la primera parte concluida. Apenas ahora necesitamos tal del método emisor, al igual que lo hemos hecho anteriormente con los componentes de texto. Esto enviará el nombre de la imagen seleccionada hasta los componentes padre. Hagámoslas ahora. En realidad, primero sólo voy a añadir un comentario. Esta fue la respuesta establecida a, sección está apagada con comentarios solo así que vamos a crear para más adelante. Esto puede ser [inaudible]. Esto es para la barra de progreso. Ahora desplácese hacia abajo debajo de esta sección de barra de progreso. Vamos a sumar este $ emite para enviar el nombre de la imagen a los padres. Voy a llamar a este evento personalizado Display Image Change. El dato que queremos enviar, nuevo es este archivo.file, que es este dato aquí. Entonces podemos acceder al nombre de un archivo con.name. Este nombre de archivo ahora se envía al archivo padre, que es carfront.view. Necesita ahora ir a este archivo y agregar una nueva propiedad de datos para almacenar el nombre de esta imagen en. Abajo dentro de la sección de datos, separada por coma, podemos agregar nuestro nombre de imagen. Esto va a ser inicialmente una cadena vacía. Cuando necesito escuchar los eventos en el componente real en el que se pasa, así que necesito buscar la imagen cc subir imagen y luego escuchar los eventos. El evento se llamó Display Image Change. Ahora podemos establecer el nombre de la imagen al valor de los eventos. Nombre de la imagen es igual a $ eventos. Todo esto es algo que hemos hecho antes. Es más o menos lo mismo de lo que hemos hecho con las entradas de texto. Todo lo que estamos haciendo es pasar el nombre de la imagen más que el valor del texto. Vamos a probar esto está funcionando. Necesitamos generar los datos del nombre de la imagen usando las llaves dobles. Voy a hacer eso por ahora en el lado de exhibición de tarjetas. Abre las llaves dobles y ahora podemos poner el valor de este nombre de imagen y decir eso. Pasemos al navegador. Ahora si elegimos un archivo, selecciona la imagen. Genial. Si todo salió bien, veremos el nombre de la imagen que seleccionamos la salida en la tarjeta. Este es un gran paso. Ahora tenemos la imagen siendo empujada Firebase. Ahora tenemos la vista previa de la imagen que aparece en la pantalla. También tenemos el nombre de la imagen que se pasa a los componentes padre. Ahora, estamos listos para pasar a crear los componentes de salida de imagen, que mostrará la imagen de la única sección de visualización de tarjeta. Empezaremos con esto en el siguiente video. 70. Componente de salida de imagen: Ahora tenemos todo lo que necesitamos para que podamos crear los componentes de salida de imagen. De hecho, mostremos la imagen sobre la tarjeta. Empezamos de la manera habitual creando los componentes de salida de imagen. Pasaré a Visual Studio y voy a agregar estos componentes dentro de la sección actual. Esto se va a llamar ImageOutput.vue. Entonces comencemos por crear nuestras plantillas en la parte superior y luego nuestras etiquetas de script, utilizamos por ahora un valor predeterminado de exportación vacío. Entonces finalmente las etiquetas de estilo y luego guarde eso. Entonces una vez hecho esto necesitamos importar y registrar dentro de la CardFront.vue. Recuerda que el CardFront va a ser el contenedor, cual contiene toda la imagen y los componentes de texto. Entonces desplazándose hacia abajo a la sección de guiones, voy a importar nuestra ImageOutput desde. /imageoutput.vue. Por lo que deberíamos poder ver un poquito de patrón emergiendo aquí. Si miras el frente de la tarjeta, tenemos el TextInput y TextOutput, seguido de la ImageUpload o la ImageInput y luego también la ImageOutput. Por lo que poner los datos, pasarlos a los componentes de los padres y luego pasar estos datos a este niño como utilería. Ahora vamos a registrar esto en la sección de componentes. Entonces voy a llamar a esto CCImageOutput, que por supuesto es la ImageOutput que acabamos de importar. Esto ahora significa que puedes colocar los componentes dentro de nuestra ubicación seleccionada, dentro de la pantalla de la tarjeta. Por lo que dentro de esta sección de visualización de tarjetas, voy a quitar las llaves dobles de antes y después agregando nuestra ImageOutput. Al igual que el área del editor, voy a agregar esto como segundo componente. Entonces cc-image-output y la etiqueta de cierre. A continuación tenemos que pasar en algunos apoyos. En primer lugar el nombre de la imagen a descargar, que almacena en la imagen nombre fechas propiedad, que está justo aquí. Añadamos el primer prop a la etiqueta de apertura. Entonces usa los dos puntos para atar esto y vamos a llamar a este prop el DisplayImage. Después pasa el valor de ImageName. Entonces el segundo prop que vamos a agregar es también este contenedor alturas, que es justo lo mismo que el TextsOutput. Entonces esta vez quiero que la imagen sea un poco más grande que el texto, así que voy a poner esto en 350, así que guarde eso. Ahora podemos pasar a la ImageOutput y empezar a trabajar ahí dentro. El template es bastante sencillo. Por el momento, sólo necesitaremos un elemento de imagen para mostrar esta imagen. Entonces vamos a crear el div como el envoltorio. Entonces dentro de eso vamos a crear nuestra imagen y luego no necesitamos una fuente por ahora. Todo lo que queremos hacer es agregar un ID y establecer esto igual a OutputImage. Entonces recuerda que este componente está recibiendo apoyos, por lo que necesitamos tener validación de prop. Abajo en el valor predeterminado de exportación, podemos sumar nuestros apoyos dentro de aquí. Entonces esto va a ser un objeto. Entonces el primero es para la imagen de visualización, que es el primer prop que le pasas. Dentro de aquí vamos a establecer esto en un tipo de cadena, luego separados por coma. También podemos agregar el contenedor de alta prop. Este sería un tipo de número. Por defecto también estableceremos que esto sea un valor de 200. Ahora lo que se me coloca prueba, en realidad estamos recibiendo estos apoyos mirando salida la imagen de visualización hacia arriba dentro de la plantilla. Entonces abre las llaves dobles y luego da salida a la imagen de visualización, que es un prop que estamos recibiendo del padre, que está justo aquí. Dale a eso un guardado y vamos a echar un vistazo a esto en el navegador. Elige un archivo y sube la imagen. Por lo que podemos ver que el nombre se ha descargado y esta es una sonda que se está pasando a los componentes de los padres. Entonces vamos a agregar algunos estilos para que coincida con el marcado de cuadro de texto. Así que desplácese hacia abajo hasta la sección de inicio en la parte inferior. De hecho, queremos agregar una clase al entorno hacer primero de contenedor de imagen. Podemos utilizar este objetivo dentro de la sección de estilo, so.image-container. Entonces dentro de aquí vamos a sumar nuestra frontera que va a un píxel y punteado. Al igual que el cuadro de texto, el desbordamiento se puede ocultar. También un margen de cinco píxeles en la parte superior e inferior y cero en la izquierda y la derecha. Entonces por el momento estamos recibiendo el contenedor de alta prop, que nos han pasado. Pero en realidad no lo estamos usando para establecer la altura del contenedor. Si pasamos al archivo TextOutput.vue, nos pusimos a obedecer propiedad computada para usar esta prop como objetos de estilo. El código dentro de la salida de la imagen será exactamente el mismo, por lo que podría simplemente copiar y pegar esta sección calculada. Después vuelve a la ImageOutputs.vue. Entonces podemos pegar esto dentro de nuestros objetos. Por lo tanto, localiza la etiqueta de los apoyos de cierre y agrega una coma y luego pega esto en. Ahora todo lo que queda por hacer es unir el StyleObject al container-div. Entonces sube al contenedor circundante usando la columna combinamos los estilos dinámicos y configuramos esto en nuestro StyleObject, que es el valor computado que acabamos de agregar así que guarde eso. Inicie el servidor div y carguemos esto dentro del navegador. Lo primero que verás si todo funciona correctamente es que hay un contenedor de imágenes que es más grande que el contenedor TextOutput. Esto se debe a que configuramos la imagen para que sea de 350 píxeles. En tanto que sólo establecemos el contenedor para que el TextBox sea 130. Entonces también podemos ver si subimos nuestra imagen. El nombre de la imagen debe pasarse a la tarjeta mediante utilería. Tenemos esto funcionando correctamente, bien hecho. Ya está listo para usar el nombre de la imagen para descargar y mostrar la imagen en la tarjeta. 71. Descargar imágenes desde FireBase: Bien hecho por llegar a esta etapa del curso. hemos cubierto mucho, y espero que tenga sentido. Si sigues luchando por entender ciertas partes, no te preocupes demasiado. Conforme sigas adelante con este curso, tendrás muchas más posibilidades de practicar. Ya has cubierto la mayoría de los conceptos básicos de UGS ya. En este video, vamos a descargar y mostrar la imagen en la tarjeta. Ya, nos han pasado el nombre de la imagen finalmente mostrar la prop de imagen, que está justo aquí. Dentro de nuestra imagen, nuestro perfil. Podemos configurar una propiedad de reloj para detectar los cambios ocasionados cuando el usuario sube una nueva imagen. Desplazándose hacia abajo, solo voy a agregar esto justo debajo de los apoyos. Voy a añadir la propiedad de reloj. Vamos a ver esta propiedad de imagen de visualización. Agrega eso dentro ahí. Dentro de aquí queremos comunicarnos con Firebase para descargar la imagen. En primer lugar necesitamos importar Firebase a este archivo. Justo debajo de la etiqueta de guión de apertura, va a importar Firebase desde Firebase. Entonces a continuación necesitamos agregar una referencia de almacenamiento, igual que hicimos dentro de los componentes de entrada de imagen. Pasar a la carga de imagen. Si recuerdas, dentro de esta sección de carga de archivos, agregamos una referencia de almacenamiento que empuja el nombre del archivo hasta Firebase. Voy a copiar esta línea de código y luego volver a las salidas de imagen y agregar esto dentro de la propiedad de reloj. Esto va a crear una variable llamada referencia de almacenamiento, que se refiere a un archivo dentro de la base de datos. Esta vez en lugar de empujar este archivo superior, queremos referirnos a él con esta imagen de visualización de puntos, que es un nombre de la imagen que pasamos. Después podemos usar la referencia de almacenamiento con el método get download URL para buscar la URL de este archivo. Justo debajo, vamos a acceder a la referencia de almacenamiento que acabamos crear y luego dot get download URL. Nuevamente, este es un método proporcionado por Firebase. Este problema se resuelve con éxito. Después asignamos una función de devolución de llamada para ejecutarse. También necesitamos pasar la URL al paréntesis que acabamos de descargar. Ahora tenemos la URL de la imagen. Podemos agregar el código para establecer la fuente de la imagen. Recuerda que no tenemos una fuente de imagen justo arriba. Podemos acceder a esta imagen a través de su id de imagen de salida. Dentro de este cuerpo, crearemos nuestra variable de imagen y estableceremos esto el id de imagen con document.getElementById. El Id de imagen fue imagen de salida. Entonces podemos establecer la fuente de punto de imagen para que sea igual a esta URL, que será en el pasado. Dale a eso un ahorro. Este es un ejemplo bastante sencillo para descargar la imagen. Podemos ir aún más allá agregando manejo de errores también pero no quiero profundizar demasiado en Firebase por ahora. Guarda eso e inicia el servidor de desarrollo y podemos comprobar que esto está funcionando bien. Ir a los proyectos elegir un archivo. Genial. Ahora, vemos que la imagen ha sido descargada con éxito desde Firebase. Esto significa que nuestro código está todo bien confinado. Hay un pequeño problema sin embargo y si no puedes ver la imagen mostrada en el lado derecho, es posible que ya hayas experimentado esto. Si has subido una imagen por primera vez, es posible que no veas esto apareciendo dentro de la tarjeta. Echemos un vistazo al problema. Si pasamos a elegir nuevo archivo y tenemos una nueva imagen en el escritorio, que aún no se está empujando a Firebase. Si seleccionamos esto, vemos que esto no funciona. Cuando seleccionamos un archivo de imagen para usar VUGS pasajes nombrearchivo a los padres. Este nombre de archivo se pasa al componente secundario, que luego intenta descargar mucho la imagen en este nombre de archivo. El problema es que esto sucede mucho más rápido que el tiempo que tarda realmente subir la imagen al servidor Firebase. Esto significa [inaudible] estamos tratando de descargar una imagen antes de que incluso se haya subido a Firebase. Si ya hemos subido cierta imagen como la imagen de playa de antes, no causará ningún problema porque la imagen ya está disponible dentro de la Firebase. Este es un problema que podemos solucionar con bastante facilidad. Echaremos un vistazo a hacer esto en el siguiente video. 72. Botón de fijar la imagen: Dentro del archivo de imagen upload dot vue, hemos establecido un “Botón Establecer imagen” dentro de nuestras plantillas. El propósito de este botón es hacer dos cosas. En primer lugar, permite al usuario confirmar si desea utilizar esta imagen desde la miniatura. También, como mencionamos en el último video, estamos tratando de descargar una imagen antes de que tuviera tiempo para ser cargada al servidor. Este botón también puede resolver este problema si usamos un botón para emitir el nombre del archivo. Podemos ocultar el botón, y hacerlo sólo visible cuando la barra de progreso está en 100 por ciento. Por lo que podemos empezar escondiendo el botón hasta que se cargue una imagen. Esto se puede hacer con algún CSS simple. Como atributo, vas a agregar la propiedad style y establecer esto para que no se muestre ninguno. Ahora deberíamos ver que se quita el botón. Abajo en nuestro método de subida de archivos, si localizamos la función de carga, y luego justo debajo donde actualizamos la barra de progreso, dentro de aquí, podemos reintroducir el botón cuando el progreso de subida llegue al 100 por ciento. Debajo de donde obtenemos la barra de progreso, podemos crear un if sentencias para ejecutar si el progreso es igual al 100 por ciento. Entonces si el progreso, que es este porcentaje aquí, es igual a 100, y ahora podemos usar un document.GetElementById para seleccionar este botón por su Id. Por lo que de nuevo dentro de la declaración if, podemos agregar nuestros documents.getElementById, y luego pasar el botón Set Image Id, y luego podemos usar esto para reintroducir el botón estableciendo el tipo de visualización igual a inline-block. Entonces recuerda por defecto, se mostrará el modo de botón porque configuramos la pantalla para que sea ninguna. Entonces estamos viendo abajo por una vez que el progreso llegue al 100 por ciento, y luego una vez que esto suceda, entonces estableceremos el tipo de visualización del botón para que sea inline-block, que se mostrará en la pantalla. Entonces ahora vamos a guardar eso, y darle a esto una oportunidad en el navegador. No vemos el botón por defecto. Por lo que elegimos un archivo ahora. Una vez que la barra de progreso llega al 100 por ciento, ahora vemos de nuevo en la pantalla el Botón Set Image. Ahora este botón sólo aparece cuando la imagen está completamente cargada en Firebase. Ahora podemos usar esto para activar el método de emisión cuando se hace clic. Entonces volvamos al botón dentro de las plantillas. Entonces justo después de la propiedad de estilo, vamos a agregar un oyente de clics para activar un método llamado Set Image. Entonces vamos a configurar nuestro método Set Image a continuación. Así que desplázate hacia abajo, una vez que llegues al final del método Upload File, que está justo aquí, agrega una coma, y luego podemos agregar nuestro método Set Image. Entonces dentro de aquí, todo lo que necesitamos hacer es cortar esta línea de código que emite el nombre del archivo, y luego mover esto dentro de nuestro método. Recuerda el botón que envía estos eventos personalizados solo aparece cuando el progreso de carga es del 100 por ciento. Por lo que ahora es seguro enviar este nombre de archivo a Firebase. Guardemos y probemos esto. Si pasamos al navegador, lo primero que quiero hacer es ir a la consola de Firebase. Así que dirígete a Firebase, y luego haz clic en la consola, y luego selecciona las tarjetas creativas hacia arriba, y luego pasa al almacenamiento. Voy a eliminar el usuario sube archivo. Entonces haz click en el botón de la izquierda, y luego selecciona Eliminar. Entonces ahora no hay imágenes almacenadas dentro de la base de datos. Ahora podemos ir a nuestra aplicación, y probar seleccionando una nueva imagen para comprobar que se retenga hasta que seleccionemos el botón Establecer imagen. Así que ve a Elegir archivo, y selecciona un nuevo archivo que no esté dentro de la Firebase luego Establecer imagen. Entonces ahora podemos ver que no tenemos el problema que tuvimos en el último video porque no podemos descargar la imagen de Firebase hasta que ahora esté totalmente cargada. Entonces todo esto funciona bien, tanto si usamos cargas en imagen igual que acabamos de hacer, luego vuelve a hacer clic en el botón Elegir archivo. Queremos que este botón Set Image desaparezca de nuevo hasta que se cargue por completo una nueva imagen. De lo contrario tendremos el mismo problema que antes. Por lo que podemos eliminar esta imagen inmediatamente después de que se haga clic en el botón Elegir archivo dentro del método de subida del archivo. Vamos a la parte superior para el método de subida de archivos, y luego dentro aquí justo en la parte superior, voy a agregar un document.getElementById. Una vez más, ahora vamos a agarrar el botón Establecer imagen, y todo lo que vamos a hacer es establecer la propiedad de estilo del display de punto de estilo es igual a ninguno. Entonces dale a eso un guardado, y ahora vamos a probarlo en el navegador. Seleccionemos nuestra primera imagen, luego establecemos esto. Ahora si hacemos clic en Elegir archivo, ahora deberíamos ver que el botón Establecer imagen se elimina temporalmente. Entonces selecciona una imagen, y luego abre. Genial, ¿viste eso? Perdimos el botón de imagen hasta que el archivo se cargó por completo. Entonces todo esto está funcionando bien. La imagen de aquí en el lado de la pantalla, puede ser un poco demasiado grande o demasiado pequeña, pero no te preocupes por esto por ahora. Lo arreglaremos en el video posterior. 73. Menú de opciones de texto: tamaños de fuentes: Ahora vamos a volver a nuestros componentes de salida de texto y añadir un menú de opciones. El menú aparecerá cuando el usuario pase el cursor sobre el texto con el ratón sobre el lado derecho para permitirnos cambiar el tamaño de fuente, alineaciones de texto, e incluso opciones negrita o cursiva. En este video, voy a empezar configurando el menú para que aparezca al pasar el cursor y además añadir una opción de tamaño de fuente. Entonces comencemos por crear nuestro menú usando v-show para mostrar u ocultar una vez que pase el cursor sobre esta área de texto. Entonces pasemos a nuestro archivo Textoutput.vue. Entonces justo debajo del div de apertura, voy a agregar un formulario. Este menú será forma ya que está conformado con entradas de formulario. Entonces voy a añadir una clase, clase bootstrap de pequeño. Esto hace que una forma un poco más pequeña, por lo que encaja mejor dentro de la salida de texto. Entonces podemos sumar nuestro v-show. Por lo que queremos vincular esto para mostrar opciones que aún no se han creado. Entonces solo voy a agregar un texto simple dentro de las etiquetas P. Por lo que solo agregamos prueba ahí dentro. Ahora, a continuación dentro de nuestro script podemos configurar esta propiedad de datos ShowOptions. Nos desplazamos hacia abajo y voy a agregar esto justo debajo de los apoyos, así que agrega nuestros datos. Ahí tengo la coma de cierre. Por lo que esto va a devolver nuestros datos ShowOptions. Entonces voy a establecer el valor inicial para que sea cierto solo para ver si esto está funcionando bien en el navegador. Genial. Por lo que ahora tenemos el texto de prueba que aparece en la parte superior de cada componente. Entonces ahora sabemos que funciona, podemos cambiar esto de nuevo a falso. Por lo que sólo muestra cada vez que flotamos sobre la zona. Ahora está removido. Por lo que para activar el área ShowOptions, podemos agregar algunos manejadores de eventos de mouse si el usuario pasa el cursor sobre el div de salida de texto. Entonces abre el div de apertura. Estoy mirando avanzado llamado mouseover. Por lo que cada vez que el ratón pasa por encima del área de texto, podemos establecer ShowOptions para que sea igual a true. También podemos hacer lo mismo cada vez que se vaya el ratón, pero esta vez vamos a establecer las opciones para que sean iguales a falsas. Yo voy a ahorrar. Ahora vemos que está oculto por defecto, pero si pasas el cursor sobre el área de salida del texto, podemos ver que el texto se está mostrando. Por lo que ahora con esto en su lugar, podemos agregar un cuadro de selección para permitirnos elegir el tamaño de fuente, que queremos usar al texto. Entonces vuelve a la forma. Podemos reemplazar esta etiqueta P por un área selecta. Voy a empezar con una etiqueta para esta zona selecta. Por lo que etiqueta para SelectBox. Entonces voy a un título de tamaño de fuente. Hagamos algo de espacio. Entonces vamos a añadir nuestro SelectBox justo debajo de esta etiqueta. Por lo que en esta área selecta, voy a reemplazar este nombre por una clase Bootstrap de selección personalizada. Dale a esto un ID de SelectBox, que coincide con la etiqueta justo arriba. Dentro de aquí podemos agregar nuestras opciones, y cada una de estas opciones va a ser un valor de píxel diferente para el tamaño de fuente. Entonces el primero que vamos a sumar como 42 píxeles con el texto de 42 píxeles. Entonces vamos a copiar y pegar esto para agregar algunas opciones más lejanas. Entonces vamos a sumar cuatro opciones ahí dentro. El segundo de 48 píxeles, el tercero como 56, y finalmente, el más grande de 64 píxeles. Entonces guarde eso y veamos cómo se ve esto en el navegador. Entonces ahora si pasamos el cursor sobre la salida del texto, ahora podemos ver que tenemos las opciones para seleccionar los tamaños de fuente. Ahora necesitamos una forma de utilizar este valor seleccionado en las placas como tamaño de fuente. Resulta que ya tenemos algunas de estas configuraciones. Las etiquetas P, que muestran el texto que queremos modificar, ya tiene un objeto de estilo enlazado a él. Por lo que simplemente podemos sumar a esto. En primer lugar necesitamos agregar una propiedad de datos y voy a llamar a este setFontSize. Así que desplácese hacia abajo hasta los datos y separados por una coma agregue una nueva propiedad de datos de setFontSize y establezca esto en una cadena vacía para comenzar. Entonces podemos agregar esto a las entradas selectas usando V-model. Así que desplácese de nuevo a la etiqueta de selección de apertura y justo después de la ID, voy a agregar V-model y establecer esto para que sea SetFontSize. Con esta configuración de enlace de datos bidireccional, la propiedad de datos SetFontSize se establecerá en el valor seleccionado. Ahora podemos pasar el valor seleccionado al objeto de estilo, que ya tenemos. Entonces desplácese hacia abajo hasta el objeto de estilo, que está en la sección calculada. Entonces podemos establecer la propiedad de tamaño de fuente. Debido a que esto es JavaScript, necesita convertirse en un caso. Voy a establecer este tamaño de fuente para que sea igual a esto. y quieren la opción de datos de SetFontSize. Entonces porque esto solo está recibiendo un número cuando esto agrega píxeles, una vez más, a esto hagámoslo un valor CSS. Entonces ahora esto se debe hacer. Entonces voy a ahorrar. Ahora deberíamos poder probar esto en el navegador y ver si cambia el tamaño de la fuente. Entonces agreguemos algo de texto a eso y pasemos el cursor y cambiemos el tamaño de la fuente. Eso se ve bien. Genial. Eso parece funcionar y cada vez que hago clic en un tamaño diferente, ahora vemos que se cambia el texto. Entonces eso está funcionando muy bien por ahora. Por lo que a continuación continuaremos con este menú agregando las opciones de alineación de texto. 74. Menú de opciones de texto: alineación de texto: Nuestro menú ahora está apareciendo cuando el pasamos el cursor sobre el texto, y también hemos agregado con éxito una entrada selecta para cambiar el tamaño de la fuente. Ahora podemos continuar con el menú y agregar algunas opciones más. Específicamente botones libres para establecer la alineación del texto. Seguirá un proceso similar al cuadro de selección pero en esta ocasión utilizaremos botones de radio. Si te sientes seguro, te animaría a seguir adelante y darle a esto un ir por tu cuenta antes de seguir conmigo. Si no, voy a seguir adelante ahora y hacer esto por dentro del archivo de texto output.vue. Volver arriba a las plantillas en la parte superior. Si buscamos la opción de selección de cierre, vamos a crear algo de espacio y asegurarnos de que esto aún esté dentro del formulario. Voy a empezar agregando un div, luego vamos a agregar algunas clases de bootstrap para que esto se vea un poco más bonito. El primero va a ser formulario check luego también formulario check in line. Entonces podemos preguntar a la etiqueta también la clase bootstrap de la etiqueta de cheque formulario. Entonces dentro de esto, de hecho, podemos sumar nuestra entrada entre la etiqueta. El insumo va a ser el tipo de radio. Algunas clases para estilizar o formulario comprueban entradas y luego finalmente puedes agregar un valor. El primero que voy a poner a la izquierda, así que esto es para la alineación izquierda. Voy a copiar esta sección div completa y pegar en dos veces más. El medio va a ser para alinear el texto hacia el centro y el último va a ser para la alineación izquierda y justo después de la entrada, vamos a agregar el texto. El primero está a la izquierda, centro, y luego a la derecha. Entonces al igual que hicimos con el cuadro de selección, también podemos configurar una propiedad de datos a la que pasar el valor seleccionado. Volver al guión, justo debajo del tamaño de fuente establecido, que usamos en el último video, vamos a hacer lo mismo aquí pero esta vez establecer la línea de texto. Esta va a ser una cadena vacía para empezar y también pasará algunos datos a esto. Ahora tenemos nuestra propiedad de datos podemos configurar enlace de datos bidireccional usando el modelo V, así que vuelve a las entradas. En primer lugar, vamos a añadir V-model como atributo a la sección izquierda. V-model esto va a ser sets text-align. Esto será lo mismo para los tres de estos insumos, por lo que podemos sumar esto como un atributo al centro y también a la derecha. Asegúrese de que el enlace de datos bidireccional esté todo establecido en la misma propiedad dates. Esto configura, establece el texto alineado con el valor de nuestro hueso de radio, que has agregado aquí, que luego puedes pasar a nuestros objetos de estilo. Desplazándose hacia abajo, echemos un vistazo al objeto de estilo dentro de la sección calculada. Haremos lo mismo que antes con el tamaño de fuente configurando el text-align y esto va a ser est.set text-align. Esto es todo lo que necesitamos hacer, para que podamos ir al navegador y comprobar que todo está funcionando. Añade algunos textos aquí y luego pasa el cursor sobre el centro, la derecha y la izquierda. Bien hecho si has logrado hacer esto por tu cuenta, si no, está completamente bien. Todo esto está funcionando ahora por lo que ahora puede pasar al siguiente video y completar esta sección de menú agregando las opciones negritas y cursiva. 75. Menú de opciones de texto: estilo de fuentes y peso: Ahora es el momento de terminar nuestro menú de desplazamiento añadiendo opciones para cambiar el texto para que sea a la vez negrita y cursiva. Podemos utilizar los botones de radio como lo hemos hecho en el último video, porque queremos poder seleccionar tanto el negrita como la cursiva al mismo tiempo. Los bonos de radio solo permiten uno de estos que seleccionamos. En cambio podemos lograr esto mediante el uso de casillas de verificación. Pasemos al archivo Textoutput.vue. Podemos agregar estos justo debajo de la sección de alineación de texto, que está justo encima de la etiqueta de formulario de cierre. Empecemos por crear nuestro div. Añadamos algunas clases a este div circundante. La primera clase va a ser todo form-check, y también form-check inline. También podemos añadir nuestra etiqueta. Simplemente voy a agregar algunas clases a esto de form-check label, voy a agregar nuestra entrada. Recuerda que este va a ser el tipo de casilla de verificación, y también vamos a añadir algunas clases para que se vea bonito de form-check-input, y estas todas las superficies Boucher. Justo después de la entrada vamos a añadir el nombre de negritas. Se trata de un texto que aparecerá justo al lado de la casilla de verificación. Este es uno para negrita, también necesitamos uno para cursiva. Copia este div completo, y luego avanza justo debajo. Podemos usar las mismas clases, form-check inline para la entrada. Esta también es una casilla de verificación, pero con nombre de Cursiva. Las casillas funcionan un poco diferente a los bonos de radio. Antes con los bonos de radio, establecemos nuestra propiedad de datos con un valor particular como la izquierda o la derecha. Las casillas de verificación devolverán un valor booleano de true o false al marcar o desmarcar. Si vamos a nuestro texto que tiene el objeto de estilo ligado, que está justo aquí. Podemos usar este conjunto de valores verdadero o falso o in situ una clase CSS, que se vinculará. Primero uno configura las propiedades de fecha para negrita, cursiva. Ambos estos inicialmente se establecerán en falso. El texto es estándar para comenzar. Bajen a los datos, y agreguemos una coma. El primero es lo que llamamos setBold con un valor inicial de falso. Después agrega una coma al final, y podemos establecer, setAtalic también al valor inicial de false. Entonces podemos usar el modelo para vincular estos datos con las casillas de verificación. Volver a las casillas de verificación. Añadamos modelo vue a la entrada para configurar el enlace de datos bidireccional. Este primero va a ser el dato SetBold. Entonces por supuesto, las segundas entradas para cursiva, estableceremos esto para ser SetITALIC. Podemos comprobar si estos datos se cambian al ser rastreados mediante la salida del valor dentro de las llaves. Justo después de su texto en cursiva, voy a configurar las llaves dobles. El segundo se fija en cursiva. Haré lo mismo por setBold. Ahora tenía sobre el navegador, y si pasas por encima de nuestro menú, vemos un extra audaz y cursiva, tenemos los valores iniciales de falso. Primero comprobemos negrita. Buen inicio cambia a verdadero y luego volver falso y también el trabajo cursiva también. Eso significa que la propiedad de datos se está actualizando con el modelo vue. Ya podemos ver que las casillas están configurando nuestros datos correctamente. Empieza a mover llaves en primer lugar, algunos de los setBold, y también setTitaLic. Entonces podemos usar este valor booleano para vincularnos a nuestras clases. Al igual que mencioné antes, si bajamos al texto P, que actualmente tiene los enlaces de estilo, también podemos agregar un segundo atributos para enlazar la clase. Esto también va a ser un objeto. Dentro de este objeto, vamos a añadir la primera propiedad de negrita. Esta va a ser nuestra propiedad de datos de setBold y separados por una coma. También haremos lo mismo para cursiva. Esta es nuestra propiedad de fechas establecidas dentro de ahí. Cuando set bold es true, aplicará la clase negrita. Cuando set cursiva se establece en true , establecerá la clase cursiva. Ahora, solo necesitamos establecer nuestras clases audaces y cursiva dentro del CSS y entonces deberíamos estar hechos. Desplácese hacia abajo hasta los estilos. Empezaremos con la clase audaz. Yo quiero hacer aquí se establece el font-weight para ser negrita, y también lo mismo para una cursiva, estaba en el estilo de forma esta vez para ser cursiva. Guarda y luego dirígete al navegador, y luego pasa el cursor sobre el menú. De hecho, primero, vamos a añadir algo de texto. Se pueden ver los estilos aplicados. el cursor sobre el menú, y empecemos con negrita. Bien. Podemos ver que el texto está cambiando entre negrita y estándar. Probemos cursiva. Bueno, ahora los estilos se están aplicando al texto. Si abre las herramientas div, hacemos clic derecho e inspeccionamos y luego seleccionamos el texto de salida. Ahora si comprueba negrita. Ahora podemos ver que la clase de negrita se ha aplicado dentro de las Herramientas de Desarrollador. Hagamos lo mismo para cursiva, y luego vemos la clase de negrita y cursiva aplicando y una vez que se le agrega como atributos, estos estilos audaces y cursiva luego surten efecto. Todo lo que queda por hacer es agregar un poco más de estilo. Principalmente para asegurarse de que una vez que pase el cursor sobre el menú, no empuje hacia abajo este texto si. Queríamos realmente aparecer sobre el texto si en lugar de empujarlo hacia abajo como probablemente lo haga. Volver a los estilos. Voy a ir con el formulario. Vamos a fijar la posición para que sea absoluta. Agregaremos un borde justo en la parte inferior y quiero que este sea de un píxel punteado y un color gris. Voy a añadir algún margen a la parte superior de 10 píxeles. Un poco al fondo de cinco píxeles, y luego también algunos padian justo en la parte inferior. También cinco píxeles. Simplemente mantenernos alejados del borde. Tan solo para terminar esto, voy a añadir sólo un poco de estilo al cuadro selecto. Todo lo que se quiere hacer es establecer la altura para que sea del 40 por ciento, solo para que se ajuste un poco mejor. Dale a eso un ahorro. Ahora, veamos cómo se ve en el navegador? Bien. Ahora cuando paso el cursor sobre el menú, vemos que el contenedor de texto ya no se empuja hacia abajo. El menú ahora se sienta muy bien en la parte superior del div. Voy a ver cómo vamos a ver con algunos textos. Bueno que obviamente funcionando bien. Nuestro menú hover ya está completo. Ahora podemos pasar a agregar algunos toques finales a nuestros componentes de imagen. 76. Botón de quitar la imagen: En los próximos videos, voy a agregar alguna funcionalidad extra para rematar nuestros componentes de imagen. Para empezar, quiero agregar un botón que aparece cuando el usuario pasa el cursor sobre la imagen para permitir que se elimine la imagen. Una vez que muevas esto, estableceremos una imagen de marcador de posición predeterminada en la tarjeta. Pasar al archivo de salida de imagen. Podemos agregar un botón con algún estilo bootstrap. Justo después del div de apertura inicial, voy a añadir un botón dentro de aquí con el texto de quitar imagen. Entonces dentro de la etiqueta de botón de apertura, va a agregar algunos atributos, comenzará con el tipo y establecer este será botón. Después algunas clases de bootstrap para aplicar un poco de estilo. En primer lugar, BTN luego BTN delinean peligro y esto agrega un borde rojo al botón. Entonces finalmente BTN-SM, para hacer el botón un poco más pequeño. Además, al igual que las opciones de texto, voy a añadir visual, para sólo mostrar el menú al pasar el cursor. Dentro de aquí, voy a crear una opción de fecha llamada show options y luego bajemos a nuestra instancia de vista y creemos esto. Justo debajo de los apoyos, podemos agregar nuestra sección de datos. No olvides añadir el coma justo después. Entonces podemos devolver nuestros datos. A la propiedad de datos que creamos se le llamó show options y eso es inicialmente establece mostrar opciones para ser falsas. Entonces podemos establecer esto como verdadero una vez que el usuario pase el cursor sobre la imagen. Hacemos esto agregando algunos eventos de mouse. Volvamos a subir a la plantilla y añadir un mouseover, un mouse dejar eventos. Voy a agregar esto en el div de apertura, justo después del objeto de estilo ligado.. Empezaremos con mouseover. Cuando el usuario agregue el mouse sobre la imagen circundante, div, entonces estableceremos las opciones de show para que sean verdaderas y esto activará el botón V Mostrar y habilitar para mostrar. Después añadiremos la salida del ratón por lo contrario una vez que el ratón se aleje del contenedor de imágenes. Esta vez las opciones de show se establecen en false. Entonces di eso y podemos probar esto funciona bien en el navegador. Ahora mueve el ratón sobre la sección de imagen y vemos que el botón se ha mostrado. Entonces si alejamos el ratón, el botón está sin quitar. Por último, para asegurarse de que el botón se asiente en la parte superior de la imagen en lugar de detrás de ella. También podemos configurar algunos CSS. Por lo que volver al archivo superior de la imagen. Podemos hacer esto abajo en la sección de estilo en la parte inferior. Podemos agregar algunos estilos al botón. En primer lugar, estableceremos la posición para que sea absoluta y luego el índice Z sea un valor de uno, para permitir que el botón se asiente en la parte superior de la imagen. Igual, vamos a revisar esto en el navegador. Eso todavía se ve bien. Con nuestro botón ahora en su lugar, podemos usarlo en el siguiente video para quitar la imagen. 77. Pasar datos con callbacks: Ya hemos mirado la comunicación de componentes padre-hijo. Sabemos que un padre pasa datos a un niño a través de apoyos, y también un niño pasa datos al padre con un evento personalizado. También hay una alternativa, que queremos hacerte consciente, y esto es mediante el uso de funciones de devolución de llamada. Voy a demostrar esto con un botón que se añadieron en el último video. Funciona un poco diferente a emitir eventos personalizados. Esta vez, necesitamos agregar la funcionalidad dentro de los componentes principales, por lo que, necesitamos crear un método de imagen clara dentro de CardFront.vue, entonces, pasemos a la CardFront, y luego abrimos esto, y luego podemos bajar al sección de método. De hecho, necesitamos crear esto. Solo voy a agregar esto después de la sección de datos, entonces, agrega esto ahí con la coma para separar. Voy a agregar el método de ClearImage, y esto por supuesto, se utilizará para eliminar la imagen de la pantalla. Cuando lleguemos a activar este método, queremos que reemplace la imagen actual por una imagen de Marcador de posición predeterminada, por lo que, la tarjeta no se ve tan mal. Puedes usar una imagen existente que ya tengas dentro de una Firebase, o puedes agregar una nueva. Voy a ir a la consola de Firebase y agregar una imagen predeterminada, así que, abre la consola de Firebase, luego abre nuestra aplicación, selecciona Almacenamiento, y ahí están nuestras cargas de usuarios. Por el momento, acabo de tener la imagen beach.jpg dentro de ahí. Voy a pasar a subir archivo y seleccionar el archivo desde mi escritorio, entonces, voy a seleccionar este con el nombre de Mar. Ahora, voy a copiar el nombre de esta imagen, entonces, copia el nombre de esta sobre la que acabas de subir, o una imagen existente que es de tu lista, y ahora podemos usar este nombre para establecer nuestra propiedad de fecha de nombre de imagen. Para ello, seleccionamos esto con This.ImageName, que es este valor justo aquí, y ahora voy a establecer esto en un valor de cadena del nombre de la imagen. Con esta configuración, ahora podemos pasarlo como un accesorio a los componentes hijo ImageOutput. Desplazándose de nuevo hacia arriba, podemos buscar el cc-image-output, que está justo aquí, y ahora podemos agregar un tercer prop. Recuerda usar los dos puntos, y llama a esto ClearImageProp, y esto va a ser igual a ClearImage, que es el nombre del método que acabas de configurar justo aquí. Después, en el archivo ImageOutput, ahora podemos agregar esto a nuestra lista de accesorios, así que, vaya a ImageOutput.vue, y luego hasta la sección de script, localicemos los apoyos. Vamos a configurar esto como una función validada y podemos agregar esto al final, justo después de ContainerHeight. El nombre de la prop era ClearImageProp. Vamos a configurar este para que sea el tipo de función, luego para activar esta función desde este componente hijo, podemos llamarla con un oyente de clic en el botón, así, desplácese hacia arriba hasta el botón dentro de las plantillas. Entonces justo después de v-show, también vamos a agregar un oyente de clics, luego dentro de aquí, podemos agregar el nombre de ClearImageProp y darle un guardado a eso. Ahora bien, si pasamos al navegador, y luego abrimos nuestro proyecto. Vamos a comprobar si está funcionando. Si subimos nuestra imagen de playa luego dar click en abrir, y luego establecer esto. Ahora, si paso el cursor sobre y selecciono el botón, entonces deberías activar este método de devolución de llamada para luego establecer la nueva imagen predeterminada con el nombre que le pasaste, que estaba justo aquí. Antes de terminar este video, hay una cosa más que considerar. Solo queremos establecer esta imagen predeterminada si el usuario ya ha agregado la suya. Si tenemos una pantalla en blanco, no queremos permitir que el usuario haga clic en eliminar. Todo lo que necesitamos hacer para cubrir este caso, es agregar si las sentencias dentro del método, para comprobar si los datos del nombre de la imagen no están vacíos. De vuelta en el CardFront, si vas al método de imagen clara, justo encima de esto, podemos agregar una declaración if. Entonces si this.ImageName no es igual a una cadena vacía, así que en otras palabras, si hay una imagen presente, entonces podemos seguir adelante y establecer este.ImageName para que sea este nombre predeterminado el cual acabamos de pasar. Probemos eso. Si actualizamos, y ahora si hacemos clic en el botón quitar, vemos que no se está descargando ninguna imagen. Esta es una forma alternativa de comunicarse entre componentes. Todavía tenemos el tema de nuestras imágenes no encajan del todo correctamente en el contenedor. Esto lo arreglaremos en el siguiente video y también haremos que las imágenes sean arrastrables, por lo que, el usuario podrá moverlas a donde quiera que aparezcan. 78. Cómo hacer imágenes arrastrables: Toda la funcionalidad de la imagen está casi en su lugar ahora. Uno de los problemas como hemos mencionado, es que si subes una imagen, que es más grande o más pequeña que el Cal Container, no se ve demasiado grande. Podemos agregar jQuery a nuestra app, para hacer fácilmente nuestra imagen arrastrable, por el usuario. Si no estás familiarizado con jQuery, es una biblioteca de JavaScript que nos permite agregar fácilmente características, como manipulación DOM, animaciones, y manejo de eventos, por mencionar algunas. Además de esto, también está la biblioteca jQuery UI, que agrega funcionalidad de interfaz de usuario, como efectos e interacciones. Esta será la biblioteca la que nos dé la característica arrastrable. Empecemos vinculando nuestro proyecto a jQuery. He ido a Google, ido a buscar el jQuery Google CDN. El que necesitamos son estas bibliotecas alojadas, así que voy a dar click en esto. Aquí desde el menú de la derecha, primero necesitamos agarrar el recuerdo de jQuery, hacemos click en la banda jQuery. Voy a copiar la última versión gratis, y añadirla a la, /index.html. Copiaremos las etiquetas de script para la versión tres, y luego pasaremos al /index.html, y podremos añadirlas justo después de las fuentes de Google. Pegar entro. Entonces podemos seleccionar el enlace jQuery UI. Haga clic en la interfaz de usuario de jQuery, para que los emoticonos copien el script y no las hojas de estilo. Copia la sección de guión de la apertura a la etiqueta de cierre, y luego pega esto, solo sopló el jQuery, recordar. Esto es importante, debe colocarse debajo del recuerdo de jQuery, para que funcione, correcto. Dales un guardado y luego si pasamos a los componentes de salida de imagen, podemos configurar esto. Desplácese hacia abajo hasta la parte inferior del script, localice la etiqueta de script de cierre y asegúrese de que este código esté fuera de la vista incidencia JS. Bajo solo vista código JS, voy a agregar una función JavaScript llamada, setDraggable. Esto es simplemente JavaScript simple. En esta función necesitamos agarrar la imagen que queremos arrastrar, por su ID, por lo que la imagen tiene un ID de imagen de salidas, que se puede ver justo aquí. Volver abajo a nuestra función. Dentro de un cuerpo de función, podemos usar el símbolo $. Utilizamos este símbolo $ en jQuery, para seleccionar un elemento, lugar de al usar JavaScript vainilla, como document.getElementById. Dentro de los corchetes, podemos agregar esto como una cadena, por lo que ves '#' porque es un ID, y el ID fue imagen de salida. A continuación añadimos /.draggable a los elementos seleccionados. Ahora todo lo que queda por hacer es llamar a la función SetDraggable, donde necesitamos. Voy a agregar esta llamada de función, dentro de la pantalla image-watcher, justo después de la Fuente de imagen. Si nos desplazamos hacia arriba hasta la imagen de visualización, y esto está dentro de la sección de reloj. Justo debajo de la Fuente de Imagen, podemos agregar esta llamada a la función, de SetDraggable. Esta es nuestra funcionalidad arrastrable ahora configurada. Veamos si funciona bien en el navegador. Dale ese guardado en su cabeza a Chrome, proyectos de códigos de barras, y luego necesitamos seleccionar una imagen, y luego hacer clic en Establecer imagen. Una vez que se carga, intentamos hacer clic en la Imagen que ya puedes, arrastrar la imagen alrededor de la sección, y vamos a terminar esto con una sola pieza de CSS. Si volvemos a los componentes superiores de la imagen, y nos desplazamos hacia abajo justo debajo del botón, seleccionamos la imagen, y luego todo lo que quiere hacer, es establecer el ancho de la imagen para que sea un 130 por ciento. Esto hace que la imagen sea un 130 por ciento del contenedor, y lo he agregado por dos razones. En primer lugar, trata el problema de que las imágenes sean mucho más grandes, o mucho más pequeñas que el contenedor. Segundo, al hacer la imagen un poco más grande, que el contenedor. Da al usuario cierta libertad extra al arrastrar la imagen alrededor. Esto ahora se hace con los componentes de imagen y texto, ahora podemos seguir adelante y agregarlos al resto de la tarjeta. 79. Terminar el componente de CardInsideLeft: está terminada la transacción con tarjeta en la que hemos estado trabajando hasta el momento. Ahora podemos reutilizar un texto e imagen componentes para armar los diferentes lados de la tarjeta empezando por el interior izquierdo. El interior izquierdo es una sección simple la cual tiene una entrada de texto y una salida de texto de altura completa para que el usuario pueda agregar un bloque de texto en la tarjeta dentro del archivo izquierdo. Dentro de la sección actual, todo lo que tenemos hasta ahora son los contenedores y algunas clases. Debido a que estamos usando los componentes de entrada y salida de texto, podemos comenzar importándolos para poder utilizarlos dentro de este archivo. Abajo en el guión, podemos sumar nuestra importación. El primero son las entradas de texto y archivo puff es. /TextInputs.vue. También podemos hacer lo mismo para las salidas de texto. Importar la salida de texto. Los elementos componentes son los mismos frente de tarjeta para que podamos copiar y pegar esto en nuestras placas interiores de mano izquierda. Dirígete al frente de la tarjeta y luego hasta las plantillas. En primer lugar, voy a seleccionar los cc-text-input y luego llevar esto a la tarjeta que está dentro de la izquierda. Ahora podemos quitar el texto de la parte superior y luego pegar en el cc-text-input. También podemos hacer lo mismo con la salida de texto, así que copie esto desde el frente de la tarjeta. Voy a copiar este primero y luego añadir esto dentro del lado de visualización de la tarjeta. Los componentes de salida serán la altura de la tarjeta, que es de 800 píxeles. Voy a establecer la altura del contenedor de esto para ser 750. Esto es todo puede permitir algún podio. Ahora están los datos a agregar para nuestros valores de cuadro de texto. Solo tenemos una entrada de texto por lo que la única propiedad de datos que necesitamos agregar es el valor de cuadro de texto 1. Tan solo soplar las importaciones, podemos configurar nuestros datos. Añadamos el valor predeterminado de exportación y luego nuestros datos. Vamos a devolver el cuadro de texto valor 1. Al igual que lo hemos hecho anteriormente, estableceremos esto en un valor inicial de una cadena vacía. Entonces, por último, también necesitamos registrar nuestros componentes para ponerlos a disposición en este archivo, así que justo debajo de los datos, agrega coma y luego podemos agregar nuestros componentes. Necesitamos agregar las entradas de texto cc, luego agregar una coma. También podemos hacer lo mismo para las salidas de texto cc, y guardar eso. Ahora abramos esto en el navegador y veamos cómo se ve. Si vamos hacia el interior izquierdo, podemos ver que tenemos nuestros componentes de texto a la izquierda, y podemos ver tenemos el borde punteado para las salidas a la derecha. Faltan algunos de los estilos por lo que puede que tengamos que ir al frente de la tarjeta y luego bajar a los estilos y quitar la sección de alcance. Esto entonces aplica a todas las secciones actuales pero dentro de la izquierda. Ahora podemos ver que tenemos los mismos estilos que el frente. Esto parece que todo está funcionando bien, solo necesitamos escribir algunos textos. Podemos ver todos apareciendo en la sección de salida. Si el tuyo se ve así, ahora estamos listos para pasar a la sección derecha interior. 80. Terminar el componente de CardInsideRight: Ahora, vamos a pasar a la derecha interior de la tarjeta. Esto debería ser bastante sencillo ya que ya hemos hecho la mayor parte del trabajo. Solo necesitamos agregar las tres entradas de texto y componentes de salida para que esto se abra como podemos ver aquí. Es más o menos una repetición del interior izquierdo, pero necesitamos agregar tres componentes y también tres propiedades de fecha también. Vayamos a la tarjeta de adentro a la derecha. Actualmente, sólo tenemos el texto de tarjeta dentro de la derecha. Voy a ir a la sección interior izquierda, que agregamos en el último video, “Comando” o “Control A” para copiar todo y luego ir al interior a la derecha y luego pegar esto en lugar de los datos actuales y luego podemos duplicar la entrada de texto dos veces más, así que copia esto y pegarlo en dos veces más. La única diferencia es que necesitamos que el TextBox sea valor2 y luego valor3. Además, lo mismo para el TextOutput, llegó a “Copiar” y luego pegarlo en dos veces más, cambiando el valor de TextBox a ser uno, dos y luego tres. Entonces voy a configurar el ContainerHeight para que sea altura de 240, que los tres puedan caber en la tarjeta y luego ahora abajo a los datos, ya tenemos nuestros componentes de entrada y salida de texto. Estos ambos en importados, así que está bien, pero necesito devolver un TextBoxValue2 y también tres. Ya tenemos los componentes configurados, así que todo lo que necesitamos hacer es guardar y ver cómo se ve en el navegador. Este es el frente. Muévete hacia el interior a la derecha, así que tenemos los tres componentes, así que caja uno, caja dos, y caja tres y también podemos ver una vez que pases por encima de los tres, todavía tendrán el menú individual para cada uno. Debido a que estos tienen la propiedad de fechas propias, todos funcionan de forma independiente, por lo que las opciones de menú sólo aplican a la sección. Este ahora es el frente de tarjeta, el interior izquierdo y el interior derecho completado, lo que nos deja con apenas una espalda para completar y lo haremos en el siguiente video. 81. Terminar el componente de CardBack: Ahora nos estamos acercando al final del proyecto, tan bien hecho por llegar tan lejos. El dorso es el último lado de la tarjeta que necesitamos para terminar, y se verá así. Nuevamente, debería ser sencillo porque ya terminamos los componentes que conforman esto. Tenemos que añadir la carga de imagen y salidas, luego solo un sencillo logotipo de copyright para terminar las cosas. Esta será una buena oportunidad para darle a esto un ir tú mismo agregando la carga de imagen y luego los componentes superiores. Sólo recuerda, éste necesita un método de devolución de llamada también para borrar la imagen igual que usamos en los componentes frontales de la tarjeta. Vayamos a los componentes de la parte posterior de la tarjeta. Seleccione eso. Todo lo que tenemos en este momento es el texto del dorso de tarjeta. Voy a quitar todos los contenidos y luego ir al frente de la tarjeta, seleccionar todo y copiar, y luego agregar esto dentro del dorso de la tarjeta. Recuerda, los estilos ya no tienen ámbito, por lo que podemos eliminar estos, a menos que siga aplicándose. No tenemos ningún texto en la sección, por lo que sólo la carga de imagen y salida de imagen. Podemos retirar los dos primeros componentes. Vamos a hacer uso de este método de imagen clara, para que podamos dejar eso en. Después abre la sección de datos, solo necesitamos el nombre de la imagen porque no estamos trabajando con ninguno de los valores de los libros de texto. También podemos quitar las importaciones para las entradas de texto, y también para la salida de texto, luego llegar a trabajar en nuestras plantillas. Necesitamos una subida de imagen CC, que ya tenemos, para poder quitar las entradas de texto libre, por lo que la de justo arriba, y luego dos de abajo. Lo mismo para las salidas, podemos mover las salidas de texto desde arriba y las dos salidas desde abajo. Ahora sólo tenemos la carga de imagen, y luego las salidas de imagen en el lado derecho. Vamos a usar las alturas de contenedor, y esta vez voy a poner esto en 400. Todavía necesitamos el prop de imagen clara, porque vamos a usar esto para quitar la imagen y luego activar el método para luego establecer la imagen predeterminada, que está aquí. Cuando todo eso se haga, peguemos nuestro salvamento y veamos cómo se ve. Ve al reverso de la tarjeta, elige un archivo y luego configura la imagen. Bien, eso está funcionando. También tenemos la capacidad de arrastrar la imagen. Entonces intentemos quitar una imagen. Genial. Esa es nuestra imagen predeterminada trabajando con el dorso de la tarjeta. Ahora esto está funcionando, este es el último apartado que se completará. Ahora tenemos todas las secciones de nuestra tarjeta todas funcionando. Te veré en el siguiente video. Echaremos un vistazo al impulso del evento. 82. Introducción al bus de eventos: Al ver los componentes en estas últimas secciones, hemos analizado cómo se pueden comunicar los componentes padres-hijos. Sabemos que pasamos datos del niño a los padres con eventos personalizados. Además, sabemos que pasamos datos de vuelta de los padres al niño usando utilería. Esto funciona bien si los componentes que se van a comunicar, están solo a un nivel aparte como hasta ahora en nuestra app. Por ejemplo, los componentes de entrada y salida de texto son hijos directos del frente de tarjeta. Esto hace que la comunicación sea fácil de lograr. No obstante, a menudo hay circunstancias en las que los componentes están anidados a dos o más niveles separados y necesitan comunicarse. Esto es común a medida que nuestra aplicación crece más grande. Si considera una aplicación que tiene una estructura como esta, los dos componentes en la parte inferior, no tienen componentes padre directos para pasar datos entre. Es posible seguir pasando eventos por la cadena, vuelta al nivel superior y pasar apoyos todo el camino hacia abajo para que esto rápidamente se pueda poner desordenado e inmantenible. Para facilitar esta comunicación, podemos utilizar lo que se denomina bus de eventos. Un bus de eventos no es más que una instancia vue vacía, que utilizamos como fuente de datos central. Importamos esto a cualquier archivo de componente donde lo queremos utilizar. Esto será útil para la siguiente función que agreguemos a nuestra app. Dentro de los cuatro vues de tarjeta, voy a agregar una casilla de verificación para marcar esta sección como completada, luego esto pasará datos al encabezado para actualizar una barra de progreso. Al igual que hemos visto en la última diapositiva, estos dos componentes no comparten un componente principal común para pasar datos entre. El barra de progreso es niño al encabezado, y la casilla de verificación es niño a las secciones de tarjeta por lo tanto, el bus de eventos es ideal para su servicio. Voy a agregar este bus de eventos o esta instancia vue a nuestro archivo main.js. Dirígete al main.js, y necesitamos asegurarnos de que agregamos esto antes de la función de render. Justo debajo de las importaciones, vamos a exportar una constante llamada bus de eventos, y vamos a poner esto en una nueva instancia vue. Esto exportará una constante llamada bus de eventos por lo tanto, ahora podemos importarlos a cualquier archivo que queramos acceder a él usando el nombre del bus de eventos que ya le hemos dado. Esta casilla de verificación será un nuevo archivo de componentes para que podamos añadirlo a las secciones de previsión. Podemos seguir adelante y crear esto de la manera habitual. Así que pasa a los componentes, y luego dentro de la tarjeta, voy a crear un nuevo archivo llamado SectionCompleted.vue, entonces podemos agregar la sección de plantillas con la casilla de verificación y también el texto. Agrega nuestras plantillas en la parte superior. Para empezar, voy a añadir una fila de tiendas de autobuses circundantes. Por lo que en la sección de apertura podemos agregar la clase de fila y luego un segundo nido div dentro y esto va a ser para nuestro grupo de formularios. Añadamos algunas clases de tienda favorables de cheque de formulario, y también formemos check in line. Estos son estilos que hemos utilizado anteriormente. Estos coincidirán con el resto de la app. Después un div más por aquí con la etiqueta de cheque clase de formulario. Este es el div circundante para nuestras entradas. En las entradas se tendrá un tipo de casilla de verificación, por lo que podremos seleccionar una vez que se haya editado la sección actual, y esté completa. Por último, algunas clases de entrada de verificación de formulario. Después de aquí, podemos agregar nuestro texto de sección de marca como completado. Para empezar, voy a colocar esto dentro de la sección frontal de tarjetas. Podemos agregarla al resto pronto. Entonces pasa a la CardFront.vue, y luego podemos bajar al guión y podemos sumar nuestras importaciones o sección completada. Esto también está en la misma carpeta de tarjeta, así que vamos a elegir. /SecciónCompletada. Entonces podemos registrar esto como un componente dentro la instancia y llamemos a la mina CCSectionCompleted, que es la sección completada nombre que le dimos a la importación justo aquí. El componente ya está listo para agregar a las plantillas. Voy a agregar esto en la parte inferior de la sección de edición, así que desplácese de nuevo a las plantillas, y la sección de edición es este primer div aquí. Justo debajo del último cc-text-input, podemos agregar nuestro cc-section-completed, y la etiqueta de cierre. Dale eso seguro y ahora deberíamos poder iniciar los servidores div y ver los componentes. El mío ya corriendo, así que voy a pasar al navegador, y luego desplazarme hacia abajo hasta el fondo. Ahora deberíamos ver que tenemos los componentes en la pantalla. Tendremos la casilla de verificación y el texto de la sección Marcar como completada. Está apareciendo la casilla de verificación fuera de la lista de pantalla echemos un vistazo a la SecciónCompletada. Cubra esto, por lo que formulario cheque etiqueta para que cambie eso. Genial, así que ese era el problema ahí. Acabamos de tener un problema de estilo. Ahora, tenemos esta configuración de componentes. En el siguiente video, usaremos esto para emitir datos al bus de eventos. 83. Envío de eventos al bus de eventos: Ahora tenemos una SectionComponentes completos y la configuración de EventBus. En este video, vamos a importar el EventBus en los componentes SectionComplete de hoy, luego emitir un evento personalizado de vuelta al EventBus. Empecemos importando el archivo EventBus. Entonces solo sopla las plantillas, voy a añadir las etiquetas de script. En primer lugar, vamos a importar el EventBus. Entonces esta es la sintaxis ES6. Estas llaves codificadas importan un solo miembro de un módulo, que nombramos el EventBus desde el archivo main.JS. Por lo que la ruta del archivo es../.. /main.js. Entonces en lugar de importar el contenido completo del JS principal, que no es lo que queremos. Nosotros sólo queremos importar este EventBus, que es esta exportación que hemos hecho aquí. Ahora podemos crear una propiedad llamada Checked. Entonces sopla el impulso. Podemos crear nuestros valores predeterminados de exportación y luego agregar nuestros datos de la manera habitual. Entonces vamos a crear una propiedad de datos llamada Checked, que inicialmente es una cadena vacía. Esto se utilizará para contener un valor verdadero o falso de la casilla de verificación. Por lo tanto, necesitamos usar esto con V-model como atributos Checkbox. Entonces agreguemos el modelo V a la Checkbox. Por lo que dentro de la entrada podemos agregar V-model y establecer este para que sea nuestro valor de datos de checado. Esta Checkbox también necesitará un manejador de clics. Entonces vamos a añadir también esto en. Entonces en Click y quiero configurar un manejador de clics, lo que desencadena un método llamado Sección Finalizada. Por lo que una vez hecho clic, esto activará un método llamado Sección Completada. Utilizaré este método para comunicarme con el EventBus. Entonces ahora vamos a configurar este método a continuación. Entonces vuelve a nuestra instancia de vista. Entonces justo después de los datos, puedes agregar una coma, y luego configurar nuestros métodos. Por lo que llamaremos a esta Sección Finalizada. Por lo que anteriormente hemos emitido eventos personalizados usando esto. $emit. Para ello con el evento tanto utilizamos EventBus. $emit. Por supuesto, si nombras algo más al EventBus, necesitarás usar un nombre que creaste. Por lo que el EventBus. $emit. Entonces como antes, pasamos en el nombre que queremos dar a este evento personalizado dentro de las cotizaciones. Por lo que voy a llamar a este evento personalizado Marcar Como Completado. Entonces sepárelo por una coma. Queremos enviar el valor de los cheques. Entonces agrega esto.comprobado. Estos componentes también necesitan ser colocados en las secciones de sobremultitud a. Adelante y hagamos esto ahora. Necesitamos importar, registrar y además agregar los componentes a los archivos de plantilla, igual que hemos hecho en CardFront.View. Por lo que sólo vamos a copiar este comunicado de importación de Sección Finalizada. Podemos agregar estos en la tarjeta Inside Left. Entonces a esto como componentes separados por coma. Por lo que cc Sección Finalizada, que es Sección completada. Entonces podemos agregar esto dentro de las plantillas, igual que lo hemos hecho con CardFronts. Por lo que hemos hecho esto en la parte inferior del área de edición. Entonces hagamos lo mismo para Inside Left. Por lo que justo debajo de las entradas de texto, puede agregar la sección cc Finalizado. Igual para el Inside Derecho pasando la importación, registre los componentes y luego esto a la plantilla otra vez debajo de todas las entradas de texto. Esos son los frentes Dentro Izquierda y Dentro Derecha, que apenas deja el cardback.Vue. Entonces acelerando la importación y haremos exactamente lo mismo. Registrar los componentes de cc Sección Finalizada. Entonces, finalmente, agregaremos esto en el área del editor, junto con la etiqueta de cierre, para luego golpear guardar. Entonces probemos esto dentro del navegador. Entonces empecemos con el Frente de Tarjetas. Por lo que tenemos el componente que se muestra en la pantalla. Dentro de la izquierda, también lo podemos ver. El Derecho Interior se ve bien también. Entonces finalmente la espalda. Por lo que este es un componente ahora completo y enviando eventos personalizados al EventBus. Revisaremos esto está funcionando en el siguiente video donde crearemos nuestro componente final para este proyecto, cual usaremos para recibir el valor de este evento por parte del EventBus. 84. Recepción de eventos del bus de eventos: Ahora hemos enviado datos al bus central de eventos usando un signo de dólar emite para enviar estos eventos personalizados. Ahora, comenzaremos por crear los componentes finales de este proyecto, que será la sección de progreso dentro del encabezado. Este componente también utilizará el bus de eventos, pero esta vez escuchará el evento y utilizará los datos que se le pasen. Como siempre comenzamos por crear el archivo de componente. Voy a llamar a este archivo el cardprogress.vue. Por lo que dentro de la carpeta de tarjetas voy a añadir un nuevo archivo de cardprogress.vue. Por lo que dentro de aquí podemos crear nuestras plantillas habituales. Voy a escribir etiquetas, y luego finalmente voy a etiquetas de estilo. Dentro del script voy a crear un valor predeterminado de exportación vacío para todas las instancias de vista, que volveremos a ustedes pronto. Este componente se anidará dentro del componente de cabecera. Por lo que necesitamos registrar esto dentro del archivo header.vue. Entonces vamos a revisar este archivo y podemos empezar importando este nuevo archivo CardProgress. Por lo que en la parte superior de los guiones voy a añadir nuestra importación de CardProgress. Por lo que la ruta del archivo es. /, esto también está dentro de la carpeta de tarjetas. Por lo que cardprogress.vue, y luego dentro de nuestra instancia podemos registrar nuestros componentes. Entonces justo debajo del vigilante voy a añadir un, y luego agregar nuestros componentes. Por lo que el único componente que necesitamos agregar es este archivo. Entonces voy a llamar a mi CCCardProgress. Por lo que ahora con todo el archivo importado y registrado, ahora podemos seguir adelante y agregar esto a nuestras plantillas. Justo debajo de las listas desordenadas para los enlaces de navegación, vamos a agregar una línea horizontal, y luego debajo de esto en, el CCCardProgress. Entonces como siempre, esto necesita una apertura y la etiqueta de cierre. Por lo que ahora se importa, se registra y una plantilla. Ahora podemos volver al archivo cardprogress.vue, y empezar a agregar nuestras plantillas. Voy a empezar con un div circundante, que va a ser el div para nuestra fila. Por lo que podemos agregar clases bootstrap de fila dentro de aquí. Entonces un segundo div, y este div va a contener nuestra clase de col-sm-12. Por lo que este es un componentes de ancho completo. Por lo que el contenido de esta plantilla será bastante sencillo. Todo lo que vamos a hacer es agregar una barra de progreso, y también completar el texto, que dice cuántas secciones se han marcado, así que por ejemplo, 104 y 204. Entonces agreguemos este texto primero con las etiquetas P. Dentro de aquí vamos a sumar los textos de completado. Por lo que por defecto será cero o cuatro. El serial será dinámico. Esto necesita aumentarse cada vez que el usuario hace clic en la casilla de verificación. Por lo que para hacer esto dinámico. Podemos agregar estas etiquetas span antes y después del cero, y luego así podremos cambiar el contenido entre estas etiquetas, voy a añadir un Id de contador. Esto es solo para que podamos acceder a él con JavaScript más adelante en este video. Este componente accederá al bus de eventos. Por lo que necesitamos importar esto dentro de los guiones. Por lo que abajo en la parte superior de las etiquetas de script, vamos a importar el bus de eventos. Voy a hacer esto con la sintaxis ES6 que miramos previamente. Por lo que esto importará el único miembro del bus de eventos desde el archivo main.js. Entonces para acceder a este archivo main.js, la ruta es../,../, el main.js. Entonces si recuerdas desde temprano en este curso, miramos los ganchos de ciclo de vida vista. Uno de esos ganchos fue el gancho creado, y podemos usar este gancho creado para ejecutar una función. crea cada uno de los componentes. Dentro de este gancho podemos escuchar un eventos personalizados en la instancia de vista con el método de signo de dólar. Entonces, sumémosle esto ahora. Volver abajo al valor predeterminado de exportación, podemos agregar el gancho creado. Dentro de este gancho creado podemos acceder al bus de eventos y luego usar un signo de dólar, método de instancia para escuchar unos eventos personalizados. El evento que queremos escuchar está marcado como concluido. Por lo que esta marca como evento completado es la que se está pasando al bus de eventos desde nuestra sección completada archivo. Entonces nosotros justo aquí, por lo que cada vez que el usuario hace clic en la casilla de verificación, que es valor booleano de verdadero o falso, esto luego se emite al bus de eventos, y luego tendremos acceso a esto con el archivo de progreso de la tarjeta. Entonces, cuando haya un cambio en este evento, esto activará una función. Esta función toma en los datos de evento entre los paréntesis. Entonces voy a llamar a estos datos, y luego podemos usar estos datos dentro de nuestro cuerpo de función. Entonces como acabamos de mencionar antes, el valor que se pasa al bus de eventos es un valor de casilla de verificación de verdadero o falso. Esto significa que estos datos que se nos publican justo aquí, serán o verdaderos o falsos. Por lo tanto, puede agregar una declaración if para comprobar si los datos son verdaderos. Si es así, queremos incrementar el contador en uno cada vez. Por lo que podemos acceder al contador con el Id de contador, que es la etiqueta span rodeada de cero. Por lo que podemos acceder a esto con Documents.GetElementsById. El Id por supuesto es contador. Por lo que ahora hemos seleccionado este contador. Queremos acceder al texto interior. Por lo que queremos aumentar cero por uno cada vez. Podemos hacer esto fácilmente con punto en un texto, plus. Entonces si los datos dentro de aquí son ciertos, el conteo se incrementará en uno cada vez. Entonces vamos a darle a eso un guardado y echa un vistazo a esto en el navegador. Entonces ve al navegador, y luego si seleccionamos marcar sección como completada, ahora vemos que tenemos el valor de uno o cuatro. Para ir a una segunda sección y tomar un ahora decir dos o cuatro, y luego libre, y luego finalmente cuatro a cuatro. Por lo que podemos ver si sigues pulsando en la casilla de verificación, el valor sigue subiendo y subiendo. Entonces necesitamos asegurarnos de que si el usuario desmarca la casilla, que el valor se reduzca en uno también. Por lo que fácilmente podemos hacer esto dentro de unas declaraciones else. Entonces justo después de la declaración if, también podemos agregar else, y luego solo voy a copiar este.GetElementById basado en donde también vamos a seleccionar el contador. Pero esta vez, vamos a disminuir por uno en cada clic, así que guarde eso, y ahora si vamos a repasar y refrescarnos, empecemos con el frente. Entonces ahora vemos uno, la perspicacia izquierda, ahora vemos dos, y luego volvemos a hacer clic, y ahora se reduce de nuevo a uno. Sólo intentemos esto con un componente más, así que dos, y luego volvamos a uno. Entonces que todo parece funcionar bien. Por lo que lo último que debe hacer ahora es aumentar y disminuir la barra de progreso para darle al usuario una indicación visual. Por lo que ya tienen mayormente configuración con las declaraciones if-else. Entonces dentro de las declaraciones if-, voy a volver a pegar en este documents.getElementById. Pero esta vez queremos seleccionar la barra de progreso. Por lo tanto, agreguemos la barra de progreso justo debajo de esta sección terminada. Entonces, empecemos con 0 por ciento. Por lo que el valor se establece inicialmente en cero, y luego queremos que el valor máximo sea igual a 100. Entonces para que podamos incrementar este valor cada vez que vamos a agregar un Id de CardProgress, así que guarde eso. Ahora podemos usar este CardProgress Id dentro del document.getElementById. Entonces en lugar de seleccionar el contador, pegaremos en el CardProgress. Pero esta vez queremos aumentar el valor. Por lo que ese valor se incrementará en 25 cada vez. Esto porque es un porcentaje, tenemos cuatro secciones. Por lo que cada vez que se haga clic, subirá un 25 por ciento, por lo que más equivale a 25. Entonces voy a copiar esto, y pegar esto dentro de las else-statement. Pero esta vez, cambie el plus a un negativo y luego guarde eso. Entonces vayamos al navegador y nos demos una oportunidad. Entonces intentemos hacer click en una de las secciones. Por lo que mark está como terminado, y ahora vemos que la barra de progreso va en aumento. Eso es tratar de mover eso, y también va hacia abajo. Probemos una sección más bien bien. Para que todo se vea en su lugar, así como el texto completado aumentando y bajando, también vemos cambiar el valor de la barra de progreso. Una última cosa que hacer para rematar estos componentes es hacer de la barra de progreso el ancho completo de la página. Esto se puede hacer con algún CSS simple sobre en el archivo Cardprogress.vue. Entonces bajemos a las etiquetas de estilo y hagamos que esto alcance. Por lo que los estilos sólo se aplicarían a este apartado. Queremos apuntar a la barra de progreso y luego establecer el ancho para que sea igual al 100 por ciento. Entonces vamos a ver cómo se ve esto ahora si refrescamos el navegador, bien bien. Vemos la barra de progreso abarca todo el ancho del contenedor. Entonces vamos a probar esto, así que vamos a dar clic en la casilla de verificación. Probemos una segunda, todo se ve bien, y una tercera, bien bien. Todo esto está funcionando ahora, así que felicitaciones. Ahora has utilizado con éxito el bus de eventos para la comunicación no padre-hijo. 85. Añadir mixins: medida que nuestra aplicación crece más grande, a veces puede haber situaciones en las que los componentes necesitarán reutilizar el mismo código. Por lo general, no es una buena práctica repetir el mismo código más de una vez. Dentro de nuestra app, si nos fijamos en el CardFront, así que ve a la CardFront.vue, y luego hasta el guión. Aquí tenemos un nuevo método llamado ClearImage. También si vamos a los componentes CardBack, también tenemos el mismo método repetido justo aquí. Entonces repita el mismo método ClearImage más de una vez. Para ayudar con este vue.js dispositivos con mixins. mixins son una forma más fácil de tomar cualquiera de las funcionalidades de nuestros componentes. Esto incluye cualquier cosa como nuestros datos, métodos, y propiedades computadas y colocados en su propio archivo separado. Este archivo se puede importar a cada componente que necesite acceso a él. Vamos a crear este archivo en la carpeta fuente. Voy a llamar a este archivo el ClearImageMixin, y viene después de la extensión the.js. Entonces podemos exportarlo como una constante llamada ClearImageMixin. Entonces exporta las constantes de ClearImageMixin, y puedes llamar a esto lo que quieras, pero voy a llamar a esto ClearImageMixin ya que es válido descriptivo. Ahora nuestro método ClearImage se puede llamar desde dentro del archivo Cardback.vue. Entonces ve a la Cardback.vue y luego voy a llamar a esto métodos completos, no sólo a la sección ClearImage. Así que corta el método completo hasta ahí. También asegúrese de quitar la coma de cierre. Entonces este método ahora se puede pegar en nuestro archivo mixin. Así que ve hacia atrás a estos objetos y pega esto en. Desnudo a la mente también podemos agregar cualquier otra cosa de nuestra instancia de Vue aquí, como cualquier dato y propiedades computadas que puedan estar relacionadas. Esta constante se ha exportado ahora. Por lo que ahora podemos volver a la tarjeta, volver a los componentes, e importante el nuevo mixin. Por lo que de vuelta a la parte superior del script, podemos agregar declaraciones de importación para los tres primeros. Nuevamente, al igual que el Eventbus, utilizamos las llaves para indicar que queremos imponer un solo miembro de este módulo. En nuestro caso, el nombre es ClearImageMixin y luego queremos importar esto desde la ruta del archivo de../.. /ClearImagemiXin. Ahora esto es importado. Ahora podemos mezclar esto con el resto de nuestro código dentro de la instancia de Vue. Por lo que dentro de los valores predeterminados de exportación, también podemos agregar la propiedad del mixin, y esta es una matriz. Seguro que sale la coma justo después para separar esto de los datos. Por lo que dentro aquí podemos agregar el nombre de nuestro mixin que fue ClearImageMixin. Por lo que este es el método ClearImage agregado ahora de nuevo en nuestros componentes. Pocos sólo que mezcla los contenidos en nuestros datos existentes. Si hay alguna clave conflictiva dentro del objeto en el que se va a fusionar, las opciones de componentes tendrán prioridad. Podemos dividir nuestro código en más mixins también. No estamos restringidos a usar sólo una mañana. El proceso es el mismo que acabamos de hacer. Trasladamos el código a su propio archivo, módulo de importación, y luego también podemos agregar el nombre del mixin a matriz de estos mixin separados por una coma. Ahora sólo tenemos que hacer lo mismo dentro de nuestro código desde archivo. También añadiremos el método ClearImage. Guarda este archivo y pasa a la CardFront.vue. Entonces haremos exactamente lo mismo. Tenemos que eliminar el método completo de la instancia de Vue. Después necesitamos importar el ClearImageMixin. Por lo tanto, agréguelas al fondo de las importaciones, tal y como lo hemos hecho antes. Por lo que ClearImageMixin. La ruta del archivo es la misma, es../.. /ClearImagemiXin. Después bajamos a nuestros valores predeterminados de exportación y agregamos nuestra matriz mixin. Solo tenemos uno, por lo que ClearImageMixin es el único valor dentro de la matriz. Ahora podemos dirigirnos a nuestra app y probar el método ClearImage es que funciona tanto dentro de los componentes CardFront como de CardBack. Así que guarda este archivo y pasa al navegador. Podemos comenzar dentro de la sección CardFront. Escojamos un archivo, luego insertemos imagen, y una vez que se descargue, diríjase a la imagen y haga clic en la eliminación. Bien. Por lo que esa sigue funcionando. También probaremos esto dentro del CardBack de presiones encontraremos a. Así que elige una imagen, ábrela, configura la imagen, luego pasa el cursor sobre ella y quita la imagen. Genial. Entonces todo eso sigue funcionando. Entonces recuerda que podemos usar tantos mixins como quieras dentro de nuestra app. El término tenga en cuenta si necesitamos usar código en más de un lugar. Por lo que los mixins son una buena manera de organizar nuestros proyectos y también evitar cualquier repetición de código. 86. Sección final: Componentes continuados y almacenamiento Firebase: Enhorabuena por llegar al final de este apartado. Hemos cubierto tanto en esta sección incluyendo trabajar con Firebase, agregar el menú de opciones de texto, trabajar con componentes, y también formas alternativas de pasar datos entre ellos. Por ahora, también deberíamos tener una aplicación de tarjetas de felicitación totalmente funcional repleta de características, y espero que también hayas aprendido mucho de ella. Ahora has aprendido mucho sobre la construcción de aplicaciones con Vue.js. Ahora, sigamos aprendiendo en el siguiente apartado. 87. Sección de introducción: transiciones y animaciones: Bienvenido a esta nueva sección. Nos vamos a tomar un descanso de agregar nuevas características a nuestra aplicación y también componentes para ver algunas maneras de realmente hacer que nuestra aplicación sea mucho más agradable de usar. En esta sección se trata de agregar transiciones y animaciones. Esta es una gran manera de hacer que tus aplicaciones luzcan mucho más pulidas y realmente mejoren la experiencia del usuario. Esperaremos que esperen esta nueva sección y allí los veré. 88. Clases de transición: Al trabajar con transiciones de entrada por licencia, existen seis clases las cuales se aplican durante diversas etapas de la transición. Tenemos libre para la interfaz que trata de iniciar, terminar y también la fase activa. También se aplica lo mismo para la fase de salida, donde también tenemos acceso a las clases de inicio, salida, a unas clases activas. Para entender qué hacen cada uno de estos, he configurado una transición sencilla dibujada, que establece la opacidad de un elemento o componentes. Aquí tenemos la interfaz y la transición comienza en la clase v-enter. Dentro de esta clase, podemos, por ejemplo, agregar clases CSS para declarar cómo comenzarán a transitar los elementos o componentes. En este ejemplo, nuestros elementos comenzarán como transparentes. Por lo que podríamos poner la opacidad a cero aquí. Esto sólo surte efecto para el primer marco de la transición. Por lo que sólo lo usa para la fase inicial de inicio. Después de esta primera fase, v-enter luego se retira, y luego v-enter-to se hace cargo. v-enter-to establece el estado final para la fase de entrada. Por ejemplo, aquí podríamos establecer la opacidad para que sea una, ya que ahora se inserta el elemento. Durante la interfaz completa, también tenemos acceso a otra clase llamada v-enter-active. Debido a que esta acogedora interfase completa, este es un lugar ideal para agregar CSS para establecer la duración del tiempo o el retraso de la transición. Después pasamos a la transición de la licencia. Aquí, básicamente tenemos lo mismo que las tres primeras clases, revisadas. Para que se desencadene el primer fotograma de la transición de salida, establecemos el estado inicial con v-leave. Al igual que la interfaz dura un fotograma, luego v-leave-to, es responsable del estado final. Indeciso cuando v-leave se retira después del primer cuadro. V-Leave-to es donde agregamos el estado final para la transición. Al igual que antes, la transición de salida también tiene una clase que cubre la licencia completa en fase llamada v-leave-active. También, esto es ideal para ciertas cosas como la duración de la transición. Por lo que estas son las seis clases a las que tenemos acceso durante la transición. Todos los nombres de clase comienzan con el prefijo v por defecto, cuando se usan con los elementos de transición. También podemos agregar un nombre a esta transición, y este nombre reemplazaría entonces el prefijo v. Por ejemplo, si nuestra transición tuviera el nombre de fade, las clases se llamarán fade-enter, fade-enter-active y así sucesivamente. Pero estas son algunas cosas a las que echaremos un vistazo con más detalle en el próximo video. Empezaremos a poner en práctica esto. 89. Añadir transiciones CSS: De vuelta en los autos creativos proyectos para empezar a poner en práctica algunas transiciones. Ahora ya hemos visto las clases de transición que podemos usar. La primera técnica que quiero mostrarte es aplicar una transición referirse a elementos o componentes. Voy a dirigirme al archivo Textoutput.vue. Entonces es como el Textoutput.vue. Voy a agregar este envoltorio de transición alrededor de los elementos de formulario. Este es el menú de opciones que aparece al pasar sobre el texto. Esto es ideal para agregar una transición porque actualmente sólo muestra y se esconde sin ningún tipo de efectos, como el desvanecimiento y el desvanecimiento. Entonces lo que necesitamos hacer por encima de la forma la envoltura de transición. Entonces la apertura es así y luego hacia abajo en el formulario de cierre, va a cerrar esta transición y darle a eso un ahorro. Ten cuidado, sin embargo, que los elementos de transición sólo se pueden utilizar en ciertos casos. Podemos usarlo con V, si de V mostrar también nosotros componentes, que veremos pronto. Esta sección de formulario funciona con V show. Por lo que encontramos en el último video que mencionamos nombrar la transición. Para proporcionar un nombre, agregamos este nombre dentro de la etiqueta de apertura de transición. Por lo que volver a la transición. Abre la etiqueta. Se utilizará la transición para difuminar el menú dentro y fuera. Llamemos a este fundido. Por lo que nombre igual a desvanecerse. Este nombre de transición reemplaza el prefijo V en CSS. Entonces vamos a configurar esto en la sección de estilo. Así que desplácese hacia abajo hasta las etiquetas de estilo hacia abajo en la parte inferior. No estamos así justo después del selecto. Aquí podemos sumar todas nuestras clases de transición. Empecemos con desvanecerse entrar, desvanecerse enter-activo, desvanecerse enter-a, desvanecerse. Los dos últimos se desvanecen y se dejan activos. Por último, desvanecerse, dejarse. Este fundido es el nombre de la transición que hemos dado. Este es el reemplazo del prefijo V que mencionamos antes. Esto puede parecer que pasan muchas cosas aquí, pero no podemos simplificar las cosas para este ejemplo. Entonces si miramos este ejemplo desde antes, V respuesta tiene la capacidad de cero. También en la transición de salida, v-leave-to también tiene la capacidad de cero. Por lo que podemos combinar estos Dentro del CSS para hacer las cosas un poco más simples. Por lo que sobre la parte superior tenemos fade-enter. También voy a agregar fade-deja-para poner esta sección e ingresar las llaves y hacer que combinen esto con respuesta de desvanecimiento. Vamos a establecer la opacidad tal como hemos visto antes en el ejemplo. Esto va a ser cero. También v-enter-to y v-leave tiene la misma opacidad CSS de uno. Por lo que también podríamos combinar estos. No obstante, no necesitamos hacer esto. El motivo es porque la opacidad CSS se establece en uno por defecto. No hay necesidad de declararlo a menos que sea algo distinto de los impagos. La opacidad que fijamos en cero se eliminará después del primer fotograma, que luego restaurará los predeterminados. Esto significa que podemos quitar v-enter-to. También v-leave para este ejemplo. Quitemos esos dos. Por lo que esto sólo nos deja con las clases activas para las fases de entrada y salida. Podemos utilizar un cierto lapso de tiempo que la transición tarda en aparecer y también para eliminar. Estas dos clases también se pueden combinar. Establezca el mismo tiempo de transición, manténgalo parejo. Entonces vamos a cortar este. Entonces agreguemos esto justo ahí. Entonces agreguemos transición a ambas clases. Entonces vamos a usar la propiedad de transición CSS. Por lo que queremos establecer la opacidad de un 0.5 segundos. Entonces dale a eso un ahorro. Ahora si pasamos al navegador, y luego si pasamos por encima de uno de los elementos, podemos ver que el menú se desvanece muy bien dentro y fuera de un segundo y medio. Esto sólo se ve un poco más bonito que antes. Otra cosa que podemos hacer es que también podemos mover el CSS para esta transición de fade fade y añadirlo al archivo hasta ver como un estilo global. Serán útiles si quisiéramos agregar el estilo de fundido a todos los elementos. Pasemos al CSS. Si recortamos los estilos, guarda el archivo. Entonces si vamos a la app.vue, podemos pegarlos en como estilos globales. Entonces justo en la parte inferior, pega estos en. Ahora si paso el cursor sobre el menú, podemos ver que aún se aplica el fade. Si bien estamos en ello, también podemos hacer lo mismo para el botón quitar imagen para que se desvanezca bien dentro y fuera. Entonces tengo el archivo de salida de imagen y luego para redondear este botón podemos hacer exactamente lo mismo. Podemos agregar el envoltorio de transición y luego darle a esto un nombre de fade. Entonces cierra este envoltorio. Al igual que eso y dale a eso un ahorro. Ahora si vamos a la app, ahora podemos ver que el botón, así como el menú, se desvanece muy bien dentro y fuera. Entonces este es un simple ejemplo de una transición, pero realmente hace una diferencia en el aspecto y la sensación de nuestra app. A continuación, veremos la adición de animaciones InCSS. 90. Añadir animaciones CSS: A la par de transiciones, también tenemos las opciones para agregar animaciones. Las animaciones nos permiten cambiar gradualmente de un estilo a otro. Podríamos cambiar poco a poco un elemento de un color a otro. Para este ejemplo, voy a agregar un efecto de escala al botón quitar imagen. Esto significa que un botón comenzará pequeño, y luego crecerá a tamaño completo cuando el ratón pase por encima de él. Entonces, cuando el ratón abandone el botón se encogerá la vista exterior. Podemos comenzar de la misma manera usando el mapeador de transición. Pasa al archivo ImageOutput.vue. Entonces si buscamos el botón para quitar la imagen, que está justo aquí, voy a cambiar el nombre de la transición para que sea escala. Para la animación, necesitamos configurar la regla en fotogramas clave. Necesitamos configurar fotogramas clave para controlar los pasos de la animación CSS. Para empezar, configuremos los fotogramas clave para escalar y luego escalar hacia fuera. Abajo en el CSS, justo en la parte inferior de la página, solo sopla este selector de imágenes luego los fotogramas clave en. Voy a crear uno para escalar adentro, y luego un segundo para escalar fuera, así como eso. Este es CSS estándar, no es específico de Vue. Entonces necesitamos detener los pasos de la animación. Para que las cosas sean sencillas, solo voy a añadir una etapa inicial y una final. Si quisiéramos, podríamos incluso sumar más etapas en diferentes porcentajes durante la animación. Empecemos con cero por ciento, que es el inicio. Al cero por ciento, voy a establecer una transformación. Voy a transformar la escala para comenzar inicialmente en cero, y luego debajo de aquí vamos a establecer la regla del 100 por ciento. Esto de nuevo va a ser una transformación de escala, pero esta vez va a ser una. Esto configura los fotogramas cuando la animación se está escalando. A cero por ciento escala es cero, por lo que viene aquí. Después, al final de la transformación, la escala se retoma entonces hasta una, lo que la hará de tamaño completo. También voy a hacer lo mismo para escalar fuera copiando estas dos líneas de código y pegándolas. Pero porque estamos escalando hacia fuera, queremos hacer lo contrario. A cero por ciento, en esta ocasión queremos que la escala sea una para que sea totalmente visible en la pantalla a tamaño completo. Entonces al final de ella al 100 por ciento queremos es que se encoja de vuelta hacia abajo para que podamos verlo. Estableceremos la escala para que sea cero cuando solo estamos sumando el cero en etapas 100 por ciento. También podemos cambiar esto para que se llame hacia y desde en lugar de cero en 100 por ciento. Si uno funciona bien, ahora tenemos las configuraciones de fotogramas clave control de cómo queremos que funcione la animación. Podemos agregarlas a las reglas CSS tal como lo hemos hecho antes. Por encima de los fotogramas clave voy a añadir las reglas CSS. Recuerda porque llamamos a esta escala de animación, voy a añadir la clase de escala de enter active. Aquí vamos a establecer la animación que queremos utilizar. El animación es escala en la sección de fotogramas clave, y luego establecemos la duración. Yo quiero que esto suceda a lo largo de 0.5 segundos. Entonces a continuación podemos hacer la fase activa de dejar. Por lo que báscula deja activa. Esto de nuevo toma en una animación. Esta vez debido a que estamos dejando la animación, queremos usar la sección de escalar fuera. Se escala hacia fuera la animación. Voy a mantener esto a lo largo de 0.5 segundos durante la duración. Recuerda el entrar activo y dejar clases activas, cubrir la fase completa de entrada y salida. Aquí te presentamos un lugar ideal para sumar nuestra animación, junto con la escala temporal para su toma. Demos ese guardar y luego pasemos al navegador. Si vamos a la salida de la imagen, podemos ver cuando pasamos el cursor sobre la sección que el botón que se redondeó con la transición, ahora escala de cero a la derecha a un 100 por ciento del tamaño, más de medio segundo. Una vez que tenemos configurados estos fotogramas clave, agregar una animación se parece mucho a las transiciones que miramos en el último video. Todavía tenemos acceso a las clases CSS, como v leave y v enter to. Pero a través del recordatorio, si se utiliza v enter, esto no se elimina inmediatamente después de insertar el elemento. En cambio, esto sucede con los eventos finales de animación. El elemento de transición raíz tiene un extremo de transición y también un oyente de eventos de fin de animación adjunto, por lo que Vue JS sabe cuándo ha terminado la transición. Esta es una pequeña diferencia a tener en cuenta al usar animaciones. A continuación pasaremos a agregar transiciones a los componentes. 91. Transiciones de componentes y modos de transición: No nos limitamos a añadir transiciones en animaciones a solo elementos. Podemos incluso transitar entre componentes cuando hacemos clic en los enlaces del menú. Comienza con el familiar envoltorio de transición, que aún podemos usar con las etiquetas keep-alive. Empecemos de nuevo en la app.vue. Si localizamos esta sección keep-alive con los componentes, solo voy a crear algo de espacio arriba y también abajo. Entonces vamos a crear el envoltorio de transición familiar. Agrega esto al inicio. Después en la etiqueta de cierre, justo después de la etiqueta final keep-alive, así como así. Entonces voy a reutilizar el nombre de fade, aprovechar los estilos que ya hemos establecido en la parte inferior. Justo aquí. Hagamos esto agregando el nombre de transición dentro de la etiqueta de apertura. El nombre igual al desvanecido, para luego darles un mismo. Ahora bien, si pasamos al navegador, podemos echar un vistazo a los efectos. Ahora si hacemos click en las diferentes páginas, podemos ver que se está produciendo una transición. Pero si echamos un vistazo más de cerca, podemos ver un problema. Para mostrar esto con más detalle, voy a alejarme. Entonces ahora, si hacemos clic en las diferentes páginas web, podemos ver que la página web comienza por la parte inferior y luego salta. Ahora está de vuelta al tamaño completo. Este no es el comportamiento que estamos esperando. El motivo es que por defecto, los elementos de transición que entran y salen de fase ambos suceden al mismo tiempo. A medida que entra un nuevo componente, el espacio sigue ocupado por los todos los componentes. Después, una vez que el viejo componente se va, entonces se crea el espacio para los nuevos componentes, provocando y terminando saltando en su lugar. Afortunadamente, Vue acaba de escribir esto con un modo de transición para ayudar a lidiar con esto. Podemos agregar el modo como atributo a la etiqueta de apertura de transición. Justo después del nombre, voy a añadir el modo. Aquí, podemos ya sea establecer in-out o out-in. Empecemos con in-out y echemos un vistazo, y demos esa actualización. Ahora, podemos ver que hay un poco de retraso, pero la página que se está cambiando. in-out no será útil para aquellos porque trae primero el nuevo componente, y luego elimina los componentes existentes. Probemos out-in, y veamos cómo se ve esto. Si volvemos al navegador y nos alejaremos de nuevo solo para asegurarnos. Genial. Ahora, cuando seleccionamos las diferentes páginas, podemos ver que el componente se conmuta en la misma posición, lugar de comenzar por la parte inferior y luego saltar de nuevo a su lugar. Esto es exactamente lo que queremos. Primero se elimina el componente antiguo, luego el nuevo componente comienza a desvanecerse. 92. Introducción a los hooks de Javascript: Durante esta sección, hemos utilizado CSS para crear animaciones y transiciones en nuestra aplicación. Vgs también nos proporciona ganchos JavaScript, que podemos utilizar durante ciertas fases de la transición. Si recuerdas desde antes en el curso, miramos cómo podríamos usar Hook durante diversas etapas del ciclo de vida. Bueno, transición El trabajo de Hook así también. Al usar estos ganchos, tenemos acceso a todas las características que oficiales de JavaScript no se limitan a aplicar solo en CSS. Puede ver los diversos ganchos que podemos utilizar. Al igual que las clases de transición. Tenemos un entrar y salir en fase, ambos con cuatro ganchos cada uno. A continuación estas autoexplicativas. Pero empezará con antes de entrar. Según suena, este gancho se llama al principio antes de que comience la fase de entrada. Tenemos entonces entrar cual corre quiere transitar ha comenzado la interfaz. El gancho final de la interfase es después de entrar, y esto se llama elementos o componentes 1C, ha terminado la transición en. El gancho de entrada final se llama Enter cancelado. Esto es útil tener si la transmisión se cancela mientras está en curso. Por ejemplo, si VCO se vuelve falso, antes de que la transición haya tenido oportunidad de completarse, aquí podemos hacer algún trabajo de limpieza o restaurar la transición de nuevo a su estado original. También tenemos lo mismo en la fase foliar pero antes de salir, salir, después de salir, y luego también salir cancelado. Aplicar esto es un más fácil es relativamente fácil de hacer. Todo lo que necesitamos hacer es agregar los ganchos que quieras usar como atributo a los elementos de transición. Por ejemplo, aquí tenemos los ganchos entrar y salir como nuestros atributos. Por lo que estos son los ganchos que tenemos disponibles para usar. Ahora volvamos al proyecto y veamos en acción. 93. Hooks de Javascript en acción: Ahora sabemos qué ganchos tenemos a nuestra disposición durante la transición. Ahora podemos añadirlos a nuestra aplicación. Voy a usarlos para agregar algunas instrucciones a nuestra app. Estas instrucciones simplemente le indicarán al usuario que edite la sección de la izquierda, y luego los cambios aparecerán en la tarjeta del lado derecho. Para ello, voy a pasar a la app.vue, y luego al final a enganchar a la transición de componentes. En la etiqueta de apertura, los voy a agregar a su propia línea, solo para que sea más legible, y luego en la parte inferior, vamos a usar @ Enter igual a Enter. Aquí estoy usando el símbolo @ como una mano corta para v on para llamar al gancho Enter, luego agregue el nombre del método de Enter. Podemos crear este método pronto. Pero primero agreguemos nuestra instrucción, queremos mostrar. Voy a hacer esto justo sobre la transición, pero por debajo del encabezado nav. Voy a crear un div para empezar, y esta va a ser la sección circundante para nuestras instrucciones. Vamos a crear un div, y también la etiqueta de cierre. Aquí te voy a dar alguna identificación de instrucciones, y luego algunas clases para que se vea un poco más bonito. Centro de texto y también cursiva. Dentro de este div, voy a crear un nuevo div bootstrap con la clase de fila, así como así. Entonces dentro de aquí voy a crear dos secciones nuevas. Esto va a dividir la página en, por lo que va a ser de dos, seis secciones de columna. El lado izquierdo tendrá algunos textos, decir hacer algunos cambios en el área de editor a continuación. El lado derecho le dirá entonces al usuario que los cambios aparecerán a continuación, en el lado derecho. Añadamos otro div. De hecho, que agrupe esto. Clase o bootstraps col-sm-6, por lo que es la mitad del ancho de la página. Después vamos a añadir algunas etiquetas p para agregar algo de texto, y luego anidado por dentro aquí voy a agregar las etiquetas m para agregar un poco de énfasis en el texto. Voy a empezar con entidad HTML. El ampersand, larr, luego punto y coma, y esto es para la flecha izquierda. lo guardamos. Podemos ver que la flecha izquierda está apareciendo a un costado. Entonces sigo adelante y agrego el texto de hacer cambios en el Área Editar Código a continuación. Guarda eso y veamos cómo se ve esto. Genial, eso es exactamente lo que queríamos del texto encima del área de edición. Ahora copiaremos este div y haremos lo mismo para el área de salida. Copia esta sección de seis columnas y luego pega justo debajo. Establecida necesidad de cambiar el texto, y esta vez va a estar bajo se mostrará en la tarjeta, así como así. Entonces necesitamos la entidad HTML esta vez de la flecha derecha. El punto y coma ampersand rarr. Genial, así que eso es exactamente lo que queríamos. Ahora tenemos algunas instrucciones al usuario. Ahora podemos seguir adelante y configurar el método Enter. Agregamos el nombre del método Enter justo arriba, lo siento, justo debajo en la transición de Enter. Ahora bajemos a la instancia de vista y creemos un nuevo método. Hagamos esto justo debajo de los datos. Añadamos nuestros métodos aquí, así que el número uno se llama Enter. Si lo creas de la manera habitual, y como con todos los eventos que hemos mirado previamente, sí tenemos algunos datos pasan a este método, que pasas a las instalaciones de la función. Voy a llamar a esta L, ya que los datos que se le pasan es el elemento que estamos transitando, por lo que eso tiene sentido. Podemos ver esto con un registro de consola. Añadamos rápidamente un inicio de sesión de consola aquí y luego emitamos el valor de L, me olvidé de inspeccionar. Después ve a la consola. Veremos esto en acción si cambiamos entre los componentes. Ahí vamos. Ahora vemos los elementos que se le están pasando. Esto se puede utilizar en cualquier JavaScript que nos guste. Lo voy a usar para configurar el tipo de visualización de las instrucciones para que sea ninguna. Esto significa que las instrucciones se mostrarán inicialmente cuando se cargue la aplicación, pero luego se eliminarán usando JavaScript cuando cambiemos entre componentes. Quitemos este registro de consola y lo reemplazemos por JavaScript. Documento dot get element by ID. El DNI que queremos agarrar es esta sección de instrucciones, que damos un DNI de instrucciones justo aquí. Ahora podemos agarrarlo y colocarlo dentro de los soportes ahí. Entonces para eliminarlo, podemos establecer el estilo, aunque display para ser igual a non. Por supuesto, también podemos usar cualquiera de los ganchos que miramos en el último video dos si es necesario. Guardemos eso. Ahora si pasamos a la salida, podemos ver las instrucciones todavía ahí. Pero si cambiamos a diferentes componentes, vemos que ahora se retira. Las instrucciones solo están ahí cuando el usuario visita por primera vez el sitio. Por supuesto, también podemos usar cualquier otro ganchos que miramos también en el último video. Sin embargo, hay una cosa importante a recordar, al usar tanto los ganchos Enter como Leave. Cuando se utiliza sólo JavaScript, en lugar de mezclar ganchos JavaScript junto con transiciones CSS, tenemos que agregar un segundo argumento. El segundo argumento es la devolución de llamada hecha. Pasamos esto a los paréntesis de nuestro método junto a L. Separados por coma, vamos a sumar hecho como segundo argumento. Entonces lo llamamos como una función al final de nuestro código JavaScript. Apenas al final de este método, podemos agregar hecho para llamar a la función. Esto entonces lo llamará como una función, al final de nuestro código. Las transiciones CSS tienen cosas como duraciones de tiempo, el final de la señal de una transición o animación. Al usar JavaScript, necesitamos agregar done al final del código para decirle a Vue.js cuándo la transición ha terminado realmente. Cuando usamos esto en combinación con CSS, la devolución de llamada hecha es opcional cuando se usan ganchos sobre ese Enter y Leave, solo se requiere L. Por último, se considera una buena práctica decirle a Vue.js si solo estamos usando JavaScript en una transición, lugar de usar tanto JavaScript como CSS, ambos juntos. Es así como Vue.js puede saltarse la etapa de detección de CSS. Podemos hacerlo agregando otros atributos a la transición. Volvamos a subir a la etiqueta de apertura de transición, y justo después de la @ Enter y queremos hacer un v-bind. CSS es igual a falso. Esto por supuesto, no es para nuestra usecase porque también mezclamos el gancho de JavaScript con el CSS de fade, por lo que podemos seguir adelante y quitar esta línea. Pero es útil estar al tanto, y es posible que lo necesites en el futuro. Es así como podemos usar ganchos JavaScript. En el siguiente video, veremos cómo podemos mezclar tanto transiciones como animaciones. 94. Mezclar animaciones y transiciones: Hemos mirado el uso tanto de transiciones como de animaciones de forma independiente hasta el momento. Ambos también se pueden mezclar para trabajar juntos también. Para ello, sí necesitamos eliminar la marca de no llamar del archivo app.vue. Vamos a hacer eso ahora dentro de la app.vue y abajo dentro del método, podemos eliminar los argumentos hechos, segundos, y luego también la llamada al mismo al final de nuestro método. Danos ahorrar. Esto lo eliminamos porque impide que VGS detecte las transiciones CSS, las cuales estaremos utilizando. Entonces empecemos por pasar al archivo imageoutputs.vue. Primero voy a cortar los estilos desde aquí y luego moverlos al archivo principal app.js dentro de las etiquetas de estilo. Entonces, empecemos recortando la báscula. Escale enter-activo hasta los fotogramas clave. Así que corta los que están fuera de la salida de la imagen, guarda eso y luego dirígete a la app.vue. Abajo en estilo podemos sumar estos debajo de las clases falsas. Entonces pega eso ahí dentro. Con estos estilos ahora disponibles a nivel mundial, podemos usarlos en toda la aplicación. A modo de ejemplo, podemos mezclar en animación de escala con el desvanecimiento existente. Entonces lo que voy a hacer primero es fraccionar el desvanecido-enter-activo, y también el desvanece-dejar-activo en sus propias líneas. Es así como podemos usarlos de forma independiente. Entonces voy a cortar y pegar esto en acción con el difuminado enter y el segundo y también quitar el desvanecimiento de la primera. Ahora podemos mezclar la escala y escalar las animaciones, pero cambiar las duraciones para que sean más largas. Digamos que dos segundos. Por lo que dentro del fade-enter-activo, va a mantener la transición de la opacidad para esta vez, lo vamos a mezclar con animación. Añadamos la animación de escalado. Esta vez a lo largo de una duración de dos segundos. Animación de escalado rápido, lo configuramos con los fotogramas clave a continuación. Empieza este aquí. Al desvanecerse ahora también, también podemos usar la escala hacia fuera. Hagámoslo dentro del desvanecimiento-dejado-activo. Podemos una animación, utilizar los fotogramas clave de escala a lo largo de una duración de dos segundos. Ahora guardemos eso y pasemos al navegador y veamos cómo se ve esto. Entonces hazlo un poco más pequeño para que podamos verlo entrar y salir. Genial. Por lo que no se ve bonito, pero se puede ver como demostración, cómo la animación y la transición, ambas funcionan juntas. Ahora ten una animación y transición, pero ambos fluyen para diferentes duraciones, las cosas pueden estar un poco mal. Sí necesitamos decirle a VGS si queremos la animación, toda la transición sea una prioridad para el tiempo en. Hacemos esto dentro de los elementos de transición estableciendo el tipo de transición. Entonces volvamos al editor y busquemos el envoltorio de transición que has estado usando. Justo aquí. Justo después del gancho de JavaScript, podemos agregar un tipo. Establezcamos la prioridad para la animación y veamos cómo vamos a ver. Por lo tanto, la animación es una prioridad. Cambiemos esto a transición y luego guardemos y ahora podemos ver que sí se ve un poco diferente. No funciona del todo para nuestra aplicación, pero sí te muestra cómo podemos establecer el tipo o la prioridad para la transición. Voy a quitar este tipo ya que no lo necesitamos. Esto se debe a que también voy a quitar la animación del CSS. Quitemos el tipo y luego bajemos a los estilos, eliminemos las animaciones que acabamos de agregar porque no las necesitas para nuestro uso. Entonces danos guardar y ojalá vuelva a la normalidad. Genial. Es así como podemos establecer si queremos que una transición o una animación tome prioridad a la hora de mezclar ambos tipos 95. Clases de transición personalizadas: Hasta el momento, al usar transiciones, hemos utilizado las clases que nos brindan los vuejs, como v-enter y v-leave, que puedes ver aquí. Esto es ideal para casos más bajos, pero tal vez veces queremos usar nuestras propias clases CSS personalizadas. Estas situaciones pueden surgir, particularmente cuando se utiliza una biblioteca de terceros para animaciones. Las bibliotecas de animación como animate.css, funcionan mediante la inclusión de la biblioteca como un archivo CSS o mediante el uso de un enlace CDN a la biblioteca. Después para acceder a las animaciones, utilizamos los nombres de clase personalizados para cada animación, como clase igual a límites, f o ejemplo. Contamos con este nombre de clase personalizado usando los ganchos proporcionados herramientas. No obstante, en cambio, vuejs nos proporciona algunas clases personalizadas para reemplazar cada clase de transición. Por ejemplo, podemos agregar el atributo anti-clase, con nuestra propia clase CSS personalizada. Esto sustituirá entonces a la clase v-enter. Podemos ver esto en acción si te diriges a nuestra app. Comencemos en el archivo de salida de imagen. Le dimos a esta transición un nombre de escala, para el botón quitar imagen, también encima en la app.vue, abajo en sección de estilo, abajo en la parte inferior. Después creamos los nombres de las clases. Nosotros usando de escala entrar activo y escala dejar activo. En lugar de usar estos nombres preestablecidos, podemos preguntar a las clases personalizadas, que acabamos de ver en las diapositivas. Para ello, sobre en las salidas de imagen, podemos eliminar el nombre que nos proporcionaste antes. Eliminemos los atributos de nombre, y luego en la siguiente línea voy a agregar algunos atributos nuevos, para luego configurar nuestros nombres de clase personalizados. Entonces voy a empezar con enter active class, y luego set es a nuestro nombre personalizado de custom enter active, por supuesto esto puede ser cualquier nombre. Entonces quiero hacer lo mismo para dejar clase activa, y nuevamente establecer esto a nuestro nombre personalizado. Entonces voy a usar la costumbre, dejar activo. Ahora para vincular esto al CSS, volvamos a la app.vue y luego bajemos a las clases de escala web. Entonces podemos cambiar es activar fases para ser nuestros nombres de clase CSS personalizados. Entonces el primero, en lugar de escalar, era costumbre, entrar activo. Entonces por supuesto lo mismo para la fase de licencia de costumbre licencia activa. Así que dale un guardado y luego actualicemos o echemos un vistazo a esto en el navegador. Entonces si todo funciona bien, ahora deberíamos pasar el cursor sobre el botón quitar imagen, y verlo escalar dentro y fuera igual que antes, pero esta vez usando nuestras clases personalizadas. 96. Transiciones iniciales de procesamiento: Cuando nuestra app se carga por primera vez, la tarjeta aparece sin estilo. Cuando cambiamos entre los componentes, hemos añadido estos efectos de desvanecido. También va a estar bien, si también pudiéramos desvanecer la tarjeta cuando la app se carga también. Para ello Vue.js nos proporciona el atributo appear. Simplemente podemos agregar estos atributos dentro de los elementos de transición. Voy a pasar a la “App.vue” donde se encuentra esta transición. Utiliza la transición de desvanecimientos aquí rodeando los componentes mantenidos vivos. Podemos agregar esto como un atributo, al igual que el nombre y también el modo. Simplemente agrega “aparecer” y luego dale a eso un “guardar”. Ahora si bajamos a la clase de fundido dentro del CSS. Al usar appear, la transición que aplica se toma del CSS, que ya hemos configurado para entrar y también para salir. Ya que tienes la opacidad decolorada, este es el efecto que se usa al aparecer. Podemos ver esto en acción. Si cambiamos una de las duraciones a tres segundos. Voy a hacer esto en la clase de aparecer. Entonces “desvanecerse enter-activo”. En lugar de 0.5 segundos, voy a cambiar esto a tres segundos después “guardar”. Ahora si recargamos el navegador, la carga inicial tarda más en desvanecerse. Cambia eso de nuevo a 0.5 segundos, “refresca”. Ahora podemos ver que es mucho más rápido. No obstante, si queríamos, no tenemos que usar automáticamente esta clase de fundido existente. Podemos anular esto con un nombre de clase personalizado. Al igual que miramos en el último video. Podemos usar los mismos nombres, pero con el prefijo aparecer, como “AppearActiveClass”, para hacer copia de seguridad a la transición. Voy a configurar un nombre personalizado. Entonces “AppearActiveClass”. Entonces podemos agregar nuestro nombre personalizado, 'custom-appear-active-class”. Ahora esto es configuración, ahora podemos bajar al CSS. De hecho, solo copiaré este nombre personalizado. Después, hasta el CSS podemos configurar esto. Sólo tengo que “desvanecerse enter-activo”, pegar esto en. Nuevamente quieren configurar la transición para la opacidad. Pongamos esto en un segundo, por ejemplo. Ahora esta transición de un segundo será independiente y anulará cualquier clase existente. Veamos esto en acción con “refrescar”. Eso parece alrededor de un segundo. Eso parece estar entrando en vigor ahora. Es así como podemos agregar transiciones al render inicial. 97. Transiciones y claves de los elementos: En las transiciones que hemos visto hasta ahora sólo se ha involucrado un solo elemento por ejemplo, la transición de quitar imagen era un elemento de solo botón. También las opciones de texto lo desvanecemos adentro y afuera, aunque éstos tenían muchos elementos anidados por dentro, seguirán siendo una forma como el principal elemento exterior. También podemos transitar entre dos elementos separados. Un acabado de necesidad común es cuando se usa v-if y v-else. Voy a volver al primer proyecto donde también podemos aplicar esto. Pero primero voy a copiar la animación de escala de la app.vue de su archivo. Bajar al CSS, suavizar la escala, entrar activo. De hecho, renombramos esto a personalizado, pero por ahora solo copiemos esto y cambiemos esto en tan solo un momento. Ahora abramos la aplicación de la lista de elenco desde temprano en el curso. Arrastre el proyecto al estudio visual. Entonces vamos a abrir esto haciendo doble clic en la página del índice. Vamos a trabajar en esto en el archivo index.html. Tenemos una declaración if else para mostrar los nombres añadidos a la lista, que está justo aquí abajo. Tanto estas declaraciones if como la sección else a continuación muestra un div. Esta sección if muestra el nombre. Si alguno de los nombres que están disponibles dentro de la matriz de nombres de lista de invitados. Si no, entonces tenemos un div separado justo debajo, que dice el texto de ningún nombre agregado aún. Esto es perfecto para cambiar entre estos dos elementos div. Para ello, todo lo que necesitamos hacer es agregar nuestro conocido mapeador de transición. Cerremos esta barra lateral para más espacio. Entonces justo debajo del div con la clase de bloque de tarjetas. Añadamos el envoltorio de transición. Hagamos algo de espacio, luego después de los no nombres agregamos adjetivo. Podemos encerrarlo, así como eso. Ahora podemos agregar el nombre de escala para vincular esto con el CSS de animación que agregamos antes, así que agreguemos nombre a la etiqueta de apertura de escala. Entonces en ningún app.css. Después podemos añadir el CSS que copiaste de todos los proyectos anteriores. Todo lo que necesitamos hacer es reemplazar personalizado con el nombre de la escala o para el enter activo y también para la licencia activa así que guarde eso. Ahora hemos abierto esta página de índice en el navegador para luego refrescar. Podemos agregar un nombre a la lista de invitados y luego enviar. Podemos ver que el nombre se agrega igual que antes. No podemos ver ninguno de estos escalados en efecto. Esto claramente no funciona. El motivo por el que no funciona es porque estamos cambiando entre dos elementos div con el mismo bloque if else. El problema siempre surgirá cuando ambos elementos sean iguales. Si son etiquetas div o alguno de los elementos. Para solucionar esto, necesitamos otra clave para cada elemento, por lo que ver JS puede distinguir entre ellos. Volvamos a la app. Entonces dentro del bloque v-if, voy a añadir una llave y vamos a llamar a esto nombres. Entonces en el segundo bloque para la sentencia else, mayoría no agregará una segunda clave con nuestro nombre de lista vacío. Este puede ser cualquier nombre que quieras, así que dale a eso un guardado. Ahora si volvemos al navegador y luego recargamos, agreguemos un nombre a la lista e ingresemos. Ahora podemos ver que tenemos la escala en transición. Se ve un poco extraño porque estamos transicionando el div de pliegue en lugar de solo un nombre. Pero podemos ver claramente que ahora está funcionando. Recuerda si estamos transitando entre dos elementos que no son los mismos, como elementos AP y un div, no necesitaremos agregar esta clave. Si agregamos más nombres, se puede ver que la transición no aplica después del nombre. La transición con listas funciona un poco diferente, y veremos cómo hacerlo a continuación. 98. Transiciones de grupo: En el último video, mencionamos agregar transiciones a una lista, como cómo lo hacemos aquí con el v for loop, funciona un poco diferente. Empecemos moviendo la transición para rodear solo v for loop. Cortemos la etiqueta de transición de apertura. Entonces voy a agregar esto justo después de las declaraciones v if, comenzando por ahí y luego la etiqueta de transición de cierre pero también recorte esto, y luego pegue esto justo después del bloque para el bucle for. [ inaudible] y abramos esto dentro del navegador y actualicemos. Vamos a probar esto. Empecemos agregando algunos nombres. Añadamos una segunda. Podemos ver que sólo el nombre que agregamos ha aparecido en la Lista de Invitados. Esto se ve un poco extraño. Abramos la consola y veamos qué está pasando. Haga clic derecho y vaya a Inspeccionar. Actualicemos y abramos la consola, así que agreguemos un nombre y una respuesta. Se puede ver que no hay error ahí. Intentemos agregar un segundo nombre. Ahora vemos un error rojo. Las opiniones son la consola. Abramos esto. El mensaje de error nos da una pista de cómo podemos solucionar esto. Dice que la transición sólo se puede usar en un solo elemento. Necesitamos usar grupo de transición para listas. Vamos a darle una oportunidad. Cambiemos la transición para ser grupo de transición. Intentemos escanear en el navegador. Aparece el primero, y luego el segundo también aparece, y no vemos ningún mensaje de error dentro de la consola. Hay una diferencia al usar grupo de transición. Se renderizará un elemento span circundante a nuestra lista. Podemos ver esto si volvemos a abrir las herramientas de desarrollo e inspeccionamos los elementos de nombre. Haga clic en el Inspector, y luego pase por encima de los elementos de nombre. Selecciona cualquiera de estos. El primero está bien. Hagamos un poco más de espacio. Ahora si miramos el código dentro de las herramientas de dev, estos son tres nombres de A, B, C, que acabas de agregar, y también tienen el span ta, que está rodeando a todos estos tres nombres. Sabemos que no pusimos esto en el código porque aquí no podemos verlo. Al utilizar los elementos de transición normales, esto no representa un elemento. Sí tenemos que estar al tanto de esto al usar grupo de transición. Nosotros sí aunque tenemos control sobre qué elemento sí utiliza. No estamos restringidos a usar solo elementos de span aseados. El tipo de elemento se puede cambiar agregando atributos de etiqueta, y esto se hace dentro de la etiqueta de grupo de transición de apertura. Justo después del nombre, también voy a añadir los elementos de etiqueta. Añadamos una etiqueta p por ejemplo. Esto cambiará el lapso para ser un elemento p. Volver abrir herramientas de adaptación. Vamos a darle una oportunidad a esto. Vamos a refrescarnos, y luego necesitamos agregar un nombre. Añadamos nombre ahí, haga clic en el 'Inspector' y seleccione nuestro nombre. Ahí tengo nombre justo ahí Chris, y ahora tienen una etiqueta p circundante en lugar del lapso. Voy a eliminar este atributo de etiqueta como span, no está estropeando nuestro CSS o diseño, así que está bien salir ahí. Solo quería mostrarte cómo hacer esto en caso de que te topes con algún problema. El último que quizá ya hayas visto es la primera vez que añadimos a la lista, el nombre no está animado. Vamos a cerrar las herramientas de desarrollo. Añadamos nuestro nombre de pila, y puedes verlo salta directamente sin animaciones suaves. Este problema se encuentra dentro de nuestra condición if. El tránsito sólo se aplica si el derecho de nombres es mayor que cero en lugar de igual a. Para solucionar esto, podemos refactorizar nuestro código y darle a conocer el trabajo, pero más compacto para. En primer lugar vamos a copiar este div de apertura completa con condición if, después quiero eliminarlo. También quitando el div de cierre. Ahora esta sección más, queremos quitar esto y pegar en las declaraciones if que acabamos de copiar de antes. Ya no necesitamos la llave, así que podemos quitar esto. Todo lo que quiero hacer es reemplazar el símbolo mayor que por los iguales. Esto hará que el texto sin nombres añadidos siga apareciendo cuando la matriz Names sea cero. Entonces cualquier otra cosa incluirá los nombres en el div anterior. Ahora ojalá podamos salvar esto y ahora deberíamos trabajar. Dale una actualización, y veamos esto en acción. Agrega un nombre de pila, y ahora podemos ver la transición, nuestro segundo nombre, y así sucesivamente. Todo esto está funcionando bien. Si volvemos al inicio, podemos ver nuestro texto sin nombres todavía se agrega cuando no hay nombres dentro de la matriz, entonces es reemplazado por cualquier nombre que se sume con animaciones, todo mi trabajo. 99. Clase V-move y nombres de transición dinámicos: Si recuerdas antes en el curso, cuando creamos la app Lista de invitados. Lo configuramos, por lo que los nombres añadidos están ordenados alfabéticamente. Si añado a, b, y luego c. Entonces si añadimos a otra vez, podemos ver esto se coloca al principio y todo el resto se mueve a través para dar paso, lugar de que estos nombres simplemente saltando por el camino. Este movimiento de los elementos también se puede animar usando una clase v-move. V movimiento funciona como clases de transición que ya hemos mirado. Sustituimos la v por el nombre que desea agregar en el grupo de transición. Dentro de nuestra app, ya tenemos un nombre de escala. Esto creará un nombre de clase de movimiento de escala, que podemos utilizar en un archivo CSS. Entonces pasemos a la app, .CSS. Voy a añadir esto ahora. Después agrega esto justo encima de los marcos clave. Entonces escala-movimiento. Entonces quiero agregar una transición, establecer la transformación a lo largo de 1 segundo. Por lo que con una nueva clase, somos libres de agregar cualquier transición que queramos. Yo sólo voy a transitar el movimiento de 1 segundo para hacer el movimiento un poco más suave. Veamos cómo se ve esto en el navegador. Entonces vamos a añadir a, b, y luego c. Ahora si agrego a de nuevo, vemos unos efectos suaves agradables para el b. Ahora moviéndonos fuera del camino. Entonces esto ahora se ve mucho mejor. Ahora tenemos esta transición suave cuando se agregan nuevos artículos. Una última cosa antes de envolver este video es que los atributos de nombre que agregamos a la transición también pueden ser dinámicos. Podemos usar ya sea v bind, como teníamos que hacer en el pasado, o también podemos usar el más corto y el colon para albergar la propiedad del estado dentro de la etiqueta de aberturas. Añadamos un colon para que esto sea dinámico. Entonces podemos configurar esto como una propiedad de datos para cambiar su nombre. Entonces, en lugar de escala, si llamáramos a esto el efecto1, por ejemplo. Entonces podemos configurarlo como una propiedad de datos. Pasemos al app.js, y podemos agregar esto dentro de nuestros datos. Por lo que dentro de las etiquetas de datos de apertura y cierre, voy a sumar estas en el porcentaje de capacidad del evento. El nombre fue efecto1. Podemos añadir nuestro nombre de báscula de nuevo aquí dentro. Por lo que este es sólo un ejemplo básico utilizado en nuestro nombre de transición de escala. Para utilizar el CSS existente. Podríamos resolver múltiples transiciones dentro del archivo CSS y aplicarlas en función del nombre de la propiedad de datos. Por ejemplo, podríamos tener una casilla de verificación o seleccionar entrada para permitir al usuario cambiar el tipo de transición. Así que presiona guardar, y vamos a refrescarnos dentro del navegador y comprobar nuestra transición a escala todavía funciona. Todo todavía parece estar funcionando correctamente ahí. Además, este enlace también funcionará sobre atributos también, como los ganchos de JavaScript. Para que pudiéramos volver a nuestro grupo de transición dentro de la página de índice. Podríamos hacer algo como ante-enter, establecer esto como un valor o dos puntos enter, y hacer lo mismo justo aquí. Esto hace que todos estos ganchos y transiciones sean realmente flexibles. A pesar de que sólo hemos agregado transiciones y animaciones relativamente simples a esta app, pueden marcar una gran diferencia al final haciendo que nuestra app se vea mucho más pulida y completa. 100. Sección final: Transiciones y animaciones: Enhorabuena por llegar al final de este apartado. Espero que hayan disfrutado aprendiendo todo sobre cómo podemos agregar transiciones y animaciones a nuestros proyectos. Esperemos que ahora pueda ver que incluso con solo agregar algunos pequeños efectos a nuestras aplicaciones, realmente puede terminarlos y hacerlos lucir y sentirse mucho más agradables para el usuario. Esta es otra gran característica del framework Vue.js y espero que realmente hayan disfrutado de esta sección. 101. Gracias: Enhorabuena por llegar al final de este curso. Por ahora, deberías estar sintiéndote mucho más confiado en crear aplicaciones usando vue.js. Hemos cubierto mucho hasta el momento incluyendo, aprender a instalar vue y a utilizar la instancia vue junto con todas las propiedades que podemos agregar a esta Instancia, como datos, computados, métodos y filtros. Durante la construcción de estos proyectos, también hemos mirado el renderizado de listas y condicionales, enlace de datos bidireccional, y también las directivas que vue.js nos proveen, por mencionar algunos. Luego buceamos un poco más profundo configurando un mejor flujo de trabajo mediante el uso de herramientas de construcción modernas como el vue-cli, donde, empaca y también burbuja. Esto nos permite dar un paso hacia la construcción de aplicaciones más grandes y mantenibles dividiendo nuestro código en componentes, un dato que pasa utilizando diversos métodos. Gracias por tomar este curso y adiós por ahora. 102. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Gracias una vez más, buena suerte, y ojalá, los veré de nuevo en la futura clase.