Vue 3 completo para principiantes

1. Te damos la bienvenida a la clase: Hola, bienvenidos a este curso. Este curso te va a enseñar todo lo que necesitas saber para empezar con Vue.js y también todas las características nuevas y mejoradas con Vue versión 3. Construirás estos cuatro proyectos mientras aprendes de más de 130 lecciones de video HD claras y organizadas, cada una con subtítulo y también el código fuente para cada etapa del proyecto. Por lo que no deberías tener ningún problema si te quedas atascado. ¿ Quién soy yo? Mi nombre es Chris y soy desarrollador web del Reino Unido. Construí mi primer sitio web de la historia hace más de 20 años. La web ha cambiado bastante durante este tiempo, pero mi pasión por el aprendizaje y también por la enseñanza de esto aún permanece. También he usado Vue.js desde los primeros días, así que tengo mucha experiencia tanto usando para mis propios sitios web como también con la enseñanza de esto también. Yo estoy emocionado por este, y te veo en la clase. 2. Lo que necesitarás para este curso: Para empezar con este curso, hay muy poco que necesitarás. Si estás viendo este video, las posibilidades son, ya tienes la mayoría de las cosas que necesitas ya configuradas. Vamos a necesitar un navegador web y voy a estar usando Google Chrome a lo largo de este curso pero puedes usar cualquier otro navegador importante. También para editar el código, necesitaremos un editor de texto. Voy a estar usando Visual Studio Code y puedes encontrar el enlace justo aquí. Esto también es gratuito de usar también. Si hay algo que necesitamos largo camino durante el curso, lo descargaremos. No habrá compras adicionales que hacer, así que todo lo que necesitas es un afán por aprender Vue 3. Voy a empezar esto en el siguiente video. 3. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no acostumbrarse a seguirlo solo por el bien de quitarse otra conferencia. Tómese el tiempo para procesar cada lección, revise el código que escriba y piense en cómo puede abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos, y esto te da la oportunidad hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase, e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare. No sólo voy a comprobarlo, sino que también inspirará a los compañeros de estudios también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña Proyecto y Recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 4. ¿Qué es Vue.js y qué puede hacer?: En lo más fundamental Vue.js es un marco para la construcción de interfaces de usuario. Su principal trabajo es manejar una parte de aplicación de sitio web con la que el usuario ve e interactúa. Toma algunos datos y los muestra al usuario. Dado que Vue es responsable de la interfaz de usuario, necesita algunos datos con los que trabajar. Los datos que recibe pueden venir de cualquier forma, como de un servidor web, una API. Podemos almacenarlo dentro de nuestra aplicación y también desde la entrada del usuario también. Para principiantes, puede ser muy amable ponerse en marcha, solo necesitando algo de HTML, CSS, y un poco de conocimiento de JavaScript. Tan pronto como te pongas más cómodo con Vue.js y para usuarios más avanzados, también apreciarás lo rápido y escalable que puede ser Vue. Junto con un ecosistema maduro también que extiende el núcleo Vue.js si es necesario. El núcleo Vue.js en sí es muy ligero y se puede utilizar desde el simple control de una sola parte de un sitio web, hasta el manejo de una aplicación compleja de una sola página. Si no estás seguro de lo que es una aplicación de una sola página todavía, habrá más sobre esto más adelante en el curso. En su más simple, imagina si tuviéramos un sitio web de portafolio existente, que fue creado con solo HTML y CSS. Más abajo de la línea, es posible que desee agregar algunas nuevas características o secciones a este sitio, como nuestros recientes tweets. Podríamos recorrer el largo camino y copiar manualmente todos nuestros tweets en nuestro archivo HTML cada vez que crea una nueva publicación o un nuevo tweet, o probablemente quisiéramos manejar esto con la API de Twitter para tirar de nuestras publicaciones recientes automáticamente. Con tal caso de uso podríamos usar Vue.js para controlar solo una parte de nuestro sitio, o incluso varias partes si quisiéramos. Todo lo que necesitamos hacer es enlazar el enlace CDN Vue.js, que es un enlace a la biblioteca Vue. El enlace CDN se inserta en un archivo HTML, igual que con cualquier otro enlace CDN. Entonces podemos acceder a las características de Vue desde un archivo JavaScript. Volveremos a esto y le daremos una oportunidad muy pronto. Junto con controlar una parte de la interfaz de usuario, Vue también puede controlar nuestra aplicación de página completa también. Usaremos una herramienta en el próximo proyecto llamado Vue CLI, la cual nos permitirá crear estas aplicaciones, y como mencioné antes, necesitamos una fuente de datos como algunos productos y [inaudibles] ellos más allá del Vue que puede entonces mostrarlos al usuario de cualquier manera que queramos, junto con manejar cualquier cambio de datos y actualizaciones a lo largo del camino también. 5. Descripción de los cambios de Vue 3: Vue.js versión 3 es una reescritura importante. Uno que surgió por múltiples razones. El código base para Vue 2 fue rápido, eficiente en rendimiento, pero siempre hay margen de mejora en el diseño actual. Liderado por aprender y descubrir cosas nuevas sobre el proyecto, junto a la capacidad de acceder ahora a nuevas características de JavaScript que están disponibles dentro de los navegadores modernos, este video te va a dar una visión general de algunos de los cambios clave . Entonces más adelante cuando rodamos un poco más de código Vue.JS con una mejor comprensión de cómo funciona, habrá algunas secciones más dedicadas para brindarnos un poco más de detalle. A lo mejor no es lo que una tumba que si algo de esto no tiene sentido en este momento. En primer lugar, quiero abordar un gran error sobre Vue 3. Desde el anuncio de la nueva versión, mucha gente piensa que todo lo que saben hasta ahora sobre Vue está obsoleto. Esto no es cierto. Puedes usar la biblioteca Vue 3 y aun así las apps Vue correctas más o menos de la misma manera que lo hiciste en Vue 2. Muchos de los cambios o bajo el capó mejoras de rendimiento que el desarrollador no tiene conocimiento directo, Vue 3 sí tiene algunas características también, pero estas generalmente son adicionales. decir, si tienes algún conocimiento Vue hasta ahora, todo esto es totalmente transferible. Una de las grandes mejoras de Vue versión 3 es el rendimiento. Esto se ha mejorado de múltiples maneras, y una de las cosas clave es mediante el uso de una función ES6 llamada proxy. Esto da como resultado un sistema de detección de cambios más rápido y eficiente. Esta es una parte clave en la reactividad Vue 3, que es un proceso de Vue reaccionar ante cambios y actualización donde sea necesario. Por ejemplo, si un usuario actualizara una cantidad de artículo en un carrito de compras, también quisiéramos que el precio total se actualizara también. Este es el proceso de reaccionar ante un cambio. En Vue 2, cualquier dato que teníamos al subir es automáticamente reactivo, puede faltar algunos cambios de datos, y hay otra parte de la aplicación que se basa en ello. Esa parte también se actualizará. Si el usuario cambia su nombre de usuario, y esto se mostraba en la sección de encabezado, también actualizaría su automático. una de las adversidades del sistema de reactividad Vue 2 era si se agregaba una nueva propiedad a Vue.JS después de que la aplicación se hubiera cargado, entonces no sería reactiva. Esto es algo que los proxies resolvieron y los veremos más detallados más adelante. Reducir todo el tamaño del código también puede mejorar las cosas también. Cuando usamos un framework, a menudo no necesitamos todas las características que proporciona. Significa que cuando una aplicación se carga, posible que estemos descargando JavaScript adicional o activos que no necesitamos para nuestro proyecto. Para ayudar con esto, Vue 3 es más modular. Por lo que herramientas más modernas pueden dejar de lado cualquier código innecesario, pero usando el tamaño del paquete. Otra gran mejora es una reescritura del DOM virtual. Nuevamente, hay un video dedicado más adelante una vez que nos ponemos más cómodos con Vue.JS, pero por ahora la actualización dom virtual significa que ahora se puede comprobar de manera más eficiente qué elementos han cambiado después de una actualización. La biblioteca Vue 2 fue escrita en JavaScript regular. Con el tiempo, se dio cuenta de que un proyecto de este tamaño se beneficiaría con la introducción de tipos, lo que ayudará a reducir un riesgo de errores. A pesar de que la causa Vue 3 se reescribe usando mecanografiado, los desarrolladores pueden escribir código incluso en JavaScript regular, o el ahora totalmente soportado mecanografiado 2. Typescript estaba disponible en Vue 2 pone mucho más profundamente integrado en Vue 3 y también requiriendo no adicional [inaudible]. El API de composición es probablemente la característica más comentada en Vue versión 3, y también la única característica que ha causado más malentendidos sobre cómo Vue 3 nos obligará a escribir aplicaciones de una manera completamente nueva. Como se mencionó anteriormente, la API de la competencia no tiene la intención de reemplazar todo lo que sabemos sobre Vue hasta ahora. Se pretende ser puramente aditivo y nos da una manera hacer nuestro proyecto más mantenible y reutilizable a medida que crecen. Vamos a sumergirnos en esto mucho más adelante. Además de esto, también tenemos algunas características de Vue que explorar, como portales, fragmentos, suspense, y mucho más. El clave para llevar es Vue sigue siendo Vue independientemente de si se trata de la versión 2 o 3, pero la versión 3 tiene algunas buenas mejoras de rendimiento junto con algunas características adicionales que puedes usar. Ahora ten un poco de fondo, pasemos a escribir algún código Vue. 6. Código fuente del proyecto: Al aprender una nueva habilidad y codificar nuestros cuatro proyectos, probablemente habrá un punto en el que te quedarás atascado. A veces tu código simplemente no funcionará, y no puedes ver ese error. Ahora para ayudar con esto proporcionado con el curso después de cada una de las conferencias es el código fuente en cada etapa individual, y puedes descargar esto desde GitHub. Dentro de GitHub y mi perfil, que es chrisdixon161, y luego /vue-3-curso. Aquí donde encontrarás todo el código fuente del proyecto para este curso. Debería ser bastante fácil de navegar. En la parte superior, tenemos los primeros cuatro proyectos numerados 1-4, y estos están en el mismo orden que los llevarás durante el curso. Por ejemplo, si te pegas en el proyecto de cartera, haz clic en esto, y luego veremos en orden todas las conferencias que pasarán por estos proyectos. Están numeradas, por lo que tenemos el número 2, que es el número de sección y el video 1, sección 2, video 2, y luego el nombre del video. Puedes hacer clic en esto, y ver el código final después de este video, e ir a cualquiera de estos archivos. A la par de esto, si volvemos a la raíz de nuestro repositorio, también tenemos los archivos de inicio para los cuatro de nuestro proyecto. Los archivos de inicio van a asegurar que estamos en los mismos números de versión hora de progresar te dan un camino suave a lo largo de este curso, y vamos a echar un vistazo a cómo configurarlos a medida que avanzamos. Para acceder a estos, tenemos que dar click en este botón verde. Habrá un desplegable, y podrás descargar este repositorio completo como archivo ZIP. Entonces esto te dará acceso a todos estos arrancadores y a todas las muestras de código también. Adelante y descarga esto, y coloca esto en algún lugar conveniente como tu escritorio, y podemos agarrar los archivos de inicio cuando sea necesario. 7. Introducción a la sección: primer vistazo a Vue.js: Para dar inicio a tu viaje de aprendizaje Vue, vamos a aplicar muchos conocimientos que aprenderemos durante esta sección en un proyecto. Este proyecto será relativamente sencillo. Descargaremos un HTML, iniciaremos un archivo, y luego comenzaremos el proceso de conversión de este archivo para usar Vue.js. Aprenderemos todos los fundamentos que necesitarás conocer, como eventos vamos a echar un vistazo al ciclo de vida del Vue, encontrando datos, también veremos listas, métodos, y mucho más. Vamos a saltar y te veré en el próximo video. 8. La instancia de Vue: En un video anterior, mencionamos Vue.js y controlamos ya sea todas las partes de una interfaz de usuario. Para obtener algo de experiencia de Vue.js, ahora vamos a tomar un simple sitio HTML, que es un sitio personal, y aplicar algunos Vue.js para crear una sección de blog. Podemos saltar a Vue.js, el proyecto de inicio está disponible para descargar desde el repositorio de GitHub. Para encontrar esto, debes dirigirte a este enlace que es github.com/chrisdixon161/vue-3-curso. También puedes encontrar esto como repositorio de pin de mi perfil. Una vez que te dirijas a esta sección, vamos a tener todo el código que necesitas para este curso. Actualmente solo tenemos el starter de portafolio, pero tu versión tendrá todo el código de muestra que se necesita para otros proyectos, junto también el código final para cada video para que podamos comparar si te quedas atascado. Lo que tendrás que hacer es descargar todo este repositorio. Por lo que si entras en la sección de códigos, puedes descargar esto como un archivo zip. Abramos esto. Entonces de aquí, podemos extraer toda la información que necesitamos. Entonces, solo coloquemos esto en el escritorio y abramos esto. A partir de aquí, tenemos el iniciador de portafolio, que es solo el HTML básico y CSS, que vamos a utilizar para probar cómo funciona view en un proyecto simple. Lo que necesitarás hacer es cambiar el nombre de esto, solo voy a mantener esto como cartera, y luego mantenerlo separado del resto del código. Abre esto en código de Visual Studio o tu editor de elección. Entonces dentro de aquí, todo va a ver es una página de índice, que es solo algún HTML regular que tenemos de nuestra sección de cabeza, vamos a enlazar a una fuente, enlazamos a unas hojas de estilo proporcionadas, tenemos una sección básica de cabecera la cual tiene un título, y luego algunos enlaces de navegación. Entonces tenemos esta sección de blog. Esta sección de blog apenas tiene dos artículos HTML estáticos, voy a hacer esto dinámico con Vue.js. Lo importante ahora está abajo en la parte inferior, tienes un script que es un enlace a la CDN Vue, por lo que este es un enlace a la Vue Call Library que vamos a utilizar para explorar algunas de las características de Vue. Esto significa que no necesitamos hacer nada especial como descargar paquetes. Todo lo que estamos haciendo aquí es vincularlo directamente a Vue.js. Entonces podemos incluir algunas de las características en nuestro proyecto. Para empezar con Vue.js, vamos a crear un nuevo archivo, que va a ser un archivo JavaScript, y voy a llamar a esto el script.js. Podemos enlazar esto igual que cualquier script regular hacia abajo en la parte inferior de nuestro HTML, y agregamos el atributo fuente que se va a enlazar con el script.js. También podemos abrir esta página de índice arriba en el navegador, podemos hacer doble clic en el índice o archivo HTML dentro de nuestro proyecto. O si usa un código de Visual Studio, podemos hacer clic derecho en esta pestaña y luego copiar la ruta, pegarlo en. Este es el proyecto de inicio, que es sólo HTML. Vamos a empezar por convertir estas secciones HTML para que sean controladas por Vue.js. Para ello, nos dirigimos al archivo de script. El primero que tenemos que hacer es crear una nueva instancia de Vue. Hacemos esto con Vue, V mayúscula, y luego usamos un código de función para createApp. Tenemos acceso a Vue.CreateApp ya que estamos usando el link CDN hacia abajo en la parte inferior de nuestra página de índice. En los próximos videos, también pasaremos un objeto Options que también es instancia. Pero por ahora, necesitamos montar esta aplicación Vue a nuestra página de índice. Para ello, necesitamos decirle a Vue exactamente dónde queremos montar. Podríamos controlar la página HTML completa si quisieras. Todos pueden montarse a solo un cierto camino si lo quisieras. Por ejemplo, esta instancia de Vue va a controlar nuestra sección de blog, que es un envoltorio para todos nuestros artículos. Tendrá esta sección con la idea de blog, así que vamos a hacer uso de esto y decirle a Vue.js que esta sección es la parte del HTML que se quiere controlar. Esto tiene el blog id, así que todo lo que tenemos que hacer es ir a CreateApp, y luego llamar al método mount donde vamos a pasar en los elementos a los que se quiere enlazar. Esto es igual que los selectores CSS regulares, por lo que si esto es una idea, usamos el hash, usamos el [inaudible] o podemos apuntar directamente a cualquiera de nuestros elementos por nombre, lo que podríamos apuntar a esta sección, y queremos apuntar a el blog. Si bien aquí estamos apuntando a un elemento de sección, no importa en qué tipo de elementos montemos. Podría ser la sección del cuerpo, podría ser DIV, cualquier cosa está completamente bien. También podríamos crear múltiples instancias Vue también. Si duplicáramos esto, podríamos volver a llamar a Vue.CreateApp, pero esta vez podría montar a una sección diferente. Por ejemplo, si queríamos tener esta instancia de Vue para controlar el blog, y luego queríamos controlar también la sección de encabezado, todo lo que necesitamos hacer es pasar en nuestro selector diferente y vamos por el elemento de cabecera, que es la sección de encabezado que contiene nuestro encabezado de nivel uno, junto a nuestros enlaces de navegación. También podemos cambiar este título para que sea nuestro nombre, y también el mismo para el título de la página también. Esto significa que ahora hemos creado dos aplicaciones Vue separadas las cuales son completamente independientes y pueden tener sus propios datos, como veremos en el siguiente video. 9. Datos y listas: Con nuestra app ahora montada, ahora necesitamos algunos datos con los que trabajar. Para ello, vamos a agregar algunas opciones para crear app. Aquí adentro, vamos a pasar en un objeto, y este objeto va a ser donde vamos a estar trabajando a partir de ahora. La primera opción que se va a ir en este objeto es la propiedad de datos, que suena se utiliza para contener los datos de nuestra aplicación, que a veces se conoce como estado. Estado es una función que va a devolver un objeto. Esto va a contener todas nuestras propiedades de datos, que se puede pensar como un lugar para almacenar la información que necesita nuestra aplicación. Al igual que haríamos con las variables. Si has usado Vue 2 en el pasado, la propiedad de datos podría declararse como una función como esta o también un objeto, tanto el Vue libre y ahora debe declararse siempre como una función. Volver a nuestro índice, nuestro HTML. Recuerda que tenemos una app de Vue montada tanto en la sección de encabezado como también en la sección de blog justo debajo. Lo que significa que ahora podemos usar el control Vue [inaudible] cualquiera de los datos dentro de estas dos secciones. Actualmente, trabajamos en, dentro de la sección de encabezado, lo que significa que podemos generar nuestras propiedades de datos dentro de esta sección de encabezado. El primero que voy a controlar desde la aplicación Vue va a ser el título de cartera. Entonces si ponemos nuestro nombre afuera aquí, y entonces podemos almacenar esto dentro de una propiedad llamada “nombre”. Esta será una cadena, así que agrega esto dentro de las cotizaciones. Ahora, en lugar de tener este “nombre” como HTML codificado, ahora podemos usar esta propiedad de datos llamada nombre. Pondré esto en cualquier parte dentro de nuestra sección de cabecera. Podemos utilizar las llaves dobles y luego acceder a nuestra propiedad de nombre. Pasemos al navegador y comprobemos que esto sigue funcionando, ya que esto está vinculado o montado a nuestra sección de encabezado, este valor de nombre no se puede usar en ningún lugar fuera de esto. Si vas justo debajo de nuestro encabezado e intentas enviar esta variable de nombre o al navegador, vemos que esto se genera como una cadena regular en lugar de ser reemplazado por el nombre real, propiedad de datos. El beneficio de declarar nuestros datos dentro de la sección de datos, en lugar de HTML codificado duro, es que los datos son reactivos, lo que significa que si alguno de los valores dentro de aquí cambiaría, todas las secciones HTML que utiliza los datos se actualizarían al instante. Este es un ejemplo bastante simple usando una cadena de texto. Pero, ¿y si tuviéramos múltiples elementos, como una matriz? Bueno, sí tenemos tres valores dentro de nuestra lista desordenada. Tener el hogar, el portafolio, y también la sección de contacto conmigo. De vuelta al script, ahora podemos ver cómo se vería esto como una propiedad de datos. El segundo valor separado por una coma va a ser enlaces. Voy a configurar esto como una matriz. Este primero va a estar en casa. El segundo enlace fue portafolio, y el tercero de contactarme. Dado que se trata de una matriz que contiene múltiples valores, sí tenemos algunas opciones de cómo podemos generar esto. La opción más básica es generar esto directamente como una propiedad de datos. Podríamos emitir el nombre de los enlaces. Esto se emitirá directamente al igual que una cadena. No obstante, es poco probable que esto sea lo que queremos. En cambio, podríamos acceder a cada uno de estos enlaces de forma individual. Al igual que una matriz regular, podríamos usar las llaves dobles, acceder a nuestros enlaces, y luego acceder a cada enlace individual por el número de índice. El primer valor dentro de una matriz es cero, el segundo es la posición uno, y el tercero de contactarme. También va a haber enlaces. Nuevamente, esto funcionará perfectamente bien, pero es un largo camino de hacer las cosas si tienes muchos elementos de matriz, una forma más eficiente de tratar con elementos de lista como este es usar un bucle for. Hasta nuestra lista desordenada, podemos usar un V for loop, que va a ser link y links. Enlaces con la S es propiedad de nuestra fecha almacenada en nuestro script, y entonces se actualizará el valor del enlace para cada bucle. Por lo que la primera vez que recorremos estos tres elementos, el valor del enlace se establecerá a casa. La segunda vez que recorre se ajustará a portafolio, y la tercera y última vez que salga, esto se pondrá en contacto conmigo. v-for es una directiva Vue.js, que es un atributo especial que agregamos a nuestro HTML. Las directivas comenzarán con un prefijo V dash. Y este en particular permite a Vue.js recorrer una propiedad de datos en particular. También veremos más directivas durante el curso. Dado que tenemos tres elementos dentro de nuestra matriz de enlaces, el contenido dentro de aquí se repetirá tres veces. Por lo que efectivamente hemos repetido nuestra lista desordenada tres veces separadas. Pero esto tampoco es lo que queremos. Entonces en cambio podemos cortar el bucle v-for y en su lugar solo repetir nuestro ítem de lista tres veces. Podemos quitar el segundo y tercer ítem de lista, dejando solo uno en su lugar, que vamos a repetir para cada ítem dentro de enlaces. Podemos entonces reemplazar esto por nuestra variable de enlace, guardar esto, y nuestros tres enlaces y ahora de nuevo en su lugar. Entonces solo para recapitular, tenemos tres ítems dentro de los enlaces. El primer tiempo recorre, enlace se establecerá a casa. Por lo que esto será reemplazado por casa. La segunda ocasión que será sustituida por cartera y demás. Las propiedades de datos también pueden estar sobre tipos de datos, como booleanos y también números, y también objetos a los que vamos a descubrir a continuación. 10. Bucle con objetos: También podemos trabajar con objetos en Vue.js. Vamos a hacer esto para agregar algunos posts a nuestro ejemplo. Para ello, podemos utilizar la segunda instancia de Vue que creamos para nuestra sección de blog en este script. No podemos configurar el objeto de opciones para el CreateApp cual se monta a través de nuestra sección de blog como un objeto, y vamos a trabajar una vez más con la propiedad de datos. Esta es una función igual a la anterior, que va a devolver todos los datos que podemos utilizar en nuestra sección de blog. Dentro de aquí vamos a acceder a nuestros posts que va a ser una matriz. Cada una de estas publicaciones se va a almacenar dentro de un objeto el cual va a tener una identificación, un título, y la sección de cuerpo. El primer ID va a ser el valor de uno separado por una coma, el título de la entrada del blog. Esto es solo [inaudible] para que puedas agregar cualquier cosa que quieras a esta entrada de blog. El tercer elemento es el cuerpo, que es el contenido real de nuestra publicación de blog. Voy a agarrar el contenido de nuestra página de índice. A modo de cuerda, podemos pegar esto dentro de la sección del cuerpo. Si ves algún error al igual que vemos aquí, esto sería porque estamos usando texto multilínea. Podríamos ir por cada una de estas líneas forma individual y llevarlas a estar todas a la misma línea. Al igual que esto, pero esta no es una forma eficiente de hacer las cosas. O otra forma de hacerlo es usar los backticks. Entonces, en lugar de estas citas, podríamos sustituirlas por el icono de retroceso. Esto ahora nos permitirá usar texto multilínea. Tan solo para darnos algún contenido con el que trabajar, voy a copiar este objeto, y luego pegaré esto para una segunda entrada de blog. El DNI de dos, cambia el título. Este va a estar usando el CDN de Vue. Después el tercero, que tiene el DNI de tres. Este va a ser como domine Vue, que puedes escribir cuando termines este curso. A pesar de que estas publicaciones son objetos , sigue siendo una matriz de objetos. Significado que podemos volver a usar la directiva V-for en nuestro HTML. Abajo a la sección de blog que estamos controlando con esta instancia de Vue. Tenemos dos artículos codificados duros. Por simplicidad, eliminemos el segundo. Ahora podemos usar un bucle V-for para repetir esto tantas veces como sea necesario. Queremos repetir el artículo. Por lo que podemos sumar la directiva V-for. Esta vez, esto será post en puestos. Recuerda que post es el nombre de nuestra matriz y la variable post es el nombre de cada elemento de la matriz. Ya podemos acceder a esto dentro de nuestro artículo. Dentro de las llaves dobles, podemos dar salida a nuestro post. Veamos cómo se ve esto en el navegador. Si damos salida al post, este es el valor de nuestro post objeto completo. Esto se repetirá tres veces. Ya que tenemos tres entradas de blog separadas, también es único. Tenemos el DNI de uno, el DNI de dos y el DNI de tres en la parte inferior. En lugar de acceder a esta entrada completa del blog, podemos escribir esto accediendo a cualquiera de estas propiedades. Este fue el título del puesto. Podemos acceder a esto con post.title. Entonces, en lugar de este texto dentro de los elementos p, podemos acceder al post.body. Todo esto funciona ahora perfectamente bien. Volver a nuestro script, si fuera a agregar muchas más propiedades de datos al igual que esta. Nuestra instancia de Vue puede rápidamente volverse realmente abarrotada. Para ayudar con esto, también podemos tomar nuestra matriz de objetos y colocar esto fuera de la instancia de Vue. Agarremos todo el contenido de la matriz, incluidos los corchetes. Agarra todo esto, dejando solo la variable post. Fuera de la instancia de Vue, podemos crear una variable JavaScript regular. A esto se le llama posts. Entonces, podemos establecer esto igual a nuestra matriz. Este post array ahora se puede referenciar hacia abajo dentro de nuestra instancia de Vue. Por lo que la propiedad de fecha de publicación puede ser igual a nuestra matriz de publicaciones. Comprobemos que esto está funcionando. Pasado al navegador. El post gratuito del blog sigue en su lugar. También estoy, usando la sintaxis de la propiedad abreviada ES6, ya que el nombre y el valor son ambos iguales, podemos acortarlo a solo el valor único, que también funciona completamente bien. 11. Listas de índices y claves: Por el momento, no estamos haciendo ningún cambio a ninguna de nuestras listas, por lo que Vue.js realmente no tiene mucho trabajo que hacer. No obstante, en las aplicaciones del mundo real nuestros datos pueden cambiar a menudo, ya sea de que el usuario agregue algo a un formulario o una actualización de nuestro servidor. Tal vez incluso un nuevo blogpost siendo agregado y actualizado con una API. Una vez que Vue reciba estas actualizaciones ya que utilizamos la propiedad de datos, actualizará nuestro HTML con un nuevo valor ya que las propiedades de los datos son reactivas. Esto es bastante simple para algo como una cadena de texto, pero ¿y si tuviéramos miles de blogposts? Imagina que borramos o actualizamos uno justo en el medio, ¿cómo lidia Vue.js con esto? El respuesta es usar un atributo especial llamado clave. Voy a añadir esto a nuestro blogpost, que está rodeado en el artículo. Justo después de nuestro ciclo v-for, podemos agregar en un atributo clave y establecer esto igual a un valor particular. Esta clave es una forma de proporcionar un identificador único a cada uno de estos elementos de la lista. Si tuviéramos cientos o incluso miles de blogposts, tener esta clave única permitirá a Vue, js identificar mejor cada elemento cuando llegue el momento de actualizar o reordenar. Si nunca usamos claves, tendrías que referirnos de nuevo a un algoritmo para detectar cualquiera de estos cambios. Esta clave debe ser única, como un ID de producto o para nuestro blog, también tenemos un ID único para cada blogpost. Echemos un vistazo. Contamos con un ID único el cual se almacena en esta propiedad ID. Podemos pasar en el post.id Si agregamos un atributo al igual que este, Vue.js leería este valor clave como una cadena llamada post.id En lugar de extraer los valores reales de la variable, que es el valor de uno, dos o tres. Si tuviéramos que insertar algún JavaScript o una variable, igual que usamos aquí. Tenemos que hacer dinámica esta clave. El modo de hacerlo es utilizar la directiva v-bind. Este es un prefijo que se ha ido a decirle a Vue.js que lea el valor dentro de aquí como una variable en lugar de la cadena de textos que es post id Esta es otra directiva Vue.js. Esto también se puede acortar para simplemente usar el colon. Esta es nuestra llave ahora cuidada. También al usar la directiva v-for, también podemos acceder al número de índice. Esta es la posición de cada uno de nuestros artículos dentro de la matriz. Nuestro primer blogpost es la posición 0, luego la posición 1 y así sucesivamente. Para ello, podemos envolver nuestra variable dentro de los corchetes así. Todavía podemos acceder al post, pero también podemos acceder al índice número 2. Si quisiéramos, podríamos dar salida al índice. Nuevamente dentro de los tirantes dobles rizados, tenemos la posición 0, la posición 1, y luego la posición 2. Esto también es igual que JavaScript, podemos agregar más uno. Este podría ser el primer valor, el segundo valor y así sucesivamente. Esto puede ser útil para cosas como numerar nuestros artículos que mostramos. Bueno, para nuestro blog, no se requiere ejercicio. También podemos quitar esto. Una de las cosas clave a tener en cuenta es, se recomienda no utilizar esta posición de índice como valor para nuestra clave. Esto se debe a que si no se suministra ninguna clave, haremos uso de la posición de índice de todos modos. Además de enlazar estos atributos clave, también podemos enlazar otros atributos también, que vamos a echar un vistazo a lo siguiente. 12. Atributos de enlazado: Hicimos un primer vistazo a los atributos de enlace en el último video usando la clave. Ahora vamos a pasar a mirar los atributos de clase y estilo vinculantes Vue. Para ello, podemos crear un DarkMode para nuestro blog el cual el usuario puede activar o desactivar. Para crear los estilos para este DarkMode necesitamos ir a nuestra hoja de estilos, y luego abajo en la parte inferior podemos agregar una clase DarkMode la cual vamos a activar o desactivar. Esto va a ser bastante sencillo. Podemos crear el fondo y ponerlo en un color más oscuro, el que voy a usar va a ser 38383a. Para compensar esto cambiaremos el color para que sea un valor más ligero del moke blanco. Para aplicar este DarkMode vamos a agregar esto como una clase, y rodeando todo nuestro contenido, como la sección de encabezado y nuestro blog tenemos este elemento div circundante. En la etiqueta de apertura, justo dentro del cuerpo, podemos agregar esto como una clase regular y esto aplicará nuestros cambios. Esto funciona bien pero necesitamos una forma de activar y desactivar esto, y también de integrar esto en nuestra aplicación Vue. Actualmente tenemos un pequeño problema el cual es que estamos usando Vue para controlar la sección de encabezado y también la sección de blog de forma independiente. Pero cuando activamos solo DarkMode queremos que esta clase se aplique al sitio completo. Podemos simplificar las cosas fusionando nuestras dos instancias Vue. Para ello todo lo que necesitamos hacer es agarrar nuestros posts de la segunda app, y luego pegar esto en la propiedad de datos para nuestra primera sección. Aquí no tenemos más datos, así que podemos quitar esta instancia completa y luego vamos a montar esto a la sección de cuerpo. Esto significa que la instancia de Vue ahora está controlando toda nuestra página web. El primer paso para permitir que esta clase sea activada y desactivada es establecer esto como una propiedad de datos. Una propiedad de datos va a ser un booleano, y quiero llamar a esto el DarkModeSet, que será un valor booleano inicial de false. Para conmutar dinámicamente la clase DarkMode en función de esta propiedad de datos en particular, necesitamos pasar nuestro atributo de clase como un objeto en lugar de como un atributo regular, así como esto. Dentro de aquí, necesitamos agregar un objeto usando las llaves. Solo queremos que esta clase oscura se aplique si la propiedad data que es DarkModeSet va a ser igual a true. Actualmente esto es falso, por lo que Vue.js no aplicará esta clase oscura. Podemos ver esto si actualizamos el navegador, la clase oscura ya no aplica. Pero si fuera para cambiar esto para que sea cierto, Vue.js debería entonces aplicar nuestra clase. Pero si actualizamos esto no vemos ningún cambio, y esto se debe a que al igual que cuando establecemos la propiedad clave antes, necesitamos enlazar esto como un valor dinámico. Actualmente, Vue.js está leyendo esto como una cadena, que podemos ver si entramos en las herramientas de desarrollo. Haré clic derecho e inspeccionaré la “sección de cuerpo” y luego inmediatamente dentro vemos que nuestra clase es salida como una cadena. Esta no es una clase válida, así que en cambio lo que vamos a hacer es usar la directiva v bind. O al igual que antes podemos acortar esto para que sea un colon. Ahora en lugar de una cadena esto se interpretará como JavaScript, y si actualizamos las herramientas de desarrollador veremos que ahora se ha aplicado la clase de dark, y esto también se ha aplicado a nuestro proyecto. Al lado de esta clase también podemos agregar propiedades de datos a estilos en línea también. Quitemos esto. Voy a configurar una propiedad de estilo regular que es solo HTML regular. Dentro de aquí podemos establecer el valor del color, vamos por un valor de hotpink. Esto es solo HTML regular, por lo que si actualizamos esto entonces se aplicará a nuestros proyectos. También podemos mover esta propiedad de color para ser una propiedad de datos también. Dentro del script vamos a establecer el TextColor para que sea el valor de cadena de hotpink. Entonces como hicimos con los atributos de clase, necesitamos pasar este estilo como objeto. El primer paso es rodear esto en las llaves y luego reemplazar esta cadena de hotpink por nuestra propiedad de datos que era TextColor. Esta es una variable, por lo que necesitamos enlazar esto usando v bind o la taquigrafía que fue el colon. Refresca, y esta vez nuestro estilo se ha aplicado desde la propiedad de datos. Si tuviéramos múltiples propiedades de estilo que quisiéramos agregar así, nuestro HTML rápidamente podría ponerse desordenado. En cambio podríamos eliminar esto, dejando en los atributos de estilo, y luego más en nuestro script podemos crear un objeto de estilo como una propiedad de datos. Podemos eliminar esto, y entonces en su lugar vamos a configurar nuestro darkMode.CSS usando los mismos estilos que aplicamos abajo en la parte inferior. Vamos a comentar esto y luego configurar nuestro fondo que era el valor hexadecimal de 38383a. También el color para el texto, que va a ser el moke blanco. Este objeto DarkMode ahora se puede colocar directamente como un atributo. Dado que su valor ya es un objeto, no necesitamos colocar en él las llaves. Esto sólo se puede agregar directamente en. Vamos a intentarlo. Nuestro DarkMode ya se ha aplicado. Incluso podemos añadir varios objetos de estilo también, por ejemplo si queríamos configurar una familia de fuentes base o algunos estilos base, podemos configurar un nuevo objeto, y vamos a configurar la FontFamily para que sea el valor del monosespacio. Si no estás familiarizado con agregar propiedades CSS con Javascripts, todas estas propiedades CSS necesitan convertirse en un caso. Si estuviéramos usando CSS directamente en nuestra hoja de estilos estableceríamos la FontFamily todo en minúsculas y separados con los guiones. En cambio en JavaScript, establecemos esto como CamelCase para que cada palabra después de la primera comience con una letra mayúscula. Ahora tendremos estos múltiples objetos de estilo que queremos agregar. Estos ahora se pueden colocar en como una matriz. Podemos pasar entre corchetes, y luego nuestro segundo objeto, que era base, guardar esto, y el estilo para ambos de nuestros objetos se han fusionado. Si entramos en las herramientas de desarrollo, podemos ver esto al pasar el ratón sobre nuestro div principal. Esto tiene nuestro color de fondo, tiene el TextColor, y luego nuestra FontFamily del segundo objeto JavaScript. 13. Mini desafío: enlaces dinámicos: Usando lo que hemos aprendido hasta ahora, ten un mini reto para probar las cosas tú mismo. Lo que me gustaría que hicieran es pasar a la sección de encabezados que contiene nuestros enlaces de navegación libre. Actualmente, cada uno de estos enlaces tiene un atributo href que apunta a la línea inclinada hacia adelante. En lugar de tener esto codificado, podríamos crear esto como un atributo dinámico, y establecer el valor href dentro de nuestra propiedad de datos. Si vamos a nuestros scripts, un buen punto de partida sería reemplazar esta matriz de enlaces por una matriz de objetos, igual que arriba donde creamos nuestras publicaciones de blog como una matriz de objetos, y puede usar esta matriz como un buen punto de partida de sus enlaces. Este es el número 1 cubierto. Entonces, a continuación, el objeto debe tener la propiedad URL con un enlace. En lugar del ID, el título, y el cuerpo que tenemos en nuestra entrada de blog, quizá podamos cambiar para ser el ID, el nombre, y la URL. El URL se puede componer, puede ser un enlace externo, o un enlace interno a una página ficticia como el portafolio de slash forward. Pero ahora, no te preocupes si se está creando o no la página a la que enlazamos. Todo lo que nos preocupa es crear un vínculo dinámico. Entonces al igual que con las entradas del blog, número 3 es recorrer esta matriz usando v-for y establecer una clave única. Por último, usando el elemento, vamos a crear un enlace a cada página. A modo de pista, podemos usar la directiva v-bind de la que aprendimos en el último video para el atributo 2 href. 14. Enlaces dinámicos: mi solución: Espero que eso te haya ido bien, y ahora voy a completar este reto y mostrarte mi solución. Empezando por el número 1, que era crear un objeto que contenga todos nuestros enlaces, igual que hicimos con la entrada del blog. Fuera de instancia de Vue, nuestra constante para nuestros enlaces que va a ser una matriz de objetos. El primero es el ID de 1, el nombre que va a ser nuestro hogar. El tercer inmueble va a ser para nuestra URL, esta va a ser la ubicación donde vamos a enlazar. El enlace de inicio va a ser el index.html separado por una coma. Necesitamos dos enlaces más, el ID de 2 y éste va a enlazar a nuestro portafolio, y la URL va a ser portfolio.html. Como se mencionó en el último video, no importa si esta página ha sido creada o no, todo lo que nos interesa en esta etapa es crear un enlace dinámico. El tercero es para contactarme en el contact.html. Eliminar el array de nuestra propiedad de datos y podemos establecer esto a través de enlaces o podemos ver la taquigrafía ES6. Dado que ambas palabras son iguales, esto se encarga del paso uno y del paso 2, y para el paso 3, necesitamos bucle para estos enlaces y los pondré en nuestro HTML. Entérate en nuestra página de Índice ya tenemos el for loop setup, por lo que esto se cuida. El siguiente paso es agregar ocho clave dinámica, que va a ser link.id Dado que link es ahora un objeto, también necesitamos pasar en el nombre y ahora todo debería seguir funcionando en el navegador. Por último, el paso 4 es utilizar el <a> elemento para crear un href dinámico. En primer lugar la directiva v-bind, o podemos volver a usar la taquigrafía que es e colon, y luego en lugar de la slash hacia adelante, podemos acceder al link.url. Puedo probar todos los enlaces en el navegador, home link seguirá enlazando a esta página actual, el portafolio. Esto enlaza a la slash hacia portfolio.html y la slash hacia adelante contactarme también está funcionando. De nuevo, no te preocupes si esto se está vinculando a un archivo que no hemos creado, único que importa es que ahora nuestros enlaces están funcionando. 15. Expresiones JavaScript: En nuestros archivos HTML, ya hemos utilizado las calibraciones dobles hasta el momento, también referidas como interpolación para dar salida a nuestras propiedades de datos, y también dentro de nuestros bucles para generar una variable también. Si es necesario, estas calibraciones dobles también pueden admitir expresiones JavaScript. Un pequeño símbolo podría usar estos para realizar un cálculo de JavaScript y luego generar el resultado. En cualquier lugar dentro de aquí, vayamos justo debajo de la cabecera. Podemos utilizar estas calibraciones dobles y crear una adición simple como 1 más 3. Si tan solo evaluarás esta expresión y luego emitirás el resultado de 4, podríamos usar también nuestras expresiones JavaScript, como divide o podríamos decir 10 dividido por 2, el valor de 5. También podemos usar métodos incorporados de JavaScript también. Por ejemplo, podríamos acceder al objeto matemático y luego seleccionar un método llamado aleatorio. Esto generará entonces un número aleatorio entre cero y uno, cada vez que recarguemos el navegador. También podemos acceder a nuestras propiedades de datos existentes, como el nombre y transformarlo usando métodos JavaScript como ToupperCase. Después tomará nuestro nombre original, que se coloca en una propiedad de fecha, y luego transformará esto para que sea mayúscula antes de dar salida a esto en el navegador. Podríamos ir aún más lejos a unas cosas extrañas como el operador ternario de JavaScript. Podríamos comprobar si el nombre.longitud es mayor que cero. Esto es cierto actualmente ya que tenemos más de cero caracteres dentro de la cadena. Si esto es cierto, lo que sabemos que es, así que sólo vamos a dar salida a una cadena de bienvenida, seguida del nombre de nuestro usuario. De no ser así, usamos el colon para proporcionar una segunda condición, que va a ser “Bienvenido Invitado”. Este es JavaScript regular y no es nada específico para ver JS. El único involucramiento de vista es que estamos dando salida a esto usando las calibraciones dobles. Sabemos nuestro nombre.longitud es mayor que cero, por lo que vemos el mensaje de bienvenida en nuestro nombre. Si tuviéramos que crear una cadena vacía. Por ejemplo, si un usuario no está conectado, veríamos el mensaje de “Invitado de bienvenida”. Otra cosa que podemos hacer con, es agregar expresiones a nuestros atributos dinámicos también, justo arriba donde establecemos esta propiedad de estilo dinámico. Digamos que solo queríamos establecer el objeto DarkMode si una determinada condición es verdadera. A modo de ejemplo aleatorio, podríamos decir que si 10 es menor a cinco, si esto es cierto, entonces vamos a mostrar el DarkMode, o si no, vamos a generar una cadena vacía, lo que significa que no se aplicará ninguna clase. Guarda esto y refresca. Diez es menor a cinco, por lo que no se aplicará el DarkMode si cambiamos esto para que sea cierto, por lo que 10 es mayor que cinco, DarkMode ahora debería aplicarse a nuestro proyecto, o como ejemplo más realista, de vuelta en nuestros guiones. Tenemos esta propiedad conjunto DarkMode. Ahora podemos usar esto para renderizar condicionalmente nuestro DarkMode en lugar de este valor numérica, podemos decir “DarkModeSet”, que actualmente es cierto, por lo que DarkMode permanecerá habilitado. Si establecemos que esto sea falso, ahora debería eliminarse. También podemos eliminar nuestro mensaje de bienvenida. y desactivar este DarkMode manualmente no es ideal. En el siguiente video, vamos a configurar esto para reaccionar a un botón. 16. Manejo de eventos: Además de las directivas que hemos mirado hasta el momento, que incluyen V4 y V bind. Ahora vamos a ver otra directiva útil llamada V-on, que nos permitirá reaccionar ante ciertos acontecimientos. Esta directiva V-on también se pasa a nuestros elementos, dentro de la etiqueta de apertura como atributo, y la vamos a utilizar para cambiar entre el modo luz y el modo oscuro. Cuando el usuario hace clic en un botón, traernos de vuelta en nuestro index.html. Abajo dentro de nuestra sección de blog, vamos a añadir un botón HTML. Podemos entonces incluir dentro del lado abierto del V-on la directiva, que va a escuchar eventos de un click. También podemos escuchar sobre eventos también, igual que en JavaScript regular, como on-submit, on-mouseover, on-cube, y así sucesivamente. La única diferencia es que eliminamos el prefijo on-prefix, lo que significa que no en eventos como en mouseover simplemente cambiaría a mouseover. Nosotros sin embargo, en esta ocasión, queremos escuchar un clic en este botón, y luego dentro de las cotizaciones, queremos realmente hacer algo cuando se haya hecho clic en este botón. En este caso queremos alternar entre el modo oscuro, y tenemos este conjunto como una propiedad de datos llamada dark mode set. Dentro de aquí vamos a alternar lista configurando el modo oscuro configurado para ser igual a lo contrario. El signo de exclamación significa que si el modo oscuro establecido es actualmente verdadero, esto cambiará para que sea falso, y también se aplica lo contrario. Probemos esto, de hecho, necesitamos agregar algo de texto entre nuestro botón también. Haga clic en esto, y esto ahora cambiará nuestro modo oscuro. Podemos ver la salida del modo oscuro establecido, si agarramos esto, y entonces podemos dar salida a esto entre las llaves. Para ver esto más claro, este actualmente se establece en falso. De esta manera, será cierto, falso, y así sucesivamente. esta sintaxis V-on, también es una taquigrafía, al igual que cuando acortamos el enlace para usar un colon, podemos acortar V-on para usar el símbolo at, y esto funcionará exactamente igual. Este botón de alternancia no es el mejor parecido, por lo que en su lugar, vamos a reemplazar esto por una entidad HTML. Podemos entonces alternar entre un hijo y un ícono de la luna, dependiendo de nuestro estado de alternancia. Los dos iconos que vamos a mostrar van a reemplazar este texto de alternancia. En primer lugar, vamos a dar salida a nuestros dos iconos. El primero es el ampersand, el áspero, y luego 9788 seguido del punto y coma. El segundo es el ampersand, el áspero, y éste es el 9789. Esto nos dará nuestros dos iconos que necesitamos, pero sólo queremos mostrar uno de estos a la vez. Podemos utilizar el operador ternario JavaScript para cambiar entre estos dos iconos. Abre las llaves dobles y podemos comprobar si el modo oscuro establecido es actualmente cierto. Si lo es, vamos a salir como una cadena, el primer icono, que es el sol. Si no, usamos el colon y luego pasamos en la luna. Recargar. Actualmente estamos en el modo luz, por lo que vemos la luna. Haga clic en esto y esto cambiará al sol. Como mencionamos antes junto a escuchar nuestros eventos de clics, también podemos escuchar eventos sobre eventos también, como mouseover, y esto ahora debería alternar nuestro estado cada vez que pasemos el cursor sobre este botón en particular. No obstante, para este ejemplo, un evento click tiene más sentido. No otorgué expresiones JavaScript directamente en el evento click así, está bien para pequeños ejemplos, pero generalmente se considera mejor extraer esto de nuestro HTML y se coloca en una función o un método, y esto es lo que vamos a descubrir a continuación. 17. Métodos: Dentro de Vue.CreateApp, hasta el momento solo hemos estado trabajando dentro de esta sección de datos. Ahora, vamos a añadir una nueva sección que va a ser para nuestros métodos. Esto nos permitirá hacer muchas cosas geniales como cambiar nuestros datos, y en general hacer que nuestras aplicaciones sean mucho más interactivas y útiles. Si está familiarizado con las funciones en JavaScript, los métodos hacen lo mismo. Por ejemplo, tienen el método de nombre porque son parte de este objeto. tanto que nuestra sección de datos fue configurada como una función, nuestro método para configurarla como un objeto porque vamos a llamarlos manualmente. Asegúrese de que estamos fuera de nuestra sección de datos. Desplazemos hacia abajo hasta la llave rizada de cierre. Entonces después de esto vamos a configurar nuestros métodos, usarla como objeto. El primer método que vamos a utilizar va a ser alternar nuestro modo oscuro. Esto se debe a que no queremos que se reemplace demasiada lógica JavaScript en nuestro archivo HTML. Vamos a abstraer la alternancia de nuestro esquema de color en este método. Recortemos esto y peguemos esto dentro de nuestro método. Entonces necesitamos cambiar el modo oscuro configurado para ser esto.DarkModeSet. El motivo por el que estamos usando esto, esta palabra clave es porque tanto la sección de datos también la sección de métodos es parte de lo que se llama la API de opciones. Las secciones entre otras que veremos pronto, tienen acceso a cada propiedad de Vue mediante el uso de esta palabra clave. Por ejemplo, nuestros métodos pueden acceder a cualquier cosa de la sección de datos siempre y cuando utilicemos esta palabra clave, así podría acceder a this.name, this.links y también a cambio la sección de datos puede llamar a nuestro método, o podríamos decir esto. togglemode. Ahora todo lo que queda por hacer es llamar a este método desde nuestra página de índice. Pasándolo el modo de alternar, refresca el navegador, y ahora todavía podemos cambiar entre nuestras dos versiones de color para este momento extrayendo todo el código en un método. 18. HTML sin procesar: Si quisiéramos, también podemos generar HTML usando Vue.js. De vuelta dentro de nuestro script.js y hasta la cima, tenemos esta matriz de entradas de blog. Digamos que queríamos formatear el cuerpo de esta entrada de blog agregando algunos elementos HTML dentro de este texto. Por ejemplo, podríamos recortar cualquiera de estas palabras y luego crear los elementos fuertes. Colocando esta palabra de nuevo en el medio. También podríamos agregar cualquiera de los elementos también como la etiqueta de ruptura, que luego colocará esto en una nueva línea. Volvamos al navegador y veamos qué efecto tendrá esto. Podemos ver que no estamos del todo consiguiendo el resultado que queremos, los elementos fuertes y también la etiqueta de ruptura acaba de salir como parte de una cadena. Esto se debe a que estamos dando salida a esto en nuestro index.html entre estas llaves dobles. Estas llaves dobles emitirán el valor como texto plano. Esto hace que esta llaves no sea buena opción para texto que contenga cualquier elemento HTML. En cambio, Vue proporciona una nueva directiva llamada V-HTML. Como siempre, agregamos nuestras directivas como atributo, y esto reemplazará nuestras llaves dobles. Esto es V-HTML y entonces podemos establecer esto igual a nuestro post, el cuerpo. También podemos eliminar esto, refrescar el navegador. Nuestra etiqueta fuerte ahora ha tomado efecto y también nuestra etiqueta de ruptura también. Esto todo funciona completamente bien ahora pero por razones de seguridad, sí hay que tener cuidado al usar V-HTML. Sólo debemos inyectar HTML de fuentes de confianza. Por ejemplo, nunca debemos usar HTML que está siendo proporcionado por el usuario final de nuestro sitio ya que esto podría conducir a potenciales ataques de scripting entre sitios. Es realmente importante al usar esta directiva que estemos completamente seguros de que esta fuente es segura. Es así como podemos usar V-HTML. A continuación, vamos a descubrir ganchos del ciclo de vida. 19. Ciclo de vida de Vue: Cuando creamos nuestra instancia de visión general superior de Vue, hay una serie de etapas pasando detrás de bambalinas. La documentación de Vue tiene un diagrama bastante bueno de lo que sucede exactamente cuando creamos una nueva aplicación de Vue. No necesitas recordar estos o entender completamente por ahora, pero sí ten en cuenta que podemos ejecutar algún código en cada etapa de este ciclo de vida. Por ejemplo, en la parte superior vemos Vue.CreateApp mientras pasamos nuestras opciones. Esta es la etapa inicial que ya hemos mirado, y luego queremos esto al DOM con app.mount. Después de crear esta instancia, tenemos acceso al BeForecreate y también a los ganchos creados. Estos ganchos de ciclo de vida se pueden agregar a nuestro objeto, cual pasas a CreateApp junto a los datos y los métodos que estamos utilizando actualmente. Echemos un vistazo a estos dos primeros ganchos del ciclo de vida en nuestros guiones. Al lado de nuestros datos, primero vamos a mirar antes crea. El segundo separado por una coma es el gancho creado. Dentro de estos dos ganchos podemos añadir cualquier código que quieras ejecutar en estas dos primeras etapas. Para poder ver exactamente cuándo se ejecutará cada uno de estos ganchos, podemos hacer un registro de consola. Al primero le voy a agregar algo de texto de BeForecreate, que sepamos exactamente qué registro de consola se está ejecutando, y luego recuerde usar esta palabra clave, podemos acceder a cualquier otra propiedad desde nuestra instancia de Vue, que tiene nuestra acciones de datos. Podemos generar el valor de nuestro nombre usando this.name. Con esto también podemos dar salida a esto dentro del gancho creado a la consola. Haga clic derecho e inspeccione, y también principalmente para refrescar también. Vemos que el antes de crear gancho devuelve un valor de indefinido. Pero por debajo de esto dentro del gancho creativo, tenemos acceso a nuestra propiedad de datos. ¿Por qué es esto? Bueno, no es hasta la etapa creada donde Vue ha terminado de procesar y configurar las cosas en nuestro objeto de opciones. El cual cuenta con nuestros datos y métodos. Lo que da como resultado que cualquier cosa de nuestra instancia de Vue como nuestras propiedades de datos se devuelva como indefinido dentro del antes crea gancho. Esto significa que solo usaríamos esto para algo como una llamada API, que no está vinculada a ninguna sobre secciones, como nuestras propiedades de datos. También podemos ver esto si volvemos al dibujo. Podemos ver dentro de esta sección no tenemos acceso a ninguna de la actividad del espectador hasta después del gancho BeForecreate. Después de esto bajamos a la opción de plantilla, que nos da dos opciones separadas. Pronto echaremos un vistazo a esta opción de plantilla cuando veamos los componentes. Esta es básicamente la sección donde generamos todo nuestro HTML, que incluye las secciones dinámicas con unas llaves dobles. Si esta opción de plantilla no está disponible, en cambio, bajará a nuestra sección a la que montamos, y evaluaremos los contenidos dentro de aquí. Después de esto, tenemos una serie de etapas cuando la aplicación ha sido montada en el DOM, podemos acceder antes del montaje o tan pronto como la aplicación haya sido montada. Una vez que la app ha sido montada en el DOM, también podemos escuchar cualquier cambio también. Entonces podemos ejecutar algún código antes de que la actualización haya sucedido o después de que la actualización haya finalizado. El final de dos etapas es cuando se está retirando un componente del DOM y podemos acceder a él antes de un gancho de montaje y también al gancho desmontado también. Estas dos últimas etapas son útiles para cualquier trabajo de limpieza, tal vez quieran dejar de escuchar cualquier evento, y este es el lugar para hacerlo. Descubre cómo funciona todo esto en la práctica y ahora vamos a hacer una simple llamada API para obtener algunas entradas de blog de una fuente externa. El origen de esta entrada de blog va a estar disponible desde marcador de posición JSON. Esta es una API muy sencilla y revisa la cual podemos utilizar para obtener algunos datos de muestra como nuestras entradas de blog. Podemos ver que podemos conseguir blogposts, podemos obtener comentarios. Tenemos álbumes, fotos, todos, y también usuarios. Vamos a acceder a la sección /post, que va a devolver 100 entradas de blog de muestra. Entonces esto es bastante simple, solo agregamos /posts al final de esta URL. Esto devolverá una lista de 100 entradas de blog en formato JSON, y también podemos hacer una llamada a esta URL desde un método Vue. Vuelve a Visual Studio Code y a nuestro script, podemos llamar a esto desde dentro de nuestra sección de métodos, y el método que voy a llamarlo va a ser getposts. Dentro de aquí, vamos a hacer uso de la API de Fetch para hacer una llamada a esta URL. Pegue esto en como una cadena, y esta API de búsqueda es simplemente JavaScript regular. No tiene nada que ver con Vue JS. Podemos entonces almacenar los datos que obtuvimos de nuevo dentro de una variable llamada respuesta. Ya que estamos llegando a una API externa, esta va a ser una llamada asíncrona. Esto significa que los datos que recuperamos pueden volver en unos pocos milisegundos. Puede tardar cinco segundos, puede que no vuelva en absoluto. Entonces para lidiar con esto, podemos hacer uso de un solo peso, que es una función de JavaScript. Lo cual nos permitirá esperar a que los datos vuelvan a aparecer antes de que realmente hagamos algo con él. Para ello, podemos marcar nuestro método como asíncrono. Entonces agregamos la palabra clave asíncrona justo antes, y luego vamos a esperar a que vuelvan nuestros datos. Esto significa que si tratamos de acceder a la variable de respuesta antes de que vuelvan estos datos, no arrojará un error. Ahora esto nos deja con el objeto de respuesta de nuestra llamada API, y luego necesitamos extraer el JSON de la respuesta. Para ello, vamos a acceder a nuestra respuesta y luego llamar al método JSON. Esto va a extraer el JSON de nuestra respuesta, que podemos almacenar en una constante o una variable llamada datos. También [inaudible] esto para asegurarnos de que esto esté terminado antes de acceder a nuestros datos, y luego registraría esto en la consola. Ahora antes de ir más allá, vamos a dar un paso atrás y pensar en lo que queremos hacer. Tenemos una lista de blogposts que estamos recuperando de la API, y esto se almacena dentro de esta variable de datos. Dejándonos con dos cosas que tenemos que hacer. En primer lugar, necesitamos pasar estos datos a nuestra sección de datos y añadirlos a nuestras publicaciones. El segundo que tenemos que hacer es llamar realmente a este método. Como miramos antes, podríamos agregar un botón a nuestros sitios y hacer esta llamada, o esto no sería un buen uso. En cambio, queremos hacer esto automáticamente, y podríamos hacerlo desde un gancho de ciclo de vida. Podemos usar el gancho BeForecreates. Ya que recuerda esto se llama antes de que se cree la aplicación, por lo que el método get post será indefinido. Podríamos usar montado una vez que la aplicación esté montada en el DOM, o podríamos ir incluso antes y usar el gancho creado, que miramos antes. Ya no necesitamos este BeForecreate, así que vamos a mover esto y luego bajar a la sección creada. En lugar de hacer un registro de consola, vamos a llamar a nuestro método GetPost, que podemos acceder con This.GetPosts. Pasado al navegador, y podemos abrir las herramientas de desarrollador. Voy a decir que la respuesta no está definida, así que tenemos un error ortográfico. Ahí vamos. Respuesta. Refrescar. Ahí está nuestro log de consola con 100 entradas de blog diferentes. Cada una de estas entradas de blog tiene un ID, tiene un cuerpo, un título, y también el ID de usuario que lo creó. Estos son exactamente los mismos datos que ya tenemos, además de este ID de usuario extra, que podemos ignorar si no queremos usar. Ahora vamos a utilizar estos datos para reemplazar las entradas de blog gratuitas que ya tenemos. En primer lugar, vamos a desconfigurar las entradas de blog que ya tenemos de nuestra propiedad Data. Para ello, podemos desplazarnos hasta nuestras publicaciones y luego configurarlo para que sea una matriz vacía, y ahora podemos actualizar estas publicaciones desde nuestro método. Haga esto en lugar de un registro de consola. Lo que vamos a hacer es acceder a esto.posts, y establecer esto igual a nuestros datos. Pasado al navegador. Esto ahora nos deja con un 100 entradas de blog diferentes dentro de nuestra página. El motivo por el que esto funciona es porque los datos que obtuvimos de la API, que habríamos visto en el registro de la consola, están estructurados de la misma manera que nuestras entradas de blog originales. Podemos ver esto dentro de nuestra página de índice. Abajo en la sección de blog, tenemos acceso al título, al cuerpo, y estos también tienen una identificación. Si los datos que regresaron de nuestra API fueran ligeramente diferentes, por ejemplo, si la sección del cuerpo se titulara contenido, todo lo que tendríamos que hacer es cambiar esto dentro de aquí, y estaremos bien para ir. 20. Introducción a la sección: conceptos básicos de los componentes: Cuando se trabaja con frameworks front-end o bibliotecas como Vue.js, uno de los conceptos más importantes a aprender son los componentes. En los próximos videos, vamos a descubrir cómo Vue.js utiliza componentes, cuáles son, los diferentes tipos de componentes, y luego podemos ver cosas como cómo podemos pasar datos entre estos componentes. Empecemos en el siguiente video, y echaremos un vistazo a qué es exactamente un componente. 21. ¿Qué son los componentes?: Vue.js y algunos otros amigos y frameworks o bibliotecas tienen este concepto de construir nuestras aplicaciones usando componentes. El motivo detrás de esto es para dividir nuestra aplicación en piezas más pequeñas, haciendo que nuestro proyecto sea más fácil de mantener, organizar y depurar. Pero, ¿qué es un componente? Bueno, considera esta imagen que es de nuestro próximo proyecto. Esta es una aplicación de cuenta atrás donde vamos a agregar eventos y se mostrarán en orden de fecha. También podemos ver el número de días al evento también. Podríamos construir esta app completamente en el archivo App.vue. Pero a pesar de que esta no es una aplicación enorme, puede rápidamente volverse abarrotada y desorganizada o estar en un solo archivo. Para ayudar con esto, podemos dividir nuestra aplicación en partes o secciones, como nuestro botón en la parte superior, que incluso puede ser parte del archivo App.vue o podríamos moverlas para que sean un componente separado. También con nuestros eventos también, el código para estos podría sacarse de este archivo App.vue y colocarse en unos componentes independientes. Aislar este código en un componente como este significa que ahora sabemos dónde buscar para editar este código en lugar de desplazarse por un archivo grande. Además, si hay algún problema con esta sección de eventos, nuestro código ahora también está aislado, lo que ayudará a solucionar el problema. Este proyecto también incluye un formulario que utilizaremos para agregar un nuevo evento o para editar uno existente también. Este también sería un buen caso de uso para un componente. No hay una regla dura o rápida para determinar exactamente qué camino debemos hacer en un componente, es algo que hay que juzgarte a ti mismo cuando un expediente se vuelve grande o se escucha mantener. Esto puede ser una buena señal de que necesitas externalizar en un componente separado, o también puedes organizarte por características también igual que vemos aquí con este formulario de edición. El número de componentes que creamos no dificulta nuestro rendimiento ni aumenta el tamaño de burbuja hacia arriba, ya que utilizamos web part para agruparlos de manera totalmente eficiente al final. Es en este paquete que el navegador utiliza para nuestras aplicaciones de una sola página. 22. Primer vistazo a los componentes: En las diapositivas anteriores se utilizó el concepto de componentes de un solo archivo, es un componente que juega en un archivo dedicado para mantener las cosas más organizadas. Para ello, necesitamos una configuración mucho más sofisticada que veremos en la siguiente sección. Estos componentes colocados en su propio archivo es probablemente el tipo de componentes más utilizado. Pero primero, vamos a ver algunas formas diferentes de escribir esto comenzando con el componente global. El primero que voy a hacer dentro de nuestro script.js es almacenar nuestra instancia de vista dentro de una constante llamada app. Ahora, tenemos esta aplicación almacenada en esta referencia de la app. Entonces vamos a usar este montaje de llamada, por lo que app.mount. Después volveremos a montar esto a la sección del cuerpo. Si actualizamos el navegador, aquí no vemos ningún cambio, pero ahora, tener esta referencia separada a nuestra aplicación significa que ahora podemos llamar a un método llamado componente. Esta app.component toma dos argumentos. El primero es el nombre que queremos darle a este componente, y el mío va a ser app-header. Al usar el enlace CDN igual que nosotros, el nombre de este componente debe ser todo minúscula, más de una palabra, y separado por guiones. Esto se debe a que vamos a insertar esto de nuevo en nuestro HTML al igual que un elemento regular por lo que no queremos ningún enfrentamiento de nombres. Esta convención de nomenclatura también significa que no chocamos con ningún elemento HTML regular como el encabezado, el nav, también un hv regular por ejemplo. Después de esto, el segundo argumento separado por una coma va a ser un objeto. Este objeto es como una mini aplicación. Puede tener sus propios datos, sus propios métodos, y básicamente, cualquier cosa que tengamos justo arriba en nuestra instancia de vista regular. par de esto, también tiene una plantilla la cual es una cadena, y este va a ser el HTML que queremos dar salida dentro del navegador. Esto puede ser cualquier código HTML como un encabezado de nivel uno. Vamos a añadir un poco de texto dentro de él aquí por ahora. Ahora, podemos usar este app-header dentro de nuestra página de índice al igual que un elemento HTML regular. Vamos a comentar la sección de encabezado y luego podemos reemplazarla con nuestros elementos app-header, guardar, y esto ahora es salida en lugar de nuestro encabezado regular. Ahora sabemos que esto está funcionando, ahora podemos agarrar nuestra sección de cabecera regular. Podemos descomentar esto y recortar este lugar, y entonces ahora podemos colocar esto como nuestra cadena de plantilla. [ inaudible] de todos estos subrayados rojos, pero el editor de texto está destacando un problema. Esto se debe a que estamos usando citas para rodear todo este HTML. Esto funciona perfectamente bien cuando usamos una sola línea de HTML, igual que nuestro encabezado de nivel 1. No obstante cuando tenemos múltiples líneas de HTML así, necesitamos reemplazar estas citas por las bacticks. Cuando utilicemos la vista CLI para configurar nuestro proyecto pronto, esto nos dará una forma más limpia de escribir nuestro código HTML dentro de estos componentes. Pero por ahora pasar al navegador. Esto ahora aparece dentro de una sección de encabezado pero nos faltan las variables. Ya no vemos cosas como nuestras secciones dinámicas, que es el nombre, y también el enlace justo debajo. Para que esto funcione, también podemos configurar la sección de datos que necesita para esta plantilla. Entonces desplácese hasta la sección de datos que hemos estado usando. Necesitamos el nombre y también el enlace por lo que voy a cortar estos fuera de la instancia de vista y luego colocarlos de nuevo en nuestro componente. Configuramos los datos igual que lo hicimos anteriormente. Esta es una función que va a devolver un objeto y podemos pegar en nuestro nombre y nuestros enlaces. No olvides separar la sección de datos y la plantilla con una coma. Esto ahora vuelve a colocar nuestros datos en el navegador pero esta vez, desde un componente. 23. Propiedades y reutilización de componentes: A la par de aislar nuestro código, otro beneficio de usar componentes es que también se pueden reutilizar. No sólo eso sino que también podemos reutilizar los mismos componentes y también pasarle diferentes valores. Para ver esto, vamos a pasar por encima de una de nuestras entradas de blog a un componente. Podemos cortar o reemplazar la sección completa de artículos de nuestro blog sobre en nuestro index.html. Al igual que en el último video, vamos a crear un nuevo componente. De nuevo, asegúrate de que esto esté justo por encima de la cantidad. Entonces de nuevo, esto es up.components y el primer argumento va a ser el nombre, que voy a llamar el blog-post, separado por una coma que pasamos en nuestro objeto. Esto va a tomar en nuestra plantilla, que es multi-línea. Por lo que de nuevo, usamos la pasta de garrapatas traseras en nuestro artículo. Por nuestra simplicidad vamos a quitar el bucle for. También podemos cambiar esto para que sea simplemente un título y la sección de cuerpo. Entonces vamos a pasar esto por un solo puesto. Entonces al igual que hicimos con el componente de cabecera, vamos a dar salida a nuestra nueva entrada de blog dentro del HTML. Esto se va a colocar de nuevo dentro de nuestra sección de blog. Esta vez sin embargo, en lugar de tener los datos dentro del componente, igual que hicimos con la sección de encabezado. Esta vez vamos a pasar los datos a este componente usando utilería. Los apoyos son como atributos regulares los cuales podemos usar para enviar los datos que el componente necesita, y este componente necesita el título y también el cuerpo y la forma de hacerlo, al igual que un atributo, es entrar en la etiqueta de apertura del blog publicaciones. En primer lugar, podemos pasar el título y esto es solo algunos datos de muestra por ahora para que podamos darle a este cualquier título que quieras. Esto también necesita la sección del cuerpo, por lo que podemos darle a esto un segundo atributo o un segundo prop. Nuevamente, esta va a ser una cuerda simple. Dado que se trata de un compuesto, también podemos reutilizar estos dos. Entonces vamos a copiar y pegar esto en. Cambia el título. Cada vez que hacemos esto y reutilizamos los componentes, cada incidencia de componente es independencia de los demás y también tiene sus propios datos, que también se conoce como estado. Significa que aunque tenemos dos entradas de blog separadas, no entrarán en conflicto entre sí. Por lo que hemos pasado nuestros dos apoyos, hemos pasado el título y también el cuerpo. No obstante, aunque estos no se asignan automáticamente a estas variables. Una cosa que debemos hacer primero es declarar exactamente qué apoyos espera recibir este componente. Ya que estamos recibiendo múltiples apoyos, podemos agregar esto como una matriz y luego agregar una coma al final. El primer prop es el título, y luego el segundo es el cuerpo. Esto ahora significa que ambos de estos accesorios ya están disponibles para su uso dentro de nuestra plantilla. Probemos esto de nuevo en el navegador. Cuando paso el cursor sobre dos componentes de publicación de blog, cada uno con datos independientes. Si bien esto funciona completamente bien, no es una forma eficiente de crear, digamos, 100 entradas de blog. Por lo que una mejor manera de hacer esto sería reutilizar este componente con un V for loop. Volver a nuestra página de índice y en lugar de tener en dos entradas de blog separadas, lo que vamos a hacer es solo tener nuestra única entrada de blog. Entonces podemos usar un V for loop. Dentro de este V for loop, queremos aprovechar los datos que ya tenemos. Se trata de todas las publicaciones de blog que hemos almacenado dentro de aquí. Entonces podemos decir post, en posts pasan en una clave, que va a ser nuestro post.id Ahora en lugar de pasar por abajo nuestro título y nuestro cuerpo como texto plano, en cambio vamos a pasar un prop o post, que va a ser igual a nuestro post desde el bucle justo arriba. Dado que esta es una variable, también necesitamos vincular esto usando una sintaxis v bind. Esto se pasa como el contenido de nuestra variable en lugar de la cadena de post. Ahora esta entrada de blog está pasando un objeto llamado post sobre nuestro guión abajo a nuestros componentes. En lugar de recibir tanto el título como el cuerpo, esto ahora está recibiendo el post como un objeto. Entonces podemos acceder al post.title y también al post.body. Echemos un vistazo a esto. Nuestro componente de publicación de blog ahora se reincorpora. Pero en esta ocasión tienen todos los datos que necesitan los cuales se han transmitido como prop. 24. Componentes locales: El tipo de componentes utilizados hasta el momento usando esta app.component se clasifica como un componente global, lo que significa que están instantáneamente disponibles para su uso en cualquier parte de nuestra aplicación. Esto también incluye subcomponentes. Por subcomponentes, me refiero a componentes que están anidados dentro de otros. Por ejemplo, no es que tenga mucho sentido, pero también podríamos colocar nuestros componentes de encabezado dentro de esta entrada de blog. Esta plantilla es igual que nuestro HTML, por lo que podríamos colocar esto justo como lo hicimos en la página de índice, pero esto era app-header, y también cerrar esto. Si ahora guardamos esto y refrescamos nuestro proyecto, vemos que nuestro título de encabezado y nuestros enlaces de navegación está disponible en cada una de nuestras publicaciones de blog, y esto se debe a que están disponibles a nivel mundial. Entonces, a menos que específicamente quieras este comportamiento, también podemos restringir el uso de componentes al registrarlos localmente. El registro local implica alejarse de app.component y crear objetos JavaScript regulares. Estos objetos necesitan ser creados por encima de vue.CreateApp, y veremos por qué en tan solo un momento. El primero va a ser para nuestro AppHeader. Al igual que dijimos, este va a ser un objeto JavaScript regular. El segundo componente fue para BlogPost. Ahora, podemos agarrar el contenido de ambos componentes y colocarlos dentro de estos objetos. Entonces el primero es el AppHeader, así que me desplazaré hacia abajo a nuestro componente AppHeader, y luego podremos copiar todo el contenido dentro de estos corsé rizado. No copie este corsé rizado, sólo vamos a copiar el contenido hasta la sección de cabecera de cierre. Agarremos esto y luego peguemos esto dentro de nuestro objeto. El siguiente es nuestro BlogPost, y podemos hacer exactamente lo mismo. Vas a agarrar los apoyos y también la plantilla. Agrega esto dentro aquí. Entonces vamos a registrar nuestra intención. Utilizan estos componentes dentro de Vue.CreateApp. Podemos hacer esto creando una sección de componentes, y luego agregar una coma al final. Entonces el nombre del primer componente va a ser blog-post, que va a ser igual a nuestro objeto que usted creó arriba, que es BlogPost. Separado por coma, el segundo va a ser el AppHeader. Nuestros componentes ya están registrados para utilizarlos dentro de nuestra página de índice. Algunas cosas a notar primero, el objeto JavaScript, que creamos arriba, debe declararse arriba este CreateApp para que luego podamos acceder a ellos dentro de nuestros componentes. Si también contamos con múltiples instancias Vue, ahora podemos controlar exactamente qué componentes queremos que aparezcan o que estén disponibles en cada uno. Ya no necesitamos estos componentes globales abajo en la parte inferior, así que voy a comentar el AppHeader y también el BlogPost en el navegador. Refresca la página, agrega nuestro BlogPost, y ahora aparece junto a nuestro encabezado. Pero una cosa tener en cuenta que dentro de cada uno de nuestros BlogPost ya no vería este AppHeader. Recuerda desde antes, si nos desplazamos hasta nuestros componentes, aún tenemos en su lugar estos componentes de AppHeader dentro de cada BlogPost, pero ya no lo vemos dentro del navegador. ¿ Por qué es esto? Bueno, este app-header ahora es un subcomponente de nuestro BlogPost, y ahora que nuestros componentes son locales en lugar de globales, ahora no tenemos acceso a nuestros componentes en cualquier lugar que queramos. Si quisiéramos usar este AppHeader o cualquier otro componente dentro de aquí, también necesitaríamos pasar la opción de componentes también. Al igual que hicimos dentro de un Vue.CreateApp, también podemos pasar en nuestros componentes. Esto, de nuevo, es un objeto, y luego vamos a declarar que estamos usando este app-header, que va a apuntar al objeto AppHeader. Guarda y refresca, y su registro local ahora coloca nuestro AppHeader en cada uno de estos BlogPosts. Por supuesto que no necesitamos esto para nuestro proyecto, así que voy a quitar estos componentes y también la línea de código dentro de aquí. Pero este es un ejemplo si quisieras registrar localmente un componente dentro de otro. Ahora, entendemos más sobre Vue y componentes. A continuación, descubramos una mejor configuración usando una CLI Vue junto con comenzar nuestro próximo proyecto. 25. Introducción a la sección: crea las herramientas y aplicaciones de una página única: Importar Vue.js como enlace CDN es realmente útil para proyectos simples o para empezar, aprender todo sobre Vue. Pero para aplicaciones más grandes o más reales, generalmente queremos usar una configuración más sofisticada. Esto nos permitirá descomponer nuestras aplicaciones en componentes reutilizables, colocarlas en archivos separados y crear cosas como aplicaciones de una sola página. Para ello, los próximos videos se van a centrar en una herramienta llamada Vue CLI. 26. Aplicaciones de página única: En el proyecto anterior, miramos cómo podemos usar Vue.js para trabajar con solo una sola ruta para la aplicación. Podemos tomar un sitio web o aplicación existente, crear una nueva instancia de Vue, y luego montarla en cualquiera de los elementos HTML en los que quieras usarla. También como se mencionó anteriormente, también podemos usar Vue.js para controlar nuestro front-end completo. Podemos usarlo para construir lo que se llama la aplicación de una sola página. Se trata de una aplicación que está controlada enteramente por JavaScript y funciona dentro del navegador. Con la forma tradicional de construir sitios web, se puede hacer clic en un enlace de página, como este Sobre link. Posteriormente se solicita la página a un servidor web, que luego responde con el contenido de la página, y esto luego se muestra en el navegador. Las aplicaciones de una sola página funcionan de manera diferente a esto. En lugar de solicitar páginas sobre activos como los necesitamos, Vue construirá nuestra aplicación en paquetes de JavaScript. Cuando un usuario visita por primera vez una aplicación de una sola página, el paquete se descarga desde el servidor. Este paquete de JavaScript incluye el contenido de nuestro proyecto, como nuestras páginas, lo que significa que toda la navegación entre estas páginas es manejada por JavaScript dentro del navegador sin necesidad de solicitar más páginas desde el servidor, ahí el nombre aplicación de una sola página. Al igual que cualquier enfoque de finura, tiene pros y contras. Uno de los pros es que la velocidad es realmente rápida. Cambiar entre páginas con JavaScript es mucho más rápido que solicitar una página de un servidor web. Esto proporciona una gran experiencia de usuario ya que no hay carga y navegar por nuestra aplicación es casi instantáneo. También como este paquete se almacena dentro del navegador , también puede funcionar sin conexión. También tiene algunos inconvenientes sin embargo, como descargar un paquete grande puede ser inicialmente más lento cuando el usuario visita por primera vez su sitio. Esto se puede optimizar aunque con separación de código y lo veremos más adelante en el curso. Además, generalmente no se considera como SEO friendly como páginas generadas por servidores tradicionales. Ya que el contenido HTML devuelto es mínimo y el resto del contenido se genera dentro del navegador resultando en contenido que es más difícil de rastrear por los motores de búsqueda, aunque las empresas de motores de búsqueda más grandes parecen tener realmente mejoró esto recientemente. También, como nota al margen, ya que JavaScript puede ejecutarse dentro del navegador y también del servidor. También es posible usar Vue para crear lo que se llama una aplicación renderizado del lado del servidor. Esto convierte nuestra aplicación JavaScript para ser más como la forma tradicional de hacer las cosas, donde solicitamos páginas cuando sea necesario. Este es más un tema avanzado sin embargo y uno que no está cubierto en este curso. También hay una herramienta de marco como Node.js que ayudará con esto. A continuación, echemos un vistazo a algunas herramientas que nos ayudarán a crear este tipo de aplicaciones de una sola página. 27. La CLI de Vue: En el proyecto con el que hemos estado trabajando hasta ahora, hemos utilizado un enlace CDN para acceder a las funciones de Vue JS. El montaje está bien para proyectos más pequeños o cuando solo se trabaja con una parte de nuestro sitio web. Para proyectos más grandes sin embargo, a menudo necesitamos una mejor configuración con más características y herramientas. Para ayudar con esto, está el Vue CLI, que está disponible en cli.vuejs.org, que tiene plugins para muchas herramientas populares, que tiene TypeScript, Babel, Testing, y también para agregar fácilmente paquetes que puede que necesitemos como el Router Vue. Incluso si no planeas usar muchas de las características o plugins, es probable que desees una configuración como esta que nos permita usar componentes más fácilmente y también construir para la producción. También incluye herramientas como Webpack para que podamos agrupar todos nuestros archivos y activos para crear estas aplicaciones de una sola página. El CLI es creado y mantenido por el equipo central de Vue JS. A pesar de que sabemos que no es necesario ya que ya construimos un proyecto Vue JS sin él, generalmente se acepta como la forma estándar de crear proyectos Vue JS. Si nos desplazamos hacia abajo, hay una sección de Introducción en la parte inferior para colocarnos dentro de la terminal. Algo a tener en cuenta aquí es que Node.js se requiere antes de que sigamos adelante y hagamos esto. Si no tienes Node.js ya instalado, si te dirigieras a nodejs.org, y luego haz clic en la versión actual para descargarla para tu sistema operativo. Además, si ha pasado un tiempo desde que se ha actualizado, también puede valer la pena pasar por el proceso de instalación. Es sólo un caso de unos pocos clics. Node.js es una forma para que ejecutemos JavaScript en el servidor. No estaremos escribiendo ningún código Node.js ni de hecho ningún código relacionado con el servidor. Esto es solo un requisito detrás de bambalinas para el Vue CLI. Una vez que esto se haya descargado, solo necesitamos descomprimir el paquete y luego continuar a través del proceso de instalación para su sistema operativo en particular. Todo hecho. Ahora podemos cerrar esta ventana. Al instalar Node así también se instalará npm, que es el gestor de paquetes del Node, que usaremos para instalar tanto la CLI de Vue también cualquier paquete adicional que necesitemos para nuestros proyectos. Para seguir adelante con la instalación, deberá dirigirse a la terminal. Puedes usar cualquier terminal para esto como el Mac Terminal incorporado, puedes usar Windows PowerShell, y también hay uno integrado en Visual Studio Code. Si abres, selecciona la opción de terminal, y luego ve a “Nueva Terminal”, que abrirá esto en la parte inferior de nuestro editor de texto. Enter, voy a estar usando iTerm para este proyecto. El primero que hay que hacer es comprobar que tanto npm como Node están instalados correctamente. En primer lugar podemos escribir en nodo y luego dash v. Esto nos devolverá la versión actual de nodos la cual está instalada. A continuación, npm -v, que luego devuelve la versión instalada de npm. Ambos comandos deben devolver el número de versión, pero si sí ves un error, necesitarás instalar correctamente Node y npm antes de continuar más. Volver a la página de inicio de Vue CLI, tenemos esta sección de instalación abajo en la parte inferior. Podemos usar npm o el gestor de paquetes Yarn. De cualquier manera está completamente bien. Si actualmente no tienes la configuración de Yarn en tu máquina, te recomendaría usar el comando npm ya que esto no necesita ninguna instalación adicional. Vamos a copiar y pegar esto ha terminado, pulse “Enter”, y esto pasará por el proceso de instalación para la CLI. Si eres usuario de Mac y golpeas algún error de instalación relacionado con los permisos, es posible que también necesites agregar el pseudo prefijo antes de esta instalación de npm, entonces tendrás que ingresar la contraseña cuando se te solicite. O aún mejor, también podrías arreglar los permisos que te están bloqueando la instalación. Una vez que hayas hecho esto, podemos usar el comando Vue create, seguido del nombre de nuestro proyecto. Pero primero, vamos a usar el comando cd para cambiar a nuestro directorio donde queremos instalar nuestro proyecto. Voy a cambiarme al escritorio, pulsa “Enter”. Bueno, podrías colocar esto en cualquier lugar que quieras. Podemos entonces usar Vue create y el nombre del proyecto al que voy a llamar la demo de CLI, hit “Enter”. Al momento de grabar esto, el Vue CLI nos da la opción de ya sea Vue versión 2 o Vue 3, que también viene con la configuración de Babel y también de eSLint para nosotros. Selecciona “Vue 3". Además, recuerda que en el futuro, la opción para Vue 2 puede no estar ahí. En ocasiones las opciones sí cambian, pero suele ser bastante autoexplicativa. Ahora debería dejarnos con nuestro proyecto demo en el escritorio. Ahora necesitamos cambiar a este directorio demo. Como dice, Babel puede usar cd para cambiar directorio a nuestra demo de CLI. Ahora estamos dentro de esta demo, entonces podemos ejecutar nuestro servidor de desarrollo. Si utilizas un npm, podemos teclear npm serve, pulsa “Enter”. De hecho esto es npm run serve, hit “Enter”. Esto configurará ahora nuestro servidor de desarrollo. Una vez hecho esto, nos dará un enlace que ahora puedes abrir dentro del navegador. Ver el proyecto de arranque toda la configuración. Todo lo que necesitamos hacer ahora para editar esto es abrir este proyecto dentro de nuestro editor de texto para que podamos enchufar esto. Ahora estamos bien para ir a escribir en nuestro código Vue JS. Este proyecto, sin embargo, se ve un poco diferente a la estructura anterior del proyecto. A continuación haremos un resumen de exactamente lo que se incluye con esta configuración del proyecto. 28. Estructura de proyecto: Solo quiero tomarme unos momentos para mirar la estructura del proyecto, que acabamos de crear. Si miramos en la barra lateral veremos todos los archivos y carpetas que ahora están dentro de nuestro proyecto. El primer carpeta que vemos son los módulos de nodo. Esta carpeta es donde se instalan todos los módulos MPM. Si has usado nodo antes, estarás familiarizado con este tipo de configuración. Normalmente, los proyectos que utilizan nodo se dividen en paquetes. Cada uno agrega alguna funcionalidad. Podemos tener un paquete, por ejemplo, que formatea fechas, uno que sí forma validación. También podemos añadir nuestros propios paquetes aquí también, usando MPM que acabamos de configurar. Aquí es donde se ubicaron cosas como las bibliotecas de código vue.js, en lugar de vincularlo al script CDN como hicimos en el primer proyecto. Si estás familiarizado con todo esto, se ha ejecutado una instalación de MPM para nosotros cuando configuramos el proyecto con la CLI. Después de esto, tenemos la carpeta pública que contiene nuestros archivos estáticos, como cualquier imagen que queramos utilizar, y también cualquier HTML. En primer lugar tenemos el favicon, que es el icono que aparecerá en la pestaña del navegador. Entonces tenemos el index.html. Si abrimos este index.html, no vemos mucho contenido dentro de aquí, y como mencioné en el video de aplicación de una sola página, este tipo de aplicaciones tienen una estructura html mínima. Entonces el resto del código será empaquetado e inyectado en este div con el ID de App. Al igual que en el primer proyecto donde montamos la instancia de vista a un elemento en particular en HTML. Esta es la ubicación en este proyecto, a la que se montará. Ya veremos cómo se hace esto muy pronto. Después de esto, tenemos la carpeta fuente. Esta carpeta es donde hacemos la mayor parte de nuestro trabajo. Aquí es donde estaremos en la mayor parte de nuestro código para este proyecto. Aquí tenemos la carpeta de activos, aquí es donde almacenamos los activos para el proyecto como cualquier archivo CSS cualquier ícono nuestros teléfonos y también podemos colocar imágenes dentro de aquí también. Debajo de esto, la carpeta de componentes es algo que veremos con más detalle pronto. Pero en lugar de crear componentes como lo vimos en la última sección, podemos organizarlos en archivos separados. Y aquí es donde los vamos a estar almacenando. El único componente que tenemos configurada es este ejemplo de HelloWorld. Este es un ejemplo de un solo componente de archivo. Esto generalmente se divide en tres secciones. En primer lugar, tenemos la sección de plantillas, que va a contener nuestro código HTML. Esto es similar a la última sección donde creamos nuestros componentes globales y locales, teníamos la sección de plantillas como cadena. No obstante, con un solo componente de archivo, esto es mucho más conveniente ya que podemos diseñar esto igual que el HTML normal. También podemos utilizar las llaves dobles para insertar nuestros datos. Entonces todo esto debería parecer bastante familiar. Si nos desplazamos hacia abajo hasta el final de la sección de plantillas, entonces tenemos una sección de script. En realidad es donde vamos a agregar tanto nuestro JavaScript como también nuestro código de vista JS. Dentro de esta sección por defecto de exportación es donde podemos configurar cosas como nuestros datos y métodos. Entonces finalmente en la parte inferior, también tenemos una sección de estilo donde podríamos colocar nuestro CSS, dividiendo nuestro código en componentes de un solo archivo como este. Es posible mediante el uso de herramientas de factura como web Park, que agrupa todo junto, arroja en un archivo de salida que luego se usa para la producción. A continuación vemos el archivo App.vue, y este es un archivo Vue especial que puedes pensar como el archivo principal o el componente principal. Al igual que con el ejemplo de HelloWorld que acabamos de ver, este archivo también tiene una sección de plantilla, un script, y también la sección de estilo también. Podríamos escribir nuestro código de proyecto completo dentro de este único archivo. No obstante, se pondrá muy grande. En cambio, generalmente tomamos nuestro código y los dividimos en componentes más pequeños. Dado que estos componentes en su propio archivo separado, sí necesitamos importarlos, al igual que vemos aquí, antes de poder usarlos en nuestra plantilla. Entonces con todo este código Vue.js en su lugar, ahora solo necesitamos una manera de montar esto al dom. Ya vimos en el index.html, tenemos este punto de montaña, que es el div con el ID de App. Este montaje se realiza en el siguiente archivo, que es el main.js. Este es el archivo JavaScript principal para nuestro proyecto y el lugar donde también podemos agregar plugins a como el router. Ya que ahora estamos usando el módulo view MPM, ahora necesitaremos importar las partes de esta biblioteca que necesitamos. La parte principal que necesitamos es este CreateApp y estamos usando las llaves. Por lo que importamos sólo la sección única de la biblioteca vue. A esto también se le conoce como importación con nombre. Ahora tenemos acceso a CreateApp. Podemos usarlo igual que hicimos en el proyecto anterior y luego montarlo al div con el ID de App, que acabamos de ver en nuestra página de índice. En el proyecto anterior, agregamos un objeto a CreateApp. Esto lo hicimos manualmente pasando un objeto y luego guardamos cosas como nuestros datos. Pero ahora en cambio con este tipo de configuración, importamos los componentes raíz, que es la App.vue. Entonces todos nuestros componentes van a ser anidados dentro de aquí. Todo esto puede parecer un poco complejo al principio, pero lo único que generalmente estamos haciendo es crear una página de índice o un archivo HTML para luego montar nuestra aplicación de vista en ella. La diferencia ahora en lugar de pasar en un objeto, es que este nuevo archivo de aplicación también puede contener componentes, pero en última instancia todos anidados bajo este único archivo App.vue. Después de esto, tenemos el expediente gitignore. Si estás usando git para el control de versiones, tenemos un archivo para decir qué archivos no queremos incluir en gits, seguido de un archivo babel config, que podemos usar para agregar cualquier configuración de babel personalizada. Babel es una herramienta utilizada para transformar cualquier código JavaScript más reciente que escribe en la sintaxis de estilo más antiguo. Si el navegador aún no lo soporta, el package.json es un archivo de configuración que tenemos en proyectos basados en nodos. Contiene información del proyecto como el nombre y también cualquier script que vamos a utilizar para iniciar nuestro proyecto y también construir para la producción. Ya hemos utilizado este script de servir cuando ejecutamos MPM run serve, iniciamos nuestro servidor de desarrollo. Dependencias justo debajo son los principales paquetes nuestro proyecto necesita y no podemos agregar más en una fecha posterior tampoco. Lo vincularemos al paquete Vue.js en lugar de usar un enlace CDM. Las dependencias de Dev son paquetes que solo necesitamos durante el desarrollo, como el servidor de desarrollo para ejecutar el proyecto y también cosas como eslint, que comprobará la calidad de nuestro código dentro del editor durante el desarrollo. Estos no se incluirán cuando empujemos nuestro sitio a la producción y tendremos un archivo de bloqueo el cual no tocamos. El mío es una versión de hilo, pero el tuyo puede no ser si solo estuvieras usando MPM. Se trata de un archivo autogenerado el cual enumera todos los paquetes que utilizamos, junto con todas las dependencias sobre los números de versión exactos que tenemos instalados. Por último, una nota rápida también, solo tenemos una pequeña cantidad de dependencias y dependencias de desarrollo dentro de un aquí. No obstante, esto dio como resultado muchos más módulos Node. Esto se debe a que algunos de estos paquetes también tienen sub dependencias también. Por lo que también se tiran más paquetes con MPM. Pero ahora esto es una visión general de nuestro proyecto del curso y nos vamos a familiarizar mucho más a medida que creamos nuestro próximo proyecto. 29. La extensión Vetur: En el video anterior, este archivo App.vue, entre otros, tenía alguna buena sintaxis codificada por colores destacando dentro de nuestro editor de texto. Pero tu versión puede ser bastante llana, igual que vemos aquí. El resaltado de sintaxis, entre otras características, fue creado dentro de Visual Studio Code mediante una nueva extensión. Si está utilizando Visual Studio Code, le recomendaría también que instale esto. Para ello, entra en la pestaña Extensiones. Entonces podemos buscar una extensión llamada Vetur. Seleccione esto, y deberá instalarlo y habilitarlo. Ya tengo esto instalado, así que voy a dar clic en el botón Activar. Entonces podemos volver a nuestra app.vue. Vetur ahora nos da esta bonita sintaxis resaltando para que nuestro código sea mucho más legible, junto con algún formato y autocompletado también. Si estás usando Visual Studio Code, te recomendaría instalar esta extensión, pero mucho mejor experiencia de desarrollador. 30. Introducción de la sección: proyecto de cuenta regresiva: Estas próximas secciones se van a centrar en crear un nuevo proyecto, que es una aplicación de cuenta regresiva de eventos. Vamos a estar usando la configuración de Vue CLI más sofisticada, y también aprender sobre cómo pasar datos entre componentes, y también muchas más técnicas que Vue tiene para ofrecer, como observadores, propiedades computadas, y así mucho más. Vamos a saltar al siguiente video, donde vamos a descargar el iniciador, y luego podremos empezar a construir nuestro proyecto. 31. Descarga del proyecto de inicio: Para este proyecto, he proporcionado una plantilla de inicio que está disponible para descargar desde el repositorio de GitHub. principio, cuando descargamos el repositorio completo, mía guardada en el escritorio como vue-3-course-master. En el interior de aquí, verás muchas más carpetas. Para el que te interesó es un vue-countreg- starter. Vamos a arrastrar esto hacia el código de Visual Studio. Voy a empezar a trabajar con nuestro nuevo proyecto. Usar el proyecto de inicio es exactamente lo mismo que el VUE-CLI-Setup, que miramos en la sección anterior. Pero usar un proyecto de inicio significa que todos en los mismos números de versión. También actualizaré esto cuando sea seguro hacerlo. Dentro de un código de Visual Studio, verás todos los archivos y carpetas familiares de la demo anterior. La única diferencia es si vamos al archivo App.vue. Dentro de nuestro script, tenemos este array de datos de eventos. Se trata de una matriz de objetos que vamos a utilizar como punto de partida para este proyecto. Esto sólo va a, digamos, yo estaba escribiendo algunos eventos diferentes, por lo que podemos ver esta información en el navegador. Pero muy pronto, vamos a crear estos eventos. Los actualizaremos y también los eliminaremos de nuestros proyectos. Si lo desea, también puede cambiar cualquiera de esta información del evento, como los nombres del evento, los detalles, todos los colores de fondo. Pero una cosa a tener en cuenta son estas fechas. Muy pronto, vamos a necesitar alguna fecha de evento que en el pasado o han caducado. Vamos a necesitar algunos en el futuro y vamos a necesitar algunos para el presente también. Esto sólo nos permitirá probar las cosas cuando lleguemos a esa etapa, pero volveremos a esto muy pronto. También para mantener el tamaño de descarga abajo, también he eliminado los módulos de nodo. Tendremos que ir a la terminal y también instalar esto. Si utilizas algún incorporado en la terminal dentro de un código de Visual Studio, irías a Terminal, New Terminal, y esto se abriría dentro de la carpeta de tu proyecto. Si utilizas algún terminal separado, necesitarás usar el comando CD, que va a navegar a nuestro directorio de proyectos. El mío se guarda en el escritorio. Para empezar, vamos a CD en la carpeta del repositorio, que es el vue-3-course-master. Entonces a partir de aquí, se CD en la vista Countdown Starter. Asegúrate de estar en la carpeta correcta. Entonces vamos a instalar los módulos de nodo con npm i. Npm i es corto para instalado. Esto jalará todos los paquetes que necesitamos para este proyecto. Una vez hecho esto, podemos iniciar el servidor de desarrollo con npm run serve. entonces esto va a abrir nuestro proyecto en local-host. Si hacemos clic en Comando o Control, esto abrirá esto dentro del navegador. Al tiempo que desarrollamos este proyecto. Podemos dejar funcionando este servidor de desarrollo. Pero si queremos cerrar esto, todo lo que necesitamos hacer es presionar Control-C, que cerrará nuestro servidor de desarrollo para que ya no podamos acceder a nuestro sitio. Después para reiniciar las cosas, luego ejecutamos npm run serve una vez más. Ahora podemos acceder a nuestro proyecto una vez más en el navegador. 32. Componentes de archivo único: Antes cuando miramos los componentes, teníamos una vista previa de lo que vamos a construir ahora, y también la estructura de los componentes también. Usando esta vista configuración de CLI, podemos crear estos componentes en su propio archivo para mantenerlos organizados utilizando el método de componentes de un solo archivo. Esto es posible ya que la CLI utiliza herramientas como Web Park para empaquetarlos todos para su producción. Por lo que no estamos penalizados por tener muchos archivos para descargar para el usuario. En cosas a tener en cuenta es que sí tenemos una carpeta de componentes, pero podemos crear componentes en cualquier lugar dentro de esta carpeta fuente. Pero generalmente los agrupamos en la carpeta de componentes, por lo que está más organizado. Ahora vamos a crear nuestro primer componente para este proyecto, que va a ser el event.vue. Como convención de nomenclatura, generalmente iniciamos nombres de componentes con una letra mayúscula. Estas necesidades tienen la extensión.vue. Este event.vue va a ser el componente que vamos a utilizar para cada uno de los eventos listados. Aquí, podemos configurar los componentes igual que hemos visto antes con nuestras secciones gratuitas. Tener la sección de plantillas. Contamos con la sección de script con nuestros valores predeterminados de exportación. Entonces finalmente en la parte inferior de la sección de estilos. Esto funciona igual que antes cuando miramos componentes globales y locales. Pasamos por encima de la sección de plantillas de nuestro HTML. Esto es mucho más conveniente ahora ya que podemos simplemente escribirlo como un archivo HTML normal, en lugar de incluir un esto como una cadena. Nuestro JavaScript entra en la acción de scripts, incluye nuestros datos, nuestros métodos, accesorios, y otros también. Después envolvemos esto en un valor predeterminado de exportación, para que podamos importar todos los componentes en otros archivos. El apartado de estilo, se puede escribir igual que una hoja de estilo regular. El CSS que escribimos aplica a toda nuestra aplicación, no sólo a la plantilla dentro de este archivo. No obstante, si sí quiere restringir esto para que sólo se aplique al único archivo, tenemos los atributos de ámbito. Además, si queremos usar otros idiomas también, podemos agregar esto como atributos Lang, dentro del cargador apropiado. Ponga más en esto después. Consulte nuestro componente. Primero necesitamos agregar algún contenido dentro de la plantilla. Ahora, vamos a ir a nuestro event.vue y simplemente agregar elementos AP con el texto de hi. Por el momento, nuestro componente de evento es solo un archivo Vue regular. Para verlo, necesitamos colocarlo exactamente donde queremos que aparezca. Recuerda desde temprano nos duro en este archivo App.vue, que es el archivo principal Vue.js, que está montado en el DOM. Entonces, significando todo comienza desde aquí. Este va a ser el lugar donde podemos agregar y registrar, nuestro componente para mostrar. En primer lugar, podríamos quitar los componentes de HelloWorld. También podemos quitar esto de la carpeta de componentes. Entonces podemos registrar nuestro nuevo archivo Event.vue. Desplácese hacia abajo hasta justo debajo de este objeto de muestra. Aquí vemos todavía estamos tratando de importar el ejemplo de HelloWorld. Donde en cambio queremos importar nuestro evento, que también está dentro de la carpeta de componentes. Después necesitamos registrar este componente para utilizarlo en nuestra plantilla. Para ello, pasamos nuestro nombre importado al objeto de componentes. Con esto ahora registrado, podemos subir a la plantilla. Entonces pondré esto entre unas etiquetas de plantilla. Incluso podemos hacer esto igual que un elemento HTML con la etiqueta de apertura y cierre. O también podemos usar una etiqueta de autocierre, igual que haríamos con una imagen. Guarda esto y vemos el texto de alto dentro del navegador. Este es otro de los beneficios de usar la configuración Vue CLI. Por defecto, incluye recarga en caliente, lo que si guardamos el proyecto, se actualizará instantáneamente en el navegador. Obviamente no queremos este mensaje de hola, así que en su lugar vamos a pasar a nuestros componentes event.vue, y reemplaza con nuestros datos de eventos. Cada uno de nuestros eventos va a estar rodeado en un artículo, por lo que podemos cambiar esto a un elemento de artículo. A continuación, un div que va a tener la clase de datos. Entonces junto a esto vamos a tener un segundo div, y esto va a tener la clase de cuenta regresiva. Esto nos dará la estructura que necesitamos para nuestros eventos. El apartado de datos va a contener el nombre y también los detalles de nuestros eventos. Entonces la sección de cuenta atrás a continuación va a ser la sección del lado derecho, que contará a la baja el número de días para estos eventos. Por lo que primero dentro de los datos, el rubro nivel tres, que va a ser para el título. Por ahora, solo podemos codificar duro en cualquier evento dentro de aquí, como una graduación, una clase de nombre. El cual usará NCSS, muy pronto. Elementos AP, que van a ser los detalles. Entonces podemos codificar algo de texto para nuestros detalles. Esta va a ser toda la estructura para la sección de datos, así que hasta la cuenta regresiva. Esto se dividirá en dos secciones: El primero va a ser un div, que contendrá un botón. Este botón simplemente dará salida a una cruz para que podamos eliminar el evento. El envoltorio tendrá una clase de remove_btn_wrapper, entonces podemos colocar nuestro botón anidado dentro. Para darnos la cruz podemos agregar una h pequeña entidad, que es el ampersand, el hash, y luego el valor de 10060. Esto sería un punto y coma y una clase de botón, pero voy a estilo en el que se va a remove_btn. Agregaremos un poco de estilo pronto, por lo que esta sección de datos está a la izquierda y luego esta sección de cuenta atrás está a la derecha. Por ahora sin embargo, si vamos por debajo de este remove_btn_wrapper, lo siguiente es agregar elementos AP, que será el número de días que quedan. Por ahora esto sería un valor codificado duro de 56, una etiqueta de ruptura, y luego dentro de los pequeños elementos, podemos tener los textos de días que quedan. Desplazándose hacia abajo por ahora, todo lo que necesitamos hacer dentro de nuestra acción de guiones, es darle un nombre a estos componentes. Dado un componente llamado no pudo ayudar con la depuración, ya que el nombre del componente puede aparecer junto a los mensajes, y también en las herramientas de desarrollador de Vue también. Entonces finalmente voy a estilo sección en la parte inferior, y esto también va a tener los atributos esculpt. Por lo que estos estilos solo se aplican a esta plantilla. Desde arriba, todo el evento está rodeado en los elementos del artículo. Los colores serán dinámicos pronto, pero por ahora podemos establecer un color de fondo de gris pizarra claro. Esto también hará uso del flexbox para el layout así display flex. Entonces esto nos permitirá usar una línea de ítems y luego censurar nuestro contenido. El radio fronterizo de un rem. Dado que habrá múltiples eventos, también podemos agregar algún margen en el exterior de este artículo de una rem en arriba e abajo y cero en la izquierda y derecha. Algún relleno, que es el espacio dentro, dentro del evento de 0.2 rems en la parte superior e inferior. Después un valor mayor de un rem a la izquierda y a la derecha. El color del texto únicamente destaca sobre los fondos más oscuros del humo blanco. Por último el peso de la fuente de 300. A continuación hemos anidado dentro de la sección de datos y también la sección de cuenta atrás. Estos van a hacer uso del flexbox para que podamos sumar algo de espacio en. Para ello, podemos aplicar un valor flex en primer lugar a los datos. Debe ser un valor de tres. Después podemos pasar a la sección de cuenta atrás. Si establecemos el valor flex dentro aquí para que sea uno, la sección de datos ocupará ahora tres veces el espacio de la sección de cuenta atrás. Después del centro, el text-align para estar en el centro, el tamaño de fuente de 1.6 rems. Después un tablero del lado izquierdo, que va a dividir nuestros dos tramos. Podemos hacerlo con un borde izquierdo, que será de un píxel de ancho y una línea sólida. Después de esto, vamos a establecer el tamaño de fuente para nuestro texto de nombre y también detalles. Solo nombramos secciones sean poco más grandes para que podamos establecer el tamaño de fuente para que sea 1.8 rems. Entonces la sección de detalles, que será un poco más pequeña, así que vamos por un tamaño de fuente de 1.6. El último apartado es a cuidar es este botón quitar y también el texto. Entonces, antes que nada, pasemos por el botón real. Si nos desplazamos hacia arriba, podemos ver que esto tiene una clase de remove_btn. Un fondo transparente para quitar el color de fondo blanco. Establecer el botón ancho del borde ninguno. También podemos cambiar el cursor para que sea un puntero. Cuando el usuario pasa el cursor sobre este botón. Por último podemos presionar este botón hacia el lado derecho, estableciendo la línea de texto en el envoltorio. El envoltorio tenía la clase de remove_btn_wrapper. La única propiedad CSS es establecer la línea de texto para que tenga razón. Esto ahora nos da la base que necesitamos para nuestro evento. Ahora podemos usar un bucle for, para recorrer este evento y hacer que el contenido sea más dinámico. 33. Hacer que nuestros eventos sean dinámicos: Incluido con este curso dentro del archivo App.vue, he proporcionado una matriz de objetos. Este es nuestro EventData que ahora vamos a utilizar para recorrer y proporcionarlos como apoyos a nuestro componente de eventos. Actualmente esto se comenta ya que si tenemos una variable como esta y no la usamos, el plugin de ESLint que usamos en, arrojará un error. Ahora, vamos a usar esto. Podemos seleccionar todo esto y descomentar todo esto fuera. Podemos hacer esto todo al mismo tiempo con el resaltado y luego un comando o control junto a la varilla delantera. Algo que hay que tener cuidado aquí es que no podemos colocar en ningún código JavaScript que queramos dentro de esta sección de script, pero Soul Vue lo reconoce, también necesita estar presente dentro del valor predeterminado de exportación. Por lo que ahora necesitamos crear una propiedad de fecha y luego asignarle esta matriz. Crea esta sección de datos y luego dentro de la sección de devoluciones, vamos a crear una propiedad de fecha llamada eventos. Esto va a ser igual a nuestra matriz, que es EventData. Vue ahora está al tanto de este EventData ya que ahora está almacenado dentro de eventos. Ahora podemos subir a nuestra plantilla y vamos a recorrer todos estos eventos. Entonces crea un nuevo componente para cada uno. Para esto, crearemos una lista desordenada y crearemos un elemento de lista para dar salida a cada uno de nuestros eventos. Este ítem de lista se va a repetir, por lo que podemos usar v-for. Diremos “evento en eventos”. Además, esto necesita una clave dinámica detrás de ella. Tenemos un valor único para cada uno, que es este ID. A continuación, podemos mover nuestros componentes de eventos dentro de este ítem de lista donde vamos a pasar nuestro evento como prop. Usa dos puntos ya que esto toma algunos datos dinámicos, y vamos a establecer este nombre para que sea evento, que será igual a nuestra variable de evento desde el bucle. Guarda esto y al instante veremos que tenemos seis eventos diferentes dentro del navegador. Ya que tenemos seis eventos dentro de nuestros datos de eventos, sí, sin embargo, todos tenemos la misma información, todos tienen el mismo nombre y también la misma descripción, y la misma fecha a. Para solucionar esto, vamos a pasar a nuestro componente event.vue. El primer paso es recibir estos datos como utilería. Props es una matriz que toma en nuestras cadenas, y sólo prop que estamos recibiendo es la información del evento. Ahora podemos usar esto arriba en nuestra plantilla. Tenemos el nombre del evento, así que abre las llaves dobles, y luego reemplaza por el event.name. Ese es nuestro nombre ahora cuidado. Después en la sección de detalles, quítale esto. Este fue el evento.detalles. Bien. Todo esto está funcionando, pero todos estos siguen teniendo el mismo color de fondo. Si vamos a nuestro EventData, podemos ver que se ha proporcionado un color de fondo diferente para cada uno de estos eventos. Ahora podemos hacer uso de esto más en nuestro componente de eventos pasando esto como una propiedad de estilo dinámico y usar esto para establecer el fondo. Dentro del artículo de apertura podemos usar el colon para atar una sección de estilo dinámico. Recuerda, nuestros estilos se pasan como un objeto, por lo que necesitamos abrir las llaves. Dentro de aquí vamos a establecer el fondo para que sea igual a nuestro event.background. Bien. Esto sólo nos deja con el número de días que nos quedan a los que vamos a volver ya que no necesitamos realizar un cálculo a partir del EventDate. También arreglaré el contraste de color para fondos como este amarillo, donde no podemos ver el texto que se superpone. Para terminar esto, solo vamos a añadir un poco de CSS, en primer lugar, a nuestra lista en la sección de aplicaciones y desplazarnos hacia abajo hasta la sección de estilo en la parte inferior. Los eventos están rodeados en la lista desordenada, que vamos a establecer para tener un relleno cero para eliminar cualquier valor predeterminado del navegador. A continuación, cada uno de estos eventos se almacenan en el elemento de la lista. Entonces estableceremos el estilo de lista para que sea ninguno Entonces, finalmente, el cursor va a ser un puntero cada vez que pase el cursor sobre cualquiera de estos elementos de la lista. Para restringir también el ancho máximo de estos eventos, si estiramos el navegador, ahora vamos a establecer el ancho máximo dentro de este envoltorio de aplicaciones. Esta app es la envoltura para toda nuestra aplicación, y podemos ver esto si entramos en nuestro index.html. Esta es la sección justo aquí donde se monta nuestra aplicación. Esto se aplicará globalmente. Todo lo que voy a hacer aquí es establecer el ancho máximo para que sea de 600 píxeles. Entonces podemos centrar esto con margen cero auto. Zero establecerá el margen en la parte superior e inferior y luego auto aplicará todo el margen, que está disponible igualmente a la izquierda y a la derecha. 34. Cálculo de los días restantes: Para cada uno de nuestros eventos, necesitamos calcular el número de días que quedan hasta que ocurra el evento. Para ello, vamos a crear un cálculo basado en la fecha actual y luego la fecha dentro de nuestros objetos, por lo que esta propiedad dentro de cada uno de nuestros ítems. Una vez que tengas esto y las fechas actuales, podemos entonces resolver la diferencia entre estas dos fechas y luego convertir esto para que sea el número de días. Esto dentro de lo [inaudible] vamos a crear un método. Debajo de la sección de datos, podemos crear nuestra sección de métodos, y el nombre del método va a ser Días Left. Los días que quedan van a tomar en el evento particular que queremos calcular. Esto pronto va a calcular el número de días que quedan. Pero primero necesitamos una forma de llamar realmente a este método y también proporcionar los datos del evento. Bueno, no podemos hacer todo esto de una vez en nuestra plantilla. Podemos configurar un inmueble el cual se va a pasar a nuestros eventos. Esto será dinámico, y este va a ser el número de días que faltan. Esto se puede establecer en el método antiguo, que también se llama Días Izquierda, donde vamos a pasar en cada evento individual, que es de nuestro bucle. una cosa a tener cuidado aquí, en realidad no estamos pasando este método como utilería. En cambio, lo que vamos a estar haciendo es pasar el resultado de este método, que se va a devolver de vuelta. El modo en que podemos hacerlo es llamando a esta función y luego proporcionando una sección de retorno al final. Vamos a devolver valor en lugar de la referencia real a este método. Comprobemos primero que nuestro método está funcionando y estamos recibiendo los datos del evento haciendo un registro de consola. Hagamos el event.date y para ello vamos a necesitar entrar en las herramientas de desarrollador del navegador con click derecho e inspeccionar, abrir la consola y ahora vemos seis fechas diferentes ya que estamos llamando a este método para cada uno de nuestros eventos, principalmente esto está funcionando bien. Ahora necesitamos trabajar con algunos métodos de fecha JavaScript, y para obtener la fecha actual, podemos usar date.now. Primero hagamos esto dentro de un registro de consola y podemos comprobar que tenemos toda la información que necesitamos para regir datos ahora. Entonces estamos podemos refrescar el navegador, y esto puede parecer bastante confuso, pero necesitamos mirar cada uno de estos daños. Lo estamos haciendo dos registros de consola por cada vez que se llama al método. El primero dos es para el primer evento, el tercero, cuarto punto es para el segundo evento y así sucesivamente. Podemos ver que tanto el event.date, que es el primero en la fecha.now está en formatos completamente diferentes. El primero de la fecha del evento es una cadena, que es el año, el mes, y finalmente el día y luego por debajo de la fecha actual. La fecha actual va a ser formateada en un número de milisegundos desde el 1 de enero de 1970. Para comparar estos dos, necesitamos convertir la fecha del evento para que esté en el mismo formato, y para ello JavaScript nos proporciona un método de fecha llamado Pass, upon es reemplazar, nuevamente accederemos al objeto de fecha y llamaremos el método Call Pass. Donde vamos a pasar en nuestro event.date, refresca el navegador y ahora veremos que cada par de fechas que tenemos ahora está en el mismo formato. Esto es bueno porque esto ahora significa que podemos comparar nuestras dos fechas que tenemos. Tenemos que acumular esto en una serie de etapas. El primer paso es deducir la fecha actual de la fecha del evento. Agarra esto y luego deduciremos fecha.ahora. Esto nos dará la diferencia que voy a almacenar en una constante llamada Tiempo. Al igual que los resultados dentro de la consola esta vez, variable también se va a almacenar en milisegundos. Esta constante de tiempo se almacena en milisegundos, por lo que necesitamos ahora convertir esto. Agarra todas las constantes y para convertir milisegundos en segundos, dividimos el resultado por 1000, lo que luego nos dará el número de segundos entre la fecha actual y la fecha del evento. Pero no queremos el número de segundos. Lo que queremos hacer es convertir esto en el número de días. Para convertir estos segundos días, primero, necesitamos multiplicar esto por 60 segundos y luego otra vez, multiplicaremos esto por 60 minutos y último de todo, multiplicaremos esto por 24 ya que tenemos 24 horas en un día. Estos serán nuestros nuevos resultados los cuales podremos almacenar dentro de una constante llamada Days y asegurarnos de que el editor de texto no coloque estos corchetes en los lugares equivocados. Tenemos que proporcionar los corchetes alrededor de los números. Así como recapitulación, tenemos el tiempo en milisegundos. Para convertir esto en segundos, dividimos esto por 1000. Esto se multiplica por el número de segundos en un día, el número de minutos en un día, y luego el número de horas en un día, lo que resulta en el número de días entre nuestra fecha actual y también la fecha del evento. Podemos dar un paso de estos dos reduciendo 60 multiplicados por 60 por en lugar de pasar en el resultado de 3 mil 600. Esto es exactamente lo mismo, pero sólo una forma más corta de hacer las cosas. Lo último que hay que hacer para conseguir nuestro número de días correctamente formateado es redondear este número hacia arriba. Recorta el resultado de esto, usa una función matemática llamada Seal, que va a redondear nuestro número al número entero más cercano. Pases [inaudible]. Podemos limpiar nuestros registros de consola y es este número de días el que queremos volver de este método. Se trata de valor de retorno el cual se va a pasar como un apoyo al componente de evento. Pasemos ahora a este componente de evento, podemos recibir esto como un accesorio dentro de nuestra matriz. este prop le faltaban días, entonces podemos comprobar si esto está funcionando dando salida a esto dentro de nuestra plantilla. En lugar de este valor codificado duro, eliminemos esto y la prop de salida que quedaban días. Pasado al navegador y esto ahora ha cambiado para cada uno de nuestros eventos. Observe que verá números tanto positivos como negativos y esto es completamente normal y esto es algo con lo que vamos a tratar pronto. 35. Renderizado condicional: Antes, cuando miramos por primera vez esta matriz de datos de eventos, te recomendé que establecieras algunas de las fechas en estos objetos sean en el pasado y algunas en el futuro. Si aún no lo has hecho, ahora será el momento de hacerlo. Esto es lo que me gustaría que hicieran: fijar al menos una fecha para estar en el pasado, una para estar con la fecha de hoy, otra para estar con la fecha de mañana, y otra con cualquiera de una fecha futura. Esto ayudará con probar las cosas muy pronto. Para ello, vamos a hacer uso del renderizado condicional, que es una forma de sólo mostrar algo, como nuestro evento, cuando se cumple cierta condición. En nuestro caso, la condición va a ser el número de días que faltan, cuales tenemos configurados desde el último video dentro de este método. Si esto devuelve un número positivo, este evento aún está por llevarse a cabo. No obstante, si devuelve un número negativo, sabemos que esta fecha ha pasado. Significa que podemos ocultarlo al usuario dentro del navegador. Para ello vamos a pasar a nuestro event.view y luego abrir dentro de la sección de artículos de apertura. Podemos mostrar y ocultar estos eventos mediante el uso de una directiva de vista llamada v-show.v-show es otra directiva y sólo mostrará este elemento si esta condición es verdadera. Por ejemplo, si 10 es mayor que 1, esto ahora es cierto y nuestros eventos ahora se mostrarán. Si decimos si 10 es igual a 1, esto no es cierto, por lo que esto ahora eliminará nuestros eventos. Pero en cambio lo que tenemos que hacer es mirar este día a la izquierda prop y decidir si se trata de un número positivo o negativo. Para d esto, podemos usar una función JavaScript llamada Math.sign. Esto nos permitirá pasar en cualquier número y recuperar ya sea uno negativo, uno positivo o un cero. Podemos ver aquí con los ejemplos, si pasamos en el valor de tres, se obtendrá una salida de uno. Si es negativo, obtendremos el valor de uno negativo. Si es cero, obtenemos el valor de cero. No le importa el valor del número que estamos pasando, sólo vamos a recuperar alguna vez uno, uno negativo, o un cero. Esto va a ser perfecto para usar en nuestro v-show vamos a pasar en Math.Sign y luego nuestros días izquierda prop. Ahora podemos comprobar si esto es igual a uno negativo o al proyecto. Los resultados que veas aquí atrás dependerán la fecha que hayas fijado para cada uno de tus eventos. Actualmente solo tengo un evento que está en el pasado, así que solo veo uno en el navegador. Para ver los hechos que aún está por suceder, podemos cambiar esto para que sea positivo. Pero con estas dos opciones, sólo hemos visto cinco de nuestros seis eventos. Esto se debe a que hemos fijado uno de estos eventos para que sea la fecha de hoy, lo que significa que quedarán cero días. Para lidiar con esto, vamos a establecer que esto no sea igual a negativo, que filtrará todas las fechas de caducidad y sólo nos dejará con la fecha que son hoy o cualquiera en el futuro. El siguiente que hay que cuidar es el texto, que son los días que quedan. Si el número de días que quedan es cero, debería leer hoy, y para cualquier evento pasado, debería leer días atrás. Podemos, de nuevo, hacer uso de los días que quedan prop, que es EventReceIVE, y combinarlo con algunas directivas de vista más llamadas v-if y v-else. Según suenan, estas funcionan igual que las declaraciones de JavaScript if-else. Proporcionamos dos secciones de código llamadas if y else. Si la condición es verdadera, esa sección se ejecutará. Si es falso, la sección else que se ejecutará en su lugar. Abajo en la parte inferior de esta plantilla de evento, tenemos estos elementos p, que voy a poner a esta sección justo arriba. Tratemos primero los eventos de hoy. Abre los elementos p y pondremos el texto para que sea hoy. Entonces, ¿qué condición queremos mostrar este elemento? Bueno, vamos a comprobar si el número de días que quedan es igual al valor de cero. Podemos entonces combinar esto con una directiva v-if y comprobar si el número de días que quedan es igual a cero. Si esto es cierto, esto va a renderizar el texto de hoy para este evento en particular. Guarde esto, y sólo tenemos un evento que es hoy, y vemos este texto dentro de aquí. Esto ahora deja nuestros dos elementos p uno al lado del otro, pero sólo queremos mostrar uno u otro. Para ello, podemos agregar la directiva v-else al siguiente elemento p. Guarde esto, y ahora sólo vemos alguna vez una de estas secciones dependiendo del número de días que faltan. Es una cosa a tener en cuenta al usar v-if y v-else, la sección v-else debe seguir inmediatamente el elemento v-if, por lo que no podríamos tener nada entre medio como un lapso. Como podemos ver, esto provocará un error. Esto ahora significa que el primer elemento de hoy mostrará si el número de días es cero. Si el evento está en el pasado o en el futuro, se mostrará el segundo elemento p. Dentro de este segundo elementos p, hay algunos trabajos adicionales que debemos hacer para mostrar las palabras correctas. En primer lugar, dentro de la pequeña sección, tenemos esta palabra de días. Esta palabra debe cambiarse a la palabra día si sólo queda un día y el operador ternario de JavaScript va a ayudar con esto. Corta esto, abre los tirantes rizados. Podemos comprobar si el número de días que quedan es igual a uno. Si es cierto, vamos a dar salida a la cadena del día. Si no, diremos días. Este es un signo de interrogación. Ahorramos esto está todo en nuestro trabajo y vemos un día en el navegador, 59 días y un 144 días también. También necesitamos hacer algo similar para esta palabra de “izquierda”. Para ver esto, si pasamos por esto apagado y cambiamos temporalmente esto para que sea positivo, cualquier evento que haya caducado, el texto debería decir “hace días”. Quitemos la palabra de “izquierda”, abrimos las llaves dobles, y luego vamos a hacer una cosa similar demasiado arriba en el donde usamos Math.Firma para comprobar si se trata de un número positivo o negativo, como en los días izquierda. Entonces vamos a comprobar si el número devuelto no es igual al negativo. Esto volverá verdadero si la fecha está en el futuro, y podemos dar salida al texto que se va a “dejar”. O alternativamente el texto de “ago”. Pasado al navegador la sección ahora funciona, vemos “hace 12 días”. Cambia esto para que sea negativo. Para eventos futuros vemos días que quedan. Algo más de lo que tenemos que cuidar es si cambiamos esto para que sea un número positivo, para cualquier evento que haya vencido, seguimos viendo negativo 12. Esto debería simplificarse para simplemente decir “hace 12 días”. Para esto, podemos usar otra función matemática de JavaScript, que se llama absoluta. Si volvemos a la página web de Mozilla y bajamos a la sección de métodos, tenemos este Maths.abs. Abajo a la sección de ejemplo, podemos ver independientemente de si pasamos un número negativo o cualquier número positivo, esto siempre devolverá el valor absoluto sin el símbolo negativo y esto será ideal para nuestro caso de uso. Volver a nuestra plantilla y donde generamos el número de días que quedan. Ahora vamos a pasar esto a Math.ABS, guarde esto, y ahora se debe quitar nuestro número negativo. Vamos a comprobar que los números positivos están funcionando bien y todo esto ahora también funciona. 36. Más sobre el renderizado condicional: Hasta ahora, hemos usado v-show, v-if, y v-else para mostrar y ocultar nuestros elementos. Pero, ¿cuál es la diferencia entre ellos? Echemos un vistazo a esto y a algunas otras cosas que podemos hacer con el renderizado condicional. Aquí hay un ejemplo sencillo que podría usarse en una aplicación bancaria o similar, que pide al usuario que cambie la contraseña después de varios días. Este sencillo ejemplo no sería bueno si el usuario cambiara la contraseña ayer o incluso hace 10 minutos. Utilizaríamos renderizados condicionales que solo muestran este mensaje si el usuario no ha ingresado por digamos, más de 100 días. Esto funcionaría, pero se ha repetido la directiva v-for. A lo mejor no es un gran problema para este pequeño ejemplo. ¿ Y si una sección completa dependiera de esta condición quién necesita agregar esta directiva a muchos elementos? Otra forma es agrupar todos estos elementos dentro de una etiqueta de plantilla. Podríamos entonces agregar la directiva v-if a este envoltorio. Significado, se aplicaría a todo lo que hay dentro. Esta plantilla también podría ser un div, una sección o cualquiera de los elementos. En beneficio de usar la plantilla es que no se renderiza dentro del navegador. El navegador leerá el código igual que vemos en la parte inferior. Actúa como un envoltorio invisible por lo que no interferiremos con el resto de nuestro código, optimizaremos cualquier divs rápidos innecesarios. En el video anterior, miramos el uso de v-if y v-else. Pero ¿y si tuviéramos una tercera condición? Es decir, también podríamos hacer uso de v-else-if. En este ejemplo más complejo, damos la bienvenida de nuevo al usuario si el número de días desde el último inicio de sesión es menor a 50. Entonces v-else-if se puede adjuntarlo a los siguientes elementos individuales o a un grupo de elementos utilizando el envoltorio de plantillas. En la sección se comprueba si el número de días desde el último inicio de sesión es entre 50 y 99, y luego se le pedirá al usuario que restablezca su contraseña pronto. Entonces como sección final, podemos usar la directiva else, y correrá si no se han cumplido las dos condiciones anteriores. decir, esto se ejecutará si el usuario no ha iniciado sesión durante cien días o más. Después les pediremos que restablezcan su contraseña. También podríamos usar múltiples secciones v-else-if, y esto es si tenemos más de tres condiciones que queremos comprobar igual que podemos hacer con JavaScript regular. Podemos usar tantos de estos como queramos siempre cada uno de estos elementos siga uno del otro. Ahora hemos visto tanto v-show como v-if v-if como diferentes formas de renderizado condicionalmente elementos. Pero, ¿por qué vue tiene ambas vías cuando parecen hacer lo mismo en la superficie? Bueno, debajo de mostrar y ocultar cosas, hay algunas diferencias. Los elementos del espectáculo siempre se rendericen al DOM. Aunque no sean visibles, siguen ahí. Está usando la propiedad de visualización CSS debajo de las campanas para mostrar y esconderse. No se puede usar en combinación con elementos de plantilla como envoltorio, ni se va a utilizar en combinación con v-else. Dado que esta directiva siempre está presente en el DOM y la propiedad de visualización CSS se utiliza para cambiar, a menudo es una buena opción si esperamos que se cambie de forma regular. V-if es más una representación condicional real. A diferencia de v-show, v-if no siempre está presente en el DOM, en cambio, sólo se renderiza si la condición se establece en true. Si una condición se vuelve falsa, toda la sección y controles se destruirán por completo incluyendo cualquier oyente de eventos o componentes hijo también. Dado que hay un costo ligeramente más pesado de agregar completamente o mover las secciones, puede ser beneficioso usar cuando esperamos que la condición cambie con menos frecuencia. Todos ellos tienen necesidades para desmontarlo completamente del DOM. 37. Propiedades computadas: Recientemente creamos esta sección DaysLeft, que tiene bastante lógica JavaScript anidada en su interior. A pesar de que todo este código funcionó perfectamente bien, las cosas empiezan a ponerse un poco desordenadas. En general, se puede recomendar extraer lógica más compleja lejos de nuestras plantillas siempre que sea posible, dejando la plantilla más cerca del HTML, que estaba destinada. Ayuda con esto, no podemos externalizar esta lógica en nuestra sección de script como método. Hagámoslo. Bueno, los apoyos. Métodos de vista previa y el nombre del método que voy a dar esto es DaysLeft string. Esto va a ser responsable de devolver una cadena que reemplazará todo el texto que veamos en el lado derecho. Dirá díasIzquierda, hace días, dependiendo del número de días que queden. Para esto, podemos reutilizar la mayor parte de la sección entre estas pequeñas etiquetas, así que copie las dos líneas de código dentro de las llaves. Esto ahora se puede utilizar como punto de partida para nuestro método. Ahora ya no estamos en nuestra plantilla, por lo que necesitamos quitar las llaves dobles para cada una de estas secciones. También, ya que ahora nos estamos refiriendo a DaysLeft, y a este camino de nuestra instancia Vue. Tenemos que referirnos a esto con esto.Daysleft en ambas líneas de código. Después guarde cada una de estas líneas en una constante. Esto va a ser ya sea el día o la palabra días. No quiero llamar a mi día o días constantes. Por lo que esto igual a este valor. A continuación, una segunda constante, que será o bien la palabra izquierda o ir. Entonces podemos devolver el valor de ambas palabras combinadas. Tenemos que devolver algo como hace días o díasIzquierda. Podemos hacerlo devolviendo el valor. Entonces necesitamos sumar ambas constantes y devolverlas desde el método, por lo que esto sería día o días más el valor de left o go. Ahora podemos llamar a este método en lugar de donde recortamos estas dos líneas de código. En medio de las secciones pequeñas, abrimos las llaves dobles, luego llamar a nuestro método. Dado que en realidad queremos ejecutar esta función, llamamos usando los corchetes. Esto será reemplazado por el nuevo valor de cadena, que se va a devolver de nuestro método. Esto nos deja con unas plantillas mucho más limpias, y también podemos reutilizar el código en otro lugar si es necesario. Vamos a probar esto. Ves un día a la izquierda, eso es todo lo que estamos confinados, y cambia esto a un número positivo. Esto debería decir ahora hace días, el mayor espacio entre estos, todo lo que necesitamos hacer es solo agregar un espacio dentro de nuestra cadena. Después de día o días, y un espacio y esto se mostrará en el navegador. Esta es buena pero no siempre la mejor solución para todos los casos, ya que un método necesita ser llamado manualmente, al igual que lo estamos haciendo aquí. El método sólo se va a llamar una vez que se cargue el componente. Si pasa un día y cambia el número de días, la UI no se actualizaría con el nuevo valor, hasta que o bien actualicemos la página o llamemos a este método manualmente. las situaciones como esta, podríamos usar una propiedad computada. Computed es otra sección que es posibles opciones API, que hemos estado utilizando hasta ahora con las secciones de datos y métodos. La estructura es exactamente la misma que nuestra sección de métodos. Entonces todo lo que necesitamos hacer es cambiar esto para ser computado. Voy a ver de inmediato esto provoca un error, que es porque a diferencia de un método no necesitamos llamar a esto usando los corchetes. Todo lo que necesitamos hacer es proporcionar una referencia que sea propiedad computada y todavía funciona exactamente igual. Un método y una propiedad calculada tienen el mismo aspecto en la superficie. Llamamos a un método manualmente, pero una propiedad calculada actualizará automáticamente la plantilla si ocurre algún cambio dentro de aquí. Vemos actualmente dentro de aquí tenemos algunos datos reactivos, que es esto.Daysleft. Si una propiedad calculada contiene datos reactivos como este, o cualquier otra propiedad o método de datos. Cada vez que esos datos se actualicen, actualizará automáticamente la plantilla. Significa que si DaysLeft cambia, nuestra plantilla cambiaría automáticamente a. Estas propiedades computadas también son muy eficientes, están en caché, y solo reevaluarán si algo reactivo cambia. Si nada dentro de aquí cambia, [inaudible] esta propiedad computada resultaría en los resultados en caché devueltos, lo que la hacía muy eficiente de usar. Un ejemplo más de una propiedad computada sería cambiar el contraste de color entre nuestros fondos de eventos y nuestro texto. Si regresamos esto a uno negativo, el fondo amarillo es difícil de leer, y también un poco para el verde también. Para los eventos que tienen estos dos conjuntos de fondo, vamos a oscurecer el color del texto. Esta también será una propiedad calculada por lo que justo después de nuestra cadena DaysLeft, la segunda propiedad calculada se va a llamar ChangeContast. Este es nuestro [inaudible] al igual que un método y al igual que nuestra sección calculada anterior. El primer paso es configurar una constante que va a ser una matriz con nuestros dos colores de fondo. Voy a llamar a esto los fondos de bajo contraste. Si sí cambias alguno de los colores a usar con tus eventos, también puede cambiar los valores dentro de aquí también. El valor amarillo y el verde van a ser f9f970, y luego el segundo elemento de matriz es 68ee94. No te preocupes si ves un error en este punto. Esto sólo significa que hemos creado esta matriz, pero aún no la hemos utilizado. A continuación, necesitamos comprobar si este evento actual tiene alguno de estos dos conjuntos de antecedentes, tenemos el evento pasado como prop. Cada uno de estos eventos tiene una propiedad de fondo. Significa que ahora puedes comprobar si nuestro event.background incluye alguno de estos colores de matriz. El modo de hacerlo es acceder a un método de matriz JavaScript llamado incluye. forma de hacerlo es acceder a nuestra matriz que es fondos de bajo contraste, y luego llamar a un método JavaScript llamado incluye. Esto aterrizará agarrar todos los valores dentro de aquí, y comprobará si incluye un valor en particular. Un valor particular que queremos comprobar es el event.background ya que esto también está dentro de nuestra instancia de vista, utilizamos esta palabra clave antes de llamar a event.background. Una propiedad calculada siempre debe devolver un nuevo valor. Este nuevo valor será verdadero o falso, dependiendo de si este color se incluye como fondo del evento. De esta manera podemos llamar a esta propiedad computada ChangeContast. Dentro de las llaves dobles o lugares justo debajo de nuestro artículo de cierre. Esto, y más al navegador, por lo que el amarillo es un poco difícil de ver, pero realmente seleccionar todo. Podemos ver que el amarillo es cierto. Nosotros como falsos para los otros colores. Este verde también se muestra falso así que veamos qué está pasando aquí. Este es el 68ee94, solo podemos comparar esto. Esta fue la charla de conferencia, creo que esto es sólo por las mayúsculas. Entonces cambiemos esto, haciendo de esto una coincidencia exacta. Ahora esto se establece en dos como se esperaba. No sólo queremos generar el valor de verdadero o falso así en nuestra plantilla. Un mejor uso sería aplicar sólo un color de texto oscuro si esto resulta en verdadero. Ya hemos mirado cómo hacer esto mediante el uso de atributos de estilo ligado. Esto ya está arreglado para cada uno de nuestros artículos separados por una coma. También podemos establecer la propiedad de color CSS, dependiendo del valor de ChangeContast. Si ChangeContast va a ser igual a dos, haremos uso del operador ternario JavaScript, el toggle entre dos colores diferentes. Si esto es cierto, el color que queremos colocar es un valor hexadecimal de 45 antes de que caiga. Si esto es falso, lo que significa que no estamos en los fondos de bajo contraste. Podemos entonces establecer el color de la fuente para que sea el valor del humo blanco. Guardar y el color del texto ya se ha actualizado para el amarillo y también el fondo verde. El beneficio de usar una propiedad computada aquí es que más adelante, estaremos permitiendo al usuario editar cada uno de estos eventos, incluyendo el color de fondo, lo que significa que observará cualquier cambio en el fondo, y luego actualizar el color según sea necesario. 38. Observadores y nodos raíz múltiples (fragmentos): Al lado de las propiedades de la computadora, la UJS también nos proporciona otra forma de observar los cambios de datos. Después ejecutar algún código después de que esto haya sucedido, esto es mediante el uso de un vigilante. Para ello, necesitamos agregar la propiedad watch a nuestro objeto options dentro del archivo App.Vue, junto a nuestros datos y nuestros métodos. Podemos colocar en nuestra sección de relojes como un objeto. Dentro de aquí vamos a pasar en una función de devolución de llamada, que se ejecuta cuando alguno de los datos que observamos y cambiarán. Podemos ver cuándo cambia una propiedad de datos, una prop o incluso una propiedad computada una prop o incluso una propiedad computadanombrando la función de devolución de llamada en el valor que desea ver. Entonces, por ejemplo, si tuviéramos una propiedad de datos llamada DarkModeSet, que inicialmente se estableció en falso, entonces pondríamos el nombre de nuestro observador después de esta propiedad que estamos observando. Entonces para este, este será DarkModeSet, y luego ejecutaríamos algún código dentro. lo que es mejor que veas este ejemplo, también podemos agregar un botón el cual va a alterar esto entre verdadero y falso. Abre la plantilla en la parte superior, configura el botón con un oyente de eventos al clic, que va a establecer DarkModeSet para que sea igual a lo contrario, y luego pondré el valor justo debajo para comprobar que esto está funcionando. Ahora debería poder cambiar lista entre verdadero y falso. Otra cosa que hicimos aquí también es aprovechada de otra característica libre de Vue, que es múltiples nodos raíz, también referida como fragmentos. Aquí dentro de nuestra plantilla, hemos colocado un botón junto a nuestra lista desordenada. Por lo que efectivamente tenemos dos raíces o nodos padre. Anteriormente al usar Vue 2, tendríamos que envolver todo este contenido en un solo elemento padre. Entonces, por ejemplo, necesitaría usar un div o un envoltorio similar, y luego colocar nuestro código dentro. Esto ya no es necesario en la versión 3 de Vue, y evita agregar envoltorios innecesarios a nuestro HTML. De vuelta a nuestro vigilante que fue configurado, también podemos pasar a nuestro vigilante el valor, que va a ser el valor después de que los datos hayan cambiado. Yo quiero nombrar esto como val, pero esto puede ser cualquier cosa que prefieras. Podemos ver esto con un registro de consola y luego abrir las Herramientas de Desarrollador. No tenemos nada que se muestre en el navegador, pero si hacemos clic en el botón de activación, esto luego reflejará los datos después de que esto haya cambiado. Por lo que esto ahora es cierto, vuelve a hacer clic en él. Esto ahora se cambia a falso. Esto ahora nos da la oportunidad de ejecutar cualquier código que quieras después de que algo se cambie. También nos da acceso al nuevo valor. Pero y si quisiéramos acceder también al valor antiguo antes de que se produjera el cambio. Esto podemos pasar en dos parámetros. Nuevamente, nosotros nombres de nuestra elección. Entonces el primero puede ser el nuevo valor, luego el segundo, el valor antiguo. Coloque ambos dentro de nuestro registro de consola. Abre las Herramientas de Desarrollador. Ahora si hacemos clic en “Toggle”, esto ahora nos dará acceso a los nuevos y también a los valores antiguos. Entonces así es como funciona un observador a lo sumo de manera sencilla, y esto suele ser suficiente para cubrir tantos casos usados. Pero también hay algunas opciones más que tiene disponible y también algunas fundas Edge también. [ inaudible] quieren ver un objeto o una matriz, veamos esto cambiando esto para ver nuestra matriz de eventos. Ahora podemos intentar agregar un nuevo evento y ver qué sucede cuando intentamos actualizar esto. Entonces vuelve a nuestra plantilla, y esta vez vamos a acceder a nuestros eventos. Entonces puede empujar al final un nuevo evento. Podemos agarrar cualquiera de estos eventos como plantilla, pegar esto y simplemente cambiar algunos de los detalles, va a ser el número siete. Ya que estamos dentro de estas comillas dobles, necesitamos saber usar las comillas simples dentro de este objeto. Así que pasa por cada una de estas y cambia las comillas dobles para que sean solteras. Entonces una vez que terminemos con esto, ahora todos podemos poner el valor de los eventos. Guarda este archivo. Vemos que tenemos todos los valores de uno a seis. Haga clic en un botón. Ahora se está agregando nuestro siete objeto. Abre las Herramientas de Desarrollador, pulsa “Refrescar”. Veamos qué pasa con nuestro vigilante. Haga clic en “Toggle”. Ahora se ha agregado nuestro séptimo evento, pero no vemos nada dentro de la consola. A pesar de que seguimos vigilando los eventos antiguos y los nuevos, y también tratando de iniciar sesión esto en la consola justo aquí, Esto ahora significa que nuestro vigilante parece no estar reaccionando ante ningún cambio. Esto sucede cuando estamos viendo una matriz o un objeto. Si estás familiarizado con cómo JavaScript maneja los tipos primitivos y de referencia, esto tendrá más sentido en el momento. De no ser así, esto se cubre en un video posterior de reactividad. Por ahora, sin embargo, tendrá que entender que cuando nos referimos a un objeto o a una matriz, cualquier cambio en los elementos o las propiedades del objeto anidan dentro no desencadenará una actualización. Para que este observador se activara, necesitaríamos reemplazar la matriz completa u objeto, en lugar de solo una de las propiedades que tenemos dentro. O alternativamente, podemos pasar en una opción profunda la cual le dirá a Vue solo que observe también cualquier cambio que esté anidado en su interior. Para pasar este objeto profundo, tenemos que cambiar también la forma en que construimos a nuestro vigilante. En lugar de configurar una función de devolución de llamada como tenemos aquí, necesitamos también cambiar esto para que sea un objeto. Este objeto ahora significa que seguimos vigilando alguno de estos eventos. Ahora podemos pasar en algunas de las opciones. El primer inmueble es esta opción profunda, que vamos a establecer como verdadera. Separados por coma, luego agregamos en nuestra función de manejador, que se va a ejecutar en cualquier momento que estos datos de evento cambien, y está dentro de este método de manejador, que va a reemplazar nuestra función de devolución de llamada. Entonces al igual que con todo esto, también puede tomar el valor que puede iniciar sesión en la consola, actualizar y abrir las Herramientas de Desarrollador. Ahora cuando agregamos nuestros eventos extra, esto ahora se refleja dentro de la consola. Abre esto y haz click en la sección array, y tenemos siete objetos diferentes. También nota aquí dentro de nuestro vigilante, solo pasamos al manejador un solo parámetro. Esto se debe de nuevo a que estamos viendo un objeto o una matriz. Ahora sólo tenemos acceso al nuevo valor, más que al valor antiguo. Otra propiedad que podemos sumar a este vigilante es Inmediata. La opción Inmediata nos permitirá ejecutar el vigilante tan pronto como se cargue nuestro componente, junto con cualquiera de los cambios también. Por lo que actualmente, déjame refrescar el navegador. Vemos que este vigilante no se ejecuta de inmediato hasta que hagamos algún cambio a estos datos. Si sí quisiéramos que este vigilante también corriera tan pronto como se carga el componente, pasamos en la opción Inmediato, y luego vamos a poner esto en verdad. Pruebe esto, abra el navegador, actualice. Vemos que el vigilante se ejecuta de inmediato, y también puede hacer clic en el botón “Toggle” también. Aquí está pasando bastante y puede que te estés preguntando por qué Vue nos proporciona tanto el vigilante como las opciones computadas. Cuando los dos parecen hacer cosas similares en la superficie. Bueno, en realidad hay algunas diferencias clave entre estas dos opciones, que vamos a descubrir a continuación. 39. ¿Computado u observadores?: Al empezar por primera vez con Vue JS, tal vez confuso por qué tanto la propiedad computada como el observador existen cuando ambos parecen hacer algo similar en lo que necesitas para un cambio y luego ejecutar algún código. Pero hay algunas diferencias clave y una de ellas es si quieres ver múltiples piezas de datos. The View documentation muestra este gran ejemplo donde tenemos el nombre y apellido. No necesitaríamos crear dos relojes para el nombre y apellido para construir el nombre completo que necesitamos. En este caso, una propiedad computada sería mejor ya que podemos hacer referencia múltiples piezas de datos reactivos y se ejecutará si alguno de estos cambios. Considerando este mismo ejemplo exacto, nota aquí estamos tomando algunos datos y luego devolverle un nuevo valor. Como sabemos, se puede acceder a este valor en cualquier parte nuestra plantilla mediante el uso del nombre calculado de crear nombre completo. Esto es perfectamente válido con una propiedad computada en la forma correcta de usarlo. Pero no debemos tratar de usarlos para cambiar ningún dato o estado externo, como cualquier cosa dentro de nuestras propiedades de datos, ya que resulta en lo que se llama un efecto secundario, que luego arrojará un error. Aquí la clave es utilizar una propiedad calculada cuando queremos observar un cambio de datos y luego devolver un nuevo valor. Entonces si queremos actualizar nuestros datos, o nuestro estado, esto debe hacerse entonces usando un vigilante. Para resumir, podemos usar una propiedad de reloj cuando queremos ejecutar una función cuando los datos cambian. Pero en cambio, si queremos devolver un nuevo valor que se calcula sobre algunos datos existentes, entonces utilizaríamos un valor calculado. También computado nos permite ver múltiples fuentes de datos, mucho más eficientemente también. Como miramos en la última diapositiva, no debemos usar una propiedad calculada para mutar directamente el estado, ni debemos usarla para ninguna operación asíncrona. Es decir, si tuviéramos una tareas asíncronas como maíz de algunos datos de API, que puede tardar algún tiempo en regresar del servidor. Un vigilante es el camino a seguir. Como ya hemos visto, las propiedades computadas también son accesibles directamente desde dentro de la plantilla. Por lo que podemos usar nuestra salida, el nuevo valor de retorno. Otra diferencia es que las propiedades no computadas también se guardan en caché. Imagina que una propiedad de fecha está siendo observada tanto por una propiedad computada bajo vigilancia? Si entonces se actualiza la propiedad de datos, bueno, el valor es el mismo que antes. Una propiedad calculada no volverá a calcular ya que el valor no ha cambiado. No obstante, la propiedad watch seguirá ejecutando la función de devolución de llamada, independientemente. Como puedes ver, ambos tienen sus usos y ventajas, tanto para diferentes casos de uso. 40. Ordenar y alternar eventos pasados: Dentro de nuestro event.vue arriba en la parte superior de la plantilla, hemos estado cambiando manualmente entre eventos en el pasado y en el futuro cambiando este-show sat in. Pero ahora vamos a cambiar esto agregando un botón, haz esto a continuación. Junto con esto, también vamos a agregar una propiedad computada, vamos a organizar estos eventos en orden fecha a. Justo antes de hacer esto, también podemos eliminar los datos del video de los relojes anteriores. Ya que no necesitamos esto para nuestro proyecto, no necesitamos la sección de reloj, esto se puede quitar, la propiedad de set de modo oscuro, y también la sección de nuestra plantilla que era el botón, y también la salida de eventos. Entonces dentro de esta sección app.vue, empecemos con el botón de alternar agregando una nueva propiedad de datos que se va a llamar ShowPastEvents. Este va a ser un valor booleano el cual se establecerá inicialmente en falso, para luego abrir la plantilla. También podemos pasar esto a nuestros componentes del evento. Asegúrate de que esto también sea dinámico, por lo que vamos a usar los dos puntos para vincular el nombre propio de ShowPastEvents, que también será igual al valor con el mismo nombre. Dado que este dato es una propiedad, también hay que ir a nuestro event.vue y pasar esto a nuestros apoyos. Esta prop ahora también se puede utilizar dentro de nuestra plantilla para mostrar y ocultar cada uno de estos eventos, y dentro del v-show, directamente pasaremos en el operador O. También muestra evento si nuestro prop ShowPastEvents es igual a verdadero. Actualmente tenemos esto configurado en falso así que vamos a cambiar esto hacia abajo en la sección de datos. Si lo hacemos realidad, actualiza el navegador y ahora todos los eventos anteriores también se mostrarán a, todo está en nuestro trabajo. Entonces ahora necesitamos introducir un botón el cual va a cambiar esto por nosotros dentro de la plantilla app.vue y justo encima de nuestra lista desordenada, por lo que esto aparece en la parte superior de nuestra aplicación. Crea un nuevo div con la clase de opciones. Este será el envoltorio para nuestro botón junto a algunos otros botones que agregaremos más adelante. El botón va a escuchar un evento click donde vamos a alternar el valor de ShowPastEvents. Este botón también necesita un nombre para que podamos ver esto en el navegador. Después al navegador, vamos a probar también nuestro botón, y esto ahora alternará entre mostrar y ocultar cualquier evento pasado. Volveremos a este botón más adelante y agregaremos un poco de estilo, pero ahora vamos a agregar una propiedad computada para organizar estos eventos en orden de fecha. Aquí podemos ver que éste que es hoy debería estar en la cima, entonces deberíamos ver el día que queda, 59. Por lo que estos eventos no están actualmente en orden. Este archivo app.vue contiene todos nuestros eventos los cuales se almacenan en esta propiedad de datos. En lugar de ahora bucear a través de estos directamente, primero, vamos a configurar una propiedad computada que va a reorganizarlos en el orden correcto y luego devolver la matriz de eventos recién arreglados. Para esto, vamos a necesitar una sección computada con una propiedad llamada eventos de orden. Lo que queremos hacer en esta sección computada es agarrar todos nuestros eventos y reorganizar el orden. Como sabemos de videos anteriores, no podemos manipular directamente el estado por lo que no podemos cambiar el valor dentro de esta propiedad de datos. Entonces, en cambio, lo que vamos a hacer es crear una variable local que va a ser la copia de estos eventos. Por lo que una constante llamada EventsToOrder. El conjunto es igual a ser una copia usando this.events. Las propiedades computadas necesitan devolver algo, un [inaudible] con un valor de este eventsToOrder después de llamar al método de ordenación de JavaScript. Si nuestra matriz de eventos no incluía ningún objeto y fuera mucho más simple, y se componía de cosas como cadenas de texto o incluso números, esto sería todo lo que necesitaremos hacer, ya que de forma predeterminada, los valores cuando usamos el método de ordenación son convertidos en cadenas y se ordenarán alfabéticamente en orden ascendente. Nuestro caso es un poco más complejo sin embargo. Tenemos una matriz de objetos y necesitamos ordenarlos por la propiedad date. Para ello, podemos pasar al método de ordenación una función de comparación opcional. Esto va a comparar dos elementos cualquiera en nuestra matriz en cualquier momento. Los nombres que damos a estos dos elementos nos corresponden completamente, y podemos pasar estos como una función de flecha. Por lo que pasando cualquier nombre de variable para que nuestros dos elementos se comparen. Quiero simplemente llamar a esto a y b Esto ahora va a recorrer todos nuestros objetos dentro de esta matriz y luego compararlo con otro tiempo. Tendré acceso a estos dos objetos los cuales se están comparando con estas variables a y b, lo que significa que podemos comparar las fechas de cada uno. En primer lugar, vamos a comprobar si la propiedad day en el objeto a es mayor que la propiedad day en el objeto b Si esto es cierto, usaremos el operador ternario JavaScript, que devolverá un valor de uno. Si esto es falso, entonces devolveremos el valor de uno negativo. Es número positivo o negativo va a reorganizar nuestros objetos estableciendo la posición del índice. Por lo que al comparar estas fechas, si una de ellas es más alta, entonces será empujada hacia arriba la posición del índice con un número positivo. De lo contrario, será empujado hacia abajo con el número negativo, y luego una vez que haya terminado de ordenar comparando todos los elementos de nuestra matriz, luego volveremos a la matriz original en el nuevo orden, que luego podremos usar en nuestra plantilla para a través en el lugar de nuestros eventos originales. Ahora vamos a agarrar eventos de orden hasta nuestra lista desordenada y luego recorrer esto en lugar de nuestra propiedad de datos, guardar esto, y al instante, nuestros eventos y ahora actualizados en el orden correcto. Arriba en la cima, tenemos cualquier evento anterior que se pase, tenemos el evento de hoy, y luego estos ahora se ordenan de lo más cercano a lo más lejano, y también deberían seguir funcionando si ocultamos algún evento anterior. Además, conozco los beneficios de cómo echamos de menos en una propiedad computada. Posteriormente, si el usuario edita la fecha en alguno de estos eventos, esto también volverá a calcular el orden a. 41. Teleport: Por el momento, nuestra aplicación tiene eventos codificados de forma dura. Pero pronto, vamos a permitir que el usuario agregue nuevos eventos y también edite los existentes también. Estarás haciendo esto agregando un formulario, este formulario podría ser un componente, e incluso podría colocarse en su propia página. Un escenario común sin embargo es colocar la forma en un modelo pop up. Esto significa que el usuario se queda en la misma página, pero el formulario aparecerá sobre el contenido. Dependiendo de la estructura HTML, los modales pueden ser complicados de posicionar usando CSS, cualquier teletransporte podría ayudar con esto. A modo de ejemplo dentro del archivo App.vue, por la parte superior de nuestra plantilla, imagina que teníamos un elemento de forma igual a este, en esto solo diré agregar nuevos eventos. Para crear esto como un modal pop up, no necesitaríamos aplicar algún CSS. Actualmente esta forma es apenas empezar en la parte superior de los componentes, pero generalmente queremos un pop up modal sobre el resto del contenido. A menudo hacemos esto estableciendo la propiedad de posición CSS para ser igual a absoluto, cualquier elemento que se establezca como absoluto, buscará un elemento padre que se establece como relativo, y luego usar este contenedor relativo para hacer referencia desde. Por el momento, esto no es un problema enorme ya que aquí estamos dentro de los componentes de nivel superior. Bueno, si esta forma estaba profundamente anidada dentro de muchos componentes diferentes y montones de envolturas diferentes, se convertirá en una tarea CSS más compleja. El posicionamiento modal exactamente donde lo queremos, para ayudar con esto, la función de teletransporte nos permitirá seguir manteniendo este código dentro de la plantilla para realmente renderizarlo en otro lugar. Hacer esto proporciona algunas ventajas, como podemos mantener esta estructura HTML de formas dentro de los mismos componentes que los datos del formulario o su lógica. Todavía puede acceder a cualquier cosa desde nuestras secciones de vista como nuestros datos y nuestros métodos, pero en lugar de ser renderizado dentro de este componente, su salida en una parte diferente puede ser en cualquier lugar como otros componentes, cumplir un modal, it puede ser una ventaja para colocar esto dentro del índice raíz o archivo HTML. Si entramos en la carpeta pública, esto está contenido dentro de aquí. Esta página de índice tiene nuestro principal contenedor de aplicaciones, aquí es donde se inyecta el resto de su aplicación. Como acabamos de mencionar, podemos teletransportar nuestra forma a cualquiera de estos componentes anidados. O alternativamente, podríamos agregar esto a la sección del cuerpo o incluso puede teletransportarse es muy diferentes elementos por completo. He tenido un div diferente con el id del modal. Podríamos teletransportar este código de forma y lugares dentro de esta sección div, lo que significa que es completamente independiente del resto de la estructura anidada. Esto resultaría en nuestra forma o cualquier otra sección con la que quisiéramos que el teletransporte tuviera un envoltorios izquierdos y también código circundante para tratar, y también otro beneficio que está relacionado con las formas. Si sabes qué es la propagación de eventos, también debes quitar esto ya que ahora no tiene pase elemental. Ahora tenemos este elemento para montar también, pero ¿cómo realmente agregamos esto a la sección? Bueno, para hacer esto, vamos a cortar nuestra sección de formularios. Después anidar esto dentro de las etiquetas de teletransporte. En la etiqueta de teletransporte de apertura, entonces podemos pasar en un dos atributos que se va a enlazar con nuestros elementos. Esto es igual que cuando usamos un selector de consultas o cuando seleccionamos un elemento con CSS, lo que significa que usamos lo duro para un id, y estos son el id de modal. Guarda esto y ahora sobre el navegador, recuerda desde antes añadimos el teletransporte en el formulario, estaba apareciendo en la parte superior del navegador. Ahora si nos refrescamos y nos desplazamos hacia abajo hasta el fondo, ahora esta forma se coloca en la parte inferior de nuestro proyecto, lo que significa que nuestro teletransporte está surtiendo efecto. Esto va a ser en última instancia una forma pop up, por lo que ahora necesitamos una propiedad de datos. Podemos activar y desactivar esto a la sección de datos, dice obedecer propiedad de datos, que va a ser un valor booleano llamado ShowForm. Esto también necesitará un botón arriba en nuestra plantilla, y podemos agregar esto dentro de nuestra envoltura de opciones, así que justo después del primer botón añadiremos un segundo botón, pero nuestro CSS, podemos agregar la clase de AddNew. Esto también va a escuchar un clic. igual que arriba cuando cambiamos la propiedad de datos, haremos exactamente lo mismo para ShowForm, y entre la parte inferior, también agregaremos una entidad HTML, que será el icono más. El símbolo más se compone con los ampersands, el hash 43, y un punto y coma. Entonces, por último, mostraremos y ocultaremos este formulario en base a si se dice que esta propiedad de datos ShowForm es verdadera o falsa. Podemos hacer esto usando v-if. Guarda esto, y ahora podemos probar esto de nuevo en el navegador. Tienes el icono más, haz clic en esto, ver agregar nuevos eventos, vuelve a hacer clic en esto, y esto ya ha sido eliminado. Este efecto también será más claro si abrimos las herramientas de desarrollador del navegador, abrimos la sección del cuerpo. Ahora, dentro de aquí podemos ver el div con el id de app y también el div con el id de modal. Estas fueron las dos secciones que tenemos dentro de nuestra página de índice. Ahora bien, si abrimos el modal, vemos forma anidada por dentro. No obstante, si alteramos la lista haciendo clic en un botón, esto ahora reacciona a nuestro estado verdadero o falso. También es un montón de otros usos también para teletransportarse como mostrar mensajes al usuario, información sobre herramientas, o simplemente colocar contenidos en otras ubicaciones, lo que no estamos restringidos por nuestro componente actual. En la próxima sección, haremos uso de este formulario que acabamos de agregar a ambas ediciones y además añade nuevos eventos. 42. Introducción de la sección: formularios, eventos y modificadores: Estos próximos videos se van a centrar en una parte realmente importante de, no sólo Vue.js, sino en el desarrollo web en general, y esto es manejar formularios. Echaremos un vistazo a muchas cosas como emitir datos, realizar copias de seguridad a un componente principal, validar todos los formularios, también encuadernar nuestros datos con Vue.js, y también algunas otras cosas como la propagación de eventos y cómo podemos manejar esto con modificadores. 43. Nuestro componente de formulario: Dado que Vue.js tiene esta idea de crear plantillas en nuestros componentes de un solo archivo, crear un formulario es generalmente lo mismo que con HTML normal. Necesitamos un formulario que nos permita tanto agregar un nuevo evento como editar también cualquier evento existente. Podríamos crear dos formas de esto, o ambas de estas operaciones pueden hacer uso de los mismos componentes de formulario si quisiéramos. En primer lugar, vamos a crear un componente. Entonces abriré la carpeta fuente en los componentes, y luego nuestro nuevo archivo se va a llamar el AdDupdateForm; nuevo con la extensión.vue. Ahora podemos ir a la App.vue y luego podemos registrar este archivo para que podamos usarlo en lugar de este formulario que creamos dentro del guión. Debajo de nuestro objeto podemos crear una nueva importación, pero esta vez nuestra importación va a estar importando nuestro AddupdateForm. Al igual que el evento anterior, esto es./ componentes. Entonces si entramos en esto, tenemos el AddUpdateForm. No olvides también registrar esto dentro de los componentes. Después hasta el teletransporte en la parte superior de nuestra plantilla, por lo que vamos a sustituir esta sección de formulario. Recuerda esto tiene la sección v-if, por lo que podemos activar estos componentes en un apagado. También necesitamos llevar esto a nuestro nuevo componente, así que colocaré todos los componentes dentro del modal que también va a incluir las declaraciones condicionales v-if de show form. Con esto ahora en su lugar, ya no necesitamos esta sección de formulario justo arriba. Agregaremos todas las entradas de formulario dentro de nuestros nuevos componentes. Entonces podemos empezar como de costumbre con la plantilla para nuestro HTML, y luego anidarla dentro de una sección div la cual va a tener la clase de form_ wrapper. Podemos entonces colocar nuestra forma, anidarla dentro. El motivo por el que tenemos este envoltorio form_ rodeando nuestro formulario es porque nos va a ayudar más adelante cuando le peinemos este modal. Vamos a tener este rapero de forma como fondo más oscuro, por lo que cubre todo el resto del contenido cuando este modal está activo. Entonces esta sección de formulario tendrá un fondo más claro por lo que esto superpondrá este div. El primer apartado va a estar rodeado en un div, y esto va a ser para nuestra forma entrada de nombre. Este será el nombre del evento como la graduación. En primer lugar, la etiqueta que va a ser para la sección de nombres, y ésta tendrá la etiqueta de nombre. El insumo, el tipo de texto. El ID para esto va a ser nombre que coincida con nuestros cuatro atributos. El siguiente, si revisamos nuestro objeto, éste va a ser para los detalles y necesitamos uno para la fecha y luego uno para el color de fondo. Copiemos esta sección div ya que esta siguiente también va a ser la entrada con el tipo de texto, pero esta vez esto va a ser por los detalles; la etiqueta también de los detalles y también el ID coincidente. Al navegador podemos comprobar que esto está funcionando haciendo clic en nuestro botón y desplázate hacia abajo, y tenemos nuestras dos entradas de formulario. El siguiente justo debajo de esto va a ser para nuestro servicio de fecha, tendremos la entrada con el tipo de fecha. Esto nos dará un recolector de fechas para seleccionar la fecha del evento. Esta etiqueta también es fecha, y también el texto para la etiqueta también. Ahora esto solo deja el color de fondo, y para ello tenemos seis opciones diferentes para nuestros seis eventos de ejemplo. Voy a hacer uso de los mismos seis colores que hemos usado dentro de aquí. Para elegir entre cualquiera de estos, vamos a utilizar una entrada selecta. Esto también tendrá un envoltorio div para mantener el estilo consistente, también la etiqueta para el fondo. Pero esta vez esto tendrá las entradas selectas HTML. Select tiene una etiqueta de apertura y una etiqueta de cierre para que podamos sumar todas las opciones que necesitamos seleccionar en medio. Es ID es tanto es la etiqueta de fondo, y luego tenemos nuestras seis opciones diferentes las cuales vamos a incluir y el primer valor es el color hexadecimal de F34949. Esto es por nuestra opción roja. La segunda opción fue para nuestro color rosa y esto tiene el valor hexadecimal de F07949, y el texto de rosa. La tercera opción va a ser para el valor morado, que tiene el color hexadecimal de 997AF0. Para el azul, este es 7AD3F0. A continuación añadiremos una opción verde, y el color verde que voy a usar es 68EE94. La opción para el amarillo, este va a ser un valor de F9F970. Por último, también agregaremos una opción para el color naranja, y este valor hexadecimal va a ser EB980F; cualquier texto de naranja. Esta es ahora todas las opciones que necesitamos y para terminar toda forma solo colocaremos un div en la parte inferior con el botón, para que podamos agregar un nuevo evento. Pero ahora este botón no va a hacer nada, sólo vamos a añadir el texto de add. Podemos ir al navegador y comprobar que todo esto está funcionando, así que activaré esto. Tenemos nuestras entradas de texto, el recolector de fechas, por lo que podemos seleccionar una fecha para el evento. Tengo la opción Seleccionar con todos nuestros diferentes valores de color, y finalmente el botón en la parte inferior. Muy pronto echaremos un vistazo a cómo podemos extraer los valores de esta entrada de formulario y colocarlo en nuestros datos. Pero a continuación vamos a volver a esta forma y añadir un poco de estilo, y convertirlo en un modal popup. 44. Estilización y posicionamiento del formulario modal: Como ex creado en el último video, ahora necesita algo de estilo en no sólo hacer que se vea un poco más bonito, sino también hacer que esta superposición todo el resto del contenido. Recuerda, en el último video, Creamos este formulario. También agregamos este div como envoltorio. Esto nos va a permitir crear un efecto modal y este envoltorio estirará toda la altura sobre el ancho completo de la página. Tendrá un color de fondo más oscuro, lo que nos va a dar el efecto de un aparecer sobre el resto del contenido. Y luego encima de esta sección oscura, luego incrustaremos nuestra forma, que se va a centrar en la página y además tener un color de fondo más claro para que destaque. Para hacer esto hacia abajo en la parte inferior, iremos volando nuestra plantilla, crearemos nuestra sección de estilo. También se puede aplicar a los estilos sólo aplicados a este componente en particular. Entonces, antes que nada, apuntaremos al Form Wrapper, que está rodeando toda nuestra forma y le daremos este color de fondo más oscuro. Por lo que para darle este color de fondo más oscuro, iban a agregar un valor RGBA. Esto nos va a permitir primero crear el color oscuro de 000. Y entonces el cuarto canal, que es el alfa, nos permitirá sumar el valor de opacidad de 0.7, esto es similar al 70 por ciento de capacidad. Y esto va a asegurar que nuestros antecedentes van a ser ligeramente transparentes. Ahora este será un color de fondo más oscuro, pero aún podemos ver el contenido en el fondo. A continuación, vamos a hacer algún posicionamiento para que podamos exponer esto para que sea el ancho completo y la altura completa de la página. En primer lugar, sacaremos esto del flujo del resto del contenido por ciertamente valor de posición para ser absoluto. Entonces podemos usar los cuatro valores de arriba, derecha, inferior e izquierda, que va a estirar nuestros componentes de forma a los cuatro lados de la página. Podemos hacer esto con el valor superior de cero, el valor correcto de cero, y luego también lo mismo para la parte inferior y también la izquierda. Ahora si vamos y abrimos nuestro modelo, vemos que se ha ajustado el color de fondo más oscuro, pero es ligeramente transparente. Esto también se extiende a los cuatro lados del navegador. Actualmente aunque todas las formas colocadas en la esquina superior izquierda. Para trasladar esto al centro de la página, vamos a hacer uso del flexbox CSS. Por lo que comenzaremos con el tipo de visualización de flex, y luego podremos establecer el contenido de justificación para que esté en el centro, lo que nos dará la alineación a través de la página. Ahora podemos establecer la alineación vertical con alinear elementos. Esto es ahora como hacerlo con el Form Wrapper y ahora podemos pasar a peinar la sección de formulario real. Para que esto destaque, le daremos un color de fondo blanco. Y también hacer esto un poco más ancho y también más alto. Por lo que estableceremos el ancho mínimo sea del 60 por ciento del ancho de la ventana con 60 vw. Entonces también la altura mínima del 40 por ciento de la altura de la ventanal. Algún relleno para agregar algo de espacio en, dentro de la forma. Adelante a REMS y luego redondeemos las esquinas con algún radio fronterizo. Bien. Esto ahora va a algún lado. A continuación pasaremos a cada una de estas entradas de formulario. Recuerda desde arriba cuando creamos cualquiera de estas entradas, todas estaban rodeadas en una sección div. Por lo que primero seleccionaremos nuestro formulario y luego nos apuntaremos a cualquier div que inmediatamente siga. Estos tendrán el tipo de pantalla de flex. Por lo que si se apilan verticalmente, tendrán la dirección flex de los espacios de columna. Podemos aplicar algún margen en la parte superior e inferior de un Rem y mantener el valor del margen a la izquierda y a la derecha en cero. A continuación el tamaño de fuente de 1.6 REMS y luego moviéndonos más dentro de esta sección de formulario, si entramos en nuestros divs, entonces tendremos el estilo de entrada dentro de aquí. Entonces bajemos al fondo de nuestra sección de estilo. Apuntaremos a toda la sección de formulario y a cualquier entrada que esté dentro. En primer lugar, agreguemos algún margen en la parte superior e inferior de estas entradas, que va a espaciar estas fuera de la etiqueta 0.6 Rms en la parte superior e inferior y cero en la izquierda y derecha. Por lo que estoy relleno valor de nuevo, 0.6 REMS en la parte superior e inferior. Después un Rem a la izquierda y a la derecha. El valor de un Rem a la izquierda y a la derecha, nos dará algo de espaciado cuando tecleemos en la entrada. Este es el espaciado que vemos en el lado izquierdo. En los bordes para nuestras entradas de forma los estableceremos para que sean de un píxel, como gris y una línea sólida. Para que coincida con el envoltorio de formularios externo. También estableceremos el radio de frontera para que sea 0.3 REMS también. Esto se va a aplicar a nuestros insumos de forma libre. Para mantener también esto consistente, también podemos aplicarlo a nuestra entrada selecta también, y lo haremos agregándolo para la misma sección, separada por una coma. Por último, tenemos el botón de formulario en la parte inferior. Entonces primero el color de fondo, que será RGB, y el valor rojo de uno, dos, tres, el valor verde de uno, nueve cuatro, y el valor azul de uno, dos, tres. El ancho, voy a establecer esto para que sea de 100 Pixeles. Quita el borde, agrega algo de espacio interno en con el relleno de 0.6 REMs, un radio de borde coincidente de 0.3. Entonces, por último, también estableceremos el tamaño de fuente en 16 Pixeles. También bajemos el tono del OC color negro para la etiqueta, y podemos hacer esto justo en la parte inferior y el color de fondo para esto. Entonces el color del texto, empecemos con un color negro y luego podemos seleccionar un color más claro al pasar el ratón sobre este y elegir un valor iluminado del recolector de color. Una vez que tengas un color con el que estés contento, dale a este archivo un guardado. Ahora si pasamos al navegador, nuestro estilo ya está completo. También puedes jugar con esto si quieres y cambiar el estilo del diseño. Eso también está completamente bien. Pero una cosa a tener en cuenta aquí es que si intentamos ahora dar clic en este botón de interruptor en la parte superior, nuestro formulario ahora no se cerrará. Esto sucede porque nuestro modal, o en particular, nuestro envoltorio modal, que acabamos de tener aquí, ahora está retomado o cubriendo toda la anchura y altura de la página, que ahora está cubriendo el resto del contenido. Para solucionar esto, a continuación, añadiremos un botón cerrado dentro del modal y veremos cómo podemos hacerlo con eventos personalizados. 45. Emitir eventos personalizados: Ahora tenemos un formulario pero este formulario está atascado abierto hasta que actualizamos la página ya que ya no tenemos acceso a este botón de toggle detrás de este modal. El arreglo esto, vamos a sumar un poco de cruz en la esquina superior de nuestro modal el cual usamos para hacer click para cerrar esto hacia abajo. Vamos a hacer esto dentro de nuestro AddUpdateForm justo dentro de este elemento de formulario de apertura. Entonces vamos a agregar un span, esto tendrá una clase de close junto con una entidad HTML que es el ampersand, un hash 10060, y un punto y coma. Esto nos va a dar una cruz roja a la que ahora podemos bajar y añadir un poco de estilo. El primero que hay que hacer es esta forma que es la envoltura directa, vamos a establecer esto para hacer uso del flex box para que podamos alinear esto arriba a la derecha, abajo a la sección de formulario, podemos establecer el tipo de visualización en abajo a la sección de formulario, ser flex, y luego así todos los elementos se apilan uno encima del otro, podemos cambiar la dirección del flex, la columna. Dado que el envoltorio ahora está usando el flex box, ahora podemos controlar este botón de cierre con alinear-self. Hagámoslo en la parte superior. Este botón tiene la clase de cierre. Alinear-self empujará este elemento individual justo sobre el extremo derecho si establecemos el valor para que sea flex-end. Para que el usuario sepa que esto se puede hacer clic, también podemos configurar el cursor para que sea un puntero. Esto ahora deja nuestra cruz exactamente donde queremos que esté. Esta cruz ya está en su lugar pero esto también ahora nos deja con algo que necesitamos resolver. Esta cruz se coloca dentro de nuestro componente AddUpdateForm, pero esto se desconecta de nuestro padre, componente App.vue. Por el momento, nuestra app está estructurada así. Contamos con la App.vue, que tiene nuestro AddupdateForm, y también los componentes de evento anidados en su interior. Desde esta app.vue, tendremos un botón que alterna este formulario para mostrarlo y ocultarlo como nuestro modal pop-up. Esto funciona porque ShowForm también está dentro de la App.vue y esto se utiliza para mostrar y ocultar el componente de formulario. Pero, ¿qué pasa con esta cruz que acabamos de añadir? Esto se coloca dentro del componente, pero la propiedad ShowForm dates que necesitamos cambiar está en el padre, App.vue. Ya sabemos cómo pasar datos de un componente padre a un hijo mediante el uso de utilería. ¿ Y al revés? Queremos cambiar los datos de ShowForm para que sean falsos, pero esta vez, desde el componente AddUpdateForm. Para ello, podemos emitir un evento personalizado desde el hijo hasta el componente del padre. De vuelta en la app.vue, sabía usar un evento regular como un evento keep o un click. Utilizamos click para cambiar el formulario usando v-if. Al lado de estos elementos regulares, también podemos crear nuestro propio evento personalizado. Al igual que aquí dentro de nuestro componente AddUpdateForm, lugar de un clic, escuchamos nuestros propios eventos llamados close form. Para estos nombres de eventos, se recomienda utilizar palabras en minúsculas separadas por un guión. Dado que este evento se pasa al componente infantil, es dentro de este niño donde lo vamos a llamar. En primer lugar, agregamos la lista de eventos a una matriz de emisores. Esto es nuevo en Vue 3, no los declaramos previamente en la versión 2. El [inaudible] es así especialmente al lado de nuestros apoyos, nos permite ver fácilmente qué datos están entrando en el componente, y luego qué datos se emiten de nuevo al componente. Dentro de la plantilla, estamos arreglando nuestra cruz roja usando el lapso. Al hacer clic en él, activamos nuestro evento personalizado usando emisor de símbolo de dólar que establecerá ShowForm para ser falso. Por lo tanto, ocultando nuestra forma de nuevo dentro de nuestra aplicación. Esto es exactamente lo que vamos a hacer ahora. A partir de la App.vue, subiremos a la sección de plantillas donde podremos configurar nuestro evento personalizado, pasaremos esto a nuestro AddupdateForm. Como acabamos de ver, este evento se va a llamar de forma cerrada. Cuando esto se active, vamos a establecer ShowForm para que sea igual a falso. Esto se está pasando a AddUpdateForm así que vamos a entrar aquí, y luego podemos agregar esto a una matriz de emisores. Actualmente no tenemos una sección de script por lo que podemos crear eso ahora, asegurándonos también de agregar el valor predeterminado de exportación, y pasamos esto dentro de una matriz. Ahora debería darnos acceso a nuestro bucle de eventos personalizado dentro de la plantilla. El lapso que acabamos de agregar para nuestra cruz ejecutará entonces algún código cuando el usuario haga clic en este botón, y el código que desea ejecutar es este evento de emisión. Podemos acceder a esto con este símbolo de dólar de punto emitir, luego pasar en nombre de nuestro evento el cual es de forma cercana. Este prefijo de símbolo de dólar significa que es uno de los métodos incorporados de propiedades de Vue JS, y veremos más de estos durante el curso. Guarda este archivo y más en el navegador, eso es refrescar, abre nuestro formulario, da click en la cruz, y esto ahora activará nuestro evento personalizado en el componente padre. 46. Entradas de formularios de enlace: También tenemos más eventos personalizados para emitir, como agregar nuevas entradas a nuestra matriz, editar eventos existentes y también eliminarlos. Antes de poder agregar y editar nuestros eventos sin embargo, necesitamos una forma de capturar lo que el usuario escribe en todos estos campos de formulario. Una vista nos proporciona una directiva para esto llamada el modelo v. Esto significa que podemos configurar una propiedad de datos que va a contener todos los valores en los que el usuario escribe, como este nombre. Para ello, iremos al formulario AddUpdate y luego a nuestra sección de guiones. Necesitamos una propiedad de datos que va a contener todos estos valores que el usuario escribe. En primer lugar, empecemos con el nombre que podemos establecer inicialmente en una cadena vacía. Para ver esto en acción, también podemos generar este nombre, bucle dentro de la plantilla. Ahora para agarrar el valor que se ha agregado a nuestra entrada de nombres y almacenar esto dentro de nuestra propiedad de datos, vamos a agregar la directiva que acabamos de mencionar, que es v-model y luego asignamos esto a nuestra propiedad de nombre y datos. Ahora podemos darle una vuelta a esto si abrimos la forma y tecleamos cualquier cosa aquí dentro. A medida que escribimos dentro de este campo, podemos ver que este valor se actualiza en nuestra plantilla. Lo bueno del v-model es que también configura el enlace de datos bidireccional. Esto significa que no sólo la entrada actualiza nuestra propiedad de datos sino que también funciona al revés también. Se suma a nuestra sección de nombres en lugar de pasar en una cadena vacía. Si esto tuviera un valor inicial así como este, entonces podemos guardar esto y otra vez en el navegador. Ahora en nuestra forma, esto ahora acepta el valor inicial que se pasa de nuestra propiedad de datos y esto también se puede actualizar. Esta idea pronto será más útil cuando también utilicemos este formulario para editar los eventos existentes. Puede tomar cualquier dato de evento actual y luego el usuario puede actualizar usando este formulario. También cuando estamos usando HTML regular, algunas formas diferentes de establecer los valores iniciales. Por ejemplo, si vamos a la sección de detalles para nuestra entrada de texto, podríamos establecer el valor inicial para que sea cualquier cosa que pases y podemos ver esto justo aquí. Esta es una forma de establecer el valor inicial con entradas basadas en texto o casillas de verificación, tenemos los atributos marcados y podemos usar seleccionados para entradas seleccionadas. No obstante, al usar Vue.js, se ignorarán todos estos valores iniciales y en su lugar deberíamos usar v-model para el valor inicial si queremos proporcionar uno. Por ahora sin embargo, concentrémonos en agregar nuevos eventos. Para ello, necesitamos configurar un objeto de evento en lugar de nuestro nombre. En lugar de configurar todos estos individualmente, vamos a agruparlos en un objeto de evento, esto también se puede reemplazar dentro de nuestra salida. También nuestro v-model ahora va a ser el event.name. También copiemos esto y podemos sumar esto en cada uno de nuestros insumos. El insumo para nuestros detalles será event.details, la fecha, y luego también el fondo también. Esto se agrega dentro del envoltorio selecto y éste es event.background. Veamos esto ahora, deberíamos ver un objeto a medida que escribimos en cada uno de nuestros campos. El nombre, los detalles, la fecha, y también el background-color actualizarán nuestro objeto de evento, lo que nos deja con toda la información que necesitamos para crear un nuevo evento. 47. Emitir datos con un evento personalizado: Ahora capturamos los datos del formulario del usuario y almacenamos esto dentro de esta propiedad de datos. Ahora, vamos a usar estos datos para agregar un nuevo evento a nuestra matriz. Actualmente, estos nuevos datos de evento se encuentran en el componente AdDupDateForm. No obstante, la matriz de eventos reales está dentro de este padre, App.vue, lo que significa que necesitamos emitir una copia de seguridad de eventos personalizada desde nuestro formulario. Vamos a configurar esto igual que hemos buscado previamente en la App.vue. Subiremos al AddUpdateForm. Dentro de aquí, podemos agregar un nuevo atributo el cual va a ser para nuestros eventos personalizados. Estos eventos personalizados, podemos darle a esto cualquier nombre que desee. El mío se va a agregar nuevo evento. Apenas cuando agregamos este evento de forma cerrada, configuramos directamente estos datos de ShowForm para que sean iguales a false. Esto es muy sencillo, pero nuestro evento add new tendrá unos pasos más. Entonces en lugar de hinchar esta plantilla, su lugar podemos pasar en un método. Este método entonces necesita ser asentado en nuestra sección de guiones. Pasemos por nuestra sección de métodos. En la parte superior, podemos colocar en nuestro método add. Esto va a ser responsable de empujar a nuestra matriz de eventos. Antes de ir más lejos, sin embargo, vamos a dar un paso atrás y pensar exactamente en lo que queremos hacer. El trabajo de este método es agregar un nuevo evento a nuestra matriz pero ¿cómo se accede a estos nuevos datos de eventos que se desea empujar? Bueno, esto se puede pasar cuando activamos el evento personalizado sobre en nuestro AddupdateForm. En primer lugar, al igual que hemos hecho con forma cerrada, necesitamos agregar esto para emitir array. Entonces vamos a emitir esto cuando se haga clic en el botón Añadir. Este es el botón que se ve justo aquí, y esto va a activar nuestros eventos personalizados en el botón. Al hacer clic, esto va a emitir nuestros eventos personalizados los cuales pasamos como primer parámetro, y esto fue agregar nuevos eventos. La diferencia esta vez aunque cuando emitimos un evento llamado forma cerrada, esto no tenía ningún dato que necesitábamos pasar. También podemos eliminar esta palabra clave, esto no es necesario en nuestra plantilla. Pero como segundo argumento, vamos a pasar en los datos reales que son los eventos. También podríamos extraer esto y colocar un método llamado dentro de aquí si quisiéramos, pero esto es bastante sencillo por ahora. Ya que ahora estamos pasando esta información junto a nuestro evento personalizado, vuelta en la App.vue, ahora podemos recibir esta información usando una variable especial llamada evento de símbolo de dólar. Sólo para que también quede claro aquí también, esto siempre se llama evento de símbolo del dólar. No acabamos de nombrar a este evento desde que pasamos en alguna información de eventos. Si tuviéramos un usuario que pasará, esto aún se llamaría evento de símbolo de dólar. Ahora, esto se pasa a nuestro método add, ahora está disponible en nuestro método abajo. Recibiremos esto igual que haríamos normalmente con cualquier evento, por lo que podemos darle a esto cualquier nombre que queramos. Podemos probar si esto está funcionando con un registro de consola, y comprobar que estamos recibiendo la información del evento desde nuestro formulario. Para probar esto, necesitamos actualizarnos e ingresar a las Herramientas de Desarrollador, abrir la consola, y luego podemos intentar agregar un nuevo evento. No importa qué datos estemos poniendo por ahora, esto puede ser cualquier valor, haga clic en “Agregar”. Lo que acaba de pasar ahí, no vemos nada dentro de la consola, y ahora, se están cerrando todos los formularios. Bueno, si echamos un vistazo más de cerca y echamos un vistazo a esta flecha de actualización justo aquí, podemos agregar el nuevo evento de formulario. Observa desaparecer esta flecha si hacemos clic en “Agregar”, esto ahora refresca la página y también borra nuestra consola. Esto sucede porque el comportamiento predeterminado del navegador es actualizarse cuando se presenta un formulario. Si te has topado con esto antes y has trabajado con otras bibliotecas o trabajas con JavaScript, es posible que ya hayas escrito algo como Event.Prevent Default dentro del método. Pero Vue sí proporciona también un atajo para esto, y esto es para agregar un modificador de eventos que podemos agregar al usar [inaudible] en nuestro formulario cuando hacemos clic en este botón. Volver a AddupdateForm, aquí, estamos usando la V en sintaxis, y luego también podemos llamar a dot prevent. Este modificador de eventos ahora debería impedir el comportamiento predeterminado. Volvamos al navegador y probemos esto. Abre las Herramientas de desarrollo, haz click en “Agregar”, que luego nos da nuestro registro de consola con todos los datos del formulario. Ahora podemos usar estos datos para empujar una nueva entrada a nuestra matriz, pero una cosa que también tenemos que hacer es agregar un ID. Actualmente, tenemos el nombre, detalles, fechas y antecedentes, pero recuerda que cada uno de estos eventos también necesita una identificación única. Si estuvieras guardando esta entrada en una base de datos, a menudo obtendríamos de vuelta un ID único de la base de datos que luego podríamos usar. Pero por simplicidad, solo voy a numerar estos en orden, igual que tenemos con nuestros datos de muestra. Para ello, podemos agregar una nueva propiedad a nuestro objeto de evento llamado ID, y luego también necesitamos averiguar cuántos eventos hay actualmente dentro de nuestra matriz, y luego agregar un número al final. Si actualmente tienes seis eventos, el siguiente que sumamos será el número siete, número ocho, y así sucesivamente. En primer lugar, podemos agarrar la longitud de nuestra matriz actual con esto.events.length, y luego establecer este ID para que sea un extra. A continuación, vamos a acceder a nuestros eventos, y luego llamar al método de inserción de JavaScript que empujará nuestros nuevos eventos hasta el final de esta matriz. Entonces, por fin, podemos cerrar nuestro formulario. Vamos a darle una oportunidad a esto. Haga clic en “Agregar”, hay uno que acabamos de agregar. Probemos una más. por el diferente color esta vez y comprobamos esto está todo bien, agrega esto. Ahora, ahora se muestran dos eventos en el navegador. 48. Emitir múltiples eventos: No estamos restringidos a emitirlo solo en un solo evento de nuestros componentes. Podemos emitir tantos como queramos. Entérate en el formulario de agregar actualización, abajo en la sección de emisión, tendremos acceso a múltiples eventos personalizados, y podemos usarlos al mismo tiempo también. Por ejemplo, en la vista de actualización, cuando agregamos este nuevo evento justo aquí, en lugar de cerrar el formulario usando este método, podríamos en su lugar hacer uso del evento personalizado de forma cerrada. Entonces para hacer esto, todo lo que necesitamos hacer es subir a nuestra plantilla, y luego todo lo que necesitamos hacer es agregar una coma y pasar en nuestro segundo evento personalizado. Si fuéramos a usar múltiples eventos como este, también puede ser más limpio extraer estos de la plantilla y moverlos a métodos separados. En cuanto a esto, recuerda hemos comentado este formulario de show de puntos. Entonces ahora si esto cierra el formulario después de que presentemos, ahora sabría que esto está emitiendo múltiples eventos personalizados. Nuevamente, la información del evento sí importa, podemos agregar cualquier dato. Haga clic en “Agregar”. El evento ahora se está mostrando, y también nuestra forma ha sido cerrada, pero esta vez, a partir de nuestros eventos personalizados. 49. Modificadores: En nuestro formulario, tocamos los modificadores un poco antes cuando usamos la palabra clave prevent, que va a evitar el comportamiento predeterminado del navegador, que es actualizarse al enviar un formulario. También hay otros modificadores, que veremos durante el curso junto con los modificadores clave. Los modificadores de teclas nos permitirán hacer ciertas cosas cuando se presiona una tecla del teclado. Podrías usar case sería quizás permitir que el usuario presione “Enter”, para enviar el formulario, en lugar de tener que usar siempre este botón “Añadir”. Pero esto podemos copiar este evento click y luego pegarlo en nuestro Form Wrapper. Copia todo esto, haz clic en “Sección”, y luego desplázate hacia arriba hasta la etiqueta del formulario de apertura, pega esto en. Ahora en lugar de escuchar un clic, vamos a escuchar una llave arriba. Esto es algo que ya sabemos, pero la diferencia es que vamos a usar un modificador para decir exactamente qué clave queremos escuchar. en la documentación de la vista, tener una lista de alias de clave comunes que podemos usar, como delete, escape , space, pero vamos a hacer uso de enter. Por supuesto, esto no cubre todas las teclas que está disponible en el teclado, estos son solo algunos de los alias de los más comunes. Si quisiéramos usar un botón de tecla que no está listado aquí, podríamos usar cualquier nombre de clave válido, y podemos ver una lista justo aquí. Podemos hacer referencia a cualquiera de estas claves, como página abajo, que vemos aquí. Pero en lugar de escribirlo así, necesitamos hacer todo esto en minúscula y separarlo por guiones. Para nuestro ejemplo, sólo vamos a usar la tecla “Enter”, [inaudible] esto justo después de la clave arriba. Vamos a probarlo a nuestra aplicación y refrescar nuevos eventos. Ahora para que esto funcione, necesitamos interactuar con todas las formas ya que hemos agregado esto al elemento de formulario. Entonces haga clic en cualquiera de estos insumos, y desde aquí podemos presionar “Enter”, que luego remitirá nuestro formulario. 50. Validación de nuestro formulario: Pasemos ahora a agregar en alguna validación de formularios a nuestro formulario. Actualmente si solo entramos y no agregamos valores a estas entradas, podemos hacer clic en “Agregar”, y esto luego enviará un evento vacío. Para solucionar esto, primero vamos a pasar por un método de validación que comprobará si se han rellenado todos los campos requeridos. De no ser así, entonces mostraremos los mensajes de error al usuario. Dado que no puede faltar más de un campo, estos se van a almacenar dentro de una matriz. Por lo que en nuestro formulario add update, el primer paso es agregar una nueva propiedad de datos la cual va a almacenar estos errores. Para pasar estos errores, entonces necesitaremos agregar un método que va a validar todas nuestras entradas de formulario. Justo después de la sección de datos, eso se trata de métodos, y este nombre del método va a ser validado. Supondremos que esto llena todas estas habitaciones cada vez que el usuario haga clic en el botón agregar. En primer lugar, queremos restablecer cualquier error anterior. Podemos hacer esto configurando estos.errors para que se establezcan una vez más en una matriz vacía. Después revisaremos nuestro formulario. Teníamos algunas declaraciones if. El primero, vamos a comprobar si esto.events.name no existe. Podemos hacerlo agregando el signo de exclamación. Entonces esta sentencia if solo se ejecutará si la propiedad name no existe. Podríamos entonces agregar el código que queremos ejecutar en estas llaves o en su lugar, por simplicidad, si mantenemos todo esto en la misma línea. Esto también funcionará bien. Si este nombre no existe, queremos empujar un nuevo mensaje a nuestra matriz de errores. Primero accederemos a estos. Errores y nuestro método push que luego empujará una nueva cadena de texto, que será nombre se requiere. Duplica esto y ahora podemos hacer lo mismo para los detalles del evento. Entonces también tenemos la fecha en segundo plano que debes cuidar, así que duplica esto de nuevo. Esta es la fecha. Entonces, por fin, los antecedentes. Compruebe si esto está funcionando generando estos errores array arriba en nuestra plantilla. Ya no necesitamos esta salida de información de eventos, pero podemos reemplazarla por nuestra matriz de errores. Para ver realmente esto, necesitamos llamar a nuestro método de validación desde este botón. Extraeremos todo este código del manejador de clics y luego colocamos esto en un nuevo método hasta los métodos de la parte inferior. En primer lugar, configuraremos nuestro nuevo método que es que añades el evento y luego pegas dentro de nuestra sección media. Eliminar la coma de entre estos. Ahora como esto está dentro de nuestro JavaScript o de nuestra sección de vista, ahora necesitamos llamar a emit con este prefijo, plata línea 1, línea 2 y también cuando accedamos al evento. Ahora cuando se presente este formulario, lo primero que queremos hacer es pasar por el método de validación. Entonces llamaremos a agregar eventos muy pronto. También nuestro sumar fondo, entonces llamaremos al método de validación. También lo mismo para todo el envoltorio de formulario. Obtén resultados y luego llama a validar. Ahora si bajamos a nuestra sección de validación, dentro de aquí vamos a tener dos resultados. El primer resultado va a ser la forma tiene errores. No queremos sumar al evento. El segundo resultado es que todo está bien. No tenemos ningún error. Ahora queremos crear este evento. Si este es el caso y no tenemos errores, todo lo que queremos hacer es llamar a este método add event. Dado que esto también vive en la instancia de vista, necesitamos llamar a esto con este prefijo. No obstante, si hay algunos errores, no queremos añadir un nuevo evento. En cambio lo que vamos a querer hacer es volver a este método de validación antes de llegar a esta sección de agregar eventos aunque primero podemos comprobar si est.errors, que es nuestra matriz. Podemos comprobar si la longitud es mayor que cero. Esto significa que sí tenemos errores y vamos a regresar de este método de validación. Probemos esto de nuevo en el navegador. En primer lugar, si presionamos el botón “Agregar”, esto entonces llama al método de validación y luego actualiza nuestra matriz de errores con nuestros cuatro mensajes. Esto significa que nuestros errores son mayores que cero y la palabra clave return se asegurará de que salgas de este método de validación antes de empujar estos nuevos eventos. Eso está bien. Nuevamente, podemos agregar algo en el nombre y los detalles, haga clic en “Agregar”. Se ve que falta la fecha en segundo plano. Probemos esto sin errores. Agrega la fecha en segundo plano. Esto ahora nos permite sumar nuestro nuevo evento. La etapa final es dar salida a estos errores como una lista en lugar de como una matriz. Hacer esto en lugar de simplemente emitir nuestros errores como una propiedad de fecha, en su lugar ir a bucle a través. Crea un envoltorio div. Sólo queremos mostrar esta sección si nuestros errors.length va a ser mayor que cero. Si lo es, generaremos estos como desordenados para listar y luego generaremos cada uno de estos errores como un elemento de lista. Podemos hacer esto con v-for y esto será error en errores. Pasar una clave dinámica la cual puede ser igual a nuestro error ya que cada uno de nuestros mensajes de error es único. Entonces pondré el mensaje de error. Probemos esto en los nuevos eventos y los mensajes de error ahora se producirán como una lista desordenada. 51. Actualizar eventos: Bienvenido de nuevo. Ahora para actualizar y eliminar cualquiera de estos eventos, nuevamente necesitamos hacer uso de nuestros eventos personalizados. También vamos a hacer uso de esta misma forma que usamos para agregar un nuevo evento pero esta vez vamos a pre-llenar todos los detalles del formulario con los detalles del evento actual. Lo primero que tenemos que hacer antes de entrar en cualquiera de esto es habilitar un manejador de clics en cualquiera de estos eventos. Una vez que hacemos clic en estos eventos, queremos que este formulario se abra luego para que el usuario pueda editar este evento en particular. Ahora para hacer esto, vamos a escuchar ahora un clic sobre en la app.view dentro de este componente de evento o de hecho, esto está rodeado en el ítem de lista, lo que también podemos agregar esto al envoltorio de padres. Agregaremos un oyente de clics y luego vamos a activar un nuevo método llamado SetForm. El SetForm va a pasar entonces los detalles del evento actual. Estamos agarrando los detalles del evento de nuestro bucle. Cada vez que hacemos clic en cualquiera de estos ítems en particular, entonces agarrará los datos del evento para el que hemos hecho clic. Abajo a la sección de métodos. Este método ahora necesita hacer dos cosas. Necesita primero realmente mostrar el formulario y también pasar el evento seleccionado a la propiedad de datos. Esta propiedad de datos se utilizará entonces como un accesorio para el propio componente de formulario, lo que significa que tenemos todos los datos para pre-llenar todas las secciones. Para comenzar nuestro método que fue SetForm, estamos recibiendo los detalles del evento y una coma al final. El primero que queremos hacer es establecer la propiedad de datos del evento actual que aún no hemos creado. A esto se le va a llamar evento actual. En realidad este es un caso [inaudible]. Pondremos esto igual al evento que se pase. Si hay un error o no se pasan datos, solo enviaremos un objeto vacío. Ahora estableceremos este evento actual como una propiedad de datos justo arriba e inicialmente estableceremos esto en un objeto. Lo que va a pasar es que vamos a dar click en esta sección o en cualquiera de estos eventos. Esto activará entonces este método, entonces pasaremos estos datos de evento al evento actual, que luego podremos pasar a todos los formularios en tan solo un segundo. Pero primero realmente necesitamos mostrar esta forma. Podemos hacer esto activando esta propiedad ShowForm. Queremos que esto sea cierto, por lo que el formulario se mostrará en el navegador. Echemos un vistazo a esto. Haga clic en cualquiera de estos, aparece todo el formulario, y todo esto parece funcionar para cada uno de nuestros eventos. Este formulario necesita ahora estos datos de evento los cuales hemos almacenado en el evento actual. Podemos agarrar esto y pasar a nuestra plantilla para luego pasar esto a nuestro AddUpdateForm. Esto va a ser dinámico, por lo que necesitamos el encuadernamiento. El nombre de la propiedad va a ser evento actual, que también es igual a los datos del evento actual. Abiertas a la forma que ahora podemos agregar en nuestra matriz de props dentro del valor predeterminado de exportación. El solo puntal que tenemos en este momento va a ser evento actual. Por el momento tenemos el evento actual el cual se pasa a esta forma. Contamos con el objeto de evento el cual se almacena en datos. Este objeto de evento también está haciendo uso del v-model para enlazar esto a toda nuestra entrada de forma. Ahora para pasar este evento actual como valor inicial, primero necesitamos establecer este evento para que sea igual a nuestro evento actual. Podemos hacer esto tan pronto como la aplicación se cargue dentro del gancho montado donde estableceremos est.event para que sea igual a esto.evento actual. Vamos a probar todo esto está funcionando haciendo clic en cualquiera de estos eventos y refresquemos primero. Tenemos la graduación. Probemos el cumpleaños. El platillo de conferencia. También ahora si entramos en nuestro icono más para agregar formulario, lo siguiente que vamos a hacer es activar este botón en la parte inferior, actualmente vemos el botón de agregar pero si entramos en la sección de edición, todavía vemos el botón de agregar también. Esto se debe a que dentro de la plantilla sólo tenemos el botón de agregar único. También necesitamos duplicar esto y crear un botón de actualización. Esto va a ser para actualización. Esto también necesita correr a través del mismo método de validación para asegurarse que todos los campos de formulario que utilizamos estén cambiando, aún esté presente después de que se guarden. Solo queremos mostrar uno de estos botones a la vez. El modo en que podemos hacerlo es comprobar si nuestro evento tiene una propiedad id. Esto se debe a que la propiedad id solo se agrega una vez que guardamos por lo tanto el evento ya existe, por lo que debemos estar actualizándolo. Dentro del primer botón que es actualización, agregaremos una sección v-if, y esto va a comprobar si existe el CurrentEvent.id. Si esta afirmación es verdadera, veremos el botón de actualización. De lo contrario, agregaremos la sección el-para mostrar el botón de agregar. Vamos a probar esto. Iremos al botón de agregar para empezar. Ya veremos ambos aquí porque no hemos agregado v-else. Necesitamos esto porque esto no es solo JavaScript regular. Ahora solo veré el botón de actualización, así que todo esto está funcionando bien. Ahora volvamos a nuestros dos botones. Ahora ambos botones, un primero, llamando al método de validación. Cuando llamamos a esto, necesita saber si estamos actualizando un evento o vamos a agregar uno nuevo. Para ello, vamos a pasar en una cadena y para ésta, esta será actualización. Éste se sumará. Ahora tenemos un tipo de evento el cual querrás correr después de la validación. Pasar esto a nuestro método de validación. Este es un nombre de variable al que voy a llamar tipo. Esto va a correr por toda la validación. Antes de seguir adelante y agregar un nuevo evento, solo queremos llamar a este método si el tipo es igual a agregar. Agregaremos un comunicado if. Si la variable externa es igual a agregar, entonces llamaremos a this.adDevent. Si no, agregaremos un el-seccion, por lo que esto debe significar que el tipo es actualizado y por lo tanto queremos llamar a un método diferente el cual se va a llamar UpdateEvent. Actualizar nuestro evento va a verse muy similar a este método de AdDevent, por lo que podemos duplicar esto para empezar, cambia para ser actualizado. Todavía no hemos creado un evento de actualización personalizado, así que vamos a dejar esto en blanco. También necesitarás recibir los nuevos detalles del evento y cerrar el formulario, por lo que el resto está bien. Ahora vamos a crear este evento personalizado sobre en la app.view hasta la sección AddUpdateForm. Esto va a seguir un patrón similar a esta sección add new event. Pero esta vez esto es para la actualización, por lo que agregaremos un nuevo evento personalizado llamado evento de actualización. Esto va a activar una función de actualización y también recibiremos los datos del evento. Ahora vamos a poner esto abajo en nuestros métodos. Esto tomará en los detalles del evento el cual se pasa. Lo primero que tenemos que hacer cuando estamos actualizando un evento dentro de estos array de eventos, queremos encontrar la posición de índice para el que queremos actualizar. La forma en que podemos hacer esto es llamando a this.event para agarrar nuestra matriz completa, y luego necesitamos llamar a un método de matriz JavaScript llamado FindIndex. Esto va a llamar luego a una función, y esta función va a ser llamada para cada elemento dentro de nuestra matriz de eventos. Estamos efectivamente haciendo un bucle a través de cada uno y luego se ejecuta una función. Cada vez que recorremos un evento individual, entonces almacenaremos el valor o el elemento dentro de esta propiedad el. Este es solo un nombre de variable, por lo que puedes llamar a esto cualquier cosa que quieras. Después comprobaremos si este element.id va a ser igual al id que se pasa de este evento. Esto está en una constante llamada índice. Esto ahora debería darnos la posición de índice de nuestro evento dentro de esta matriz de eventos. Si hemos seleccionado el primero, esta será la posición de índice cero. Esta será la posición uno, dos, tres, y así sucesivamente. Después llamaremos a this.events y agarraremos el particular por el número de índice, luego reemplazarlo por nuestro nuevo objeto de evento. Todo lo que queda ahora por hacer es llamar a este evento personalizado desde nuestro componente. En el formulario add update, primero necesitamos recibir esto en la matriz de emisores. Entonces esto está listo para llamar desde nuestro método. En evento de actualización y podemos reemplazar esto por evento de actualización, digamos esto, y podemos probar nuestra funcionalidad de actualización. Entra en cualquiera de estos, podemos editar los detalles. Haga clic en actualizar, y esto ahora se guarda. Probemos uno diferente. Cambiaré el color de fondo para que sea naranja. Todo esto funciona bien. Hagamos un recapitulamiento rápido porque aquí está pasando bastante. Estamos pasando datos entre dos componentes diferentes. Lo primero que hicimos más en la app.view fue escuchar un clic en cualquiera de estos eventos. Después activamos un método llamado SetForm. Esto también recibió los datos actuales del evento. Ahora dentro de este método, lo primero que hicimos fue establecer una propiedad de datos llamada evento actual. Esto fue igual a nuestra información de eventos y luego también surgió el formulario. Este evento actual volver a subir a la cima fue entonces un pasado a nuestro formulario, que luego utilizó para llenar todas las secciones dentro de aquí. Esto lo hizo porque asignamos esto a nuestra propiedad de datos. Tan pronto como este componente montó este botón de actualización luego llamó al método de validación. Entonces una vez que revisaste toda la validación, entonces llamamos ya sea al método add o al método update, que configuramos justo arriba usando nuestros eventos personalizados. Justo antes de seguir adelante, también solo comprobaremos que la validación esté funcionando o la sección de actualización. Si eliminamos un nombre, se requiere el nombre y también se requieren detalles del evento. Algo a tener en cuenta sin embargo, si actualizamos esta aplicación, la app volverá a cómo fue originalmente, ya que no estamos usando una base de datos para almacenar todos estos eventos en. A continuación vamos a pasar a eliminar realmente estos eventos cuando el usuario haga clic en este botón. 52. Eliminar eventos y detener la propagación: Justo antes de pasar a eliminar nuestros eventos usando este botón Cross, vamos a arreglar un pequeño problema que miramos en el último video. Ahora, se destacó este tema. Si entramos en la sección Agregar Nuevo, veremos que no tenemos ninguno de estos formularios prerellenados. No obstante, si entramos en una sección Editar, que todo está funcionando completamente bien. Cierra esto, y ahora si volvemos a la sección Agregar, todos nuestros campos de formulario de trabajo ahora están prerellenados. Ahora la razón por la que esto sucede es porque una vez que abres la sección Editar, esto se está configurando en la app.view, nuestra propiedad de datos, que es CurrentEvent, y esto luego está enviando esto a los datos CurrentEvent. Ahora para arreglar esto, vamos a restablecer esto de nuevo a un objeto vacío cuando cerremos este formulario. Cuando cerramos este formulario, mira la parte superior, todo lo que estás haciendo es establecer la propiedad ShowForm para que sea igual a false. Ahora vamos a pasar esto a un método, y también podemos restablecer nuestros datos de CurrentEvent. Vamos a cortar esto, lo usaremos en un momento. Este método se va a llamar forma cerrada, y luego podemos desplazarnos hacia abajo y crear esto justo debajo. Forma cerrada no necesita tomar ningún dato, todo lo que tenemos que hacer es pegar esto de nuevo. Ahora como estamos en nuestra sección de vista, nos referimos a esto con esta palabra clave. Después de esto, restableceremos nuestra retroalimentación de datos CurrentEvent para que sea un objeto vacío. Probemos esto, actualice el navegador. Esto está vacío. Esto está bien. Después de volver a nuestro formulario de adición, esto ahora está todo vacío. Ahora podemos pasar a eliminar nuestros eventos usando este botón Cruz. La eliminación de eventos seguirá un patrón similar de creación de un evento personalizado, y dos puntos desde los componentes hijos. Esta vez sin embargo, se llamará desde el componente de evento en lugar de desde el formulario. Pasado al event.view, donde ya tenemos configurado este botón, y muy pronto vamos a enganchar esto a un evento personalizado. Mira bien, es evento personalizado como siempre en la app.view. En primer lugar, vamos a configurar un método al que este evento personalizado va a llamar. Esto se va a llamar quitar. Estos también serán datos de eventos pasados, por lo que sabemos qué eventos queremos eliminar. Ahora, al igual que en la sección de actualización, también necesitamos encontrar la posición de índice, que sepamos cuál queremos eliminar de nuestra matriz. Podemos copiar esto y pegar esto dentro de aquí, y sólo podemos usar esta posición de índice para seleccionar el evento correcto. Primero seleccionaremos esto.events, luego el método de matriz JavaScript, que se llama empalme, nos va a permitir eliminar un elemento en particular. Esto va a tomar dos cosas. El primero va a ser la posición del ítem que queremos quitar. Sabemos que ya tenemos esto del índice. En segundo lugar, el número de ítems de esta posición de índice. Solo queremos eliminar el solo evento, lo que significa que el valor es uno. Después nos desplazamos hasta nuestras plantillas y la sección de eventos donde queremos pasar nuestro evento personalizado. Como atributo, pasaremos en nuestro método de cristal, que es remove-event. Esto va a ser igual a nuestro método remove, que también recibirá los datos del evento. El siguiente paso debería ser bastante familiar. Pasamos a los componentes del evento, y luego vamos a agregar nuestra matriz de emisores. Esta matriz emite actualmente sólo va a tomar en un evento, y esto es eliminar evento. Hasta nuestro botón. Para desencadenar esto, necesitamos escuchar un clic. Después haremos clic en este botón, esto luego llamará al método remove, que ahora se configurará justo debajo. No tenemos una sección de método, por lo que necesitamos configurar esto, y luego configurar nuestro método remove donde vamos a emitir nuestro evento personalizado. Ya que estamos en la sección de vista, necesitamos llamarlo con esta palabra clave. Ingresa nuestro nombre del evento que es remove-events. Entonces queremos pasar los datos del evento. Ya tenemos esto guardado como utilería, por lo que pasamos esto como segundo argumento. Vamos a darle una oportunidad a esto. Pasar al navegador y refrescar. Ahora si intentamos hacer click en alguno de estos eventos, podemos ver en el fondo que el evento ha sido eliminado. También veremos que aparece esta forma. Probemos esto una vez más. Quitaremos el cumpleaños, y podemos ver desde el fondo que esto se ha ido. Pero, ¿por qué estamos viendo esta forma? Bueno, esto es porque a pesar de que en este componente, estamos dando click en este botón. Este botón está anidado dentro de la app.view y dentro de esta app.view emparejamiento, también tenemos esto rodeado en un oyente de clics, que está activando SetForm. Entonces dentro de ShowForm si nos desplazamos hacia abajo, podemos ver que establecemos en este.ShowForm para ser igual a verdadero. ¿ Por qué se está llamando cuando hacemos clic en el botón Eliminar? Bueno, la razón por la que esto sucede es por algo llamado propagación de eventos. Esto no tiene nada que ver con Vue.js, solo algo que generalmente debes tener en cuenta al usar JavaScript. Sí, estamos haciendo clic en el botón quitar el cual está anidado en el interior, pero al hacer clic en un evento dentro del HTML se activaría una reacción en cadena. Para ver esto, podemos abrir las herramientas de desarrollador. Haga clic derecho e inspeccione. Lo que necesitamos encontrar es este botón Eliminar, por lo que en la sección de cuerpo, la sección de aplicaciones. Entonces dentro de aquí tenemos una lista desordenada con todos los eventos, y luego podemos seleccionar uno de nuestros ítems de lista. Si abrimos esto, esto está en un envoltorio de artículos, y el botón está anidado en la sección de cuenta atrás justo aquí. Como podemos ver, esto pone en está profundamente anidado, tiene divs circundantes, tiene elementos de lista. En orden lista la sección del cuerpo, y pasa derecho a través de la parte superior del árbol, que es la ventana. A pesar de que estamos haciendo clic en este botón, desencadenará una serie de fases. Empezará en la parte superior y esto luego pasará por todos los elementos hasta que llegue a nuestro botón. A esto se le llama la fase de captura. Después llega al botón o a los elementos en los que hicimos clic, y a esto se le llama el objetivo. Por lo tanto, a la etapa se le denomina etapa de destino. Por último, una vez que llega a este botón, luego sube de nuevo hacia arriba a través de todos los elementos padre uno por uno. Al hacerlo, también activaremos cualquier evento en el camino de vuelta hacia arriba. Según acabamos de ver, uno de estos eventos en el camino de vuelta hacia arriba seguirá abriendo el formulario. A esta etapa se le llama la fase burbujeante. Ahora, no hace falta entender completamente todo esto por ahora. Todo lo que necesitas entender es que cuando hacemos click en un evento, pasa por todos los elementos DOM de padres y activaremos a otros en el camino también. todo esto se le conoce como propagación de eventos. Vue.js también nos proporciona un modificador de eventos para detener este comportamiento si es necesario. Entérate en el event.view. igual que antes cuando agregamos el modificador de prevención que detuvo el comportamiento predeterminado del navegador, este modificador de stop detendrá esta propagación de eventos. Guardemos esto y pasemos a nuestro proyecto. Haga clic en estos. Ahora estos eventos se eliminan con éxito. Solo para terminar las cosas, voy a hacer un pequeño refactor sobre en la app.view. Por el momento, dentro de este método remove y también de la actualización, estamos duplicando esta línea de código. Para evitar esto, coloquemos esta línea de código en su propio método reutilizable. Cortamos esto, y también este también, para luego crear un nuevo método llamado FinDeventIndex, donde podemos pegar en esta línea de código. Este método también necesita acceso a nuestro evento, por lo que podemos recortar el ID del evento. O alternativamente podemos simplificar esto y simplemente pasar el ID de los eventos. Podemos hacer este llamado finDeventIndex, así que vamos a agarrar esto y primero en el método remove. Ahora no tenemos acceso a esta constante de índice, por lo que vamos a remplazar esto por una llamada de método. Podemos llamar a FindeventIndex, donde también necesitamos pasarlo en un ID válido el cual podemos agarrar del event.id. Esto también necesita ser llamado cuando la palabra clave esta, y también podemos copiar esta sección y reemplazar la sección de actualización donde llamamos al índice. Vamos a pegar esto en. Ahora necesitamos devolver el valor de este método. En lugar de almacenar esto dentro de una constante, vamos a devolver su número de índice, que luego estará disponible dentro de estas dos secciones. Vamos a probar esto. En primer lugar, podemos quitar un evento, y esto funciona bien. Entonces la funcionalidad de actualización, se cambia cualquiera de los detalles. Haga clic en Actualizar, y esto también funciona bien. 53. Introducción a la sección: validación y profundización en las propiedades: No sólo queremos arrojar cualquier dato viejo a componentes antiguos. Queremos ser más específicos sobre el tipo de datos que vamos a recibir y los formatos en los que se encuentra. De lo contrario, podemos obtener errores y no queremos los de nuestra aplicación. Vamos a echar un vistazo a esto en el siguiente video, y luego haremos un seguimiento con echar un vistazo a algo llamado atributos no-prop, que es una forma diferente de pasar datos entre nuestros componentes. 54. Validación de propiedades: En nuestro proyecto, los apoyos son una parte importante de cómo funciona todo. Es una buena idea agregar alguna validación para asegurarnos obtenemos la información correcta pasada por nuestros componentes. Dentro de este archivo principal app.view, este es el componente de nivel superior, por lo que este no se pasa ningún props. Para comenzar con la validación de la prop, vamos a entrar en los events.view componentes. Lo primero que necesitamos hacer para agregar validación es cambiar esta matriz en un objeto, eso son resultados comunes, y luego vamos a restablecer nuestra propiedad de props para este momento como un objeto. El primero que tenemos justo arriba son los hechos. Su validación de prueba más sencilla, no puede simplemente declarar el tipo de datos que esperamos recibir. El evento va a ser un objeto. Después separados por una coma, tenemos los díasIzquierda. El DaysLeft va a ser un número. Entonces finalmente tenemos ShowPastEvents. El tipo de datos para esto es un booleano. Esto es sólo un simple verdadero o falso, por lo que podemos ocultar los eventos si los días han expirado. También podemos pasar en un tipo de datos válido también, como array, función, símbolo, fecha, y cadena. Vamos a probar esto. Encima en el navegador, refresca, vemos que todo está funcionando perfectamente bien. Abre las herramientas de desarrollador y podemos comprobar que no hay áreas dentro de la consola. Sí, eso está todo bien. Pero ahora si pasamos a la app.view, haremos un cambio a los datos que lo estamos pasando a este componente de evento. Por ejemplo, vamos a ir por ShowPastEvents que es verdadero o falso. Ahora bien, si eliminamos el enlace, esto no significará que esto se pasará como un valor de cadena en lugar de un booleano. Abre esto, refresca, y ahora veremos una advertencia para todos nuestros seis eventos diferentes. El aviso es el tipo de prop no válido, la comprobación de tipo falló para la prop ShowPastEvents. Vemos esperábamos un booleano porque esto es lo que pusimos dentro de nuestros componentes. Pero luego nos dieron una cuerda. Tampoco estamos restringidos a un solo tipo de datos. Si quisiéramos aceptar una cadena junto a este booleano, todo lo que tendremos que hacer es pasar esto como una matriz. Es alrededor de esto dentro de este corchetes, luego separados por una coma también aceptará un valor de cadena. Refresca, y ahora nuestros errores desaparecerán ahora. No queremos booleano para este ejemplo en particular, por lo que podemos quitar los corchetes y también en el encuadernación volver a entrar aquí. Estos errores que ves solo se muestran en desarrollos y pueden ser realmente útiles si cometemos un error o cambiamos nuestros datos inesperadamente. No podemos ir aún más allá también no sólo declarando el tipo de datos, que estamos haciendo actualmente, sino también restringir los valores que usted recibe también, para hacer esto podemos pasar en propiedades extra y convertir esto en un objeto, así que llámenos a esto y agregue el corsé rizado es para convertir esto en un objeto, entonces podemos pasar en el tipo con la propiedad type. De lo que vamos a poner de nuevo esta prop para que sea un objeto, los DaysLeft, hacemos lo mismo para esta y la propiedad type, y también lo mismo para todos los booleanos. Ahora estos son todos objetos, estos ahora pueden aceptar múltiples propiedades. Por ejemplo, si queríamos asegurarnos de que se requiere este prop, podemos establecer que esto sea cierto. También lo mismo para los díasIzquierda. Esto significa que esto debería fluir en un error si incluso una de estas propiedades no se pasa a estos componentes. Prueba esto hacia fuera a la app.view, podemos quitar cualquiera de estos. Vamos por los díasIzquierda. Llamemos a esto temporalmente. Ahora más en el navegador vemos la prop faltante o requerida de díasLeft para los seis de nuestros eventos. Encima en el event.view, nota aquí cómo hemos dejado fuera la propiedad requerida, a ShowPastEvents. Esto se debe a que este tipo de prop es un booleano. Si no pasáramos este prop, un valor booleano siempre por defecto será falso de todos modos, lo que significa que todavía parece estar presente de todos modos. Esto es sólo algo para tener cuidado al pasar los apoyos booleanos. Vamos a reinstalar rápidamente sus díasLeft y guardar este archivo. Los apoyos también pueden recibir un valor predeterminado también, que podemos usar si no se proporciona ningún valor. Ahora en lugar de decir que este tipo de prop debe estar presente, también podemos decir si esto no está presente, cambio vamos a pasar en un valor por defecto. Este es el tipo de número, y vamos por un número de 10. Esto actualmente no marcará la diferencia si refrescamos el navegador porque seguimos pasando la prop hacia abajo a estos componentes. Pero de nuevo, si pudiéramos esto fuera, refrescar, aunque ahora los eventos volverán por defecto a 10 días que quedan. Vamos a deshacer esto y guardar este archivo. Esto solo funciona para cosas como números o cadenas, booleano al validar las funciones, las matrices son objetos. Necesitamos pasar esta propiedad por defecto como una función. Nuestro evento es el tipo de objeto, por lo que podemos darle una oportunidad a esto, quitar la propiedad requerida, y luego cambia para ser el predeterminado. Para esto ya que este es un objeto, necesitamos configurarlo como una función. Entonces si no se pasa ninguna prop de evento vamos a devolver este objeto predeterminado. Esto necesita tener la misma configuración que actualmente tenemos dentro de aquí. Tenemos el DNI, a cada evento, que solo dan alguna información aleatoria. Tenemos el nombre, que es un valor de cadena, los detalles del evento. Si está bien, guarde esto, y por supuesto no debería afectar nada de lo que tenemos actualmente porque seguimos recibiendo el prop del evento. Pero si sí eliminamos esto, ahora deberíamos patear en nuestros eventos por defecto con datos que pasamos aquí dentro. Lo que realmente queremos ver es la propiedad validadora. Solo agreguemos nuestro evento de vuelta aquí dentro, y luego volvamos a nuestros eventos. El inmueble validador es una función personalizada que nos da una forma mucho más flexible de validar nuestros apoyos. Se presenta de manera similar a nuestra función predeterminada pero en su lugar reemplazamos esto por validador. Esta función también tomará un valor, que es el valor de la prop que se pasa. Actualmente este será el evento. Ahora podemos validar este valor de cualquier manera que queramos usando Javascripts. Por ejemplo, si sólo quisiéramos permitir ciertos nombres de eventos, podríamos hacer algo como esto. Deje configurar matriz abierta con los nombres de eventos en voz alta que desea pasar a través de este validador. Vamos por dos de nuestro nombre actual del evento. Tenemos cumpleaños, y también tenemos una Navidad también. Entonces podemos usar el método JavaScript includes para comprobar si alguno de nuestros eventos incluye ya sea el título de cumpleaños o Navidad. Sabemos que la información del evento se pasa dentro de este valor, por lo que podemos acceder a nuestros objetos y luego al nombre del evento. Si alguno de nuestros eventos incluye el título de cumpleaños o Navidad, entonces queremos devolver este valor, y éste será verdadero o falso. Guardemos esto y volvamos al navegador a las herramientas de desarrollador. Ya veremos que este validador ha fallado por nuestros cuatro eventos que no incluyen el título ni el nombre de cumpleaños o Navidad. No necesitamos esta función validadora dentro de este proyecto, pero es útil saber que esto está ahí y nos da una forma realmente flexible de validar nuestros apoyos. También podemos agregar validación de tipo prop a nuestro AddUpdateForm también, desplácese hacia abajo hasta nuestra acción de scripts. Aquí solo tenemos el puntal único, por lo que podemos comentar esto, establecer esta app tiene un objeto, base en nuestros eventos actuales, cual tiene el tipo de objeto. Guarda este archivo. Ahora si actualizamos el navegador, abrimos la consola, ahora todo sigue funcionando como se esperaba. 55. Atributos sin prop: En el proyecto anterior, agregamos una opción de modo oscuro, y ahora voy a hacer algo similar que es aplicar un GrayMode. Si este esquema de color que tienes actualmente es un poco demasiado para el usuario, esto debería ser bastante familiar, reducimos usando muchas de las técnicas que ya hemos utilizado. Empezando de nuevo en la App.vue, primero necesitamos algunas propiedades de datos. Dentro de la sección de devoluciones, la primera va a ser GrayModeSet, este es un valor booleano que actualmente se establecerá en false. Entonces también un objeto GrayMode el cual va a contener el esquema de color, pero nuestro fondo y también nuestro color de fuente. Esto será para nuestro silicio CSS, primero establece la propiedad de fondo para que sea gris pizarra ligera. Entonces también nuestra propiedad de color para el texto, y puedes elegir cualquier color que quieras y voy a ir por un valor hexadecimal de 454444. Pasar a las plantillas, esto también necesita un botón para que podamos activar y desactivar esto. Voy a colocar esto dentro de nuestras opciones div, y también en medio de estos dos botones de color. El primer paso es, al menos ahora por un clic en este botón y luego vamos a cambiar este GrayModeSet para que esté encendido y apagado. Al igual que hicimos anteriormente con el show eventos pasados, vamos a hacer lo mismo, pero esta vez para GrayModeSet. Pondremos esto para que sea lo contrario. También podríamos agregar algún texto dentro de aquí, pero en su lugar voy a usar un ocultar mi entidad, que va a ser el sol o la luna. Para hacer esto dinámico, necesitamos las llaves dobles y también haremos uso del operador ternario JavaScript. Si el modo gris set es actualmente verdadero, vamos a establecer el icono que es la luna. Por lo que el icono de la luna es el ampersand, duro en el número de 9788;. Si esto es falso, mostramos la imagen de la luna. Establecemos este valor predeterminado para que sea falso, así que sí vemos el icono de la luna dentro de aquí. Vamos a dar click en esto, vemos el sol. Entonces todo esto parece funcionar bien. Ahora los estilos que se configuraron como una propiedad de datos, ahora necesitan ser transmitidos a estos componentes de evento. Podemos cambiar el color de fondo y también el texto para cada uno de estos eventos. En el pasado, hemos pasado los apoyos a los componentes de este evento. Al igual que vemos aquí. Podríamos volver a hacer eso, pero esta vez vamos a aprovechar los atributos no apuntalados. Esto funciona de manera similar a los apoyos que hemos mirado en el pasado. Bueno, en lugar de dentro de los componentes, la plantilla heredará automáticamente estos valores. Para estos componentes en particular, el artículo es los principales elementos de envoltura, y cualquier atributos sin fines de lucro a transmitir será heredado automáticamente por este envoltorio principal. También aparecen igual que un atributo regular dentro de la etiqueta de apertura, por lo que si pasamos un atributo ID, se vería algo así. Quitémoslo y para hacer esto, vamos a volver a la app.vue de padres, y luego podemos pasar esto hacia abajo en los componentes del evento. Usando el mismo ejemplo, estableceremos el ID igual a una cadena, digamos esto y más al navegador, podemos refrescar y abrir las herramientas del desarrollador. Usa el selector y elige cualquiera de estos eventos. Estos se almacenan dentro de una lista desordenada, y si entramos dentro de nuestros ítems de lista en el artículo, esto alrededor de un artículo ahora ha heredado nuestra ID. Esto significa que si pasamos a nuestro event.vue, ya no necesitamos registrarlos como nuestros apoyos, se heredan automáticamente dentro de la plantilla. Ahora como ejemplo más práctico, vamos a reemplazar este ID por los estilos que establece como propiedad de datos. Combinamos esto como un atributo de estilo donde vamos a pasar por nuestros fondos y también nuestro color. Dentro de la sección de datos, tenemos este conjunto dentro de nuestro objeto GrayMode. Ahora solo queremos pasar estos valores si GrayModeSet es cierto. Ahora podemos usar el operador ternario JavaScript para determinar si vamos a pasar esto como un objeto y podemos hacerlo usando el operador ternario JavaScript. Podemos comprobar primero si GrayMode está configurado. Si lo es, entonces vamos a pasar por nuestro objeto, que es GrayMode. Si no, simplemente pasaremos una cadena vacía, por lo que ninguno de estos estilos se aplicará. Vamos a darle un ir al navegador, y nuestro toggle ya está funcionando. Dentro de las herramientas de desarrollador, podemos ver esto si entramos en la sección de elementos, en tu lista desordenada, y luego en nuestro artículo donde ahora tenemos esta propiedad de estilo dinámico, que tiene el color de fondo y también el color del texto también. Haga clic en el Sol y luego nuestro CSS regular simplemente aplicaría. Ahora con todo este trabajo y sólo vamos a aplicar un poco de estilo a estos tres botones en la parte superior, y el botón de show past events junto este toggle va a permanecer sobre la izquierda. Vamos a presionar este botón AddNew vamp hacia la derecha. Haz esto en la app.vue, hasta los tres botones, y vamos a agrupar nuestros dos primeros botones juntos dentro de un div. Para que podamos agarrar estos, añadir un div, y volver a colocarlos dentro. El estilo, y vamos a darle a esto una clase de opción en los botones del cráneo. Esto ahora significa que nuestra clase de opciones ahora tiene este div y también este botón. Podemos hacer uso del flexbox CSS para establecer la alineación y agregar algo de espaciado entre estas dos secciones. Sección de estilo de reducción de escala. En primer lugar, estas opciones wrapper, el tipo de pantalla de flex, que ahora tal vez no pudiéramos establecer el contenido justificado para darnos algún espacio entre. Esto ahora nos da el espaciado intermedio, por lo que ahora podemos enfocarnos en este tiempo y para estos botones individuales, empecemos con este botón AddNew. Si volvemos a subir a nuestra plantilla, el botón sobre a la derecha, como esta clase de AddNew. Entonces nuestros dos botones de la izquierda tienen esta clase de botones de opción. Abajo a nuestra sección de estilo, vamos primero por el botón AddNew. Podemos hacer esto un poco más grande con el tamaño de fuente de tres rems y también el color de la fuente, que será un valor RGB. Entonces el rojo es 92, el verde es 84, y luego 84 para el azul también. El cursor, este será un puntero, por lo que cambia cuando el usuario pasa por encima de este botón. Después también quita el fondo predeterminado y también el borde también. Ahora, el grupo de opciones de la izquierda, que tenía la clase de botones de opción. Entonces cuando queramos apuntar a los dos botones que están anidados por dentro, comience en algún relleno de 0.5 rems en la parte superior e inferior y luego en una rem a la izquierda y a la derecha. Esto solo hará que estos botones sean un poco más grandes y para agregar también algo de espaciado en el medio, podemos aplicar algún margen sobre la derecha, el fondo de ninguno. Entonces vayamos por la frontera. En primer lugar, el borde radio de un rem nos da las esquinas redondeadas, y luego el borde real, que va a ser de dos píxeles de ancho, un color azul de acero claro, y también una línea sólida. El tamaño de fuente de 1.2 rems y luego finalmente el cursor, sólo tanto se ha ido a ser un puntero. El toque final para asegurarnos también de que tengamos alineación vertical de nuestros dos botones de la izquierda a todo botón sobre la derecha. Podemos ver que esto lo pone es un poco más bajo y la forma de arreglar esto está dentro de la envoltura, y todo lo que necesitamos hacer dentro de aquí es establecer la propiedad align items para que esté en el centro, que ahora se alinea nuestras dos secciones. También hay algunas cosas más por descubrir con atributos que no son de utilería, y las vamos a descubrir a continuación. 56. Más sobre atributos sin prop: Ahora sabemos cómo pasar atributos básicos no apuntalados, pero también hay algunas cosas más que podemos ver también. Una de estas cosas es cancelar la autoherencia. Sabemos por el último video que el componente hijo hereda los atributos automáticamente. Pero si no queremos que esto suceda, tenemos control total sobre esto. Dentro del componente hijo, que es el Event.vue, bajamos a nuestra sección de script y podemos agregar una nueva propiedad, que es HeritAttrs. Si entonces establecemos esto en falso, esto ahora significará que nuestra plantilla no heredará automáticamente todos los atributos no-prop que pasamos. Podemos probar que esto está funcionando al conmutar, pongámoslo justo aquí, y nuestro esquema de color se mantiene exactamente igual. Pero, ¿por qué querríamos hacer esto? Bueno, digamos, por ejemplo, no queremos que todos estos atributos sean heredados en este envoltorio de nivel superior. Bueno, no estamos restringidos a solo usar este envoltorio de nivel superior, Vue nos da acceso a estos atributos en cualquier lugar dentro de esta plantilla, y también en nuestra sección de guiones. Hagamos esto agregando el gancho montado, y tan pronto como este componente esté montado, una vez que registren a la consola, el valor de esto. $ atrates. Entonces si accedemos en nuestros atributos dentro de nuestra sección de script, utilizamos la palabra clave 'this'. Si estamos accediendo directamente a ellos en nuestra plantilla, recuerda, no necesitamos usar una palabra clave 'this', y podemos acceder directamente a ella a la consola. Echemos un vistazo a esto. Refrescar. Ahora tenemos seis atributos diferentes. Porque tenemos seis eventos diferentes, dentro de aquí todavía tenemos acceso a nuestro objeto de estilo y podemos acceder a cualquier otro atributo no-prop que se transmitan a este evento. Este atributo de símbolo de dólar es una propiedad de vista incorporada. Ahora somos libres de usar esto en cualquier lugar que queramos. Por ejemplo, si quisiéramos colocar esto en un div diferente, podemos hacerlo usando v-bind. Entonces recuerda, actualmente no estamos heredando automáticamente esto, por lo que este artículo no tiene acceso automáticamente. Ahora, podemos colocar esto en cualquier otra sección usando v-bind, y luego pasar nuestros atributos a la consola. En la parte superior de nuestra app se encuentra el objeto de opciones con los tres botones. Entonces sopla esto, abre la lista desordenada. Para cada evento tenemos el ítem de lista, tenemos el envoltorio de artículos, y así nuestro artículo. Entonces el div con la clase de datos, vamos a activar este botón. Entonces vemos nuestro atributo de estilo ahora se ha agregado a esta sección con esto. Esto es sólo un ejemplo de cómo podemos colocar estos atributos en cualquier sección para nuestra plantilla. Algo de lo que también debemos estar conscientes es si tenemos múltiples elementos de nivel raíz. Para ver esto, vamos a quitar nuestro v-bind. Si nosotros también, comentamos nuestros atributos heredados. Ahora bien, si volvemos a subir a nuestra plantilla y si fuéramos a cortar este botón remove, la sección div completa, y luego coloca justo encima de nuestro artículo. Recuerda desde antes que este artículo heredaba automáticamente. Todos los atributos no-prop que se transmiten, pero ahora tenemos dos elementos uno al lado del otro. ¿ Cuál heredaría automáticamente estos atributos? Bueno, echemos un vistazo en el navegador. De vuelta a las herramientas de desarrollador, a la consola. Refrescar. Ahora también vemos algunos mensajes de error en la consola ya que la herencia solo ocurrirá si hay un elemento raíz. Entonces sí tiene sentido que este comportamiento sí exista, porque si tenemos dos elementos uno al lado del otro como este, Vue tendría que adivinar a cuál montar. Entonces resolveremos esto usando de nuevo nuestra sintaxis v-bind y luego le diremos a Vue.js a cuál de estos elementos queremos enlazar, al igual que antes de enlazar nuestros atributos. Entonces si volvemos a las herramientas de desarrollador, a la consola, ya no vemos ningún error. Lo final que vamos a ver es también un evento que pasa oyentes como atributos también. Por el momento, si vamos a nuestra app.vue, y luego donde renderizamos nuestros componentes de eventos. Hasta ahora sólo hemos visto pasar datos como estilos, pero pasar un oyente de eventos funciona igual. Si queríamos escuchar un evento, como un click, también podemos pasar esto a nuestros componentes en @click. Entonces al igual que con cualquier otro evento, entonces podemos activar un método, o simplemente podemos hacer algo de JavaScript simple, como configurar un modo gris para que sea igual a verdadero, guardar esto en nuestro navegador. Recuerda en el event.vue, actualmente estamos vinculando estos atributos a este botón remove. Ahora, si hacemos click en esta sección de botones de quitar, vemos que ha aparecido el color de fondo más oscuro, es que lo estamos configurando el modo gris para que sea cierto. Ahora también podemos ver esto si pasamos a las herramientas de desarrollador, donde seguimos haciendo el registro de consola para cada uno de nuestros atributos. Si abrimos esto, y entonces es la sección de destino, ves que tenemos esta propiedad de estilo, pero también ahora un manejador de eventos OnClick. Ahora bien, esto es solo un ejemplo sencillo de cómo funciona un oyente de clics con atributos no apropiados. Entonces vamos a quitar esto ya que no necesitamos esto en nuestro proyecto. También, más en el caso, si activamos esto, seguimos pasando los atributos al botón. Queremos que estos realmente se apliquen al artículo por lo que vamos a eliminar todo v-bind y luego pasar esto a nuestro artículo. Vamos a probar esto haciendo clic en nuestro toggle, y todo está funcionando una vez más. Es así como funcionan los atributos no apuntalados. A continuación, echaremos un vistazo a algunas otras formas de pasar por los datos utilizando ranuras. 57. Introducción a la sección: slot y componentes dinámicos: Hasta el momento, hemos mirado diversas formas diferentes de pasar datos entre nuestros componentes. Hemos analizado cómo podemos pasar apoyos de un padre a un componente hijo, y cómo podemos omitir la copia de seguridad de eventos personalizados. Pero a continuación en esta sección, vamos a echar un vistazo a algo llamado slots, que es una forma realmente flexible de pasar datos entre nuestros componentes. Pero también, tendremos un nuevo proyecto al estilo que es una aplicación de dashboard. A continuación, echaremos un vistazo a cómo podemos descargar esto y empezar. 58. Lo que vamos a construir y el proyecto de inicio: En las próximas secciones, vamos a estar echando un vistazo a algunas formas diferentes de analizar los datos entre nuestros componentes. El apartado estará enfocado a las ranuras. Después en la siguiente sección, echaremos un vistazo a algo llamado Proporcionar e Inyectar. Para ello, tenemos un proyecto fresco con el que empezar a trabajar. Este es un tablero de instrumentos el cual puedes ver justo aquí. Estaremos construyendo esto a lo largo de esta sección. Para empezar, tenemos una sección de resumen, que vamos a dar click desde este menú de la izquierda. Esto nos dará entonces acceso a nuestros datos los cuales se van a separar entre nuestros tres componentes. Tendremos el artículo vendido donde analizaremos los datos, el total de ventas, y también, filtraremos por el artículo más vendido también. El siguiente enlace es para nuestros pedidos. Esto va a recorrer todos nuestros pedidos y mostrarlos en esta página junto con nuestros componentes totales de ventas. Esto será reutilizado desde nuestra sección de resumen. Así como, esto también tendrá nuestra página de bestsellers. Esto volverá a recorrer todos nuestros pedidos. Después extraeremos todos los productos vendidos y luego los totalizaremos en orden de la cantidad vendida. Este proyecto nos permitirá tener una comprensión más profunda de cómo funcionan las ranuras en Vue. Al igual que con los proyectos anteriores, si vas al repositorio de GitHub. Dentro de las descargas, tienes los datos de un dashboard. Esto es igual que los proyectos anteriores donde tenemos una configuración mínima de Vue CLI. Casi la única diferencia está en la fuente, hemos eliminado los ejemplos de Hello World. Además, tenemos este pedidos. js file. Esta es una matriz de objetos y esto son solo algunos datos de muestra, algunos pedidos de muestra para que empecemos a trabajar con nuestros datos. Todo lo que contiene es un número ord o un ID de pedido. Entonces, tenemos una matriz de artículos los cuales se han vendido para este pedido. Para empezar, una vez que hayas descargado el iniciador, arrastra esto hacia tu editor de texto. Entonces, podemos ejecutar la instalación de NPM. Adelante en el directorio del proyecto y luego instala los módulos con la instalación de NPM. Entonces, un servidor ejecutará NPM run serve para iniciar nuestro servidor de desarrollo. Entonces, abre esto en el navegador. A continuación, vamos a configurar los componentes y páginas que vamos a necesitar para este proyecto.pa 59. Páginas del proyecto y componentes: Esta sección se va a enfocar en algo llamado slots y también componentes dinámicos. Para trabajar con ambos, primero necesitamos algún contenido con el que trabajar. Recuerda, antes, dijimos que los componentes se pueden colocar en cualquier lugar dentro de nuestra carpeta fuente. No sólo tenemos que restringirlos a una carpeta de componentes. Con esto en mente, voy a crear una nueva carpeta, nuevo dentro de este directorio fuente, y esto se va a llamar vistas. Esto también contiene componentes o.vue archivos, pero es común tener una carpeta de vistas o de páginas para organizar mejor nuestros componentes los cuales vamos a estar utilizando para nuestras páginas principales. Entonces al igual que estamos viendo cuando echamos un vistazo a la versión final, las páginas que tenemos dentro de nuestra aplicación fue la visión general. Teníamos la página de ventas y también los bestsellers también. Esta carpeta de vistas generalmente contiene este tipo de archivos los cuales vamos a utilizar para cambiar entre cuatro URL diferentes. Teniendo en cuenta esta estructura de archivos tenemos en la carpeta fuente y luego dentro de unos componentes en una carpeta views. Ambos contienen los componentes de un solo archivo.vue. Este enfoque significa que podemos organizarlos para que las páginas entre las que vamos a estar cambiando estén todas agrupadas. Aquí las tres páginas que tenemos para casa, contacto, y cuenta también son enlaces dentro de nuestro encabezado. Significa que si hacemos clic en la cuenta, por ejemplo, se mostrará el archivo account.vue. Estos componentes de página no tienen que contener todos los contenidos de las páginas. También ellos se pueden descomponer y contener múltiples componentes. Este ejemplo junto a los componentes del usuario en la página y este componente también se puede reutilizar en tantas páginas como sea necesario. Pasamos a nuestra aplicación donde podemos empezar a configurar nuestras páginas y nuestros componentes reutilizables. Entonces, en primer lugar, en la carpeta de componentes, crea un nuevo archivo y esto va a ser para nuestro Bestseller.vue. También a la par de esto, también tendremos los ItemsSold. Entonces recuerda, estos son solo los componentes individuales que vamos a colocar en nuestras páginas. Después de esto, el tercero va a ser para el SaleTotal, y finalmente, el último componente que necesitamos es para nuestra Sidebar. De acuerdo, cierra esto. Ahora, dentro de nuestros vues, vamos a crear nuestras páginas gratuitas, que hemos visto antes. Por lo que la primera será para los Bestsellers, y estas páginas o estos vues también tendrán la extensión.vue, los Pedidos, y luego también nuestra página de Visión General. Por lo que los archivos.vue dentro de nuestra carpeta vues y también los nuestra carpeta de componentes no tienen ninguna diferencia más que el hecho de que están organizados en carpetas diferentes. Entonces, comencemos agregando algún contenido a nuestras vues. Empezando por los bestsellers, y todo lo que vamos a hacer aquí dentro es añadir nuestra plantilla y todo esto va a contener por ahora es un encabezado de nivel 3, un estilo de archivo de clase de page-title, y éste va a ser Best Sellers. Selecciona todo esto y copia en nuestros Pedidos, coloca esto en, pega el título, y luego lo mismo para la Visión General. Entonces nuestros componentes. Para que quede claro, el componente BestSeller va a ser para los productos más vendidos número 1 y la página BestSellers va a ser una lista de todos los artículos best-seller desde los más altos hasta los más bajos. Entonces la plantilla, de nuevo una etiqueta de artículo HTML, y esto tendrá una clase de estadísticas. Vamos a hacer uso de esto en la página Visión general, así que tendremos esto como componente a la izquierda y después tenemos los ItemsSold y luego el SalesTotal también. Ahora, vamos a darle a esto una rúbrica de nivel 4 de artículo más vendido. Seleccionar todo y copiar. Abajo a artículosVendidos, podemos pegar esto en. Todo lo que necesitas hacer es cambiar este encabezado de nivel 4, los artículosVendidos. A continuación, el SaleTotal, que será muy similar también que tendrá el título de ventas totales, y por ahora, vamos a dejar esto firmado por vacío. Está bien, bien. Ahora, tenemos algún contenido en su lugar. Tenemos nuestros puntos de vista, todas las páginas, y también algunos componentes. En el siguiente video, echaremos un vistazo a cómo podemos pasar datos a estos componentes usando slots. 60. Introducción a los slots: Los videos anteriores se han centrado en pasar datos entre componentes, usar utilería y emitir eventos personalizados. Este próximo video te va a mostrar cómo funcionan las ranuras en Vue.js, que es una forma realmente flexible de pasar los datos en nuestras aplicaciones. Este ejemplo que vimos en el último video incluía un componente de página, que era la cuenta.view. Reutilizamos los componentes anidados en el interior, pasamos información a estos componentes usando apoyos, tal como vemos aquí para el nombre del usuario. Otra forma de dar salida a nuestros componentes es utilizar una etiqueta de apertura y cierre en lugar del estilo de autocierre desde antes. Este estilo también funciona exactamente igual también. Para este estilo también ahora nos deja con la opción agregar cosas entre nuestras etiquetas de componentes. Pasaría en un rumbo de nivel 3, pero ¿qué pasa exactamente con este rubro entre nuestras etiquetas? Bueno, esto depende completamente de nosotros. Si no hacemos nada, el contenido se ignora o podemos usar slots para usar estos datos en nuestros componentes de usuario. Al mirar nuestra plantilla de componentes de usuario a la derecha, tenemos otro elemento que contiene una lista de artículos gratis, y esto es todo bastante estándar. Echa un vistazo por encima de este nav, y tenemos lo que se llama ranura. ranura actúa como un titular para el contenido que pasamos a ella entre las etiquetas de apertura y cierre de componentes, y en nuestro caso era un rumbo de nivel 3. Este elemento de ranura es muy flexible y se puede colocar en cualquier lugar dentro de la plantilla de nuestro componente. Este enfoque puede ayudarte a pensar en por qué incluso tenemos ranuras disponibles cuando simplemente podemos pasar props? Pues bien, esta es una pregunta muy válida y que es muy comprensible, mirando un ejemplo sencillo como este. Pero también es mucho más a las ranuras y muchos más casos de uso, y echaremos un vistazo a estos en los próximos videos. 61. Descripción de la estructura de la página: Ves estas ranuras en acción dentro de nuestro proyecto. Primero necesitamos algún contenido con el que trabajar. Actualmente, tenemos todas nuestras vistas y nuestra configuración de componentes, pero aún no tenemos nada registrado en la página. Para ello, vamos a pasar a nuestra app.vue. Dentro de aquí tenemos este div con la clase de app_wrapper. Esta clase simplemente apunta a algunos estilos que va a establecer la familia de fuentes y también el color de fuente base. Lo que vamos a hacer es agregar alguna estructura a esta app, y también importar y registrar nuestra primera página que es la overview.view. Para ello, importaremos esto igual que cualquier componente regular. El nombre es Overview y esto es dem./. Esto está en nuestra carpeta Vistas, y luego el nombre del componente es Overview. Configurar nuestra sección de componentes. Dentro de aquí sólo tenemos un componente por ahora, así que pásalo. Vemos un error porque no hemos usado esto todavía, pero primero añadiremos nuestra estructura dentro de nuestro app_wrapper. El primero que vamos a hacer es crear una sección de encabezado, y esto va a contener un título de nivel uno con el texto de Chry's Dashboard. Esta cabecera secciona un div con la clase de contenido, y esta sección va a contener dos secciones anidadas. El primero es la barra lateral con enlaces a nuestras páginas gratuitas, y luego a la derecha tendremos algún contenido, que es para cada una de estas páginas en las que hemos hecho clic. En primer lugar, el elemento aparte. Entonces después de esto, el principal. El apartado aparte por ahora sólo va a contener tres enlaces diferentes. No necesitamos href porque vamos a controlarlo usando view. El primer enlace es Overview. Tengo dos páginas más, la segunda es Pedidos, y la tercera es Best Sellers. Eso es todo para la barra de lado. Entonces en la sección principal lo que vamos a hacer es, en primer lugar, pasar dentro de estas pequeñas etiquetas, y dentro de aquí vamos a pasar en algunas migas de pan para que el usuario sepa exactamente dónde están en nuestro sitio. Esto diría, algo así como dashboard/overview. Cambiaremos esta sección dependiendo de la página en la que estemos actualmente. Para darle estilo a esto también voy a cortar la sección de tablero y añadir un elemento span. Por lo que le daremos a esto un color diferente dentro de nuestro CSS. Después de esto, el contenido real de la página, y por ahora sólo tenemos un componente para mostrar. Esta es la visión general, publicaremos algunos datos a esta visión general muy pronto. Pero por ahora, bajemos a las hojas de estilo. Vamos a empezar con nuestra sección de cabecera. El apartado de encabezado va a tener un color de fondo blanco. También va a hacer uso del css flexbox también. En primer lugar, fondo que es de color blanco. Después agrega un borde en la parte superior y también en la parte inferior. Este será de un píxel, una línea sólida, y luego el color de ddd. Esta línea gris de Chris en la parte superior, también añadiremos una en la parte inferior, y luego pronto también añadiremos una línea vertical que va a separar nuestro contenido de solo página de barra lateral. Duplicar esto. También sumaré uno en la parte inferior. Después de nuestra sección de encabezado, tenemos nuestra sección de contenido, que es el div que rodea tanto el apartado como también la sección principal. Este es básicamente todo el contenido debajo de nuestro encabezado. Para darle estilo a esto y posicionarlo, estableceremos el tiempo de visualización para que sea flex. La dirección del flex por defecto es cruda cuando se usa flexbox. Ahora estas dos secciones aparecerán ahora de lado a lado. Para ajustar el ancho de cada uno, uno, vamos a utilizar nuevamente las fuentes flexbox, y la sección aparte puede tener el valor flex de 1, y luego la sección principal tendrá el valor flex de 3. Esto significa que la sección principal ocupará tres veces el ancho de la barra lateral, sobre la barra de lado el valor flex de 1. Pero también mucho en boarder, pero esta vez esto va a ser vertical. Entonces necesitamos colocar este borde a la derecha, y esa es nuestra línea justo ahí, y necesitamos asegurarnos de que esta línea sea la altura completa de la página. Lo que vamos a hacer para esta sección es establecer la altura mínima sea del 100 por ciento de la ventanilla. Esta línea ahora va derecho a bajar hasta el fondo. Ahora hacia nuestra sección principal de a la derecha, tiene la envoltura principal. El valor flex de 3, por lo que esto toma alrededor de tres veces el espacio disponible de la barra lateral, y luego un valor de relleno de 1ram. Lo último que hay que hacer en este apartado es también cambiar el color de nuestras migas de pan. Por lo que ahora vamos rodeando el salpicadero con esta clase de azul. Ahora podemos usar esto para establecer el color. El color del texto tendrá un valor RGB de 25, 149 y 243. También podemos espaciar dentro de esta carpeta /2 de HTML todo lo que necesitamos hacer es agregar un espacio justo antes y después y ahí vamos. Esto ahora nos da una base para comenzar a explorar nuestras ranuras en el próximo video. 62. Slots en la práctica: En las diapositivas un poco antes, descubrimos que podemos pasar datos a un componente hijo pasándolo entre los componentes, abriendo y cerrando etiquetas. Este método se llama slots, y ahora vamos a configurar algún contenido de slot. El sitio que actualmente hemos establecido dentro de aquí es este resumen el cual nos registramos en la App.vue. Esta página mostrará ahora nuestros tres componentes del bestseller, el artículo vendido, y también el total de ventas también. Al igual que aquí en la versión final. Si bien esto, primero necesitamos registrarlos dentro de nuestro archivo general.vue. Entraremos aquí y para ello crearemos nuestra sección de guiones, luego registraremos nuestros tres componentes. La primera importación va a ser para artículos vendidos. Esto va a ser desde la ubicación que es.. /componentes, y luego en los artículos vendidos componentes, que cambia. Además, podemos reemplazar esto por el símbolo @, y este es un atajo a la carpeta fuente. Tenemos que duplicar esto dos veces más. El segundo es para el total de ventas, cambie la ruta del archivo. El tercero es el bestseller. Abajo a la exportación. El primero es crear un nombre para este componente, y el mío va a ser el resumen. Después registra nuestros tres componentes para que podamos utilizarlos dentro de nuestra plantilla. Tenemos artículos vendidos, el total de ventas, y también el bestseller. Para mostrarlos, crearemos una nueva sección justo debajo de nuestro título. Esta sección va a mostrar entonces nuestros tres componentes y luego anidaremos en medio de nuestro contenido de ranura. El primero es artículos vendidos y también cierra. El segundo es para el total de ventas, y luego el bestseller. Guarda esto y vemos los títulos de los tres de nuestros componentes, los cuales comenzarán dentro de nuestro rumbo de nivel 4. Ahora, vamos a pasar nuestros contenidos de ranura entre cada uno de estos elementos. Al igual que vemos en la versión final, tenemos los artículos vendidos, el total de ventas, y también el artículo más vendido, pero ahora esto sólo va a ser algunos datos estáticos. Pero muy pronto, vamos a agarrar todos estos valores que está contenido en nuestro archivo orders.js. Volver a nuestra visión general y entre los artículos vendidos elementos, vamos a pasar nuestros datos de slot. Esto puede ser cualquier cosa como texto regular. Podemos pasarlo en elementos HTML y también ver datos js entre llaves dobles también. Simplemente voy a dar salida al span, y el span también va a tener una clase. Por lo que podemos aplicar algún estilo, a menudo texto claro, colocar en cualquier valor dentro de aquí y copiar esto. El siguiente es por nuestro total de ventas, coloque en cualquier símbolo de moneda y también cualquier valor monetario también. Por último, el bestseller. Cualquier producto por ahora está bien, voy a colocar en la sudadera con capucha Vue en talla mediana. Guarda esto, y por el momento no vemos nada dentro del navegador. Esto se debe a que primero necesitamos decirle a Vue.js exactamente dónde queremos que aparezca este contenido en nuestros componentes. Esto es bastante fácil de hacer. Todo lo que necesitamos hacer es ir a nuestros componentes y luego agregar en los elementos de ranura. Esto es básicamente una perspectiva para el contenido que pasamos por este componente. Podemos ir a cualquier parte dentro de aquí. Pero voy a colocar esto por debajo del rubro de nivel 4, lo mismo para el total de ventas, como en nuestra ranura. Vemos los valores que en él aparecen debajo de cada uno de nuestros títulos, un bestseller. Otras ranuras aquí también, y esto ahora aparece en la página. Bien. Ahora agreguemos un poco de estilo en la página de resumen. Al principio, recuerda, las tres de estas secciones estaban rodeadas dentro de esta envoltura de sección. Hagamos que estos pasen por la página, al igual que vemos aquí, apuntaremos a esta sección y estableceremos el tipo de visualización para que sea flex. Para ello necesitaremos una sección de estilo. Esto también puede ser ámbito, por lo que sólo se aplica a este componente. [ inaudible] y configurar la pantalla para que sea flex. Algún espaciado, también podemos aprovechar contenido justificado y distribuir todo el espacio disponible para estar entre estos tres elementos. También coloque un borde alrededor de estas tres secciones, agregue un objetivo, estos encabezados individuales y contenidos de ranura. Ahora vamos a pasar a la app.vue. Esta sección de estilo no tiene ámbito por lo que todos estos estilos se aplicarán a cualquier componente, incluidas las tres de estas secciones. Comienza nuestro rubro de nivel 4, que es el título de los tres de nuestros componentes. Eliminaremos cualquier margen por defecto configurando esto como cero, y luego agregaremos algo de relleno a la parte inferior de este título para darnos más espaciado de nuestro contenido de ranura. Este contenido de ranura también tenía una clase. Si vamos a la página de resumen y hasta las plantillas, esto tenía la clase de texto ligero. Vamos a agarrar esto. Todo lo que vamos a hacer en este apartado es reducir el font-weight para que sea un valor de 300. Para aplicar la frontera alrededor de cada uno de estos ítems, si entramos en el componente, cada uno de estos artículos tiene la clase de estadísticas. Aquí adentro, estableceremos el borde para que sea el peso de un píxel, una línea sólida, y un color gris claro, que es ddd. El radio fronterizo de cinco píxeles. Entonces algún espacio interno en con el valor de relleno, que será uno 1rem. Bien. Vamos a tener nuestros componentes ahora con estilo. Tan solo para trabajar con esta sección de cabecera, voy a reducir a la baja el encabezamiento de nivel 1. Esto es un poco demasiado grande, así que etiquetaremos el encabezado H1, y luego reduciremos el tamaño de la fuente. Probemos 1.4 rems, y eso se ve mejor. También puedo jugar con la font-family también, voy a quitar esto y cambiarlo para que sea Avenir, pero también puedes cambiarlo para que se adapte a tu estilo. Es así como podemos usar las ranuras a un nivel muy básico. En el siguiente video, vamos a echar un vistazo al alcance de las ranuras, y también a cómo pasar datos dinámicos. 63. Pasar datos dinámicos y alcance: En el último video, miramos el paso de datos como ranura en forma de un elemento HTML. Esto puede ser cualquier cosa que queramos, incluyendo un texto plano y también contenido dinámico. Estas tres secciones que tenemos aquí de artículos vendidos, ventas totales, y bestseller todos incluirán contenido dinámico como apoyos de la app.vue parent. Ahora, en la app.vue, ahora pasamos a configurar nuestros accesorios gratuitos en el componente de resumen. El primer prop va a ser cantidad de artículos vendidos, que es igual a 32. Esto, de nuevo, puede ser cualquier valor. No importa todavía. Al tratar con números, también, necesitamos usar v-bind. Esto se evalúa como una expresión de JavaScript en lugar de un valor de cadena. A continuación, el valor total de las ventas. Agrega cualquier cosa dentro aquí. El tercero va a ser para el bestseller. Esto no necesita usar v-bind ya que esto solo va a ser un valor de cadena. Dado que estos son apoyos, también necesitamos ir a nuestro componente de visión general y registrarlos en nuestro guión. También podemos agregar alguna validación simple. Entonces vamos a configurar esto como un objeto. El primero es el valor total de las ventas, y el tipo es el número. El segundo es cantidad de artículos vendidos. Esto también tendrá el tipo de número. El tercero es para el bestseller. Esta tiene el tipo de cuerda. Estos tres apoyos ahora pueden reemplazar el contenido que pasamos a nuestra ranura. El primero, quitar el primer valor de siete, y podemos reemplazar esto dentro de las llaves dobles por nuestra prop, que era cantidad de artículos vendidos. El siguiente, todavía podemos dejar en el símbolo de moneda, pero reemplazar el valor por el prop, que era valor total de ventas. El tercero, para nuestro bestseller, y esto falta, así que echemos un vistazo. Esto sólo quiere ser una b minúscula, y ahí vamos. Todo esto funciona ahora con nuestros datos dinámicos. Como puedes ver, a las ranuras no les importa si los datos son texto, elemento HTML, o incluso contenido dinámico así. Pero al pasar datos dinámicos, igual que estamos aquí, qué componentes tienen acceso a estos datos? Dentro de nuestra visión general, por ejemplo, tenemos esta cantidad de artículos vendidos prop. Esto está dentro de nuestro componente de visión general, pero también se renderiza dentro de nuestro componente de artículos vendidos también. ¿ Cuál de estos dos componentes tiene acceso al mismo? Bueno, puede que ya hayas adivinado que como actualmente estamos usando este dentro de nuestro archivo general, que este archivo tiene acceso completo a estos datos. Esto es correcto. Pero, ¿qué pasa con el componente hijo, que son los artículos vendidos, donde se están renderizando estos datos dentro de? Bueno, tomemos esto y echemos un vistazo al componente del artículo vendido. Entonces podemos intentar dar salida a esto dentro de las llaves dobles. Ahora no vemos ningún dato mostrado, por lo que esto no funciona. Pero, ¿qué tal si esto está disponible como utilería? Bueno, podríamos probar esto también. Podríamos colocar en el guión. Podemos ver que tenemos acceso a esta vía utilería. Este, aún no tenemos acceso a estos datos. Esto ahora significa que el componente hijo real, que está mostrando el contenido, solo es responsable de presentar esto dentro del navegador. No tiene acceso a nuestras variables. Estos sólo están disponibles en el alcance del padre. Si quisiéramos tener acceso a estos datos dentro de ambos componentes, hay una forma de que podamos hacer esto, y esto es por lo que se llama ranura de ámbito. Echaremos un vistazo a estos muy pronto. 64. Contenido de reemplazo: Aquí aquí, tenemos esta ranura sobreviven al contenido que se transmitieron, pero ¿y si añadimos algo entre estas dos etiquetas también? Bueno, lo hacemos si queremos proporcionar algún contenido de retroceso para mostrar si no se pasa nada a la ranura. Quizás podamos agregar un mensaje el cual no tiene datos disponibles. Pasado al navegador, no vemos este mensaje todavía, pero si pasamos a los padres, que es la visión general, y luego quita temporalmente los elementos span los cuales pasamos al artículo vendido. Esto ahora se reemplaza por este mensaje de no tener datos disponibles. Esto se utiliza para cualquier contenido de respaldo si no proporcionamos ningún dato de ranura a nuestros componentes hijos, quiero deshacer esto y guardar este archivo, pero esto es útil para una serie de situaciones. Por ejemplo, puede que no siempre tengamos algunos datos de ranura para transmitir a los componentes hijo, sobre todo si estamos reutilizando los componentes varias veces o puede haber un retraso en generar los datos de la ranura, por lo que si estos datos que colocamos dentro de un que tal vez fue buscar de una base de datos o una API. Si bien estamos esperando que estos datos regresen, posible que deseemos mostrar algún spinner de carga o un mensaje de positor. Además, si estamos usando un componente, digamos cinco veces más en nuestro proyecto, si los datos van a ser los mismos para cuatro de ellos, podríamos hacer uso del contenido de respaldo para proporcionar el valor predeterminado para estos cuatro componentes. Después cambió los quinto componentes al pasar los datos de la ranura. Esto es realmente simple pero realmente útil también. A continuación, nos mantendremos en las ranuras subjetivas y descubriremos cómo colocar varias ranuras en nuestros componentes. 65. Slots nombrados: Aquí en nuestra página de resumen sobre la izquierda, dentro de cada uno de estos tres componentes, actualmente sólo estamos pasando un solo elemento. Esto está completamente bien, pero para situaciones más complejas, pasar mucho más contenido en una sola ranura puede no ser ideal. Para este caso de uso, tenemos lo que se llama ranura de nombre. Esta es una forma de distribuir este contenido de ranura en diferentes ubicaciones en los componentes hijos. Podríamos tener múltiples líneas de códigos y luego colocarlos en nuestros componentes en diferentes ubicaciones. El primer paso para hacer esto es básicamente agrupar nuestro contenido dentro del elemento de plantilla. Para esto, vamos a crear nuestra primera plantilla. Esto va a pasar un icono a los tres componentes hijo. Tendremos nuestra primera plantilla y también añadiremos en un segundo grupo dentro de la plantilla 2. Lo que vamos a hacer aquí dentro de la segunda plantilla, es agarrar nuestros elementos span originales y mover esto hacia arriba a la segunda sección. El primer apartado que vamos a añadir en nuestro icono, y este también será un elemento span. La entidad HTML para este icono va a ser el ampersand, el hash y luego 128200 seguido de este punto y coma. Dado que estas van a ser ranuras de nombre, necesitamos darle a cada una de estas plantillas un nombre único. Podemos hacer esto con ranura v. Ranura V también es una directiva. Voy a llamar al primero el ícono. Después hasta la segunda plantilla, nuevamente agregando ranura v. Este va a ser por la cantidad. Entonces voy a dar a esto un ahorro, y estamos en medio de las secciones de artículos vendidos, así que si vamos a pasar a estos componentes, ahora necesitamos proporcionar nuestras dos ubicaciones donde queremos que estos se muestren. Para empezar, el ícono va a un lugar al lado de nuestro nivel 4 head in. Agregando nuestra ranura, y luego figura qué contenido queremos que se coloquen aquí dentro, agregamos los atributos de nombre. Esto será para la sección de iconos y la segunda fue para la cantidad. Cierra el navegador y vemos nuestro icono y también nuestra cantidad también. Si también quisiéramos, también podríamos omitir uno de estos nombres de ranura, y usar esto como predeterminado. Esto sólo es dejar arriba una de nuestras ranuras con un nombre, y esto va a ser para el contenido predeterminado. El modo en que configuramos esto es volver a nuestra plantilla, establecer esto como la ubicación predeterminada y aún funciona exactamente igual también. Ahora bajemos y hagamos lo mismo por nuestro total de ventas y el bestseller también. Estos necesitan una plantilla y podemos traer este valor total de ventas y luego colocar nuestro icono dentro de la primera sección. Este también será un lapso, aunque sólo sea si éste es el ampersand, el duro 128176. Agregar a nuestra plantilla, agregando la directiva de ranura v y esta es para el icono 2. El segundo colocado en la directiva de ranura v, y éste puede permanecer como la ubicación por defecto hasta el bestseller y esto sería exactamente lo mismo. El plantillas y lo colocaremos en la ranura v, es elementos divertidos para el icono real y la entidad para esto es el ampersand, el hash 128293. El final son nuestras ranuras por defecto. Tendremos un lapso y también darle a esto el nombre, que va a ser por defecto. De acuerdo, entonces podemos encontrar nuestros puntos de venta y el primero fue por el total de ventas. En este componente colocar en la ranura para nuestra ubicación de icono. Tiene el nombre de icono. Entonces podemos dejar nuestra segunda ranura para la ubicación predeterminada. Por último, los oponentes bestseller harán lo mismo que los dos últimos componentes. Agregando nuestras ranuras, colocando nuestro nombre de icono y de nuevo, este es el contenido predeterminado 2. Bien. Podemos ver en el navegador tenemos todos nuestros tres iconos y aún tenemos el contenido el cual se pasa. El último aspecto a tener en cuenta es una taquigrafía, que podemos colocar en nuestra directiva de tragamonedas v. Si volvemos a la visión general, todo lo que tenemos que hacer para acortar esto es reemplazar las ranuras v por las duras. Podemos hacer esto por nuestro icono y también la ranura predeterminada 2, reemplazar los seis de estos. Guarda nuestro archivo, y todo sigue funcionando como antes. 66. Slots de alcance: Esto ahora nos lleva a las ranuras de alcance. Aquí es donde las cosas comienzan a ponerse un poco más interesantes en cuanto al acceso a nuestros datos. En este archivo overview.view, actualmente lo estamos pasando por abajo datos dinámicos a estos componentes hijo, o si era al revés y estos datos vivieron dentro de nuestros componentes hijos, qué queríamos acceder a él dentro de este archivo. Bueno, podemos hacer esto con ranuras de alcance. Antes agregamos unos componentes de barra lateral, pero aún no hemos agregado ningún componente. Entonces vamos a pasar a esto y podemos empezar a trabajar dentro de nuestra sidebar.view, colocando nuestra plantilla, esto va a renderizar nuestros enlaces libres dentro de la barra lateral, y también nos dará la oportunidad de mirar las ranuras de alcance. Colocando la lista de navegación y desordenada, entonces podemos recorrer nuestras páginas con el ítem de lista. Todavía no hemos creado estos, pero llamaremos a estas páginas, así que recorreremos la página en páginas, también enlazaremos una clave dinámica. Esta simplemente va a ser la página, sólo por simplicidad. Dentro de aquí, colóquelo en un elemento de enlace, y esto solo va a salir entre las llaves dobles, nuestra página. Esto es todo lo que necesitamos para la plantilla, así que bajando a la sección de guiones, podemos configurar nuestra propiedad de datos para todas las páginas. Pages va a ser una matriz bastante sencilla, así que solo empezaremos en nuestras cadenas libres. El primero fue Overview, tenemos Pedidos, y también Best Sellers. Esto se va a renderizar y registrar en nuestra app.vue. Dirígete a nuestro script y primero podemos importar nuestros nuevos componentes. Esta es la barra lateral, que está disponible desde la ruta, que es componentes de barra de puntos. Entonces hacia adelante barra lateral. Registrar esto dentro de los componentes, entonces podemos usar esto arriba en nuestra plantilla. El lugar para hacer esto va a estar dentro de la sección a un lado. Podemos eliminar nuestros enlaces libres existentes y luego colocarlos en nuestra barra lateral. Bueno, ahora tenemos nuestros enlaces gratuitos aún mostrando, pero ahora estos son de nuestros componentes de la barra lateral. Pero ve a nuestros componentes sidebar.vue, tenemos este enlace justo aquí, que son nuestros datos dinámicos, que vive en estos componentes infantiles. A modo de ejemplo, imagina si vamos a utilizar esta navegación varias veces en nuestra aplicación. Es posible que deseemos que este enlace tenga un estilo diferente en diferentes ubicaciones o que tenga algunas opciones de diseño únicas diferentes. Como ya sabemos, si tuviéramos que cortar esto y luego colocar entre nuestra barra lateral, esto no funcionará ya que el alcance de esta página está dentro de los componentes de la barra lateral, no esta app.vue. Si quisiéramos manejar esto, necesitábamos hacer uso de las ranuras Alcance para permitirnos pasar datos de vuelta bucle a sus padres. Primero en el sidebar.vue, pasamos primero en los componentes de ranura donde queremos que se muestren estos datos. Queremos ahora pasar es página variable copia de seguridad a los padres. El modo en que podemos hacerlo es vinculando unos atributos dinámicos. No quiero mantener esto consistente y llamar a esta página. Estos atributos se llaman accesorios de ranura. Ahora podemos acceder a estos atributos arriba dentro de los componentes principales, que es la app.vue. En primer lugar, vamos a envolver este enlace dentro de una plantilla y asignarle la ubicación predeterminada. Al igual que miramos en el último video, podemos crear nuestras plantillas, y luego usar las ranuras o la taquigrafía, que es el hash. Entonces dale a esto la ubicación predeterminada donde ahora podemos pegar nuestro enlace de nuevo dentro. Esto se ve casi igual que el último video, pero la diferencia esta vez es aquí vamos a pasar un valor a ranura v. Este valor es un nombre de variable, que podemos llamar cualquier cosa que desee. Para mantener esto descriptivo, voy a llamar a este SlotProps. Ahora al usar esta variable, tenemos acceso a los datos que se habían pasado de nuestra ranura. Ahora tendremos acceso a esta página. Ahora en lugar de acceder directamente a nuestra página, necesitamos primero acceder a nuestros accesorios de ranura, luego a los atributos de página. Vemos de inmediato que nuestras páginas gratuitas ahora aparecen en la barra lateral, por lo que ahora obtenemos estos datos de nuestros componentes child. Alternativamente, en lugar de acceder a todos nuestros apoyos en esta variable, podemos hacer uso de la destrucción de JavaScript. Podemos sacar cualquiera de nuestras variables o cualquiera de nuestros atributos, como nuestra página. Ahora podemos acceder a esto directamente en nuestra plantilla. Es así como funciona un hélice de ranura. Se puede pensar con todo esto, ¿por qué tenemos otra forma de pasar datos cuando ya tenemos todos los apoyos y emisiones. Bueno, todo esto se trata de darnos como desarrollador flexibilidad total. Las ranuras de alcance abren la puerta a tantas cosas diferentes. Por ejemplo, si esta página tuviera autenticación de usuario y tuviéramos acceso a nuestro usuario a partir de nuestros datos. A modo de ejemplo, si tuviéramos una propiedad de datos igual a esta, y si este ejemplo tuviera un objeto de usuario. Si solo querías mostrar ciertos enlaces, si el usuario estaba conectado, entonces necesitarás pasar estos objetos usados a los componentes de la barra lateral a través de utilería. No obstante, usando ranuras de alcance, podríamos hacer exactamente esta misma configuración y podemos comprobar si el usuario está presente colocando este v-if en estos componentes principales, podemos comprobar si el usuario existe antes de renderizar alguno de nuestros enlaces. Actualmente existe un usuario. Si cambiamos a nulo, esto eliminará entonces nuestros enlaces gratuitos. Este es sólo un ejemplo para evitar que los que transmitan apoyos a los componentes hijos. También podemos quitar esto ya que esto no es necesario. También otro ejemplo, si quisiéramos rentar este componente en múltiples ubicaciones, podríamos duplicar el contenido así y podríamos agregar diferentes clases a cada uno de nuestros ítems de lista. Por ejemplo, esto podría colocarse dentro de la barra lateral. Quizás querremos que el estilo sea diferente para el encabezado. Esto nos dará la flexibilidad de tal vez agregar un enlace de color diferente, también podríamos colocar la navegación del encabezado horizontalmente a través de la página, la barra lateral podría ser vertical y tenemos plena flexibilidad para hacer lo que queramos mantener ambos únicos. Quitemos esto y completemos este video agregando un poco de estilo a nuestros enlaces gratuitos. [ inaudible] esto encima en la barra lateral, crea esta sección de estilo. En primer lugar, vamos por la lista desordenada. Podemos quitar las balas estableciendo el estilo de lista para que sea ninguno. Entonces restablece cualquier relleno predeterminado para que sea cero. Entonces podemos agregar algo de espacio en ella a estos enlaces con el ítem de la lista al relleno repentinamente para ser 10 píxeles en la parte superior e inferior, y luego cero en la izquierda y la derecha. Se consiguió un poco de espaciado entre estos tres enlaces. 67. Página de pedidos: Hasta el momento solo hemos estado trabajando en esta página de Visión general. En breve haremos uso de componentes dinámicos, cambiaremos entre estas tres páginas. Pero primero, agreguemos nuestro contenido a los Pedidos y Best-sellers. La página Órdenes va a estar conformada por dos secciones. Para la primera sección colocaremos en los componentes totales de ventas para que podamos ver el valor total de ventas. Entonces abajo esto creará una nueva sección la cual va a mostrar todos nuestros pedidos. Pasemos a nuestra página Pedidos, abrimos la barra lateral, y esto está en la sección Ver. Nuestra primera sección, justo por debajo del rubro nivel tres. Esta va a ser una ranura que dará salida al contenido de nuestros componentes totales de ventas. Vamos a darle un nombre de total. Pasaremos esto a través de nuestra plantilla en tan solo un momento. El segundo apartado, va a ser el envoltorio para nuestra segunda ranura, y esto será para la lista de órdenes. Coloque en nuestra segunda ranura dentro de aquí. No necesitamos darle un nombre ya que esto puede heredar el valor predeterminado. Al lado de la app.vue. Podemos empezar a trabajar primero en esta página Pedidos. Vamos a comentar este panorama general, y también el registro, luego sustituir esto por nuestras importaciones para nuestros pedidos. Este se encuentra en la carpeta Vistas. Registra esto dentro de la sección de componentes. Después vuelve a nuestras plantillas, comenta la sección de resumen, y reemplaza esto por nuestros pedidos. Estaremos pasando este contenido de ranura por lo que esto necesita la apertura y la etiqueta de cierre. Tenemos dos ubicaciones de ranura, por lo que esto necesita dos plantillas. Estos atributos de ranura, para el primero, para ser para el total. El segundo va a ser para nuestro contenido por defecto, que va a ser nuestra lista de órdenes. Esta primera sección de plantillas va a contener nuestros componentes totales de ventas, igual que usamos más en el Resumen. Si echamos un vistazo a esta sección, esto también contiene ranuras para. Aquí estamos pasando por nuestro icono, y también el valor total de ventas. Para mantener esto consistente podemos copiar esta sección completa de componentes, luego hacer uso de esto sobre en nuestra App.vue. Pega esto en. Esto también tendrá que ser registrado e importado. Hagámoslo ahora. Importa nuestro total de ventas, barra de puntos, y esto está en los Componentes. Después agarramos nuestro total de ventas. Entonces, por último, registre este componente. Digamos que hay alguien más aquí dentro de su página de pedidos, ahora tendrá el componente mostrando. Podemos ver el ícono pero aún no hemos transmitido nuestro contenido dinámico, que es el valor total de ventas. Hagámoslo ahora, si volvemos a nuestras plantillas dentro de la app.vue. Antes cuando creamos la página Visión general, pasamos este valor total de ventas como un prop. Esto sólo fueron algunos datos fictijos, pero ahora vamos a agarrar nuestros datos reales, que se proporcionan con este proyecto. Para agarrar esto dentro de la barra lateral, echa un vistazo al archivo Orders.js. Ahora podemos importar esto, y recorrer todos nuestros pedidos para extraer todos los datos que necesitamos que se transmitan a estos componentes. Hacer uso de esto, necesitamos primero importar este archivo, para que podamos usar esto dentro de nuestro JavaScript. Podemos importar nuestros pedidos desde nuestro archivo de Pedidos. Se trata de una importación con nombre dentro de estas llaves. Esto nos permitirá importar un solo miembro de nuestro archivo Pedidos. Un solo miembro que queremos importar es esta variable de órdenes. Podemos importar esto porque hemos exportado esto como una constante. Si el archivo Orders sí tuviera otras exportaciones también podríamos importarlas individualmente dentro de aquí a, pero sólo tenemos estos pedidos únicos. Entonces lo que tenemos que hacer es desplazarnos hacia abajo y crear nuestra sección de datos, para que podamos hacer uso de esto en vista JS. Colocar en los pedidos que acabamos de importar. Ahora, tenemos acceso a esto dentro de nuestra plantilla. Para dar salida a estos correctamente dentro de nuestra plantilla, primero necesitamos hacer dos bucles. El primer bucle va a recorrer cada una de nuestras órdenes y luego para cada orden necesitamos recorrer todos los elementos dentro de esta orden. Hagámoslo ahora, más en la app.vue, desplácese hacia arriba. Dentro de esta sección de pedidos, ten cuidado con esta segunda plantilla por defecto. Es aquí dentro donde vamos a crear estos dos bucles. En primer lugar, una envoltura div que tendrá la clase de orden, subrayado, envoltura. A continuación, dentro de esta envoltura, un segundo div el cual va a rodear cada una de nuestras órdenes. Para recorrer estos pedidos, recorreremos toda la propiedad de datos de órdenes. Para ello también se necesitará una clave dinámica que podamos agarrar del id único, que está disponible para cada uno de estos pedidos. Podemos acceder a esto con order.id Ahora, para estructurar estos, vamos a agregar algo de texto en la parte superior, y esto va a mostrar el número de orden. Sabemos que ya tenemos acceso a este número de pedido con order.id Podemos colocar esto dentro de las llaves dobles, luego soplar cada uno de estos números de orden. Crea una lista desordenada, que vamos a mirar a través de cada uno de nuestros artículos vendidos. El envoltorio. Después usaremos el elemento de lista para crear un bucle v-for para cada uno de nuestros artículos. Podemos iniciar cada uno de estos en la variable que es item, en order.items. Encontrar una clave dinámica. Ahora, tenemos que tener cuidado con la clave para cada uno de estos. Si echamos un vistazo a cada uno de nuestros pedidos, recuerda que la matriz de artículos contiene el mismo producto en cualquiera de los pedidos. Por lo tanto, podríamos hacer uso de identificaciones duplicadas. Ahora bien, si estamos usando una base de datos, podríamos generar un id único Pero para fines de demostración, ya que no estamos usando una base de datos, y no tenemos acceso a un id único Lo que voy a hacer es también para acceder al número de índice y combinarlo con el ítem. Justo después del artículo, agarra el índice. Coloca esto como la clave. Si este fuera un sitio de producción real, esto es probablemente algo a evitar. Realmente debes intentar generar un id único para cada uno de estos productos. Para fines de demostración, esto estará bien. En el interior aquí se creará un elemento P el cual va a dar salida al item.name. Entonces también podemos dar salida al precio del artículo, justo después con item.price. Dale una actualización a esto, ahora verás una lista de todos nuestros pedidos, y estos ahora están formateados como una lista desordenada. Terminamos esto más a nuestro archivo Orders.vue, donde podemos añadir un poco de CSS. En primer lugar, la lista desordenada [inaudible] balas con estilo de lista, permite establecer esto como non. El tipo-fuente de cursiva. Entonces el envoltorio para cada uno de nuestros pedidos, que duro en la clase de orden. Estoy relleno para darle a esto un poco de espaciado de 10 píxeles. Además, para darle a esto algo de espaciado en la parte superior e inferior podemos agregar algún margen de 10 píxeles en la parte superior e inferior, y luego cero en la izquierda y la derecha. Un boarder para cada uno de nuestros pedidos de un píxel. Una línea sólida. Voy a ir por un valor gris de DDD, borde radio de cinco píxeles. Guarda esto y refresca el navegador. Ahora, tenemos ahora todos nuestros pedidos en su lugar. 68. Página de los más vendidos: A continuación tenemos nuestra página de best sellers, en la que vamos a trabajar, y esto está dentro de la carpeta views. Actualmente sólo tenemos este encabezado de nivel 3, pero lo que vamos a hacer ahora es crear una tabla con todos nuestros datos, que vamos a obtener de nuestro archivo orders.js. Para conseguir esto, vamos a crear dos bucles. El primer bucle va a recorrer toda nuestra matriz de órdenes, y esto nos dará cada una de estas órdenes. Entonces nuestro segundo bucle interior luego recorrerá todos estos elementos, y luego vamos a agarrar cada uno de estos elementos y empujar a una nueva matriz. Así será nuestra nueva matriz, extraeremos todos los productos de nuestros pedidos y luego los empujaremos a esta nueva matriz. Además del ID, el nombre, y el precio, también agregaremos en un campo de cantidad también. Esto nos evitará tener muchos productos duplicados. En cambio, cuando nos topemos con un producto dentro de nuestro bucle, que ya está dentro de esta matriz, incrementaremos el campo de cantidad en uno. Este es el primer paso, y el segundo paso después de hacer esto es entonces reordenar esta matriz con la cantidad de mayor a menor. Pasemos a la app.vue y crearemos esto como una propiedad computada justo debajo de los datos, configuraremos esto, y el nombre computado de SortEditems. El primer paso es crear nuestra nueva matriz llamada SortEditems, e inicialmente estableceremos esto para que sea una matriz vacía. El siguiente paso es crear nuestro primer bucle, que va a recorrer todos nuestros pedidos. Tenemos esto almacenado arriba en las propiedades del estado, por lo que podemos acceder a esto.orders, y luego mapear a través de todas estas órdenes, elevando una función de devolución de llamada. Cada artículo en estos pedidos, vamos a almacenar esto dentro de la variable llamada orden. Como acabamos de mencionar, agarraremos nuestro pedido y luego crearemos un segundo bucle en el interior, que va a recorrer todos los elementos. Mapearemos sobre estos, y luego ejecutaremos una función en cada uno de estos elementos. Además, antes de ir más allá, recuerda que las propiedades computadas siempre necesitarán devolver un valor. Entonces vamos a devolver nuestra nueva matriz, que es artículos ordenados. Asegúrate de que esto esté fuera de nuestros bucles. Vamos a devolver este valor. Backup dentro de este bucle es donde vamos a empujar cada uno de estos ítems a esta nueva matriz, pero justo antes de hacer esto, primero necesitamos comprobar si este ítem ya está dentro de esta matriz para evitar cualquier duplicados, y la forma de hacerlo es acceder a nuestra nueva matriz, que es artículos ordenados. Podemos llamar al método de búsqueda de JavaScript. Esto ejecutará una función para cada elemento dentro de nuestra matriz, almacenando cada elemento dentro de esta variable, que voy a llamar artículo ordenado. Esta función será responsable de comprobar si el item.id ordenado es igual al id del ítem de este bucle actual. Si el id del elemento actual que poseemos coincide con alguno de los ID que están dentro de esta matriz, esto devolverá el elemento actual. Entonces almacenaremos esto dentro de una constante llamada elemento existe. Entonces podemos crear una declaración if justo debajo de ella para comprobar si el ítem existe es verdadero. Si es cierto, tenemos un ítem duplicado y todo lo que queremos hacer es acceder a este ítem, que es item existe, y luego seleccionar el campo quantity, incrementando esto en uno y luego podemos volver fuera de esta declaración. Si este artículo no existe, esto significa que es la primera vez que este nuevo elemento va a ser empujado a nuestra matriz. Entonces lo que vamos a hacer es crear un nuevo objeto llamado nuevo elemento. Esto va a ser igual a nuestro artículo que poseemos, y también vamos a sumar en el campo de cantidad también. La cantidad será un valor inicial de uno, y luego usando el operador de spread JavaScript, también pasaremos el valor del artículo también. Ahora tenemos este nuevo elemento y lo último que hacer es empujar esto a esta matriz. Justo después de nuestro objeto, agarra nuestra matriz de artículos ordenados y luego accede al método push de JavaScript, que empujará nuestro nuevo elemento. Vamos a probar esto. Podemos acceder a nuestra propiedad computada de artículos ordenados dentro de las llaves dobles, así que justo en cualquier lugar de nuestra plantilla. Ahí vamos. Ahora en lugar de tener cada uno de nuestros productos listados individualmente, ahora hemos incrementado la cantidad. Uno, tenemos artículos cúbicos. Tenemos camisetas gratis, tenemos dos de nuestras pequeñas camisas personalizadas, tenemos, cuatro, las sudaderas, y luego uno de los sombreros. Ahora esto está funcionando. El paso final es reorganizar los artículos dentro de esta matriz por la mayor cantidad vendida. Actualmente tenemos la cantidad libre. Entonces tenemos dos, tenemos cuatro, y luego tenemos uno, así que esto no está en orden. Podemos reorganizarlos justo antes de devolverlos desde nuestra sección computada. Justo encima de la declaración de retorno, accede a los elementos ordenados, y luego podemos usar el método de ordenación de JavaScript. El método de ordenación de JavaScript recorrerá todos nuestros elementos ordenados y luego ejecutará una función de comparación. Esta función de comparación tomará dos variables con el nombre de nuestra elección. Sólo voy a llamar a esto A y B para que sea sencillo, y estos son los dos rubros actuales que se están comparando. Pero voy a comprobar si la propiedad quantity en el ítem A es mayor que la cantidad en el ítem B. Usando el operador ternario, entonces estableceremos la posición del índice, si esto es cierto, para que sea negativa, si esto es falso, entonces será positivo. Recuerde, cuando se trata de matrices, un número de índice más bajo aparecerá primero en nuestra matriz, por lo que establecer esto como negativo empujará esto más alto en la matriz. Podemos ver de inmediato en el navegador que la cantidad de cuatro se coloca primero, tenemos la cantidad de tres, y finalmente, nuestro sombrero vue que es la cantidad de uno. Ahora tenemos todos los datos que necesitamos, ahora podemos importar la página bestsellers dentro de esta app.vue. También registraremos esto y lo mostraremos dentro de la plantilla. Vamos a duplicar esto, y éste es para nuestros bestsellers. Añada esto a nuestros componentes, pero comentaré nuestros componentes de auditoría y también la sección más antigua de nuestra plantilla. Agarra esto todo el camino hasta la etiqueta de cierre, comenta esto, y ahora podemos colocar dentro de nuestra plantilla nuestros bestsellers. Esto es solo por nuestra simplicidad, por lo que podemos enfocarnos en un componente a la vez. Vemos un error dentro de aquí que no se está utilizando el componente total de ventas, por lo que también podemos comentar esto. También el registro, incluso esto con nuestra página de bestsellers. [ inaudible] top, vamos a quitar esta sección computada, luego configurar nuestra mesa dentro de los bestsellers. Colocando esto dentro de la etiqueta de apertura y cierre, por lo que esto se pasará como contenido de ranura. En primer lugar, vamos a configurar nuestra sección de tabla exterior, el encabezado de tabla para nuestros títulos, y luego nuestra primera fila de tabla. Dentro de esta fila, colocaremos en nuestra primera pieza de datos dentro del encabezado de la tabla, y esto es por la cantidad vendida. El siguiente encabezamiento de tabla es para el nombre del producto, el tercero para el ID del producto, luego finalmente el precio del producto. Después de la sección de cabecera tenemos el cuerpo de la mesa, y es dentro de esta sección de cuerpo de la tabla proporcionaremos todos los datos de nuestra sección computada. Para ello, crearemos una nueva fila de tabla, y necesitamos repetir esto para cada elemento dentro de esta sección calculada. [ inaudible] For Loop. Podemos agregar en nuestro artículo en artículos ordenados. Por lo que podríamos acceder al artículo completo como éste o también podríamos usar la estructura y sacar el id, la cantidad, el nombre, y también el precio. También necesitamos enlazar en una clave dinámica, y la clave dinámica para esto puede ser el ID del producto. Estas cuatro variables ahora pueden ser emitidas como datos de tabla. Dentro de la fila, los datos de la tabla para la primera son para la cantidad, y tendremos el nombre, el ID, y luego el precio. Estos son todos los datos de ranura que ahora necesitamos pasar, así que pasa a nuestra página de bestsellers en las vistas, y vamos a dar salida a esto como una ranura. Ahí estamos. Hay un encabezado de tabla de palabras y también nuestros datos de tabla, y ahora estos ítems ahora se listan de la cantidad más alta a la más baja. Tan solo para terminar esta página, dirígete a nuestro componente bestsellers donde podemos configurar algunos estilos básicos para esta tabla. En primer lugar, el envoltorio de tabla, el borde de un píxel, una línea sólida, y el color de DDD. Alinear el texto con el centro alineado de texto. El radio de borde de cinco píxeles. Entonces también le daremos a esto algo de espacio con algunos valores de relleno dentro de los encabezados de la tabla y también los datos de la tabla también. Esto ahora espacia todos nuestros datos dentro de nuestra mesa. Esta es ahora nuestra página de bestsellers completada. En el siguiente video, echaremos un vistazo a cómo podemos cambiar entre estas tres páginas mediante el uso de componentes dinámicos. 69. Componentes dinámicos: Al trabajar en nuestras tres páginas hasta ahora, hemos estado comentando cada una de estas y luego agregando una nueva en la que trabajar. Las aplicaciones grandes a menudo cambiarán entre páginas usando un router. Haré esto por nuestro proyecto final de trabajo. Para este sencillo caso, vamos a configurar unos componentes dinámicos para manejar esto, abrir el Vue. Vamos a comentar nuestro componente final, que es el bestsellers, luego remplazar esto por los elementos componentes. Para declarar qué página o qué componentes vamos a mostrar en esta ubicación de componentes, entonces podemos enlazar la propiedad is y establecer esto igual a una propiedad de fecha llamada SelectedPage. Simplemente lo voy a llamar cualquier cosa que quieras siempre y cuando coincida con una propiedad de fecha que vamos a crear ahora. Al final, inicialmente podemos establecer esto en nuestra primera página, que es la visión general. La página seleccionada se va a actualizar cuando hacemos clic en cualquiera de los enlaces de la barra lateral. Algo a saber al usar los componentes dinámicos es que Vue no sabe qué componente vamos a estar usando, por lo que no arrojará un error si tenemos alguna importación, que no estamos usando. Como podemos ver aquí, todavía tenemos la importación, los bestsellers. Actualmente no estamos usando esto en la plantilla. Para que todos estos componentes estén disponibles, vamos a descomentar el panorama general, los pedidos, y también el total de ventas, y lo mismo cuando registramos nuestros componentes también. Ya que hemos establecido el SelectedPage, el resumen, ahora vemos esto dentro del navegador. Ahora, actualiza esta página podemos listar ahora por un clic en cualquiera de estos enlaces de barra lateral, hasta la sección de barra lateral y dentro de nuestro enlace, lista ahora para un click en cualquiera de estas tres páginas, vamos a establecer la página seleccionada para que sea igual a la página que se almacena dentro de esta variable justo aquí. Podemos tener el mismo lado de las garrapatas traseras que una cadena de plantilla. Vamos a dar esto ir en el navegador. Refrescar. Como pueden ver, la visión general está funcionando bien, pero aún no tenemos ninguno de los datos transmitidos. las órdenes, de nuevo, sólo vemos el título porque todavía no hemos pasado ningún dato dinámico. El bestsellers, no vemos nada cuando hacemos click en esta página. Entremos a las herramientas de desarrollador y veamos qué está pasando. En la consola, dice que el nombre de la etiqueta proporcionado de los bestsellers no es un nombre válido. Recuerda, estamos tratando de cargar cualquiera de nuestros componentes en base a este nombre de página. Intenta hacer una pausa y tómate un momento para pensar en lo que podría estar causando este error. Si aún no lo has averiguado, la respuesta es el espacio entre estas dos palabras. Estamos tratando de enlazar a una página, que es la mejor, y un espacio, y luego vendedores. Pero si echamos un vistazo al nombre de nuestra página, esto no tiene espacio en el medio. El arreglo es, necesitamos eliminar cualquier espacio en blanco al llamar a estos componentes. Podemos establecer esto será dentro de nuestros componentes dinámicos. Una forma de hacer esto es mediante el uso de un método de reemplazo de cadena JavaScript. Esto tomará nuestra cadena de existencia la cual es SelectedPage. Después podemos modificarlo para eliminar cualquier espacio en blanco y luego devolver uno nuevo. Llame al método de reemplazo. Entonces podemos colocar en una expresión regular de JavaScript entre estas dos barra inclinada hacia adelante. Cuando las expresiones regulares, la forma en que podemos hacer coincidir cualquier espacio en blanco es mediante el uso de la barra inclinada contraria y la S, separadas por una coma, entonces reemplazaremos este espacio en blanco por una cadena vacía que no contiene espacio en absoluto. Guardemos esto y probemos esto. El resumen, los pedidos, y cuando también está apareciendo la página de bestsellers también. Genial. Ahora podemos cambiar de página, pero falta mucho del contenido. Esto se debe a que no hemos pasado ningún utilería o contenido de ranura a estas tres páginas. Los componentes dinámicos también pueden aceptar tanto los apoyos como el contenido de ranura si quisiéramos. Pero recuerda, cada componente tiene datos diferentes. Para los apoyos, necesitaríamos pasar todos los apoyos que podamos necesitar dentro de este solo componente. Además, si se pasa un contenido de ranura, también es difícil ya que cada componente tiene datos diferentes. Si bien en el siguiente apartado, vamos a resolver estos problemas mediante el uso de una técnica llamada proporcionar e inyectar. 70. Introducción de la sección: proporcionar e inyectar: Mientras trabajamos con Vue.js y pasamos los datos, necesitamos pasar los apoyos hacia abajo a cada componente. Si tenemos un componente hijo que es tal vez dos o más niveles de profundidad, necesitamos pasar todos los apoyos de nuestro padre y luego bajar a cada uno de los componentes centrales en el camino. Esto es realmente útil para mantener el control de nuestros datos, pero no siempre es ideal. Este Vue.js nos tiene cubierto con una técnica llamada proporcionar e inyectar, y vamos a echar un vistazo a esto durante este apartado. 71. ¿Qué es proporcionar e inyectar?: Al trabajar en un mundo ideal, nuestros datos o nuestro estado no tendrán que viajar muy lejos, como tiene esta aplicación aquí la cual se comunica con los componentes cal. Esto es bastante sencillo. Tenemos muchas opciones que hemos mirado en el pasado, como pasar datos como apoyos y emitirlos de nuevo con eventos personalizados. También la opción de usar las ranuras también, incluso esta aplicación bastante simple está empezando a anidar componentes más profundos que un nivel. Esta vista aplicación JS cambia entre tres páginas y nuestra página de visión general ha anidado dentro de nuestros componentes hijo libres. Si nuestros datos estuvieran en la app.vue principal, podríamos usar utilería para pasarlo a todas nuestras páginas. Entonces también podríamos seguir pasando por los apoyos de los componentes anidados dentro, y esta cadena puede seguir yendo por tantos niveles profundos como necesitemos. Esto sí, sin embargo, causa mucho código extra. Tendremos que registrarlos como cada componente, validar estos apoyos y luego pasarlos al siguiente hijo como atributo. Para pasarlos de nuevo, utilizamos eventos personalizados. Nuevamente, esto es realmente bueno para aplicaciones simples, pero para muchos niveles profundos, puede convertirse en un dolor. Sería mucho más conveniente si pudiéramos pasar por alto todo esto y proporcionar los datos directamente en cualquier componente hijo. Vue sí tiene una biblioteca de gestión estatal disponible como un módulo separado llamado Vuex, que es realmente bueno y también mantenido por el equipo core vue.js. Esto proporciona un data store central, pero también viene a un costo de necesitar instalar y configurar un nuevo paquete. Es razonablemente fácil de aprender y también de usar, pero es algo extra que no necesitamos del todo en esta etapa. También, probablemente mejor utilizado en aplicaciones de mayor escala. Alternativamente, Vue también tiene una función incorporada llamada proporcionar e inyectar. El concepto es, tenemos un proveedor el cual se utiliza para proporcionar datos al resto de nuestra aplicación y esto se coloca en cualquier componente padre. Entonces cualquier componente hijo inferior a cualquier nivel se puede inyectar con estos datos. No sólo esto, sino un poco como cuando emitíamos eventos personalizados volver a subir la cadena. También podemos cambiar el estado en el padre activando métodos. Esto es proporcionar e inyectar, que ahora vamos a echar un vistazo durante este apartado. 72. Configurar un proveedor: Ahora echemos un vistazo a cómo podemos configurar un proveedor. En este archivo App.vue, tenemos este componente dinámico que recientemente configuramos, y esto va a ser responsable de renderizar una de nuestras páginas gratuitas, y cada una de estas páginas requiere datos diferentes. En lugar de pasar por abajo todos los apoyos para cubrir todas estas situaciones, en su lugar podemos usar proveer e inyectar, colocar los datos correctos directamente en nuestros componentes del gráfico. En primer lugar, empecemos con nuestra página de resumen, que es nuestra de arriba, justo aquí. En el interior aquí, esto está renderizando nuestros componentes gratuitos, tenemos los artículos vendidos, el total de ventas, y el bestseller. Recuerda esto es usar slots y estamos usando estos datos los cuales se transmiten como utilería, así que en su lugar, lo que vamos a hacer es mover estos datos directamente a los componentes y luego accederemos a los datos que necesitamos usando proveer e inyectar . Empecemos con este artículo vendido. Agarramos el contenido de slot de entre la plantilla, así como vamos por el ícono, y luego en los artículos vendidos componentes, podemos reemplazar nuestra ranura, donde esto es salida. En la visión general, tenemos la segunda pieza de contenido de ranura, que es por defecto, luego reemplazar nuestra segunda ranura. Ahora podemos limpiar este componente artículos vendidos, y tenemos nuestras plantillas y luego podemos hacer lo mismo por el total de ventas, sin el ícono, coloca en la ranura de iconos, y luego lo mismo para nuestro valor total de ventas, pega esto en nuestra ranura predeterminada y de los componentes, y exactamente igual para nuestro tercer componente también, el icono para el bestseller [inaudible] y también el contenido también. Entonces limpia nuestro componente bestseller. Ahora, esto nos deja con nuestros componentes de gráfico libre con datos dinámicos, que ahora necesitamos pasar. Esto podemos agregar un proveedor a cualquiera de los componentes paren y todavía no va a pasar al archivo App.vue, y luego a la sección de script. La opción proporcionar es bastante directa. Todo lo que necesitamos hacer es proporcionar un objeto. Este es otro lugar donde podemos proporcionar cualquier dato que desee estar disponible en cualquiera de los componentes del gráfico. Ya sabemos qué datos necesitamos. Necesitamos la cantidad de artículos vendidos, necesitamos el valor total de ventas, y también el bestseller también. Vamos a armar estos. En primer lugar, la cantidad de artículos vendidos. Podemos colocar en cualquier valor dentro de aquí por ahora y muy pronto obtendremos este valor usando nuestro archivo de pedidos. A continuación, necesitamos valor total de ventas. Esto va a ser cualquier valor otra vez, y el tercero para el bestseller, que es una cuerda, quiere ir por la sudadera Vue en medio, y este es nuestro dato proporcionado. A continuación veremos cómo podemos acceder a estos datos en nuestros componentes de gráficos. 73. Inyectar datos: Dentro de nuestro archivo app.vue, ahora tenemos este objeto proporcionar el cual proporcionará todos los datos dentro de cualquiera de los componentes hijo. Estos datos no se heredan automáticamente en los componentes hijo. En cambio, lo que necesitamos hacer es entrar en cualquier componente, donde queremos usarlo y agregar una matriz de inyectores con las propiedades que queremos aceptar. Empecemos en los artículos vendidos, donde necesitamos esta cantidad de artículos vendidos valor. Podemos empezar a tener un guión, igual que cuando aceptamos cualquier utilería. Dentro de aquí, vamos a configurar una matriz llamada inyectar. Entonces podemos pasar en el valor que necesitamos, que es cantidad de artículos vendidos. Si guardamos esto, ahora vemos que el valor se ha actualizado dentro del navegador. Esto funciona porque ambos nombres coincidirán. Agarremos la sección de guiones, y vamos a colocar esto también en el total de ventas. Esto también necesita el valor total de ventas que se pasa a la baja. Guarde esto, y esto aparecerá ahora. Entonces finalmente, el bestseller. Ahí vamos. Pero como ya sabemos, todo esto es sólo actualmente datos estáticos, pero debe ser dinámico y basado en nuestro archivo orders.js. Para hacer esto de vuelta en nuestra app.vue, ahora vamos a establecer estos dos primeros valores para que sean dinámicos configurando una propiedad computada. En primer lugar, vamos por la cantidad de artículos vendidos. Están justo debajo de nuestros artículos ordenados, separados por coma, vamos a configurar esto. Ahora esto nos deja con un par de opciones. Podríamos ir directamente a nuestro archivo orders.js. Al igual que lo hemos hecho anteriormente, podemos recorrer todos los pedidos y luego todos los artículos del pedido, o alternativamente justo por encima de esto, ya tenemos nuestros artículos ordenados, que es una matriz de todos los artículos que hemos vendido. En cambio podemos usar esto, pero primero crearemos una nueva variable llamada cantidad, y configuraremos esto para que sea un valor inicial de cero. Después para obtener esto, podemos agarrar nuestra propiedad computada la cual se ordenaron los elementos, bucle sobre esto. A continuación, crea una función para cada elemento. Estamos recorriendo todos esos artículos vendidos y tenemos este objeto, igual que vemos aquí. Recuerda que cada uno de estos objetos tiene un campo de cantidad. Lo que ahora necesitamos hacer es actualizar nuestra cantidad con el campo de cantidad de este artículo. Entonces agarra nuestra variable, y luego podemos agregar usando el operador +=, el item.quantity. Este operador renovará automáticamente la cantidad de artículo al valor existente en lugar de reemplazarlo. Entonces devuelve nuestra cantidad a partir de este valor computado. Ahora podemos usar este nombre abiertamente proporcionar objetos y reemplazar el valor codificado de 54 por el valor de esta cantidad de puntos de artículos vendidos. A continuación, el valor total de las ventas. Simplemente [inaudible] agregaré una coma, y configuraré nuestra segunda propiedad computada. Al igual que ambos crearán una nueva variable, esta vez llamada total, y establecerán esto en un valor inicial de cero. Nuevamente, para este, tenemos un par de opciones. Podríamos volver a vivir a través de nuestros artículos ordenados. Podríamos hacer algo como multiplicar la cantidad por el precio del artículo, o podríamos ir directamente a nuestra matriz de pedidos. Después recorre nuestros pedidos, recorre los artículos, y luego sumar todos los precios. Esto es lo que voy a hacer, que es bucle a través de todas nuestras órdenes. Hacemos esto.orders.map. Agarramos cada orden individual, y luego recorreremos la propiedad items. Selecciona cada elemento. Después, para cada artículo en uno de nuestros pedidos individuales, entonces agarraremos el campo de precio, y actualizaremos nuestro total, y luego devolveremos este valor total. Ahora, vuelve a nuestro proveedor, mueve esto. Podemos establecer este valor para que sea esto.totalsalesvalue. Dale a esto un guardado y apagado al navegador. Ahora no vemos datos dentro de aquí. Entrémonos al inspector y veamos qué pasa en la consola. Nos llegó un error diciendo que no podemos leer la propiedad de cantidad de artículos vendidos. Ahora, la razón por la que estamos viendo este error es porque al hacer referencia cualquier propiedad de datos o datos dinámicos en este proporcionan objeto, necesitamos en cambio devolver esto como una función. Esta función está configurada al igual que la propiedad de datos anterior. Esto va a devolver todos nuestros valores los cuales incluyen datos dinámicos. Esto estaba completamente bien antes porque todo lo que estábamos emitiendo eran datos estáticos como la cadena y también nuestros números. Si convertimos esto en una función, al igual que los datos, vamos a agarrar nuestros tres valores y luego devolverlos de vuelta de todas las funciones al navegador. Ahora vemos los artículos vendidos, pero nos falta el total de ventas. Echemos un vistazo. Contamos con esto.totalsalesvalor de la cantidad de artículos vendidos. Creo que tal vez solo necesitamos colocar esto en la sección computada, así que cortamos esto. Si echamos un vistazo a la tornapunta de cierre para lo computado, solo necesitamos colocar esto dentro de la sección derecha, separada por una coma, y ahí vamos. Por último, tenemos este artículo más vendido el cual actualmente se pasa como una cadena. Ahora, vamos a arreglar esto accediendo nuevamente a los artículos ordenados, que es una matriz de nuestros artículos más vendidos. Recuerda que esta es la cantidad más alta que se vende primero. Todo lo que necesitamos hacer para esto es acceder al primer elemento dentro de nuestra matriz. Voy a cortar la cuerda. Podemos acceder a esto.sorteditems. Después accede a esta primera que es la mayor cantidad de venta. Esto devolverá nuestro objeto completo para este artículo. Ahora podemos reducir esto en los componentes más vendidos, y acceder directamente a la propiedad de nombre. Ahora, nuestros valores inyectados libres ahora están en los componentes correctos. 74. Mini desafío: actualizar páginas de pedidos y de los más vendidos para usar Proporcionar/inyectar: Ahora hemos convertido nuestra página de visión general para usar proveer e inyectar. Lo que me gustaría que hicieras ahora como reto es seguir adelante y hacer lo mismo por los pedidos y las páginas más vendidas. Ahora en la app.vue, todavía hemos comentado nuestra sección de bestseller y desplazándonos hacia arriba también tenemos esta sección de pedidos aquí también. Ya hemos hecho la visión general para que podamos ignorar esto. Lo que me gustaría que hicieras es mover todo el contenido de la ranura, que tenemos para cada página, a los componentes individuales, igual que hicimos con la visión general donde extraemos todos los contenidos en el componentes individuales. A continuación, llene cualquier sección que tenga datos dinámicos como esta ruta, configurada por proporcionar dentro de esta app.vue y luego inyecte los datos en los componentes requeridos de edades. Nos van a dar una vuelta y a continuación voy a caminar por cómo lo hice. 75. Actualizar las páginas de pedidos y de los más vendidos para utilizar proporcionar e inyectar: Voy a dar inicio a esto con la página Pedidos. Si nos desplazamos hasta la sección comentada en la App.vue, empecemos con esta sección de pedidos. Voy a descomentar esto, así que queda un poco más claro lo que estamos haciendo. Dentro de aquí, la primera sección o la primera ranura que tenemos es esta sección total. Esto contiene el componente total de ventas. Lo que tenemos que hacer es recortar esto, y luego ir a la página de Pedidos, y colocar esto en lugar de nuestra franja total. El pedidos.vue, esta es la ranura con el nombre de Total. Pegar en nuestros componentes. Ahora, estamos haciendo uso de un componente. Lo que tenemos que hacer es también importar esto a este archivo. Vamos a crear una sección de guión. Sólo voy a volar esto. Crea nuestra sección de scripts y justo por encima del valor predeterminado de exportación, vamos a importar este solo componente el cual fue total de ventas. La ruta del archivo es.. /componentes, y luego en el total de ventas. Configura nuestro tema componente. Pasando en este total de ventas. A continuación, pasando a la App.vue, todavía tenemos esta sección por defecto. Si destaco esto, ahora podríamos agarrar todo el div, que está anidado dentro con la clase de envoltura de pedidos. Apaga esto, voy a ir a limpiar este pedidos componentes y luego pegar esto en nuestra ranura. A partir de aquí consideramos esta sección que necesita acceso a todos los pedidos por lo que ahora podemos pasar esto abajo usando que proporciona e inyectar. En primer lugar, nuestro proveedor, que se encuentra en la App.vue, configuró las órdenes, que es igual a estas dos órdenes que vive en nuestra propiedad de datos. Pasado a las ordenes.vue, ahora podemos inyectar esto en nuestro guión. Se trata de una matriz con el valor único de las órdenes. Esto ahora vuelve a colocar nuestros pedidos en esta sección. Todavía veremos esto porque tenemos más en App.vue, seguimos poniendo en estos pedidos componentes. Voy a comentar esto hacia fuera y dar clic en el enlace Pedidos. Todo está funcionando bien. Al lado de nuestra página de bestsellers , de nuevo, descomentemos esto para que quede más claro. Este es un poco más sencillo. Sólo tenemos esta mesa. Codificar esto fuera. Pasado a la página Bestsellers.vue, y podemos reemplazar el contenido de la ranura por nuestra tabla, esto también necesita acceso a nuestra propiedad de la computadora la cual está ordenados artículos. Pasemos esto abajo en nuestro proveedor. Elementos ordenados, que va a ser igual a esto consiguió artículos ordenados, que es una propiedad de computadora sobre nuestro componente, que es bestsellers Configurar un script. Todo lo que necesitamos hacer para esto es configurar nuestra matriz de inyectores, que va a aceptar los artículos salados. Ahí está nuestra mesa y podemos limpiar nuestra app.vue quitando cualquiera de los componentes antiguos, dejando esta sección dinámica. No necesitamos los bestsellers, no necesitamos los pedidos, y tampoco necesitamos la sección de resumen. Fue una prueba, tenemos la visión general de los pedidos y también los más vendidos también. 76. Actualizar el proveedor a partir de un componente hijo: Junto con el uso proporcionar e inyectar para transmitir datos, posible que también necesitemos una forma de cambiar de estado en un componente padre desde dentro de un niño. Sabemos de cómo hacer esto emitiendo un eventos personalizados. Pero al usar provee e inyectar, la forma de abordar esto es tener un método en el mismo archivo que el proveedor, y luego pasamos a los componentes hijo, una referencia a este método que luego se puede activar. Esencialmente estamos creando un método en componentes de un padre y luego llamándolo desde un niño que ve una acción. Vamos a figurar el cambio de nuestras páginas de componentes de RHH dentro de la app.view. Limpiemos esta sección de barra lateral y eliminemos todos los contenidos de la ranura. Esto eliminará entonces nuestro enlace y ahora podemos volver a colocar esto en nuestro archivo sidebar.vue en lugar de nuestras ranuras, ya que ahora no estamos recibiendo ningún dato de ranura, podemos reemplazar esto por un enlace. Este enlace simplemente dará salida a la página desde nuestro bucle, y ahora necesitamos configurar un método en la app.view el cual se activa cuando hacemos clic en cualquiera de estos enlaces. Abajo a nuestros scripts configurará la sección de métodos, y este método se va a llamar ChangePage. Esto también tendrá que tomar en la página a la que desea cambiar, y entonces todo lo que vamos a hacer es cambiar la propiedad dates de SelectedPage para que sea igual a este valor. Ahora podemos pasar una referencia a este método dentro de nuestro proveedor. Voy a mantener estos consistentes y también llamar a este ChangePage, que es igual a nuestro método del mismo nombre. Queremos alternar esta página de cambio hacia abajo dentro de la barra lateral, y al igual que pasaríamos por abajo cualquier dato o estado, también podemos agregar esto a una matriz inyectada. Ahora esta página tiene acceso a todo el método ChangePage. Ahora vamos a utilizar nuestro enlace dentro de la plantilla para escuchar un clic y activar este método, así que esto ahora por un clic, ese ahora es un nombre de método de ChangePage. Recuerda, esto también necesita tomar en la página a la que quieres navegar, y tendremos acceso a esto con esta variable de página. Vamos a probar esto en el navegador, tener la visión general, las órdenes, y también los best-sellers que ahora se ha disparado desde este componente child. Terminas podemos cambiar el cursor para que sea un puntero y pasamos el cursor sobre cualquiera de estos enlaces. Ya está configurado un estilo li y todo lo que necesito hacer es agregar en el cursor para ser un puntero. Ahora todo esto funciona muy bien, pero hay algo que tener en cuenta, que es por defecto proporciona e inyectar no es reactivo. Esto significa que si alguno de todos los valores proporcionados cambia, los componentes hijo no se actualizarán. Hay un par de formas en las que podemos ver esto si lo hacemos en la reactividad, y nuestra aplicación tiene una estructura de componentes que no es demasiado profunda. Podríamos usar utilería y emitir. También podríamos usar provee e inyectar, establecer los valores iniciales para los componentes hijos una vez que la carga, o alternativamente, si realmente quisiéramos usar provee e inyectar, pero la reactividad era importante. Hay una forma de hacerlo cuando combinamos esto con la API de composición libre de vista, y esto es algo que vamos a descubrir pronto. 77. Introducción a la sección: introducción al enrutado: Al construir nuestras aplicaciones, a menudo tenemos el caso de uso para cambiar entre varias páginas. Para este Vue también nos tiene cubiertos proporcionando un paquete de router. Si tu router es creado y mantenido activamente por el equipo de Vue.js core para que podamos estar seguros de que va a ser compatible con tu versión de Vue, y también con cualquier actualización, también. Al lado, si estás cambiando entre nuestras páginas, el paquete relativo también tiene muchas otras grandes características, que descubriremos en esta próxima sección. 78. Lo que vamos a construir y el proyecto de inicio: Bienvenido de nuevo a esta nueva sección. Para las próximas secciones, también vamos a tener un nuevo proyecto llamado Tarjetas Creativas. Esta va a ser una aplicación de edición de tarjetas y podemos ver desde la pantalla de inicio aquí tenemos la sección de encabezados, tenemos algunos enlaces a categorías populares. Después tenemos todas nuestras categorías disponibles listadas a continuación. Todo esto se genera dinámicamente a partir de los datos que tenemos en nuestra aplicación. Podemos hacer click en cualquiera de estas categorías y ver todas las tarjetas disponibles, que coinciden con esta categoría actual. Si seleccionamos todo, vemos un enlace para todas las tarjetas disponibles, que ahora podemos seleccionar para editar. Si hacemos click en alguno de estos, entonces nos llevan a la vista de edición. Podemos seleccionar todas las páginas. Tenemos el frente, el interior izquierdo, dentro de la derecha, y también la espalda también. Desde cualquiera de estas vistas tenemos la intersección de a la derecha. Podemos seleccionar nuevas imágenes que desee utilizar para todos los fondos. Podemos intercambiar la posición de esta imagen. También podemos quitar la imagen si no queremos tener una para esta página en particular. También podemos editar este texto y cualquier cambio que realicemos se refleja en la vista previa sobre a la izquierda. y otra vez esto también tenemos algún acceso a todas las opciones. Podemos cambiar el tipo de fuente, podemos cambiar el estilo de fuente. Podemos cambiar el color y también hacerlo audaz, cursiva. Podemos aumentar el tamaño de la sección. También podemos establecer la alineación horizontal y vertical. Esto es exactamente lo mismo para cualquiera de nuestras páginas. Todos estos son totalmente editables. No estamos atascados con los valores predeterminados que se proporcionan en el primer clic en esta tarjeta. Esto también estará vinculado a una base de datos por lo que queremos ser felices. Después podemos dar click en el botón de Hacer Pedido y éste enviará este pedido a través de una base de datos. Junto con una base de datos, también exploraremos algunas nuevas características en las próximas secciones, como las funciones sin servidor, echaremos un vistazo al router vue, la API de composición vue, y mucho más. Al igual que con el resto del proyecto, si descargas el iniciador de la tarjeta creativa del repositorio de GitHub, si ya tienes la carpeta desde el inicio del curso, puedes entrar ahí y abrir el iniciador de la tarjeta creativa. Ya he navegado a esto dentro de la terminal y abrí esto dentro de código de estudio visual. Para empezar, tenemos un setter de CLI de vista bastante básico. Pero nos quedaremos pocas adiciones para este proyecto dentro del índice de punto HTML. He añadido un enlace a Google Fonts. El origen contiene directamente dentro de la carpeta de activos, algunos iconos y también algunas imágenes que vamos a utilizar como punto de partida. Tendremos una carpeta de enrutador y echaremos un vistazo a esto a continuación. Pero probablemente la parte más importante es este data dot js. Se trata de un array de diferentes tarjetas que vamos a utilizar como punto de partida para este proyecto. Estas son las secciones las cuales son todas totalmente editables. Cuando cambiamos estas secciones dentro de aquí, esta es una matriz que contiene objetos para cada una de nuestras cartas. Tengo el ID, el nombre, y también las categorías a las que pertenece esta tarjeta y estas son todas usadas para generar las categorías que se ven en la página de inicio justo aquí. Después de esto, un array de páginas, tenemos el frente, el interior izquierdo, el interior derecho, y también el reverso, una posición de imagen de fondo por defecto. Después saltamos a las secciones de tarjetas, estas son las secciones tecnológicas con todos los datos. Tenemos la altura, el color, y también la familia de fuentes, junto con todas las demás opciones que son todas editables desde nuestro menú. Lo único que tenemos que hacer ahora es dirigirnos a la terminal y ejecutar la instalación de NPM usando el comando NPM I. Esto instalará todos los paquetes de nodos que necesitamos para este proyecto. Y una vez hecho esto, pasaremos ahora al siguiente video donde instalaremos el router vue. 79. Configurar el enrutador de Vue: Si nunca has usado un router antes, es un paquete que podemos usar para básicamente cambiar entre nuestras páginas o vistas. Ya que estamos tratando con aplicaciones de una sola página, no tenemos la forma tradicional de cambiar de página solicitándolas a este servidor. En cambio, confiamos en un router que asignará una URL a uno de nuestros componentes. Esta es una forma mucho más flexible y avanzada de navegar por nuestras aplicaciones, la única forma que miramos en el proyecto anterior cuando configuramos un componente dinámico para este caso de uso. No solo se trata de cambiar de página sin embargo, hay muchas más características, también acabaremos de pasar a. También el paquete vue-router es oficialmente compatible y mantenido por el equipo de Core Vue.js. Por lo que está profundamente integrado, apoyado, y también se mantiene actualizado también. Hay un enlace CDN, pero como estamos usando la vista CLI, instalación es realmente simple. Para mantener nuestros paquetes en la misma versión, el proyecto de arranque que tenemos aquí, ya tiene instalado este router. Podemos ver esto más en el paquete.json en las dependencias. Tenemos el vue-router el cual es realmente sencillo de agregar, y si sí quieres agregar esto un proyecto diferente el cual estás creando por tu cuenta, yo u puedes pasar a la terminal. Recuerda, esto ya está instalado, así que no ejecutes este comando. Pero si estuvieras usando esto en un proyecto diferente, podrías instalar con el vue-router, con el comando de un router vue add. Esto agregará el vue-router como plug-in CLI, y también le dará la opción de configurar un modo de historial, que veremos más adelante. Para este proyecto en particular, aún no hemos configurado el modo de historial cuando incluimos nuevo router. Una vez que el comando vue add router haya terminado de ejecutarse, si vas al directorio fuente, esto agregará una nueva carpeta. El nuevo directorio es este router justo aquí, que contiene un archivo Index.js. Si echamos un vistazo a la parte superior, lo primero que haremos es importar los paquetes que necesitamos del vue-router, hablaremos de los modos de historial muy pronto, pero este es el paquete que necesitamos para crear un nuevo vue-router. Entonces debajo de esto, importamos cualquier componente entre el que quieras cambiar desde nuestro router. Aquí tenemos la importación de nuestros componentes Home, que se ha agregado con la Vue CLI. Se ha creado un directorio de vistas con el sobre, y también la página de inicio para empezar con el router. A continuación, tenemos un conjunto de rutas que queremos utilizar para nuestra aplicación. Cada uno de estos objetos contiene un camino. Tenemos el enlace home y también el link del about justo debajo. Cada uno de estos enlaces mapeará a un componente en particular. Este lo está vinculando a nuestros componentes del hogar. Si echamos un vistazo al componente sobre, éste es un poco diferente al que acaba de arriba. Este está usando la separación de código, y echaremos un vistazo a cómo hacerlo más adelante. Entonces creamos un objeto router el cual contiene cualquier configuración que necesitemos, como el historial que acabamos de mencionar antes. También pasamos en nuestro array de rutas también. Por último, exportamos nuestro archivo router, por lo que esto se puede utilizar en nuestra aplicación de al main.js. Después importamos este router exportado justo aquí, y luego agregamos esto a nuestra aplicación antes de que esto se monte al hecho. Es una acción que va a la terminal y pone en marcha nuestro servidor de desarrollo sería NPM ejecutar servir. Abre esto. Ahora tenemos dos enlaces en la parte superior de la página, sobre el hogar, que enlaza con/, luego también el sobre esta página también. 80. Enlace del enrutador y vista del enrutador: Ahora tenemos dos enlaces en la parte superior de la página. Tenemos el Inicio que enlaza a barra inclinada hacia adelante. Entonces también la página Acerca de Nosotros también. Esto es muy necesario dos rutas que hemos visto en el archivo del router justo aquí, y luego mapear a nuestros componentes. El Vue CLI se agrega automáticamente en estas fotos de dos rutas. Pero en general, tenemos que sumar estos en nuestras células. Además, estos enlaces que ven aquí, si pasamos a nuestra app.vue, la CLI ya ha agregado estos dos enlaces en fotos usando el enlace del router. El enlace del router es un componente que acepta los dos prop como un atributo. Es dentro de aquí donde pasamos en la ruta a la que queremos navegar. Podemos colocar estos enlaces de router en cualquier componente o en cualquier página que queramos. uso de este enlace del router también es preferible sobre el uso del HTML regular a elementos por diversas razones. Si echamos un vistazo a las salidas de cualquier herramienta de desarrollador de navegadores, haga clic con el botón derecho en “Inspeccionar”, abra la sección de cuerpo y eche un vistazo a la aplicación en la navegación. Vemos en lugar de nuestro enlace router, tenemos esto un elemento, nuestro Inicio, y también el enlace Acerca. No obstante, existe una diferencia entre el a elemento que se ha agregado automáticamente, entre los que nos sumamos. Cuando tengamos configurado el modo de historial, que echaremos un vistazo pronto, este enlace que se ha agregado interceptará cualquier clics e impedirá que el navegador actualice automáticamente la página. Intenta usar un enlace de enrutador donde sea posible, en lugar de un elemento de enlace HTML. Además, si ha utilizado el router en la versión 2 de Vue, es posible que también haya utilizado el prompt de Tag de la misma manera. Esto nos permitió cambiar el elemento que envolvió nuestro enlace, cualquier otro elemento HTML como un elemento de lista. No obstante, ten en cuenta que esto no está disponible en la última versión del router, por lo que necesitarás quitarlo si lo tienes en algún proyecto existente. No sólo nos limitamos a pasar en una cadena estática como esta, alrededor de dos prop, también podemos pasar datos dinámicos. Por ejemplo, es posible que tengamos un usuario así. Vamos a crear una sección de script con nuestro valor predeterminado de exportación, con nuestra sección de datos, y luego vamos a devolver un usuario. Este usuario puede ser un objeto con el nombre y también un ID de usuario. Podemos entonces hacer esto dinámico con los dos puntos y luego pasar en una cadena de plantilla dentro de la [inaudible]. Es posible que desee ir a una ruta, que es usuario de barra inclinada hacia adelante, y luego el ID del usuario. Dale a esto un guardar, refrescar, y ahora si hacemos clic en “Acerca de”, esto nos envía al usuario /12345, y esto nos da un ID de la flexibilidad que tenemos a la hora de seleccionar nuevas rutas. También podemos extendernos aún más pasando en un objeto. En lugar de nuestro camino así como éste, podemos pasar en nuestro objeto. Es más sencillo, podemos pasar en un camino al que queremos navegar. Nuevamente, podemos pasar en una ruta dinámica o simplemente podemos agregar en una cadena regular. Esto también tendrá que ser dinámico, por lo que agregamos el enlace. Igual para nuestro segundo enlace, podemos sumar en el camino. Ahora, ya que tenemos un objeto, también podemos agregar propiedades adicionales también. Por ahora, dale a esto un guardado y podemos refrescar el navegador, enlazar a nuestro Inicio y también a la página Acerca de Nosotros también, o alternativamente, en lugar de hacer referencia a una ruta así, también podemos salir del router y entrar en el índice o js, y luego usa el nombre que ya hemos proporcionado aquí dentro. Tenemos el Home y también los nombres About Us, cualquiera de estos ahora se puede utilizar sobre en nuestro enlace router. Dentro de nuestro objeto, podemos reemplazar nuestro camino por el nombre de la propiedad. En la primera fue Home, y la segunda fue About. Vamos a probar esto, refrescar. Todavía navega a nuestras dos páginas. Tan solo a continuación nuestros enlaces, podemos ver el contenido de la página justo debajo. El motivo por el que podemos ver esto es por esta vista de router que se ha colocado bajo nuestros enlaces. Esto actúa como un [inaudible] para los componentes que estamos viendo actualmente. Podemos colocar esto en cualquier lugar dentro de nuestra plantilla. 81. Parámetros y consultas: El paquete del router tiene más que ofrecer que simplemente cambiar entre componentes. También se puede utilizar para pasar datos en forma de params y también una cadena de consulta. En primer lugar, echemos un vistazo a los params o parámetros, que son variables para una ruta dada en el enlace del router, que tenemos justo aquí. Podemos agregar nuestros params dentro de este dos objeto. Entonces justo después de nuestro nombre separado por una coma, añadir en nuestros params. Dentro de este objeto, podemos sumar tantos parámetros como queramos. Pero ahora solo voy a agregar un ID de usuario, que es el nombre. El valor va a ser igual a user.id, que podemos obtener de nuestros datos. Aquí estamos lidiando con esta página de inicio. Pasemos al Vue y luego a los componentes home.vue. Dentro de aquí tenemos múltiples formas de acceder a los datos de nuestros routers. Dentro de las llaves dobles, podemos dar salida a esto con el router de símbolo de dólar. Pasado al enlace de inicio. Esto ahora nos da mucha información sobre el router. En realidad podemos ver esto un poco más fácil si entramos en las herramientas de desarrollo. Así que entra en Inspect, abre estos componentes de casa, y esto ahora muestra toda nuestra información de enrutamiento un poco más estructurada. Tenemos acceso a cosas como la ruta actual. Podemos ver cualquier consulta o cualquier parámetro, como el ID de usuario que acabamos de agregar. Si nos desplazamos hacia abajo, tenemos mucha más información disponible para este router, como cualquier opción. También podemos ver todas las rutas que hemos establecido en nuestro archivo router. Tenemos el componente home que es el camino de la slash hacia adelante. Entonces tenemos esto alrededor de uno justo por debajo de dos. Entonces así es como podemos acceder a toda la información de los routers. También podríamos usar esto para acceder a los params [inaudibles], o en su lugar podríamos usar la ruta del símbolo del dólar, que filtrará mucha de esta información y simplemente nos dará acceso a la información de ruta actual. Ya podemos ver esto es mucho más sencillo. Podemos ver en este objeto tenemos acceso a nuestros params. En el interior de aquí podemos acceder a los params de punto. Guarda esto. Ahora tener acceso a nuestro ID de usuario. Si solo quisiéramos acceder directamente a este valor o si tuvieras múltiples params, también podemos acceder a ellos por su nombre también. Ahora este ID de usuario sólo nos daría acceso al valor. El router también puede manejar cadenas de consulta también. Si no has usado una cadena de consulta en el pasado, son una forma de proporcionar alguna información adicional dentro de una URL. Es posible que hayas visto una URL que se ve algo así. Tenemos un signo de interrogación, que se utiliza para separar la consulta de la URL. Entonces tendremos nuestros nombres y nuestros valores así. Ahora el usuario, que es igual a cualquier valor. Esta es una sección. También podemos usar el ampersand para atender múltiples parámetros de consulta. Estas cadenas de consulta se pueden acceder localmente o también podemos enviarlas al servidor también. Un caso de uso típico para una cadena de consulta es cuando se utiliza con un formulario HTML. Podemos ver esto si agregamos un simple formulario o plantilla. Simplemente lo mantendremos simple en una entrada de nombre. Entonces el atributo de nombre es importante. Vamos a llamar a este usuario. Este atributo de nombre es el que se muestra en la cadena de consulta. Veremos esto en tan solo un segundo. También agregaremos una ubicación. Nuevamente, una entrada con el tipo de texto. Este puede tener el nombre de ubicación. Un botón para presentar esto con el tipo de presentación. Ahora pasa al navegador, si agregamos en algún nombre dentro de aquí, una ubicación, podemos enviar. Esto ahora se agrega a la URL como una cadena de consulta. Vemos que el usuario es igual a Chris y también la ubicación tanto a este usuario como también esta ubicación está cubierta desde toda la forma de estos atributos de nombre. Toda su información será enviada al servidor con nuestro formulario. Vamos a eliminar esto y todas estas cadenas de consulta se agregaron automáticamente o pueden enviarse como formulario. Pero también podemos añadirlos manualmente también. Si vamos a nuestra app.vue y luego a nuestro link router, es una configuración al igual que nuestros params, podemos agregar una coma. Dentro de nuestro objeto, configura nuestra consulta, donde podemos agregar tantas cadenas de consulta como nos gustaría. Por ejemplo, podríamos agregar un token con esto sobre enlace, guarde esto. Haga clic en el enlace sobre, y esto luego se agrega al final de nuestra URL. Si también quisiéramos acceder a alguna de esta información, podríamos acceder directamente a ella desde nuestra plantilla también. Volver a nuestros componentes de casa y aún en este objeto de ruta, en lugar de acceder a nuestros params, todo lo que necesitas hacer es acceder a nuestra consulta, refrescar. Aquí no vemos nada por dentro ya que agregamos esto al enlace sobre. Podemos recortar esto a la alrededor a este fin y esa es nuestra consulta. También podemos agregar múltiples consultas también y luego acceder a ellas por su nombre, como este token. Es así como podemos acceder a parámetros y a nuestras cadenas de consulta. En el próximo video, echaremos un vistazo a cómo podemos emparejar rutas dinámicas. 82. Adaptación de rutas dinámicas: URL no siempre son tan simples como lo que tenemos aquí con nuestra slash hacia adelante y la slash hacia adelante sobre ruta. También necesitan ser más dinámicos y contener datos que cambiarán tus datos lo cual es diferente para cada usuario. Por ejemplo, puede que tenga una ruta que se vea así, puede que tenga cuentas de barras inclinadas hacia adelante. Esta ruta sería simple para el manejo de los routers, solo tendremos que mapear esto a un componente de cuenta. Pero ¿y si quisiéramos pasar también en el ID de usuario, ese enlace a un determinado usuario así como este? Sería demasiado trabajo crear una nueva ruta para cada uso único que teníamos en nuestra base de datos, pero para esto el router proporciona lo que se llama segmentos dinámicos lo cual es una forma de tener parte de nuestra URL la cual puede cambiar esos dos apunta a los mismos componentes. Dentro de nuestro archivo de índice de routers lo primero que vamos a hacer es importar un nuevo componente, aún no lo hemos creado pero lo haremos en tan solo un momento. Vamos a importar nuestra cuenta, esta sería la misma ubicación que justo arriba, estará en la carpeta views, y esta será la cuenta.vue. Después de esto, crearemos un objeto de trayectoria igual que vemos aquí, así que abre las llaves y el camino para esto, volveremos a ti en tan solo un segundo. Tendremos un nombre de cuenta y también apuntaremos a nuestros componentes los cuales acabamos de importar ese archivo de servicio y ahora podemos crear estos componentes de cuenta dentro de nuestra carpeta de vistas. Será bastante sencillo por ahora, solo colocaremos en un encabezado de nivel uno de mi cuenta. Voy al router ahora podemos crear nuestra ruta para este componente, lo que queremos que esto mapee para reenviar cuentas de barras inclinadas, y luego queremos manejar cualquier sección dinámica como nuestro ID de usuario. Entonces lo que vamos a hacer aquí es básicamente pasar en una variable usando el colon podemos darle a esto un nombre de nuestra elección, esto nos va a permitir capturar esta información si es necesario. En nuestro caso llamaremos a esto el ID de usuario, y luego a la app.vue necesitamos crear un enlace de router para enlazar con nuestros nuevos componentes por lo que se coloca al final, etiquetas de apertura y cierre y luego dentro de la etiqueta de apertura. Cuando hice los dos prop, no veo ningún objeto donde el camino, esto será dinámico para que podamos colocar esto dentro de las garrapatas traseras y queremos ir a reenviar cuenta slash y luego podemos hacer uso de nuestros objetos de usuario y enlazar a la ID. Entonces encima en el navegador, y también necesitamos añadir un nombre dentro de aquí, y también podemos colocar uno de estos separados en dos entre cada uno de estos nombre este símbolo de tubería. Refresca y ahora haz clic en nuestras cuentas y nuestra sección de mi cuenta ahora se muestra cuando vinculamos a esta sección de cuenta que incluye el ID de usuario dinámico. Si sí necesitamos acceder a los datos dentro de esta sección dinámica como este ID de usuario, podemos acceder a estas rutas extrañas.params, igual que miramos antes. Hasta la account.vue, abre las llaves dobles podemos acceder a la información de ruta actual, los params que ahora nos da acceso a esta variable ID de usuario la cual nos sentamos dentro de nuestro archivo de router. También si quisiéramos enlazar a esta ruta por el nombre de una app.view, podemos hacer esto igual que hicimos ambos con esta ruta de inicio por lo que en lugar de tener un camino igual a este que incluye una sección dinámica, podemos enlazar con el nombre de la ruta que era cuenta entonces podemos pasar en los parámetros igual que vemos arriba cuál era un objeto. Tenemos que pasar en el ID de usuario, que es igual al usuario.id Por esto fuera, el Inicio, el Acerca, y la página Cuenta sigue funcionando también, también podríamos pasar en un múltiples params y también tener múltiples dinámicas secciones también. Entonces, por ejemplo, si esta sección de cuenta y luego pasar a enumerar todas las entradas de blog para este usuario, podríamos entonces también almacenar cualquiera de las entradas de blog individuales en ocho segmentos dinámicos y esto funciona exactamente igual. Si vamos a la app.vue, podemos pasar en un segundo parámetro. Este fue el post y podemos pasar en cualquier nombre único aquí, refrescar, probemos esto. Vemos nuestro post ID también está disponible. 83. Rutas anidadas: Dentro de nuestro archivo App.vue, estamos manejando todos nuestros cambios de ruta con estos enlaces, luego mostrar la página seleccionada con esta vista de router. Todo esto está bien. Bueno, ¿y si no quisiéramos que todos nuestros vues fueran colocados en este lugar? Por ejemplo, y si tuviéramos nuestra cuenta.Vue justo aquí. Esto también tenía algunas páginas relacionadas, como los pedidos anteriores y también una sección para actualizar el perfil. Es posible que deseemos que estas dos nuevas secciones solo se muestren dentro de esta cuenta vue. Pero si se usa caso, tenemos lo que se llama rutas anidadas. Para ver esto en acción, necesitamos crear algunas páginas nuevas dentro de la carpeta de nuestro Vue. Crear un nuevo archivo. El primero es perfil de actualización y el segundo es órdenes de usuario. Un título básico estará bien por ahora. Nosotros configuramos la plantilla con un encabezamiento de nivel 1 que es para los pedidos anteriores. Podemos guardar esto y copiarlo en el perfil de usuario. Nosotros, por supuesto, también necesitamos algunos enlaces para enlazar a nuestras nuevas páginas. Por lo que de vuelta al componente App.vue, configura nuestros dos nuevos enlaces de router para actualizar el perfil. Entonces, el segundo es para nuestros pedidos anteriores. Como acabamos de mencionar, ambos enlaces están relacionados con nuestra página de cuenta, por lo que puede tener sentido tener estos debajo de la ruta de la cuenta así como esta. Podríamos tener cuentas de slash hacia adelante y actualizaciones de slash hacia adelante. También podríamos anidar dentro de nuestro perfil. Vamos a incluir estos con el to prompt, analizar en nuestro objeto el cual incluye el camino. Esto será dinámico, por lo que necesitamos el retroceso. Esto irá a reenviar cuenta de slash, luego al user.id específico, y luego a reenviar actualización de slash. Agarra esto. Al mismo pero éste va a ir a las órdenes hasta que terminemos con esta cabeza sobre el archivo relativo donde vamos a importar nuestros dos nuevos componentes. Este siguiente fue el perfil de actualización, y el final fueron las órdenes del usuario. Entonces, podemos configurar nuestra ruta de enrutador justo debajo. Una opción es crear dos nuevas rutas. Uno que apunta a nuestra actualización de la línea inclinada hacia adelante y otro que apunta a nuestras órdenes de corte hacia adelante. Esto no es ideal [inaudible] ya que aún queremos mostrar estos mismos componentes de cuenta pero queremos que estas dos nuevas páginas sean anidadas por dentro. Para lidiar con esto, podemos agregar una matriz infantil. Esto declarará qué componentes deben anidarse dentro de esta página de cuenta de nivel superior. En primer lugar, no necesitamos esta sección de post por lo que podemos quitar esto. Entonces, separados por una coma, podemos agregar en nuestra matriz hijos. Dentro de aquí, vamos a analizar en un nuevo objeto, que es una nueva ruta, pero la diferencia es la nueva ruta que usted analizar aquí dentro será lo que va al final de esta ruta [inaudible]. Por ejemplo, si quisiéramos una actualización de la línea inclinada hacia adelante, simplemente analizaríamos en la ruta como actualización. Después, una vez que el usuario visita la cuenta de slash forward, reenviar slash el UserID, reenviar la actualización de la slash. Entonces declaramos qué componentes queremos renderizar. En nuestro caso, es la página que acabamos de crear llamada perfil de actualización. A continuación, nuestro segundo objeto va a ser para órdenes de slash hacia adelante. Esto mostrará el componente que acabamos de importar, que fueron los pedidos de los usuarios. Probemos esto, actualice el navegador. Ahora, vemos nuestros enlaces arriba en la parte superior, click en actualizar perfil. Esto sólo nos llevará a los componentes de la cuenta. Aún así, con la sección de actualización de la slash hacia delante, podríamos probar los pedidos anteriores. De nuevo, tenemos la URL correcta y aún así me está mostrando componentes de cuenta. Como se puede ver, todavía vemos este componente principal de la cuenta. Pero, ¿qué pasa con los dos componentes anidados dentro? Bueno, para esto, necesitamos decirle a un Vue js exactamente dónde queremos que estos dos componentes se muestren dentro de nuestros padres. Encima a la cuenta.vue. Bueno, para esto, también podemos pasar en un componente de vista de enrutador. Ahora, cuando cambiamos entre nuestros dos enlaces hijos, también vemos el contenido de estos componentes también. 84. Clases activas: También nos ayudará a entender mejor en qué ruta nos encontramos actualmente. Las rutas Vue también agregan algunas clases al enlace activo. Justo antes de ver esto en acción, pasemos a la app.vue y eliminemos rápidamente nuestros params no utilizados de este enlace de cuenta. No necesitamos esta publicación ya que eliminamos esto en el último video, y ahora si pasamos al navegador y entramos en las herramientas de desarrollador, haga clic derecho Inspeccionar. Tenemos que abrir esto en sección de navegación. Esto contiene todos nuestros enlaces sobre lo muy superior, y si hacemos clic en el enlace Inicio, verás que esta clase aparecerá de router-link-active y también router-link-exact-active también. Vamos a probar el sobre y estas clases ahora se mueve al enlace sobre. El cuenta, esto también lo consigue. Pero si hacemos clic en el “Actualizar perfil”, seguimos viendo que nuestras dos clases se están agregando a nuestro enlace de perfil de actualización, pero el enlace de la cuenta aún tiene esta clase de enrutador y enlace activo. Lo mismo si vamos a pedidos anteriores, nuestras dos clases están ahora en nuestros pedidos anteriores, pero el enlace del router activo sigue en nuestro enlace de cuenta, pesar de que no hemos hecho clic en este enlace. Esto se debe a que este router-link activo siempre se aplicará incluso en una coincidencia parcial. Actualmente, estamos en /account, el ID de usuario, y luego /pedidos. Pero como el enlace de la cuenta también comienza con /cuenta, esto también se considerará un partido. Router-Link-Exact-Activo aunque es más específico y debe coincidir con la ruta exacta en la que estamos para que se aplique esta clase. Si cerramos esto hacia abajo y nos dirigimos a la app.vue, cuando también configuramos el ViewRouter, también agregó algunas clases dentro de aquí también. Tenemos algunas clases para nuestra navegación, y también, esta clase para router-link exact-active configurando el color de nuestro enlace. Es por ello que cuando hacemos click en cualquiera de estos enlaces arriba en la parte superior, vemos este color verde, pesar de que no lo pusimos nosotros mismos, dentro de las hojas de estilo, ya que esta es la clase exacta, lo harás solo establece el color verde cuando hay una coincidencia exacta. Si estuviéramos, sin embargo, para cambiar esto, el router-link activo, ya que nuestra ruta actual comienza con /cuenta, esto también coincidirá con este enlace de cuenta. También lo mismo si hacemos click en pedidos anteriores, vemos que nuestros dos enlaces están activos. Nosotros vamos a hacer esto. El estilo ahora sólo se aplicará a la ruta exacta en la que estamos. Por lo que esto es sólo algo de lo que debemos estar conscientes y nos da un control fino sobre el estilo de nuestros enlaces. 85. Páginas de reemplazo: También es importante manejar lo que sucede si el usuario aterriza en la parte equivocada de nuestra aplicación o en una página que no existe. Podemos configurar una captura general todos los componentes como una página de seguimiento cuatro para mostrar si no se emparejan rutas sobre. Por el momento, si vamos al navegador y escribimos URL no reconocida, no vemos ningún componente que se muestre en el navegador. Para atrapar esto, vamos a pasar a nuestros Views y crear una nueva página llamada NotFound.vue. Tan solo una plantilla simple estará bien con un encabezado de nivel 1, y este encabezado sólo va a decir página no encontrada. Si quisiéramos, también podríamos colocar en enlaces a diferentes partes para app o incluso redirigir de vuelta a la página de inicio si quisiéramos. Esto está bien para este ejemplo. Diga esto y ahora para acceder a esto, tenemos que ir a nuestro router, y en la parte superior, vamos a importar esto como no encontrado. Entonces en nuestra matriz de enrutador, cree un nuevo objeto el cual va a manejar todas las rutas que no se reconocen justo arriba. También tendrá que tomar un camino al que echaremos un vistazo en tan solo un segundo. El nombre, no encontrado, y también los componentes que acabas de importar, que tampoco se encuentra demasiado. Si has usado view to en el pasado y has usado un router para atrapar cualquier ruta no reconocida, todo lo que tendríamos que hacer es agregar una estrella dentro de aquí, y esto luego renderizaría nuestros componentes NotFound para cualquier ruta no reconocida. No obstante, aunque en la vista 3, necesitamos pasar en un parámetro personalizado. Un parámetro personalizado es igual a los que hemos utilizado anteriormente para el ID de usuario, pero la diferencia esta vez es que también necesitamos pasar en una expresión regular para que coincida con cualquier ruta no reconocida. Añadamos nuestro parámetro personalizado, que voy a llamar el nombre de ruta. A errores en la expresión regular, que es el punto y la estrella, y esto coincidirá con cualquier otra ruta que no se enumeren arriba. Voy a decir esto, vemos que nuestra URL no reconocida ahora renderizará nuestra página componentes no encontrados. También podemos acceder a estos parámetros también los cuales tenemos justo aquí dentro del componente. Haga esto, los accedemos al igual que cualquier otro parámetro del router. Abrimos las llaves dobles, accedemos a la ruta actual, y luego seleccionamos los params. Esto ahora nos da acceso a esta variable de nombre de ruta y también al valor también. También podríamos acceder a múltiples trayectorias así si añadimos una varilla hacia delante y luego un segundo segmento. No obstante, aunque esto simplemente renderizará una cadena simple. Si quisiéramos romper las secciones y acceder a ellas individualmente, podemos repetir esto y crear una matriz de parámetros. Para ello, todo lo que necesitamos hacer es ir a nuestro router y luego agregar una estrella opcional al final, y sobre todo decimos que vemos que esto se convierte en una matriz con múltiples valores. Esto ahora nos da la opción de utilizar estos parámetros individualmente si necesitábamos, o incluso navegar por este camino también. Tampoco necesitamos mucho la URL completa así como así. Esto también puede ser una sección de nuestra URL. Por ejemplo, si esto fuera slash hacia adelante Admin, esto coincidiría con la sección admin, y luego podríamos usar la sección catch-all para cualquier cosa que siga. Esto nos permitiría entonces ser más específicos, y podríamos crear componentes personalizados para diferentes páginas, lo cual puede ser incorrecto. Para este caso de uso, podríamos entonces personalizar nuestra página no encontrada para que sea más personal para esta ruta admin, tal vez podamos agregar en algunos textos o simplemente no se encontró ninguna página de administración, y luego también podríamos pasar en el router, dejar que el usuario sabe exactamente en qué ruta se encuentran. Ya que esto está en la ruta admin, no estamos viendo esta página no encontrada. Lo que tenemos que hacer es ir a reenviar slash admin y luego colocar en cualquier cosa después de que se renderice esta ruta o página no encontrada, y luego también nuestro mensaje de cliente justo debajo. 86. Configurar nuestros componentes y rutas del proyecto: Bienvenido de nuevo. Ahora hemos tenido un poco de tiempo para jugar con el Vue Router y ver algunas de sus características. Ahora, podemos tomar lo que has aprendido y aplicarlo a nuestro nuevo proyecto. Para empezar, limpiaremos este seguimiento de cuatro páginas eliminando el mensaje y luego iremos a nuestro archivo de enrutador y reinstalaremos esto para cubrir todas las páginas no encontradas. Entonces a continuación, vamos a entrar en la carpeta de vistas y crear las cuatro nuevas páginas que necesitamos para nuestro proyecto. Podemos quitar el sobre, no necesitamos esto, la cuenta, quitar la página de inicio. Incluso vamos a necesitar componentes NotFound, podemos eliminar el UpdateProfile y también los UserOrders también. Por ahora, crearemos nuestras cuatro nuevas páginas, y el primer archivo al que vamos a estar accediendo es el admin.vue. La siguiente página va a ser para el AppHome. El tercero es para la Categoría. Esta es una página para mostrar todas nuestras tarjetas por categoría. Entonces finalmente, el create.vue, que será el vue que utilizamos para editar la tarjeta. Tan solo para que podamos ver estos por ahora, vamos a agregar en una plantilla y un encabezado de nivel 1, y el título de esta página fue creado. Podemos copiar esto, pegar esto en las otras tres páginas. Este era categoría, guarda esto, y el AppHome, y también el Admin también. También usaremos el router para cambiar entre las cuatro de estas vues. Entonces dirígete a la página de índice de routers, voy a reemplazar las cuatro de estas páginas por nuestras nuevas páginas. El primero es para el admin, el segundo es el AppHome, el tercero es para crear, y luego también la categoría. Los puntos de entrada del router doméstico van a ser este AppHome. Podemos enmendar esto, no necesitamos la página sobre, por lo que podemos cambiar esta para que sea la categoría, el nombre de la categoría también, y luego reemplazar esta importación dinámica por un componente regular. Tampoco necesitamos la sección de cuenta por lo que podemos reemplazar esto para ser /crear, el nombre de crear, el componente. También podemos quitar la matriz de niños. También necesitamos crear un objeto más, y éste es para nuestra ruta de administración. Pasado a nuestro archivo principal app.vue, dentro de aquí, vamos a eliminar todos los enlaces, dejándolo justo en su lugar la vista del router, para que podamos agarrar este div, que es el envoltorio, quitar esto. Esta app no va a tener un menú de estilo tradicional para cambiar entre estas páginas. En cambio, navegaremos cuando el usuario haga clic en una categoría o en una tarjeta en particular. Una vez seleccionada la tarjeta, entonces usaremos el router para cambiar entre estas páginas de tarjetas. Por ahora, podemos probar las rutas. Todo lo que tenemos que hacer es ir al final de nuestra URL y probar la categoría. Además, crear, también tenemos la ruta admin. Esto también está bien. Entonces finalmente, la página de inicio. Todas estas rutas ahora están correctamente mapeadas a nuestras cuatro páginas. También necesitamos un componente de cabecera, por lo que podemos colocar esto dentro de la carpeta de componentes. Abre esto y aún tenemos este componente HelloWorld. Podemos renombrar esto como AppHeader.vue. Limpiemos esto. Voy a quitar todo por ahora y colocarlo en la plantilla, que va a contener la sección de encabezado y también nuestro título dentro de un encabezado de nivel 1 de tarjetas creativas. Después de esto, una sección de navegación, que va a contener tres enlaces a categorías populares. Por lo tanto, crea una lista desordenada con tres elementos de lista. El primer elemento de la lista contendrá el enlace del router. Pasa en el a prop. No necesitamos hacer estas dinámicas ya que esto es solo una cadena regular de /category. Después navegaremos hasta la sección de cumpleaños. Pase en el texto de cumpleaños. También podemos copiar este ítem de la lista y utilizar este dos veces más. El siguiente va a estar yendo a la ruta del aniversario, el texto, para luego pegar en la tercera al fondo. Esta será Navidad. También puedes cambiar estas categorías si quieres, mucho más fácil si salimos con diferentes secciones. Cualquiera que sea la ruta que poseamos, siempre vamos a estar mostrando este AppHeader principal, para que podamos importar esto en la app.vue. En la sección de guiones, crea nuestra importación. Podemos utilizar el símbolo @ para acceder a la fuente a los componentes y luego al AppHeader. Registra esto justo a continuación, elimina los datos también. Tampoco necesitamos esto de los videos anteriores, por lo que podemos quitar esto. Entonces hasta la plantilla, podemos registrar esto justo encima de la vista del router, por lo que este AppHeader siempre se mostrará en la parte superior. Entonces el contenido de nuestra vista de enrutador se colocará justo debajo. Bien. Por lo que ahora vemos el encabezado, podemos probar estos enlaces. Tenemos el cumpleaños, el aniversario, la Navidad, pero este encabezado necesita un poco de estilo. Puedes colocar todos los estilos en el componente de cabecera si quieres, pero voy a colocar en los estilos de lista general en nuestra app.vue. Además, la sección no tendrá el atributo scope, por lo que esto se aplicará a todos los elementos de la lista en nuestra app. Al quitar los estilos de navegación, estos se añadieron automáticamente desde el router, acceder a la lista desordenada. Entonces dentro de aquí, simplemente restableceremos los valores predeterminados del navegador estableciendo el margen para que sea cero y también el mismo para el relleno también. Después de esto, enumeraré artículos y también nuestros enlaces. Establecemos la decoración del texto para que sea ninguna. Esto eliminará todos los subrayados de nuestros enlaces. El estilo de lista para que también sea ninguno, y para eliminar también el color de enlace predeterminado, estableceremos el color para heredar del padre. Está bien. Estos son solo restablecimientos generales y valores predeterminados para nuestros elementos de lista, y para los estilos de encabezado más específicos, volveremos a nuestra AppHeader y luego crearemos nuestra sección de estilos. Esto también puede ser de alcance. En primer lugar, todo este contenido se envolvió dentro de este encabezado. Voy a configurar la familia de fuentes usando una fuente de Google, que está dentro de nuestra página de índice. Desde los archivos de inicio dentro de nuestra página de índice, esto se vincula justo aquí. Esto nos da acceso a dos estilos de fuente que podemos utilizar en nuestro proyecto. También puedes ir a Google Fonts, por lo que cualquier proveedor de fuentes diferente, y usar un estilo diferente si lo prefieres. De vuelta a nuestra sección de encabezado, una caída cursiva hacia atrás, y luego también el espaciado entre letras de un píxel. Esto sólo agregará un poco más de espacio entre cada una de nuestras letras. El tamaño de fuente de 18 píxeles, un borde en la parte inferior de un píxel, una línea sólida, y el color del gris claro, y los píxeles todo relleno también en la parte inferior que va a separar el contenido de esta línea. Después podemos acceder al flex box para mover este título hacia la izquierda y luego nuestros enlaces hacia la derecha. Display flex, espacio entre justificaría contenidos y alineación vertical con alinear elementos colocándolos en el centro. Muy pronto, este rumbo de nivel 1 también va a enlazar con la ruta de inicio, por lo que podemos añadir un cursor a nuestro h1. El cursor del puntero, y también eliminar cualquier margen por defecto o el encabezado. Pasado a nuestros enlaces sobre la derecha, agarra la lista desordenada, y luego podemos establecer las alineaciones con el flex de visualización. Dado que la dirección de flex predeterminada es fila cuando se utiliza el flex box, estos ahora se colocan en toda la página. Sólo necesitamos algo de espacio entre nuestros artículos de la lista. Podemos hacer esto con algo de relleno a la izquierda de 0.5 rems, y ahora, nuestro encabezado está todo completo. 87. Navegación programática: Estos enlaces de router que hemos estado utilizando hasta ahora en nuestro proyecto nos permiten cambiar a diferentes ubicaciones con solo pulsar un botón. Anteriormente, también analizamos brevemente el acceso a la instancia de los routers usando el router de símbolo de dólar. Esto nos dio acceso a cosas como los parámetros en nuestro código. Este router de símbolo de dólar también expone muchas de las cosas para sugerir la capacidad de navegar utilizando métodos como push. Esto significa que también podemos construir en la navegación también en nuestros oyentes de clics o métodos. Por encima en este AppHeader.vue, tenemos este título del sitio en el nivel encabezado y realmente lo que quisiéramos es enlazar de nuevo a la página principal y podríamos envolver esto en el enlace del router o navegar programáticamente por accediendo al router del símbolo del dólar cuando hacemos clic en esto. Echemos un vistazo a cómo podemos hacer esto con el método push de routers. Dentro del interior abierto escucharemos un clic como haríamos normalmente, y luego responderemos a esto accediendo al router que tiene este método push. Dentro de aquí podemos agregar un camino al que queremos navegar, así que agrega la barras inclinadas hacia adelante, click en el título de nuestro sitio y esto ahora navega de vuelta a nuestra página de inicio. Esto también es útil para cosas como empujar al usuario al área de la cuenta después de que haya iniciado sesión ya que esto también se puede usar dentro de un método también, la única diferencia es si fuéramos a usar esto abajo en nuestra sección de guiones, recuerda, tendríamos que añadir esta palabra clave al frente. Echemos un vistazo a otra cosa que es el método de reemplazo. Refresca ahora al cumpleaños y luego nuestro título es ser es trabajar exactamente igual, pero hay una diferencia clave. Al navegar en el navegador, cada página que visitamos se agrega al historial anterior de entradas, así es como el navegador sabe a dónde navegar cuando hacemos clic en estos botones de atrás y adelante. Cuando usamos el método push que acabamos de mirar antes, estas entradas también se suman a nuestra historia. No obstante, como suena cuando usamos el método de reemplazo, igual que lo estamos ahora, esto reemplazará entonces la entrada actual en lugar de agregar una nueva. Podemos comprobar esto si nos refrescamos, iremos a cumpleaños, luego pinchamos en la ruta de inicio y ahora si hacemos click en el botón Atrás, ahora lo llevamos de vuelta al enlace anterior, que es cumpleaños, porque esto está siendo reemplazado. Si volvemos al método push y hacemos exactamente lo mismo, refrescamos, vamos al enlace de cumpleaños, regresamos a nuestra casa y ahora si pinchamos atrás esto entonces nos lleva de vuelta a nuestro enlace original de cumpleaños ya que la slash hacia adelante está siendo agregado a la pila del navegador en lugar de reemplazar la anterior. Al lado de este router también tiene un método go el cual nos permitirá navegar a través de las entradas del navegador, por lo que en lugar de navegar por una ruta determinada así, podemos retroceder o avanzar a través de tantas entradas como quieras. Si quisiéramos volver a las páginas, podríamos usar el negativo 2 y probemos esto. Ve a casa, haz clic en cumpleaños, aniversario y Navidad, luego haz clic en el título del sitio y nos llevan vuelta a las entradas que estaba de vuelta a nuestro enlace de cumpleaños. Si cambiamos esto para que sea un 2 positivo, haga clic en esto, esto luego nos empujará de nuevo hacia adelante a las entradas, que está de vuelta a nuestro enlace navideño. Esto es útil si quisiéramos retroceder y avanzar múltiples páginas, sin embargo, si sólo quisiéramos ir hacia atrás o hacia adelante para una página, también podríamos sustituir esto por adelante o también hacia atrás. Esto funcionará exactamente igual que ir pero solo funcionará para una sola página. de estos, también hay algunos otros métodos que puedes encontrar dentro de los docs API si es necesario, pero estos son algunos de los más comunes. Nuestro proyecto, vamos a dejar esto como empujar y vincular esto a la cuerda o a la slash hacia adelante, que enlazaremos a la página de inicio. A continuación echaremos un vistazo a los diferentes tipos de modos de historial que proporciona el router. 88. Diferentes modos de enrutador: En este proyecto, estamos usando un proyecto de inicio el cual se descarga de GitHub. Ya tiene instalado el Vue Router. Pero al pasar por el proceso de configuración para el router, se nos pregunta si queríamos usar el modo historial. Su modo de historia no está incluido con el arranque de este proyecto, por lo que actualmente estamos en lo que se llama el modo de historia hash. Es por ello que tenemos este hash dentro de la URL. Ya que estamos usando una aplicación de una sola página, este hash se acaba de usar internamente. El parte después del hash es la ruta a la que quieres navegar. Aquí estamos navegando /categoría y luego nuestra categoría seleccionada. Tener este hash dentro de la URL sin embargo, puede tener un impacto negativo en el SEO. Si esto es una preocupación, podemos cambiar el router para hacer uso del modo HTML5. Para ello, realizaremos este cambio en el archivo de índice del router y luego nos desplazaremos hacia abajo hasta la parte inferior. En lugar del historial de hash web, podemos reemplazar esto por CreateWebHistory. También necesitamos importar esto desde el paquete del router. Hasta arriba, podemos reemplazar la versión hash por el historial web. Esto y sobre nuestro proyecto, podemos quitar todo después de nuestro localhost por la navegación. Todo esto funciona exactamente igual, pero esta vez sin el hash en la navegación. Esto funciona bien aquí. Pero recuerda que nuestra aplicación es una sola página arriba, y todo el enrutamiento se maneja en el front-end. Esto, al desplegar nuestra aplicación, debemos configurar el servidor para que siempre devuelva nuestra página principal index.html. Tener esta configuración permitirá a nuestro router manejar donde necesitamos estar en el front-end si el usuario visita la página equivocada o una ruta dinámica. Echaremos un vistazo a cómo configurar esto más adelante cuando implementemos nuestra aplicación. Adicionalmente, como sólo estamos recuperando la página principal index.html, también necesitamos manejar cualquier error 404 también. Actualmente estamos haciendo esto dentro de nuestro router, esa es ruta catch-all. Vamos a probar si esto está funcionando yendo a algún enlace no reconocido. Todavía vemos la “Página no encontrada”. Además, si hacemos click en alguno de nuestros enlaces en la parte superior, obtenemos el componente “Página no encontrada” ya que no hemos configurado la segunda sección justo después de nuestra categoría. Actualmente, lo que sólo tenemos es /categoría, por lo que esta es una ruta no reconocida. Pero si eliminamos la última sección, ahora tenemos una coincidencia del componente de categoría. 89. Introducción a la sección: API de composición: Bienvenido, lo has hecho a la sección API de composición. Esta API de composición es una característica de vista libre de versiones y algo que probablemente sea la parte más esperada de esta nueva biblioteca. Echaremos un vistazo a la composición desde el principio utilizando conjuntos de funciones, también la integraremos en nuestra aplicación de tarjetas creativas. Echaremos un vistazo a todas las nuevas características que brinda cómo podemos dividir nuestro código en archivos componibles, cómo podemos importarlo y reutilizarlo. Además, veremos cómo podemos integrar algunas de las cosas que ya conocemos, como: diferentes métodos, cómo podemos crear funciones, cómo podemos crear propiedades computadas, vigilantes, y también algunas de las nuevas características como efectos de reloj, y cómo agregar reactividad también. Espero con ansias este apartado y los veré en el siguiente video. 90. ¿Qué es la API de composición?: Cuando se anunció por primera vez la API de composición, inicialmente recibió un poco de retroalimentación negativa en la comunidad Vue. Esto se debió principalmente a la falta de comprensión de lo que se pretendía lograr la API de Composición. Pensamos que el equipo central de vue.js tenía la intención de reemplazar la API de Opciones existente que incluye cosas como los datos, los métodos en las secciones computadas, y reemplazarla por una cosa completamente nueva que aprender. Este no es el caso, sin embargo, la forma en que escribimos el código vue.js con la API de Opciones sigue siendo completamente válida, y todo lo que hemos cubierto hasta ahora es esencial para aprender vue.js. Con Vue 3, sin embargo, la API de composición también se proporciona como una forma adicional de escribir código Vue. utiliza una composición menor en lugar de la API de Opciones existente. El equipo de Vue recomienda solo usar la API de composición cuando tu proyecto existente se está volviendo grande, difícil de mantener y difícil de navegar como desarrollador. De hecho, ambos se pueden usar juntos en los mismos componentes si es necesario, haciendo que el refactorizado sea mucho más suave. El motivo detrás de la composición fue hacer mucho más fácil organizar, mantener y reutilizar nuestro código. Los componentes reutilizables nos llevan hasta ahora, pero el JavaScript real dentro de estos componentes se puede organizar de una mejor manera. Tendrá un componente típico de Vue el cual cuenta con un usuario, productos, y una cesta de la compra. El código relacionado con el usuario está en la sección de datos, montado, hay un método, y también un reloj también. También tenemos productos en datos, los buscamos usando un método que se llama cuando se monta la aplicación, y el código restante es para nuestra canasta. El usuario puede actualizar o agregar productos a la canasta, después pueden checar con el contenido de esta canasta, y además contamos con una sección computada para solo mostrar la canasta si el usuario ha agregado un artículo. Este es el código tradicional vue.js y nada de malo en esto. ¿ Por qué introducir una nueva forma? Como se mencionó antes, esto está bien hasta que nuestra aplicación se haga mucho más grande. Este es un ejemplo bastante sencillo donde podemos ver una visión general de alto nivel de todo nuestro código, también se ha simplificado para llenar esta página. No tenemos código dentro de nuestros métodos, y en una aplicación real, este sencillo ejemplo podría ser fácilmente 3-4 veces más largo. Otro inconveniente es que nuestro código relacionado está todo separado. Todas estas partes relacionadas no están pegadas entre sí y sólo se vuelve más un problema a medida que nuestros archivos se hacen más grandes. Esta es una de las cosas que la composición pretende resolver. Ahora podemos escribir código más como JavaScript tradicional y también agrupar nuestro código mucho más fácilmente. En JavaScript regular, podemos escribir la sección de usuario así, utilizando una constante [inaudible] el objeto de uso, y una función para obtener al usuario de una base de datos. Para los productos, también podríamos tener la matriz de productos y también una función para obtener los datos que necesitamos. También, para la canasta relacionada ir a, tal vez algún código que se superpone a la baja de la línea, pero ya podemos ver que agrupar estos juntos para hacer nuestro código mucho más organizado. Pero, ¿dónde ponemos todo este código? Como siempre, va en nuestra sección por defecto de exportación. Ambos de esto, lo envolvemos en una función de configuración dentro de aquí, luego también devolvemos cualquier cosa que queramos luego estar disponibles para usar en nuestra plantilla como nuestras constantes y nuestras funciones. No solo estamos dejando atrás a Vue tampoco con esta nueva sintaxis de look. Todavía tenemos acceso a cosas familiares como ganchos de ciclo de vida, usando el prefijo on. Aquí, vemos OnMounted para obtener al usuario, y también los productos cuando se monta el componente. También importamos esto desde la biblioteca Vue como importación con nombre, lo que significa que solo importamos las piezas que necesitamos. También, cosas familiares como relojes y computados también está disponible. En este ejemplo de aquí, importamos computado y envolvemos nuestro código show basket con él para mantenerlo actualizado con cualquier cambio. El segundo que la composición pretende mejorar es la reutilización. Este refactor que vemos no ha hecho que los componentes sean más pequeños o más reutilizables, simplemente simplemente agrupó las secciones relacionadas. Es posible que deseemos reutilizar los objetos de uso y también los productos en una parte diferente de nuestra app. Las soluciones actuales incluyen la posibilidad de obtener estos datos en un componente de nivel superior y luego pasarlos como prop. A pesar de que esto puede ponerse desordenado cuando los componentes están profundamente anidados, también puede colocar componentes de codificación en los que nunca se pretendió estar. También podríamos utilizar una administración estatal bibliotecas como Vuex que es una buena opción y proporciona una tienda central. Si bien esto es algo más que aprender y también alguna forma extra de agregar a nuestro proyecto, ¿sería genial si Vue proporcionara de forma nativa una solución para hacer nuestro código más fácilmente accesible y reutilizable? Gracias a la composición, esto ahora es posible moviendo nuestro código reutilizable a archivos separados. El nombre de la carpeta es obtuso, pero comúnmente se puede ver llamado composables donde cada sección de nuestro código se coloca luego en un archivo JavaScript, comúnmente usando el prefijo de uso, que luego podemos importar a cualquier componentes que necesita usarlo. Esto deja a nuestros componentes mucho más ligeros y más reutilizables. Todo este código puede parecer extraño y confuso al principio, sobre todo si eres nuevo en Vue. Al principio, también me lo hizo, pero vamos a estar gastando mucho tiempo escribiendo código de composición en las próximas secciones, por lo que conseguirás mucha práctica y esto pronto se volverá más familiar. 91. Configuración de composición: En las diapositivas anteriores, miramos cómo va nuestro código de composición dentro de una función de configuración. Ahora configuremos esto en nuestro Apphome.vue, y aquí, necesitamos un script con nuestro valor predeterminado de exportación. Entonces lo pasaremos en nuestra función de configuración, que se ve así. El programa de configuración se ejecuta antes de que se cree el componente. Es dentro de aquí donde escribiremos nuestro código de composición en una sintaxis más similar a JavaScript. Como acabamos de ver en el video anterior, esta página principal será el punto de entrada para nuestro usuario. Lo utilizaremos para mostrar una lista de todas las categorías disponibles para nuestras tarjetas, el cumpleaños y el aniversario del niño. En el archivo data.js suministrado, abramos esto, justo aquí, cada una de nuestras tarjetas tiene una sección de categoría que incluye una matriz. Son estos datos los que vamos a recorrer para cada tarjeta para construir esta página. Por lo que necesitaremos recorrer todas nuestras tarjetas y luego crearemos un segundo bucle para recorrer todas las categorías y luego guardarlas. En primer lugar, vamos a importar estos datos que necesitamos en este componente. Justo debajo del guión, vamos a importar el array de tarjetas. La ruta del archivo para esto fue.. /data. Entonces normalmente estableceríamos las tarjetas para que fueran una propiedad de datos. Pero con la composición, podemos crear una constante o variable JavaScript regular. Entonces vamos a configurar una constante llamada AllCards. Inicialmente podemos configurar una matriz vacía. Además, necesitamos una segunda variable que vamos a utilizar para almacenar todas las categorías que encontremos. Vamos a recorrer todas nuestras tarjetas. Entonces esto también se va a empujar. Crearemos un let y llamaremos a esto UniqueCategories. Podríamos configurar esto para que sea un valor inicial de una matriz vacía, o mejor aún, podemos reemplazarlo por un nuevo conjunto. Un conjunto es una colección de valores, y al igual que una matriz, también podemos recorrer sobre ellos. Pero la diferencia es que sólo aceptará valores únicos. Esto es ideales en algunas de nuestras tarjetas tienen la misma categoría, por lo que no queremos que se dupliquen estos datos. Además, un objeto conjunto es JavaScript regular y nada relacionado con vue JS. A continuación, podemos crear una función llamada GetUniqueCategories. Más funciones en composición, también se pueden escribir en cualquier otro tipo JavaScript válido también como funciones de flecha, si lo prefieres. Conforme suena esta función, ésta va a ser la encargada de asignar todas nuestras categorías a esta variable. Entonces para empezar, agarraremos todas las cartas. De hecho, solo necesitamos asignar esto a las tarjetas en lugar de a nuestra matriz, y luego podemos recorrer estas con ForEach como una función y cada elemento almacenará esto en la variable llamada tarjeta. Entonces recuerda, cada tarjeta dentro de nuestro archivo de datos tenía propiedades de estas categorías. Por lo que crearemos un segundo bucle donde seleccionamos nuestra tarjeta y luego las categorías, y luego un segundo bucle con ForEach, que toma en la categoría. Entonces queremos empujar esta categoría a UniqueCategories. Ahora bien, si UniqueCategories fuera una matriz, podríamos usar el método push de JavaScript. Pero ya que configuramos esto como un conjunto, necesitamos usar el método add pasando en la categoría. Entonces fuera de nuestra función, podemos iniciar sesión en esta consola para probar esto. Esto ahora nos deja con nuestra función, pero ahora, en realidad necesitamos llamar a esto el código a ejecutar. Por lo que para ello, podemos agregar esto para esperar enEnganche de ciclo de vida montado donde le estamos pasando el nombre de la función. Al usar el gancho del ciclo de vida, por lo que tienes el mismo nombre que hemos usado anteriormente como montado, pero para la composición, agregamos el prefijo on. Además, al usar cualquiera de estas características como estas dos, ahora necesitamos importarlas individualmente desde la biblioteca vue. Por lo que podemos importar, el llamado importar el gancho del ciclo de vida OnMounted de la biblioteca vue. Probemos esto y abrimos las herramientas de desarrollador del navegador en la consola. Aquí, vemos nuestro conjunto con 11 valores. Abramos esto, y veremos 11 valores únicos. Entonces todo esto está bien. Ahora tenemos lo que necesitamos, pero también sería útil tener una categoría para todas las cartas también, y también podemos sumar esto en. Por lo que en la parte superior de nuestra función, nuestro bucle también accederá a nuestras UniqueCategories, llamaremos al método add, luego agregaremos la categoría all, refrescaremos, ahora tenemos 12 valores, que también incluye el todo categoría también. Por último, podemos volver de configurar cualquier valor que ahora queremos poner a disposición para utilizar en nuestra plantilla. Este será un objeto, y lo único que necesitamos para volver a nuestra plantilla son UniqueCategories. Entonces agrega esto en, pasa a nuestra plantilla, podemos eliminar nuestro encabezado de nivel 1 y en su lugar colocar en una lista desordenada donde vamos a recorrer todas estas categorías. Por lo que la clase de envoltura de cuadrícula, lo agregaremos pronto para nuestro CSS, el ítem de lista, que tendrá la clase de elemento de categoría. También podemos pasar en v-for para recorrer todos nuestros artículos. Por lo que vamos a recorrer la categoría en categorías como en una clave. Ya que usamos set, cada una de nuestras categorías es única. Por lo que también podemos usar esto como clave. Entre el elemento de lista, podemos crear esto en un enlace pasando en el enlace del router. Esto toma en el para pedir y pasar todo el objeto donde va a ser categoría el nombre del enlace, que configuramos en nuestro archivo de índice de routers, vamos a echar un vistazo, esto es justo aquí. De hecho, necesitamos usar una C mayúscula para este nombre. También, pasar en nuestros parámetros objeto a donde la categoría va a ser igual o categoría de nuestro ciclo v-for. Por lo que esto ahora enlazará a la categoría de barra inclinada hacia adelante y luego barra hacia adelante también el nombre de nuestra categoría única. Este enlace también necesita algún texto entre el componente de enlace del router. Por lo que pasando nuestra categoría entre las llaves dobles. De hecho, esto sólo quiere ser categorías únicas. Es mucho el nombre que regresamos de la composición. Dado que ahora estamos pasando parámetros a esta ruta, también necesitamos pasar por encima del archivo de índice de routers y también agregar un segmento dinámico llamado categoría. Entonces ahora, si actualizamos el navegador, no vemos nada en la pantalla. Ahora bien, esto parece extraño porque sabemos que tenemos las categorías porque las logramos registrar a la consola justo aquí y hemos visto 12 valores únicos. Bueno, la razón por la que esto está sucediendo es por el gancho OnMounted. Al inicio de este video, mencionamos que la configuración se ejecuta antes de que se cree el componente. Pero OnMounted se llama después de esto. Esto significa que inicialmente estamos pasando UniqueCategories justo aquí como un conjunto vacío. En un principio, este es el valor que se está devolviendo a nuestra plantilla. Por lo que estamos dando un bucle a través de un valor vacío. Esto básicamente significa que necesitamos llamar a nuestra función GetUniqueCategories antes de esta fase montada. Una opción es quitar el gancho OnMounted y llamar a esto igual que a una función JavaScript regular. que ya no estamos usando OnMounted, también podemos comentar esto y también el navegador, refrescar esto, ahora vemos nuestras UniqueCategories. Si hacemos click en alguno de estos, vemos nuestro componente de categoría, y luego lo llevamos a la URL correcta. O alternativamente, si no necesitábamos llamar a esta función en cualquier momento, también podemos mover el envoltorio de funciones y simplemente dejar el código para que se ejecute dentro de la configuración. Guarda esto, y más a nuestra página de inicio, esto también funciona exactamente igual también. La capacidad de agregar en código como este para ejecutarse en la configuración significa con la composición, ya no necesitamos el antes de crear y también los ganchos de ciclo de vida creados. Ambos se han retirado ahora a favor de este enfoque. 92. Tipos de referencia vs. primitivos: Para ayudarte a entender mejor la reactividad, primero vamos a ver la diferencia entre los tipos primitivos y de referencia en JavaScript. Si ya te sientes cómodo con la diferencia, puedes pasar al siguiente video. De no ser así, este video te ayudará a prepararte para los próximos videos. No necesitas teclear esto o seguir junto con esta codificación, pero hay algo que quiero mostrarte para ayudarte a entender mejor qué vamos a mirar hacia fuera, y para ver esto, vamos a pasar a la app.vue y luego bajar a nuestros guiones. De lo que estoy a punto de mostrarte es pasar un objeto sencillo como utilería. Dentro de esta app.vue, vamos a crear una sección de datos. Esto se verá bastante similar a lo que teníamos en los primeros videos. Simplemente vamos a devolver un nuevo objeto con un usuario. Este usuario creará una propiedad de nombre y también, un ID de usuario. Hasta la plantilla, el único componente al que tenemos que pasar los apoyos hacia abajo es este encabezado de la aplicación, así que pasemos nuestros apoyos hacia abajo a esto. El usuario es igual al usuario. Esto, y luego podemos ir a estos componentes de cabecera de la aplicación y típicamente haremos algo como esto. Crearemos una sección de guiones. Configura los apoyos. Si como un objeto o una matriz. Mantendremos esto sencillo y solo pasaremos esto como una matriz. Entonces tal vez aceptaremos estos apoyos dentro de la sección de datos, donde podríamos establecer una propiedad de fecha como el objeto de uso para que sea igual a nuestra prop, que es est.user. Ahora, esto recibe nuestra prop de usuario y almacena esto localmente en los componentes para luego poder modificar esto, tal vez usando un formulario con V-model. Hagamos esto justo en cualquier lugar de nuestras plantillas. Configurar una entrada basada en texto. Podríamos configurar V-model, vinculado a nuestro objeto de usuario. Vamos por el nombre. Haga esto y vemos nuestra entrada y nuestro nombre como se esperaba, pero si volvemos a nuestra app.vue donde tenemos estos datos originales, vamos a generar esto rápidamente. Necesitas llaves dobles colocadas en el usuario. Ahora tenemos nuestros datos en dos ubicaciones. Contamos con los datos originales de nuestra app.vue. Entonces aquí arriba, tenemos los apoyos que se ha copiado dentro de este encabezado de aplicación. Vamos a darle una oportunidad a esto. Podemos modificar nuestro insumo. Añadamos algo aquí dentro de aquí. Vemos en cuanto actualizamos este encabezado de aplicación, que también, los datos dentro de la app.vue parent también se actualizan. Ahora bien, esto puede parecer un poco extraño porque hemos pasado esto como utilería, después hemos tomado una copia, y ahora sólo deberíamos estar modificando los datos en el encabezado de nuestra app. Normalmente, esperaríamos que este comportamiento solo ocurriera si emitiéramos un evento personalizado para cambiar los datos dentro de los padres. Pero esto lo está haciendo de forma automática. Echemos un vistazo a otro ejemplo de vuelta en la app.vue. El uso que el objeto pasará por abajo un nombre de usuario simple, que es solo una cadena simple, y ahora abre el encabezado de la aplicación, también podemos pasar esto hacia abajo como utilería. Nombre de usuario para ser igual a nombre de usuario, y también dar salida a esto dentro de nuestra aplicación. Pasado a la cabecera. Pasa esto a nuestra matriz. Haremos lo mismo que nuestro objeto, pasaremos esto a nuestros datos. El UserNameProp va a ser igual a esto.nombre de usuario. También duplicemos la entrada, el tipo de texto, y esta vez, vamos a V-model al userNameProp. Ahora bien, si tratamos de modificar este nombre de usuario, si no algo, esta vez, no hay cambios en los componentes principales. obstante, si le hacemos esto a nuestro objeto original, vemos que los componentes padre se actualizarán. Esto puede parecer extraño al principio, pero no es una nueva característica de JS. Se trata de algo relacionado con JavaScript y los tipos de datos, que se pueden colocar en dos grupos y a estos grupos se les conoce como tipos primitivos y de objetos. tipos de objetos en JavaScript se consideran funciones, matrices, y un objeto en sí. primitivas son datos que no son un objeto y tipos de cadena, booleano, número, indefinido, símbolo, y biGint. La parte que nos interesa está dentro de este encabezado de aplicación, tendrás los dos apoyos de usuario, y nombre de usuario y luego tomamos suficientes copias de ambos valores. La diferencia es que ambos valores caen en nuestros dos grupos. Este primero es una referencia de objeto y el segundo es un primitivo. Este actual es un tipo de cuerda y aquí es donde radica la diferencia. Cuando copiamos un valor primitivo, tal como lo hacemos, copiaríamos en este nombre de usuario, cada copia tiene su propio valor único. Se puede pensar en esto como dos valores separados, razón por la cual cuando actualizamos nuestra entrada y nuestro nombre de usuario, el original no se ve afectado. Los tipos de objetos, sin embargo, como tenemos con nuestro usuario, se comportarán de manera diferente. Incluso cuando tomamos una copia de un objeto sobre los objetos que están apuntando al mismo valor en la memoria, pesar de que están en diferentes componentes y ubicaciones. Esto también se conoce como tipos de referencia ya que todas las variables se refieren a lo mismo y es por esta razón por la que vemos actualizado el nombre original. Esto nos deja con una pregunta, ¿por qué usar cosas como emitir para proporcionar actualizaciones en los componentes principales? ¿ Por qué no pasar siempre tipos de objetos? Después de todo, esto ahorraría mucho código. Esta es una pregunta razonable y no hay nada que te impida hacer esto si quisieras, sobre todo en un proyecto más pequeño, más fácil de manejar. No obstante, generalmente se recomienda evitar esto si es posible, ya que puede comenzar a confundirse si múltiples fuentes están mutando el mismo objeto. Una opción es hacer un clon profundo del original y seguir utilizando las técnicas como emitir para modificar únicamente los datos dentro del componente principal. También podríamos aplanar o reorganizar nuestros datos para usarlos como objetos o podríamos reestructurar nuestros apoyos para que solo pasen las propiedades del objeto en lugar del objeto completo. Otra opción es también sólo pasar por abajo el objeto como valor inicial al hijo, y luego modificar una propiedad de fecha diferente en el padre. Cualquiera que sea la opción que elijamos, la clave es hacer las actualizaciones más predecibles y asegurar que sabemos qué componentes o qué métodos cambiaron nuestros datos en un momento dado, lugar de adivinar qué referencia a los datos causó las actualizaciones. Si todo esto es completamente nuevo, puede parecer un poco confuso, pero lo clave a recordar es una primitiva, igual que una simple cadena o número, es más como una copia independiente. Pero un tipo de objeto igual a este todavía apuntará al objeto original. Ahora bien, no necesitamos nada de esto en nuestro proyecto, esto es solo para nuestra demostración, por lo que podemos eliminar todos estos, incluir entradas en app.vue No necesitamos estos apoyos y también podemos eliminar nuestras propiedades de datos. Esta comprensión de las referencias de objetos y primitivas será más útil en los próximos videos, donde veremos hacer reactivos nuestros datos de composición. 93. Introducción rápida a los proxies: La reactividad libre se crea mediante el uso de una función ES6 llamada proxies. Vue 2 utiliza una función ES5 llamada Object.DefineProperty, que creó los getters y setters para actualizar nuestros datos. Estas guapos advertenciones, una de estas era ser de una nueva propiedad de datos se agregó después de que se cargó la aplicación, no se volvió automáticamente reactiva. Podríamos cambiar las propiedades de los datos existentes, pero no agregar otras nuevas dinámicamente. Esto se está resolviendo con proxies. Un proxy es como un envoltorio para un objeto. Este wrapper nos permite interceptarlo y realizar cambios antes de realizar una actualización. proxies pueden ser un tema complejo, pero les voy a dar una visión general rápida para que tengan algo de comprensión básica. En esta App.vue componentes, vamos a añadir un ejemplo sencillo a nuestro script. Para interceptar un objeto y hacer algunos cambios, primero necesitamos un objeto con el que trabajar. Fuera de nuestro valor predeterminado de exportación, quiero crear una constante llamada estado, y configurar esto para que sea un objeto, pasando una propiedad de usuario y también una ocupación. Entonces podemos configurar un proxy con nuevo Proxy, P mayúscula, que tomará en los objetivos y el objeto manejador. Esto puede constante llamado proxy. Este objetivo que vemos aquí es el objeto original que queremos proxy. Podemos nombrar esto para que sea estado, igual que nuestro objeto justo arriba, este es el objetivo que queremos interceptar, luego un manejador que es un objeto a configurar o queremos hacerle a este objeto objetivo original. También vamos a configurar esto también, contras handler, y así esto sería un objeto. Después de esto crea un registro de consola, estoy de nuevo, va a dar salida a los contenidos mientras proxy. Recuerda, ese es nuestro punto proxy al objeto original que pasas justo aquí. Este es nuestro estado. Esto ahora nos da acceso a todas estas propiedades como el usuario y también la ocupación. En primer lugar, probemos al usuario, vamos con el navegador, podemos entrar a la consola, abrir esto. Ahora, vemos el nombre de usuario de Chris, la ocupación. Ahí vamos. Como es de esperar aquí, vemos al usuario original en la ocupación original. Dado que este manejador no está configurado para crear ninguna modificación todavía, su manejador sí tiene una serie de funciones que podemos usar. A estos a veces se les llama apoyos. Una de estas funciones es get. Esto se utiliza para obtener uno de nuestros valores de propiedad. Pasa los objetivos y la prop, y luego podemos hacer algunos logs de consola para ver exactamente qué datos tenemos para cada uno de estos. Ve por el objetivo. Entonces éste es para la utilería. Guarda esto y actualiza la consola. En primer lugar, vemos los objetivos, y si abrimos esto, vemos al usuario y también la ocupación. Dado que este objetivo es el objeto original, después de esto, vamos a ver el prop, que es la ocupación, y este prop es la propiedad individual que estamos seleccionando, en nuestro caso, estamos seleccionando la ocupación. Esto apuntará a toda ocupación dentro de la consola. El objetivo es el objeto general del estado. Entonces el prop es la propiedad individual de este objeto. Ahora, tenemos acceso a toda esta información. Ahora podemos interceptar estos valores y hacerles lo que queramos. Por ejemplo, podríamos devolver el prop original, que es ToupperCase. Guardar y actualizar. Vemos la ocupación que ahora es mayúscula. Así es como funciona un proxy. Toma el objetivo o el objeto original, y luego interceptará este objeto y agarrará cualquiera de los valores. Podemos hacer lo que queramos a estos valores. Al lado de gets, también hay un manejador funciones también, un conjunto de este tipo, que se utiliza para establecer los nuevos valores de propiedad. Todo lo que vemos aquí es solo un JavaScript regular. ¿ Cómo funciona todo esto con un Vue.js? Bueno, todo lo que agreguemos a una sección de datos se convierte automáticamente en proxies. Cualquier cosa que agreguemos en una sección de datos dentro de aquí se convertirá automáticamente para ser un proxy del objeto original. Al igual que este get handler justo aquí, Vue también agregará su propia función de manejador, es decir, proxy, que tiene getters y setters para permitir que Vue.js seguimiento y actualización de los datos cada vez que haya un cambio. Es así como funciona para todas las propiedades de datos. Pero, ¿qué pasa con las variables regulares que creamos con la composición? Bueno, para este caso de uso, Vue también proporciona algunos raperos para agregar reactividad. Echaremos un vistazo a estos en los próximos videos. 94. Utilizar Reactive e isReactive: Para poner en marcha las cosas para este video en el archivo app.vue, podemos eliminar toda la demo proxy del último video. Eliminar todo hasta este objeto de fecha. Ahora vamos a echar un vistazo a cómo podemos agregar reactividad a los datos en nuestra API de composición. Tenemos propiedades de datos que hemos estado usando hasta ahora en el objeto options. Por defecto, todo es reactivo. Es decir, si realizamos algún cambio a estos datos, cualquier otra parte de nuestra aplicación que se base en esos datos también se actualizará en V3. Según se mencionó en el último video. Esto se debe a que VGS convertirá estas propiedades en proxies al usar la composición. Ahora estas variables que declaramos no son automáticamente reactivas, al igual que cuando creamos variables con JavaScript regular. Estos son los que has agregado dentro de la función de configuración dentro de tu app home. Al igual que las categorías únicas y todas las cartas. You free es mucho más modular que V versión 2. Primero necesitamos importar el paquete de reactividad, que necesitamos desde la biblioteca de vista. Esto significa que solo importamos la parte que realmente estamos usando en nuestra aplicación. Veamos cómo funciona esto en composición. Dentro de esta app home y también dentro de la función de configuración. Podemos crear un objeto JavaScript para contener algunas propiedades de datos. Llamemos a estos datos, y establecemos esto igual a un objeto. Este nombre de datos es completamente diferente y no está relacionado con una propiedad de fechas regulares. Dentro de aquí podemos agregar algunas propiedades a esto e iremos por nombre y también una Ocupación. Ahora al minuto no tenemos nada para actualizar este objeto de datos. Para simular una actualización y echar un vistazo a esto, vamos a crear una función SetTimeout justo debajo. Queremos que esta función se ejecute cada tres segundos, para que puedas pasar en 3,000 milisegundos. Después vamos a querer hacer para acceder al objeto de datos, y luego cambió los datos dentro, como la ocupación, o acceder a los datos, la ocupación. Podemos igualar esto a jubilados. Se comprueba si esto está funcionando. Podemos devolver nuestros objetos de datos de nuestra composición. Esto ahora significa que si nos desplazamos hasta la plantilla, ahora podemos usar esto dentro de nuestro código. Dado que esto es un ejemplo, podemos colocar esto en cualquier lugar. Eso es acceder a nuestros datos, Ocupación de puntos, Refresca el navegador. Vemos el texto de un desarrollador web. Si esperamos tres segundos, no vemos ninguna actualización de este código. A pesar de que deberíamos estar cambiando esto a retirado después de tres segundos. A pesar de que estamos cambiando esto después de tres segundos, solo con JavaScript regular, la interfaz de usuario no se actualizará. Para esto, necesitamos decirle a VGS que queremos que estos datos sean reactivos. Esta primera técnica a la que vamos a echar un vistazo para hacer esto es importando, el paquete reactivo. En primer lugar, como mencioné antes, la vista es modular, por lo que necesitamos importar esto desde la biblioteca de vistas. A esto se le llama reactivo. Podemos entonces usar este paquete reactivo como envoltorio para todos nuestros datos. Vamos a recortar este objeto en reactivo. Entonces dentro podemos pegar en nuestro objeto, refrescar navegador. Ahora después de tres segundos, nuestra interfaz de usuario ahora se actualiza con estos nuevos datos mediante el uso de este envoltorio reactivo. Cualquier dato que esté dentro del cual cambie o se actualice, entonces notificará cualquier otra parte de la aplicación que se base en esto. En nuestro caso, la Ocupación. Esto sucede porque view tomará una copia reactiva de este objeto original y luego lo envuelve en A proxy. También se utiliza reactivo detrás de bambalinas para convertir objetos cuando usamos las propiedades de datos con la API de opciones. Si quería realizar una comprobación para ver si un objeto era reactivo. También tenemos acceso a Es reactivo a. Esto también se puede importar desde la biblioteca de vistas. Es reactivo ahora se puede utilizar para comprobar si un objeto es un objeto regular, JavaScript, o si se trata de un proxy reactivo. Ves este crea un registro de consola, el acceso es reactivo. Entonces podemos pasar nuestros datos, abrir las herramientas de desarrollador a la consola. Podemos ver que esto es cierto. No obstante, aunque dentro de nuestra configuración, también tenemos acceso a nuestras tarjetas las cuales utilizan un objeto regular. En cambio, si colocamos en todas las tarjetas, actualizamos, ahora vemos el resultado de false ya que todas las tarjetas son un objeto JavaScript regular en lugar de un proxy reactivo. Es así como podemos usar la reactiva. View también proporciona una función de nunca reactividad llamada Raf, que ahora echaremos un vistazo. 95. Añadir reactividad con un ref: Los objetos reactivos, al igual que éste, son ideales si tenemos múltiples propiedades, igual que lo hacemos aquí, sobre todo si también están relacionados y queremos agruparlos. Pero, ¿qué pasa con valores más simples como cadenas o números? Si solo tuviéramos un solo valor como un primitivo, digamos un usuario, que era igual a una cadena, también podríamos colocar nuestra propiedad de usuario en un objeto, así como este, y luego usar reactivo, o para un solo valores como este, puede ser más conveniente usar una ref. Ahora, para ver un ref en acción, también necesitamos importar esto desde la biblioteca de vistas, y luego al igual que reactivo arriba, también usamos ref como envoltorio, por lo que cuando podemos cortar esto y envolver esto dentro de nuestra ref. Para usar esto en nuestra plantilla, también necesitamos devolver esto desde la configuración, y vamos a agregar esto a nuestra plantilla, y configurar nuestro usuario para que sea igual a este usuario que acabamos de devolver. Está bien. Por lo que ahora vemos a nuestro usuario dentro del navegador, pero también necesitamos probar la reactividad también. Podemos hacer esto dentro de nuestro tiempo de espera. En lugar de actualizar nuestros datos, ahora podemos actualizar el nombre de usuario. Entonces esto y refresca el navegador. Vemos un error que estamos intentando actualizar al usuario, pero esto es una constante. Entonces esto es lo suficientemente justo. Podemos cambiar esto para dejarlo y ver qué pasa, y después de tres segundos, no vemos ninguna actualización a este nombre de usuario. Ahora bien, esto puede parecer extraño, pero hay una razón por la que esto está sucediendo. Detrás de escena, nuestro valor de usuario, que tenemos aquí, también se está convirtiendo en un objeto reactivo, y para acceder al valor de nuestro objeto, nos da una propiedad llamada valor, y necesitamos hacer referencia a esto cada vez que quieren acceder a nuestro usuario. Por lo que para acceder al nombre dentro de aquí, necesitamos acceder user.value. Guarda y actualiza el navegador. Tres segundos después, nuestro usuario ya está actualizado. Esta propiedad de valor siempre necesita ser utilizada cuando se trabaja dentro de la sección de JavaScript. No obstante, arriba en la plantilla, justo aquí, como podemos ver, no necesitamos usarlo dentro de la plantilla. Al acceder a un valor ref dentro de la plantilla, el valor se desenvuelve automáticamente para nosotros. Ahora, con ref y reactivo, esto ahora nos deja con dos opciones a la hora de hacer que los valores sean reactivos, y de cualquier manera, terminamos con un objeto reactivo. El uso exacto para cualquiera de ellos es bastante flexible, tanto como regla general. Utilizo reactivo cuando quiero agrupar múltiples propiedades o valores en un objeto como la sintaxis, y luego uso ref, así, y vamos a un único valor independiente como una cadena, un número, o incluso un solo objeto también. Pero de nuevo, el caso de uso de ambos es bastante flexible y nos toca a nosotros como desarrollador cuál preferimos usar en nuestro proyecto. 96. Desestructuración y toRefs: Tenemos objetos reactivos igual que tenemos aquí. A veces es posible que desee sacar un solo valor de este objeto. Por ejemplo, si tuviera un correo electrónico, bueno, este caso de uso y sobre todo si necesitamos acceder a múltiples valores, menudo podemos hacer uso de la destrucción de JavaScript. Al igual que esto, podríamos configurar una constante llamada correo electrónico y extraer esto de nuestro objeto de datos. Esto ahora extraerá la propiedad email y guardará esto en la variable email. También podríamos acceder a múltiples valores si también quisiéramos el nombre así como este, podríamos acceder al correo electrónico y también a estas variables de nombre también. Esto es bastante común y esto es simplemente JavaScript regular. Pero vamos a ver qué sucede cuando tratamos de renderizar esto a nuestra plantilla. En primer lugar, necesitamos devolver esto desde nuestro objeto, y hasta nuestra plantilla. En primer lugar, cambiemos esto para que sea nuestro objeto de datos completos, y después de esto, nuestro correo electrónico. De nuevo, podemos desplazarnos hacia abajo hasta nuestro tiempo de espera establecido y simular una actualización cambiando nuestros datos. Lo que vamos a hacer aquí es acceder a nuestro objeto de datos y actualizar la propiedad de correo electrónico. Puede ser simplemente cualquier cuerda. Pasar al navegador y refrescar. Tres segundos después, ahora se ha actualizado nuestro objeto de datos original que tenemos aquí . No obstante, nuestra copia que se almacena dentro de esta propiedad de correo electrónico sigue siendo el valor original. Esto sucede porque cuando desestructuramos valores de un objeto como este , perderá toda su reactividad. Significa que cualquier actualización que realicemos al objeto original no será transmitida a esta variable. Si aún quisiéramos hacer uso de la estructuración así, aún nos aferraremos a la reactividad. Podemos envolver este objeto de datos con algo llamado ToReFs. Abra la importación, vamos a importar esto, y luego use esto como envoltorio a nuestros datos. Probemos esto, guardemos esto y actualicemos el navegador. Después de tres segundos, se actualiza nuestro correo electrónico sobre el objeto de datos, y también la copia también. Lo que estamos haciendo aquí con ToReFs es convertir efectivamente todas estas propiedades en nuestro objeto para hacer uso de ref. Esto significará que podemos mantener la reactividad por lo que si alguno de estos datos cambia, también se actualizará nuestra copia. 97. Solo lectura: En ocasiones puede que tengamos que esperar para controlar exactamente qué componentes pueden actualizar nuestros datos. Si tenemos un objeto reactivo el cual se compartió entre múltiples componentes, posible que deseemos que todos lean los datos o solo permitan que algunos de ellos los actualicen. Para ello, tenemos disponible readonly, que toma un objeto. Este puede ser un objeto JavaScript regular o uno reactivo, que utiliza ya sea ref o reactivo, y luego devuelve un proxy de solo lectura al original. Nuevamente, necesitamos importar esto desde la biblioteca vue. En el AppHome, en nuestra declaración de importación, pasar en readonly. Entonces lo que vamos a hacer es tomar una copia de solo lectura de nuestros datos, almacenar esto en una constante llamada ReadOnlyData. Entonces al igual que hemos hecho con reactivo y con IsReactive, entonces usamos esto como envoltorio, pasando readonly, y luego queremos envolver nuestros datos desde arriba. Ahora tenemos estos nuevos datos, los cuales podemos regresar de nuestra configuración y luego podemos dar salida a este bucle en la parte superior. Limpiemos esto. En primer lugar, teclearemos readonly, y luego generaremos nuestro objeto readonly en la propiedad de correo electrónico. También el usuario, para que podamos probar el objeto original, sigue funcionando. Podemos dar salida a los data.email. Abajo a nuestro setTimeout donde simulamos una actualización. Dentro de aquí seguimos actualizando el objeto reactivo original y sin duda nueva dirección de correo electrónico. Entonces vayamos al navegador y actualicemos y veamos qué pasa. Después de tres segundos, tanto la versión readonly como la original han sido actualizadas. Por lo que esto significa que la copia sigue siendo reactiva. Veamos qué sucede si tratamos de actualizar la copia en el Timeout en lugar de los datos. Cambiaremos esto para que sea ReadOnlyData. Guarda esto y refresca. Tres segundos después, no pasa nada. Esta actualización fallará ahora porque la copia es de solo lectura, y esto nos permite proteger cualquier dato que no queremos cambiar en nuestros componentes, o datos que tal vez desee controlar más de cerca. 98. Computado: Las propiedades computadas también están disponibles en composición y ahora podemos hacer uso de ellas para filtrar nuestras tarjetas por la categoría seleccionada. Encima en los componentes Apphome.vue, arriba en la plantilla, tenemos un enlace que enlaza con nuestra categoría y luego hacia adelante slash nuestros params. De hecho, esto se puede acortar y ver tanto el mismo nombre como también sobre en la página de índice de nuestro router. Ya hemos configurado una ruta para manejar esto, luego mostrar nuestro componente Categoría. Ahora está dentro de esta Categoría donde ahora podemos manejar, filtrando estas tarjetas por la categoría clicada en. Justo debajo de la plantilla, crearemos una sección de script, y luego crearemos una sección de configuración que va a manejar todo nuestro código de composición. Necesitamos acceder a todas las tarjetas disponibles para poder filtrar. También podemos hacer esto reactivo también importando ref. En primer lugar, importaremos todas nuestras tarjetas y las importaremos desde la slash de puntos puntos y a nuestros datos. Dado que esto será reactivo, también importaremos el ref desde la biblioteca vue hasta la configuración. Ahora podemos importar nuestras tarjetas en vue JS, almacenar esto dentro de una constante llamada AllCards, como en la ref como envoltorio, y envolveremos nuestras tarjetas. Al igual que medida temporal, vamos a montar una constante llamada categoría. Esto se va a almacenar en la categoría los cuales utilizan los clics en como viajes, Halloween, o cumpleaños. Pero pronto obtendremos esto de los parámetros de URL. Ahora, pondremos esto para que sea todo. Entonces podemos configurar una propiedad computada que vigila esta categoría y cuando cambie, luego devolverá las tarjetas filtradas hacia abajo. Nosotros configuramos esto como una variable o una constante y una vez que llame a mi en CardsByCategory, y luego podemos asignar esto para que sea un valor computado. Dentro de aquí pasamos en una función que se ejecutará cada vez que cambien los datos. Dado que ahora estamos usando computed, esto también necesita ser importado de la biblioteca vue. Ahora, dentro de aquí podemos devolver uno de dos valores. En primer lugar, si la categoría es igual a todos, todo lo que queremos hacer es devolver todas las tarjetas disponibles. No queremos realizar ningún filtrado. Primero comprobaremos si la categoría es igual a todos. Si lo es, entonces devolveremos los datos, que son las AllCards. Dado que se trata de una referencia reactiva, también necesitamos devolver el valor. Si esto no es igual a todos, esto significa que hemos hecho clic en una categoría y tenemos algunos filtros que necesitamos hacer. En su lugar, devolveremos AllCards.Value, llame al método de filtro JavaScript. Esto luego correrá a través de todas nuestras tarjetas y luego ejecutaremos una función para cada una. Esto sólo devolverá la versión filtrada de todas las tarjetas. Ahora, necesitamos pasar en la tarjeta individual y realizar una prueba para cada una. El test que vamos a sumar es correr a través de la tarjeta, seleccionar las categorías, y luego queremos comprobar si la categoría incluye cierto valor. El rubro contra el que queremos comprobar es esta categoría justo aquí. Sólo para recapitular, estamos recorriendo todas nuestras tarjetas y luego vamos a devolver una versión filtrada. El modo en que filtramos es seleccionando cada tarjeta individual recorriendo las categorías y comprobando si incluye la categoría seleccionada desde arriba. Justo antes de nuestro cierre, ponle un corsé. Entonces le devolveremos esto. Podemos usar esto en nuestra plantilla, hasta la parte superior. Dentro del encabezado Categoría, lo que vamos a hacer es seleccionar el router o la ruta actual. Entonces cuando hacemos clic en cualquiera de estos, podemos entonces tomar en categoría de barras hacia adelante y luego podemos acceder a los params individuales. Selecciona los params y el que nos interesa es la categoría. Asegúrese de que esto se deletree correctamente. Ver aniversario, esposo, esposa. Entonces debajo de esto podemos comprobar nuestra propiedad de computadora está funcionando dando salida a las CardsByCategory. En primer lugar, haremos clic en cualquiera de estos enlaces, veremos una lista de todas nuestras tarjetas. Ahora, no vemos la versión filtrada justo aquí porque hemos establecido la categoría para que sea todo. Cambiamos esto para que sea cualquier otro valor como cumpleaños. Ahora sólo deberíamos ver tarjetas que han sido filtradas hacia abajo por la categoría de cumpleaños. Podemos probar uno más. Es por esposa, refresca, y podemos ver la categoría para tarjeta número 1. Incluye la categoría de esposa. Ahora bien, sabemos que esto está funcionando. Pasemos ahora a la plantilla. Pondré esto en una lista desordenada, una clase para el CSS que va a ser grid y esto se llama wrapper. Después un elemento de lista que incluirá el bucle for, que será tarjeta en CardsByCategory, una clave. Cada una de nuestras tarjetas tiene acceso a una identificación única. Esta es una clave ideal para usar. Entre este ítem de lista, también podemos permitir que el usuario haga clic en esta tarjeta y luego la reenviamos a la pantalla de edición. Esto necesitará un enlace de enrutador. Ahora, lo mantendremos simple y daremos salida a la tarjeta.name. También necesita el a propiedad. Simplemente vincularemos esto a la página de inicio. Ahorra en el navegador, haz clic en cualquiera de estos, y luego lo estamos llevando de vuelta a la página de inicio. Ahora, todo esto funciona y un poco más adelante volveremos a esto y vincularemos estas tarjetas a la pantalla de edición. 99. Funciones de composición independientes: Dentro de este archivo category.view, este código de composición que hemos escrito hasta ahora solo resuelve una de las preocupaciones, que es que ahora podemos agrupar código relacionado. Por ejemplo, tenemos esta variable de categoría, y tenemos esta organizada y colocada junto a nuestra sección computada, que se basa en esta variable. Con opciones API por ejemplo, esta categoría sería una propiedad de datos. Entonces tal vez tengamos esta sección computada mucho más abajo en nuestro componente. Otro beneficio que la composición pretende resolver es la reutilización y organización. A pesar de que aún no hemos escrito mucho código para este proyecto, ya hemos visto algunos duplicados. Por ejemplo, aquí en la categoría estamos importando tarjetas y luego asignándolas a esta constante. Por encima en la app home estamos importando las tarjetas y luego un poco más abajo, estamos haciendo exactamente lo mismo justo aquí. Para ayudar con esto, podemos extraer nuestro código de composición en funciones independientes. Estos también se pueden colocar en sus propios archivos separados. Para ver esto pasaría a la barra lateral, a la fuente, pues crearemos una nueva carpeta llamada composables. Este nombre de carpeta depende totalmente de nosotros, pero es común guardar este nombre composables. Entonces dentro vamos a crear un nuevo archivo JavaScript. Queremos que el nombre del archivo sea descriptivo, y nuevamente, el nombre depende totalmente de nosotros. Pero la convención de nomenclatura común hasta ahora parece ser tener el prefijo de uso, por lo que tendremos nombres para nuestros proyectos como UseCards y también UseCategories. Este será para UseCards, y este es un archivos JavaScript regulares, por lo que usamos la extensión the.js. Dentro de este archivo, vamos a exportar función predeterminada. Yo quiero dar el mismo nombre que nuestro archivo, que es UseCards. Esto ahora significa que podemos extraer todo el código de composición de cualquiera de nuestras secciones de configuración y colocarlo en esta función. Podemos entonces importarlo y tener acceso a todos los datos y todas las funciones que colocamos dentro. Por ahora vamos a seleccionar AllCards, vamos a copiar esto y luego pegarlo en nuestra función. También necesitamos tener acceso a nuestros datos y también importar el ref de la biblioteca vue también. Al igual que aquí, traeremos estos dos lugares de importación fuera de la función y no necesitamos computados. No vamos a traer ninguna de las secciones relacionadas con la categoría porque éstas van a ir a su propio composable separado. Todo este archivo se encarga de hacer es buscar las tarjetas iniciales de nuestro archivo de datos, y luego al igual que cuando usamos esto en nuestros componentes, vamos a devolver un objeto. Esto va a dar a nuestros componentes acceso a cualquiera de los datos, cualquiera de las variables, cualquiera de los métodos que tenemos en esta función. Esto es bastante sencillo, todo lo que tenemos son AllCards, por lo que podemos devolver esto. Por el momento este archivo no está haciendo nada en realidad y solo está sentado ahí y podemos importarlo cuando lo necesitemos. Pero a continuación, vamos a crear un nuevo archivo, que es para el código relacionado con nuestra categoría. Por lo tanto, le daremos a esto un nombre descriptivo llamado UseCategory, con la extensión js. Configura nuestro valor predeterminado de exportación con el mismo nombre que el archivo. Esto también necesita devolver algo. Para empezar de nuevo en la app home, este componente está consiguiendo una lista de todas nuestras categorías que justo aquí. Después en la categoría estamos consiguiendo las tarjetas individuales para esta categoría seleccionada. Tendría sentido extraer todo el código relacionado con esta categoría de ambos archivos y luego colocarlo en nuestro nuevo composable. Me dirijo a la UseCategory y para empezar, vamos a necesitar acceso a todas nuestras tarjetas que están dentro de este UseCards. Recuerda que hemos exportado esto y devolverlo de nuevo de nuestro objeto. Ahora podemos importar esto a nuestro composable, que era UseCards. La ruta del archivo es. /UseCards, y esta es una de las cosas buenas de los composables. Podemos reutilizar datos entre cada uno de nuestros archivos. Aquí hemos importado efectivamente la función completa de UseCards. Ahora queremos sacar la variable AllCards. Ahora vamos a almacenar esto en una constante, esto es AllCards, y luego vamos a extraer esto de nuestra función UseCards. Ahora podemos empezar a traer todo nuestro código relacionado con la categoría a menos que vayamos en la app home. Ya tenemos nuestras secciones AllCards, así que agarra las UniqueCategories y también el bucle justo debajo. Podemos cortar esto luego colocarlo justo debajo de AllCards. Entonces también necesitamos devolver un UniqueCategories. Con esto ahora extraído en su propio archivo, podemos volver a la aplicación home o cualquier otro componente que necesite esta información e importar esta para usarla. Goodness app home tiene bastante código de ejemplo, lo que podemos eliminar todo esto de la función de configuración. No necesitamos AllCards. Voy a quitar por ahora nuestras declaraciones de retorno. No necesitamos los datos, por lo que eliminamos todas estas importaciones. El importacion que sí necesitamos ahora aunque es nuestro UseCategory. Esto es importando nuestra función UseCategory, y la ruta del archivo fue la fuente, que es el símbolo at. Entraremos en la carpeta componible y luego en UseCategory, y nos aseguraremos de que esto se deletree correctamente, UseCategory. Esta función UseCategory está exportando nuestras UniqueCategories, y ahora podemos entrar en nuestra sección de configuración e instalar dentro de una constante. Eso es extraer UniqueCategories de esta función UseCategory. Poner esto disponible en nuestra plantilla, también necesitamos devolver esto y abrir nuestra plantilla. Recuerda, haremos uso de este UniqueCategories dentro de este bucle v-for. Probemos esto, actualicemos, ahora actualmente no vemos nada dentro del navegador, así que echemos un vistazo dentro de las herramientas de desarrollador a la consola. Vemos que Allcards.foreach no es una función. Ahora esto está sucediendo en nuestro archivo useCategory.js. Aquí estamos tratando de recorrer AllCards, y esto se lanza en flecha porque cuando escribimos por primera vez la sección, constante AllCards no estaba haciendo uso de refs. Pero aquí dentro de AllCards. Si pasamos a la sección donde se crea esto, abrimos esto en una ref, esto ahora significa que necesitamos acceder a AllCards.Value, y esto ahora debería solucionar el problema. Todavía vemos una flecha no puede leer propiedad, correo electrónico y esto probablemente sea de la plantilla. Sin embargo, también podemos eliminar esto, sólo probar unos más, y ahora hay todas nuestras categorías de nuevo en la pantalla. Pero esta vez a partir de una función de composición. 100. Mini desafío: desplazarse por las tarjetas por categoría: A pesar de que todo este nuevo código puede parecer mucho para tomar en cuenta, pero como con la mayoría de las cosas, sólo se necesita un poco de práctica. Esto también fue confuso para mí al principio también cuando empecé a aprender todo este nuevo código de composición. Pero para el final de este proyecto, vamos a conseguir mucha más práctica empezando ahora mismo, donde también vamos a pasar por encima del código de esta categoría.vue. Lo que me gustaría que hicieran es mirar esta sección de configuración, vamos a eliminar todo el código relacionado con la categoría y trasladarlo a nuestro composable UseCategory. El código relacionado que necesitamos es esta constante. También necesitaremos las tarjetas por categoría. También necesitarás importar la sección computada y mover todo este código, igual que hicimos en el último video con AppHome. Entonces necesitas limpiar este componente para eliminar cualquier código no utilizado, e importar también nuestro archivo de composición, igual que hicimos en el último video. Entonces dale una oportunidad a esto, y si te atascas, correré a través de esto en el siguiente video. 101. Desplazarse por las tarjetas por categoría: Ahora recorremos moviéndonos sobre el código relacionado de la categoría de esta categoría doTVue. Si estás seguro de que los tuyos están funcionando correctamente y lo completaste con éxito en el último video, puedes saltarte este video. Para empezar, necesitamos esta constante de categoría y también nuestra sección computada también. Corta esto, ve a la UseCategory, pega esto en. Entonces también necesitamos devolver el CardsByCategory, así que voy a usar esto en más archivos. Esto también está haciendo uso de computado, por lo que también necesitamos importar esto, solo biblioteca Vue. Guarda este archivo, y vuelve a la categoría, ahora necesitamos limpiar todo el código no utilizado. No necesitamos las AllCards, no necesitamos los datos, también podemos quitar nuestra importación de biblioteca Vue y reemplazarla por nuestra UseCategory. El símbolo @ para la carpeta fuente, composables, UseCategory abajo a través de la configuración. Todo esto dentro de una constante, y recuerda más en la UseCategory ahora podemos regresar en nuestras CardsByCategory, por lo que podemos importar esto dentro de las llaves. Estamos importando perdido de nuestra función que fue UseCategory. Todavía estamos devolviendo esta CardsByCategory y usando esto arriba en una plantilla. Guardemos este archivo y probemos esto. Al hacer clic a través de cualquiera de estas categorías, vemos que el encabezado de la categoría está cambiando. Actualmente, todavía sólo tenemos las mismas tarjetas para cada una, porque hemos establecido esta como la categoría en nuestro composable. Pero esto es algo que abordaremos en el siguiente video, donde echamos un vistazo a cómo podemos acceder a un router dentro de estos archivos. 102. Acceder al enrutador: Por el momento, cuando hacemos clic en alguno de estos enlaces justo aquí, nos llevan a la página de la categoría, pero aún vemos las mismas tarjetas para cada uno. Por lo que esta categoría infantil seguirá mostrando aniversario uno. Ve a viajar, veremos las mismas tarjetas. Esto se debe a que sobre en nuestro uso category.Js, donde se establece la categoría, si se trata de valor fijo, esta categoría fija significa que los valores siempre son los mismos independientemente de la categoría en la que haga clic. En este video sin embargo, vamos a reemplazar esto y hacerlo más dinámico accediendo a él, a los parámetros de URL. Por lo que actualmente, tenemos este parámetro de viaje. Hacemos click en cualquiera de estos. Estos siempre aparecerán dentro de la URL. Entonces lo que vamos a hacer ahora es agarrar este parámetro y luego proporcionar esto a nuestra sección computada. Donde vamos a hacer esto es accediendo al router sobre en la category.vue. Entonces cada vez que llamamos causado por categoría, pasaremos un parámetro a esta función, y luego podremos usar esto dentro de aquí, en lugar de este valor codificado duro. Entonces vamos a trabajar con pasar nuestro router a esta función. Con la API de Opciones, podríamos hacer algo como esto. Podríamos acceder a esto.router.params, y esto funcionará perfectamente definido con la API de Opciones. Al usar la composición sin embargo, esta palabra clave no está disponible. Por lo que necesitamos acceder al router de una manera diferente. Para esto, el paquete de vista relativo nos permite importar funciones desde el paquete del router. Podemos acceder a UserOuter completamente completo objeto router o UserOute para la información actual del router. En primer lugar, necesitamos importar esto desde el paquete del router de vista. Entonces el primero fue UserOute, y el segundo fue UserOuter, y esto es del paquete VueRouter. Para acceder a ambos en una configuración, entonces los instalaremos dentro de consonantes. Entonces el primero es el router, que es igual a UserOuter. Esta es una función por lo que necesita llamarla. El segundo es la ruta individual y la mayor parte de eso es igual a UserOute. Estas dos constantes ahora funcionarán igual que antes cuando se accede a $ Router para el paquete completo del router y el $ Route, que es la ruta actual en la que estamos, por lo tanto, todavía tenemos acceso a todas estas mismas cosas como router.push, donde podemos navegar por una nueva página. Bueno, aquí es donde sólo necesitamos acceso a la ruta actual ya que queremos, seleccionar los parámetros. Por lo que podemos quitar el router y también la importación también, y podemos comprobar que tenemos toda la información que necesitamos con console.log. Pase en la ruta.params. Actualiza y abre las herramientas de desarrollador, en la consola. Ten el cumpleaños, que vemos justo aquí, y también la boda también. Entonces ahora podemos hacer uso de esto con el console.log, y ahora podemos pasar esto a nuestra función cuando la llamamos. Por lo que la rute.params, y queremos acceder al parámetro de categoría. Ahora, vamos a usar la categoría donde ahora podemos pasar esto a nuestra función. Ya que hemos nombrado esta categoría, también podemos eliminar nuestra constante de categoría de abajo, y ahora en lugar de esta sección computada, usaremos la categoría que se pasa a esta función. Vamos a probar esto. Pasado al navegador. Vayamos por esposa. Ya veremos la que teníamos justo antes. Celebrar. Todos. Viajes. Por lo que estos están todos funcionando actualmente, pero si hacemos clic en nuestros enlaces gratuitos sobre la parte superior, haga clic a través de todos estos y nuestras tarjetas se quedan exactamente iguales. Por lo que actualmente, estos tres enlaces de navegación no funcionan, pero esto es algo que vamos a arreglar muy pronto. 103. Watch y WatchEffect: Descubrimos en el último video que al hacer clic en cualquiera de estos enlaces de categoría, todo esto funciona bien y filtra nuestras tarjetas por la categoría seleccionada. No obstante, si hacemos clic en alguno de estos enlaces de navegación, el primero inicialmente se cargará correctamente desde la página principal, pero si tratamos de cambiar entre estos enlaces de categoría, no vemos más actualizaciones. Esto sucede por el router de vista, y la razón es porque cuando estamos en la página de inicio, así como así, y hacemos clic a través de cualquiera de estas categorías, estamos cambiando del componente de casa al componente de categoría. Este cambio de ruta o cambio de componente hace que nuestro componente vuelva a renderizar, por lo tanto, una vez más, llamando a nuestra función de categoría. Pero cuando ya estamos en el componente de categoría así y cambiamos entre estos enlaces de navegación gratis, nos quedamos en este componente de categoría, pero solo tienes que cambiar ahora los params. Cuando hacemos algo como esto, las rutas de vista no volverán a renderizar los componentes porque todavía estamos en este componente de categoría, y por razones de rendimiento, no volverá a renderizar estos componentes solo por un cambio de parámetros. Dado que el router de vista no volverá a renderizar estos componentes para un cambio de parámetros, ahora necesitamos tener cuidado con esto manualmente. Ya hemos mirado a un observador durante este curso, y se pueden utilizar con composición también junto a una nueva versión llamada WatchEffect de en la categoría de uso composable. Dentro de esta función recibiremos nuevo nombre de categoría de los parámetros del router, y luego dentro de nuestra sección computada, enviamos de vuelta las tarjetas basadas en esta categoría, y pasamos esta categoría a nuestro archivo justo aquí. Dado que este componente category.vue no se está renderizando cuando hacemos clic en estos enlaces de navegación, lo que vamos a hacer es eliminar esta sección justo aquí y usar un router directamente dentro de nuestro composable, esta nos permitirá entonces colocar un vigilante en este router o más específicamente, en los parámetros que necesitamos luego activar las actualizaciones una vez que haya un cambio en estos parámetros. Para ello, funciona igual que miramos el interior de los componentes, primero necesitamos importar UserOute desde el vue.router, y luego dentro de la función lo guardaremos dentro de una constante llamada ruta. Ya que ahora accedemos directamente a este router, también podemos eliminar esto de nuestra category.vue. Voy a quitar esto, lo pasaremos a nuestra función, también podemos quitar la importación del router y también la constante también. Ya que ya no publicamos en esto, también podemos quitar esto desde dentro de aquí. Pero recuerda que esta sección computada sigue esperando una categoría, por lo que ahora podemos crear una localmente para reemplazar la que acabamos quitar, por lo que const categoría. Esto también será igual a rute.parameter.category, pero esta vez vamos a hacer que esto sea reactivo pasando esto dentro de ref, y tirar de esto justo arriba. Dado que esta categoría es ahora una ref, también necesitamos acceder al valor de punto y también en la sección incluye también. Algo que debemos señalar aquí es esta categoría, solo se va a firmar con el valor inicial cuando esto se cargue. Después necesitamos vigilar manualmente cualquier cambio en estos parámetros y luego actualizar este valor. Para demostrarlo, ahora podemos registrar esto en la consola justo debajo, así que registra la category.value, abre las herramientas de desarrollador, actualiza la página, así vemos el aniversario. Como se mencionó anteriormente, si vamos a la página principal y luego hacemos clic en una categoría, vemos la correcta justo aquí. Y si cambiamos entre estos tres enlaces en la parte superior, vemos que la categoría no está actualizada. Lo que ahora tenemos que hacer es tener cuidado con el cambio a estos parámetros, obtener la categoría, y como esto es reactivo esto luego volverá a ejecutar nuestra sección computada y luego actualizar nuestros componentes. Para esto vamos a importar reloj de la vue-biblioteca para luego pasar esto dentro de aquí. Cuando usamos al vigilante, estamos componiendo en cualquier dato que queremos ver, como un ref o una propiedad reactiva. Aquí si pasamos en la categoría, en esta ocasión esto no sería de utilidad, sabemos que esto no va a funcionar porque como acabamos de revisar en la consola, esta categoría no se va a actualizar cuando haya un cambio de parámetros. En su lugar podemos reemplazar esto por una función getter, que va a devolver el valor de nuestro router directamente, acceder a la route.params.category y luego separarlo por una coma, atendemos una función call back, que es va a correr cuando hay un cambio. Está dentro de esta función call back donde queremos actualizar el valor de la categoría con los nuevos parámetros del router, por lo que category.value va a ser igual a route.params.category. Probemos esto al navegador, y gracias a nuestro vigilante, estos enlaces de navegación ahora funcionarán todos. Este vigilante que acabamos de utilizar es el mismo que cuando miramos antes con la API de opciones, pero también hay otro tipo, que se llama WatchEffect. Con esto también necesitamos importar esto. WatchEffect es un poco más simple que el reloj, y se ve así. Dentro de los corchetes, entonces podemos pasar en cualquier función que queramos ejecutar, así que así como una demostración, podríamos hacer un registro de consola, mirar el valor de nuestra categoría. Esta función dentro de aquí se ejecutará cada vez que cambien los datos dentro. En nuestro caso, cada vez que cambia el valor de la categoría, deberíamos ver un nuevo registro de consola, en la consola, hacer clic derecho e inspeccionar, refrescar la página, y ahora solo nos ruta de cumpleaños, lo que vemos esto corrido por aniversario Navidad, y este WatchEffect ahora se vuelve a ejecutar para cada cambio de parámetro. WatchEffect es un poco como una propiedad computada, pasamos en una función que se llama una vez que cualquier propiedad reactiva dentro cambia, pero la diferencia es que también puede realizar efectos secundarios también. Entonces, en lugar de computar que solo puede devolver un valor, watchEffect por otro lado puede actualizar directamente nuestros datos o estado. También hay algunas diferencias entre reloj y watchEffect también. Observe cómo cuando recargamos el navegador, vemos la categoría inmediatamente. Si volvemos a la consola y actualizamos, vemos que se ha corrido un registro de consola inmediato a pesar de que no hemos hecho clic en ninguno de estos enlaces. Esto se debe a que WatchEffect se ejecutará tanto inmediato como también cuando los datos en el interior cambien. No obstante, el reloj se considera perezoso y solo se ejecutará con un cambio de datos. Otra diferencia es que el reloj también nos permitirá acceder a los valores anterior y siguiente también, y los pasamos a esta función de devolución de llamada. Si quisiéramos acceder a ellos, podríamos pasarlos con nombres de variables entonces tenemos acceso a éstos dentro de nuestra función. Actualmente no necesitamos acceso a WatchEffect para nuestros proyectos, así que voy a eliminar esto, y también necesitaremos quitar la importación demasiado solo para recapitular tanto el reloj como también el WatchEffect, volveremos a ejecutar cuando los datos observados cambian. Como acabamos de ver, WatchEffect también se ejecutará inmediato aunque no haya ningún cambio de datos, y ya lo hemos visto antes con el registro de la consola. Si necesitamos acceder a los valores anterior y siguiente, podemos hacerlo pasándolos a la función de devolución de llamada de los vigilantes y utilizarlos igual que hicimos con la API de opciones. 104. Utilizar junto a la API de opciones: Ya sabemos que la composición no está destinada a reemplazar por completo las opciones API. Pero, ¿y si quisieras usar ambos al mismo tiempo? Dentro de nuestros componentes de la app home dot view, tenemos esta función de configuración. Todavía podemos analizar en secciones junto a nuestra función de configuración desde la API de opciones. Tal como si quisiéramos acceder a algún dato, igual que lo hemos hecho en proyectos anteriores. Puede ser beneficioso usar tanto al transitar o refactorizar de las opciones a la composición a medida que su aplicación crece más grande, o incluso mover gradualmente una aplicación de la vista 2 a la vista 3. Algo que necesitamos tener cuidado aunque al hacer esto es que los datos no son transferibles en ambos sentidos. [ inaudible] podemos agregar un nombre tanto a los datos como a la configuración. En primer lugar, una propiedad de nombre para los datos y luego crear una constante dentro de la configuración. También necesitamos devolver esto, para que podamos usar esto dentro de la plantilla [inaudible]. Ahora empecemos el valor de nuestros datos correctamente. Esto puede ir a cualquier parte. Analizar el nombre que es igual a nuestra propiedad de datos de nombre. Vea esto, necesitamos ir al enlace de inicio, ese es nuestro nombre justo en la parte inferior como se esperaba. Pero, ¿qué pasa con acceder a nuestro código de composición dentro de nuestras propiedades de datos? Si quisiéramos acceder a su nombre completo aquí dentro, podemos estar tentados a hacer algo como esto. Podríamos acceder a este punto nombre completo, probar esto. Ese es nuestro nombre completo que es de la función de configuración. Como vemos, la sección de datos tiene acceso a nuestro código de composición. Esto también se aplica a otras secciones de la API de opciones, no sólo a los datos. Podríamos acceder a nuestro código de configuración dentro de métodos y computadoras, y esto también funcionaría. Pero, ¿qué pasa al revés? De nuevo, probemos esto. Podemos reinstaurar nuestro nombre, y luego podemos intentar acceder a esta propiedad de datos dentro de setup; este nombre de punto. También necesitamos cambiar el nombre para que sea nombre completo, y vemos una pantalla en blanco. Percibe cualquier error dentro de las herramientas de desarrollo. No podemos leer el nombre de propiedad de indefinido. De acuerdo, así que intentemos sin esta palabra clave, refrescar. Todavía no tenemos acceso a este nombre. El problema que tenemos aquí cuando hacemos las cosas de esta manera es la función de configuración se resuelve antes de las opciones API. Por lo que la función de configuración no puede acceder a ninguna de nuestras propiedades de datos. Esta palabra clave tampoco está disponible dentro de una configuración. Si lo fuera, se comportaría de manera diferente a cómo esperaríamos que se comportara dentro de la API de opciones, por lo que se ha eliminado para evitar cualquier confusión. Entonces, solo para ser claros, no podemos usar esta palabra clave dentro de la función de configuración. Pero como acabamos de ver, sí funciona al revés, y podemos acceder a nuestras propiedades de configuración dentro de nuestros datos o de nuestra API de opciones. Podemos limpiar este código. No necesitamos acceso al nombre completo y mover esto desde la declaración de retorno, la sección de datos, y también la salida dentro de la plantilla. Esta es una introducción a la API de composición. En la siguiente sección, vamos a seguir adelante con nuestro proyecto, y también vamos a conseguir mucha más práctica usando la composición a medida que avanzamos a través de estos videos. 105. Introducción de la sección: seguir adelante con nuestro proyecto: A mí me gusta dar mis cursos muy prácticos y prácticos. En esta próxima sección, vamos a poner todo el conocimiento de composición que hemos aprendido en nuestros proyectos de tarjetas creativas. Estaremos presionando agarrando la tarjeta seleccionada, la que el usuario hace clic. Recuperaremos las páginas. Cambiaremos entre las diferentes páginas para las tarjetas. Agregaremos nuestras entradas de texto para nuestras secciones, nuestras salidas de texto para que el usuario pueda previsualizarlas. Permitiremos que se actualicen, reordenen, editen, y mucho más. Esta será una buena oportunidad para reforzar nuestros conocimientos de composición junto a construir nuestro proyecto. Te veré ahí dentro. 106. Enlaces a la tarjeta seleccionada y al estilo de la categoría: Para esta próxima sección, estaremos impulsando con nuestro proyecto y reforzando lo que hemos aprendido hasta ahora sobre Vue y composición. A partir de un poco de estilo para las categorías, actualmente, tenemos dos archivos que necesitan un diseño de estilo de cuadrícula, y esta es la category.vue. Tenemos esta clase de envoltorio de cuadrícula, y esto va a enumerar todas nuestras tarjetas en un diseño de estilo cuadrícula. El mismo sobre en el AppHome, haz uso de la misma clase justo aquí. El app.vue tiene una hoja de estilo hacia abajo en la parte inferior que no tiene el atributo scope. Entonces voy a agregar el estilo para esta cuadrícula dentro de aquí. Por lo tanto, esto significará que se aplicará a todos los componentes que utilicen esta clase. Entonces vamos a agregar esto en, y esto va a ir dentro de una consulta de medios. El diseño del estilo de cuadrícula solo aplica cuando obtenemos más de 600 píxeles. La primera consulta de medios a la que vamos a aplicar esto es el ancho mínimo de 600 píxeles. Agarra el envoltorio de rejilla. En primer lugar se muestra a la cuadrícula, luego las columnas de plantilla de cuadrícula. Para esta consulta de medios en particular, vamos a colocar dos tarjetas lado a lado. Voy a poner esto para que se repita. Uno necesita repetirse dos veces. Entonces si pasamos en una unidad fraccional una, ambas columnas tomarán el mismo ancho disponible. Poner espacio entre estas tarjetas también se colocará en un espacio de cuadrícula de 10 píxeles. Pasado al navegador, ahora vemos el diseño inicial de nuestro sistema de cuadrícula. Además, si hace clic en alguna de estas tarjetas, vemos que lo mismo se aplica a este componente también. A continuación, tendremos más espacio disponible. Voy a agregar en una segunda consulta de medios. Copiemos esta sección, peguemos esto justo a continuación. Para esto, vamos a hacer estos 1,000 píxeles. Ya tenemos el tipo de pantalla declarado y también el hueco de rejilla. Todo lo que necesitamos hacer aquí dentro son los cambios para tener tres columnas de ancho. Entonces cuando estiramos esto para ser más de 1,000 píxeles, entonces cambia a ser tres columnas. A continuación, de vuelta a la página de inicio, vamos a establecer algún CSS más específico para este componente en particular en el AppHome. Pon la sección de estilo hacia abajo en la parte inferior. Esto es simplemente CSS regular. Cada uno de estos artículos dentro de nuestra cuadrícula tiene la clase de artículo de categoría. Simplemente vamos a establecer unos gradientes de fondo alrededor cada uno y también añadir algo de relleno para espaciar cada una de estas categorías. Vamos a agarrar esto, el artículo de la categoría. El fondo va a tener en un gradiente lineal, lo que nos permitirá transitar entre dos colores. Los dos colores, voy a pasar en valores RGB en el primero de 253, el verde, 207, y también 207 para el azul también. Separado por una coma, el segundo valor RGB va a ser rojo de 140, 140 para el verde también, y también 236 para el azul. Esto nos da el gradiente de rosa a morado, y además, el color va de arriba a abajo. Simplemente voy a compensar esto colocando en ángulo como primer parámetro de 30 grados. Esto sólo cambiará el color a ocho ángulos diferentes. A continuación, algún relleno para darle a esto algo de espaciado del texto de seis rems en la parte superior e inferior. No necesitamos nada a la izquierda y a la derecha ya que estamos usando este diseño de cuadrícula. Este artículo de categoría está aplicando estilos a cada uno de nuestros artículos de la lista. Ahora, para agregar algo de espacio a la parte superior de esta lista desordenada, voy a seleccionar ahora la lista desordenada en su lugar en un rem de margen en la misma parte superior. Esto nos dará nuestro espacio en desde nuestra cabecera superior. El texto de cada uno de estos está rodeado en este enlace de router. Recuerde que el enlace del router produce un elemento HTML. También podemos usar esto en el CSS. Todo lo que vamos a hacer aquí es establecer el tamaño de fuente para que sea de 20 píxeles. Es un poco más grande. Todavía podemos dar click en estos y pasar a la categoría individual también. Cuando sí pasamos a esta página, esto es controlado por el componente category.vue. Actualmente, cuando hacemos clic en cualquiera de estas tarjetas individuales, solo tenemos el enlace del router que apunta a la barra inclinada hacia adelante. Pero lo que queremos cuando hacemos click en cualquiera de estas tarjetas en lugar de esto que se lo lleve a las cartas reales para que podamos editar. El panel de edición para cualquiera de nuestras tarjetas es este componente de creación, que agregamos desde el principio. Ahora, vamos a nuestra categoría y podemos cambiar este enlace del router para que sea dinámico, cerrar en la barra lateral, y luego colocar en ella los backticks. Tenemos que ir a la /create, tiene ahora una variable que va a ser la card.id Recuerda, conseguimos esta variable de tarjeta de este bucle justo arriba. El primero que queremos ver es la portada de esta tarjeta. Después más adelante, también añadiremos algunos enlaces a esta página de creación, lo que nos permitirá cambiar entre el frente, el interior izquierdo, el interior derecho, y también la espalda también. Ahora, con este enlace en su lugar, necesitamos ir a la página de índice de routers, y también los cambios crean componente a. En lugar de ir a/create, también queremos agarrar nuestras variables, que es el id de la tarjeta y también la página actual. El primer parámetro es para nuestro id y el segundo es para la página. Ese es mi resultado. Aniversario, esta es la tarjeta con la identificación de uno, pero luego llevada a primera plana. Probemos Halloween. Se trata de la tarjeta número 5. Todo esto también está funcionando bien. Nos enfocaremos en este create vue en el próximo video. Pero por ahora, volvamos a esta sección de categorías donde vamos a terminar esta cuadrícula agregando una imagen de vista previa en lugar del nombre de la tarjeta. Encima en la carpeta de activos, en las imágenes, tenemos esta sección de vista previa de tarjeta. Esto tiene una imagen con una vista previa de la portada de cada una de nuestras tarjetas. Además, cada uno tiene el título con el id correspondiente para esa tarjeta en particular. Todo lo que necesitamos hacer es acceder al id de la tarjeta y luego vincularlo a esta ruta de archivo. la sección de categoría, en lugar de dar salida a este nombre de tarjeta, vamos a pasar en el elemento de imagen, pasar en v-bind a la fuente, y luego dentro de los backticks, podemos agregar nuestro URL dinámica. El ampersand va a enlazar con la fuente, en la carpeta de activos, las imágenes, las vistas previas de la tarjeta. Cada una de estas previsualizaciones de tarjeta tiene un nombre que enlaza a esta tarjeta.id También pasando en el tipo de archivo también. Volver al navegador, no vemos ninguna imagen mostrada en. Tenemos un error ortográfico aquí. Vuelve a intentarlo y aún no vemos ninguna imagen para esta pantalla. Ahora, esto sucede cuando usamos en una imagen dinámica igual que estamos aquí. Podríamos colocar en una cadena de imagen estática sin variables, y esto funcionaría completamente bien. Por estática, nos referimos a si no tenemos este colon y el enlace, y no tenemos ninguna variable dentro, podemos simplemente enlazar al 1.jpg con los backticks. Este funciona completamente bien. Esta ruta dinámica del archivo falla porque detrás de bambalinas, usamos en lo que se llama webpack. Webpack se utiliza para agrupar todos nuestros archivos y todos nuestros activos desde el directorio fuente en un gran paquete de JavaScript. Se trata de cualquier paquete que se sirve al navegador cuando visitamos nuestro sitio web. Pero el problema es que cuando esta ruta de archivo es dinámica, webpack no sabe que los resultados de esta variable son tiempo de compilación. En esta etapa de compilación, sabe que aquí hay una variable, que puede cambiar, pero aún no sabe el valor exacto. Hay un par de formas en las que podemos arreglar esto. Podríamos mover las imágenes a la carpeta pública y esto funcionará completamente bien. O en su lugar, podríamos permitir webpack y decirle que necesitamos pasar esta cadena dinámica por rugosidad en require. Lo que tenemos que hacer para esto es sacar esta cuerda completa en los backticks como se requiere. Entonces dentro de los corchetes, pegamos en nuestra cuerda. Vemos de inmediato en el navegador, ahora tendría nuestras imágenes en la pantalla. Por supuesto, son muy grandes. Entonces lo que vamos a hacer es pasar a la app.vue y también apuntar a cualquier imagen que esté en nuestra aplicación y establecer el ancho máximo sea del 100 por ciento. Guarda esto. Ahora deja un bonito diseño de cuadrícula para nuestras tarjetas. 107. La vista Crear: Al hacer clic en cualquiera de estas tarjetas seleccionadas, ahora nos vinculará a este componente Crear. Esta página es en la que ahora queremos trabajar. Vamos a dividirlo en dos secciones. El apartado de la izquierda tendrá una vista previa de tarjeta, la que se mostrarán las cartas iniciales y también los cambios que realizaremos también. Entonces se va a utilizar la sección derecha para editar esta tarjeta, incluyendo las imágenes y también las secciones de texto. Para estas secciones, para la vista previa y la sección de edición, vamos a crear dos nuevos componentes en la carpeta de componentes para mantenerlos organizados, una carpeta llamada tarjeta. Esto agrupará todos nuestros componentes relacionados con tarjetas. Un nuevo archivo. Una es la cardedit.vue. También, la segunda, también en la misma carpeta es para la vista previa de la tarjeta. Ahora, ambos estos sólo van a tener una plantilla sencilla con un encabezado de nivel 1. Esta es la vista previa de la tarjeta. Agarra esto y ahorra. Entonces podemos colocar esto dentro de la CardEdit. Como acabamos de mencionar, ambos componentes se van a mostrar dentro de este create.vue. Para empezar a crear una sección de script, que se va a utilizar para importar ambos de estos componentes, el primero, el CardPreview en la fuente, los componentes, la nueva carpeta de tarjetas, y la CardPreview. Duplicar esto. Este es para el CardEdit. Dentro de la exportación, luego registraremos nuestros componentes. Esto es todo lo que necesitamos para nuestro guión por ahora. Yo subiría a nuestra plantilla. Voy a crear un div con la clase de card_wrapper. Este es el div envoltorio principal para ambas secciones. Tendremos la vista previa a la izquierda y la sección de edición a la derecha. Esto solo significa que podríamos apuntar a la sección con nuestro estilo. En primer lugar, la sección izquierda, y luego la derecha. El izquierdo es para la CardPreview. Ahora, coloca la sección CardEdit a la derecha. A ver si todo está bien. Refrescar. Contamos con los componentes CardPreview y CardEdit. Por supuesto, estas no están dispuestas a la izquierda y a la derecha todavía porque necesitamos bajar a la sección de estilo y agregar algo de CSS a este card_wrapper. También va a ser alcanzada. Para comenzar el tipo de visualización de flex, y la dirección de flex predeterminada es fila, que colocará estos dos componentes en toda la página. Además, este envoltorio principal va a tener un color de fondo. Vamos a conseguir lo simple e ir por un color gris claro de EEE, una sombra de caja de un píxel, un píxel, dos píxeles. El color del DDD, y la sombra que se insertará. Esto significa que la sombra se colocará dentro de nuestra sección en lugar de en el exterior. A continuación, echaremos un vistazo a la versión terminada y entraremos en una de estas tarjetas. Vemos que tanto esta sección de la izquierda como la de la derecha es a la vez igual. Para lograrlo, vamos a agarrar nuestro card_wrapper, y cada uno de estos fue envuelto en una sección. Haz que ambos sean iguales. Podemos pasar en un valor flex de uno y también un poco de relleno en el interior de 10 pixels. Refrescar. Ahora, este valor flex de uno se aplicará a ambas secciones, dándoles un espaciado igual. Ahora, tenemos esta disposición toda la configuración. En el siguiente video, realidad vamos a mostrar la tarjeta seleccionada en esta página. 108. Recuperar la tarjeta seleccionada: Al seleccionar cualquiera de estas tarjetas de nuestra cuadrícula, entonces tomamos en esta gran vista, y también tenemos acceso a la identificación de la tarjeta seleccionada. Esto significa que podemos usar esto para obtener la tarjeta que necesitamos mostrar, y esto también puede ir dentro de un archivo composable 2, en la barra lateral, y luego en los composables, crear un nuevo archivo dentro de aquí llamado, usar Tarjeta actual. Recuerda estos tienen la extensión js. Configurar una exportación, con función predeterminada llamada uso Tarjeta actual. El trabajo de esta función va a ser conseguir la tarjeta seleccionada, para recuperar esto, también necesitamos acceder a todas nuestras tarjetas, que podamos filtrar hacia abajo la seleccionada, posiblemente podamos usar tarjetas composables, en esta sección. Sólo ruta de archivo, que va a ser barra de puntos, y el nombre de archivo de use Cards. Recuerda el uso Cards ha vuelto a esto todas las variables de tarjetas, ahora necesitamos volver a nuestro composable, luego extraer esto de nuestra función. Ahora tenemos todas nuestras tarjetas y lo que tenemos que hacer ahora es crear una segunda constante, que va a almacenar la tarjeta seleccionada. Esta tarjeta seleccionada también será un objeto, podemos pasar en un objeto vacío como valor inicial. Ya que estamos usando un ref, también necesitamos importar esto desde la biblioteca de vistas, y luego vamos a filtrar esta sección de toda Tarjeta que con la tarjeta seleccionada. Primero agarra las cartas seleccionadas, y podemos establecer el valor, para que sea igual a toda la carta. Esta tarjeta todo también está en erupción en una balsa 2, también necesitamos usar el valor de punto para acceder al resultado, y hacer uso del método de filtro JavaScript que va a tomar en una función, que va a filtrar estos si la tarjeta dot id es igual a algo. Ahora acabamos de establecer esto en un valor estático de uno, vuelta para tener un gran componente de vista de puntos. Ahora podemos comprobar que esto está funcionando importando este composable, para luego mostrar esto dentro de la plantilla. En primer lugar importar esto. Dice usar Tarjeta actual, desde la ruta del archivo hasta los composables de origen, y luego usar Tarjeta actual, en nuestras exportaciones, para la función de configuración. De hecho, nos olvidamos de hacer una cosa, y que una cosa se acabó y usar Tarjetas actuales, también necesitamos devolver un valor para usar en nuestros componentes, y el valor de retorno va a ser seleccionado tarjeta, espero que hayas visto ese, de vuelta a la sección de creación en la configuración. Ahora extraerá esto en una constante. Para mostrar esto en las plantillas, esto también necesita ser devuelto de esta función, y luego colocarlo en cualquier parte de la plantilla anterior, solo para comprobar que esto está funcionando. Vamos a revisar esto. Vemos un error en nuestro composable, todo está definido, pero nunca se usa. También podemos autocompletar eso. Refresca y ahí está nuestra tarjeta seleccionada. Bueno, este es todos los detalles de nuestra tarjeta con el ID 1, que fijamos justo aquí. Pero observe cómo nuestro objeto de tarjeta también está rodeado entre estos corchetes de matriz. Esto se debe a que nuestros datos de todas las tarjetas es una matriz de objetos. Para trabajar con este único objeto, necesitamos sacarlo de esta matriz con distritación. Nosotros sí dijimos antes que esta tarjeta seleccionada necesita ser un objeto, y distribuimos este outs de nuestra matriz, rodeando esto entre corchetes. Refresca y estos corchetes ya se han ido. A continuación, en lugar de usar el valor codificado de uno, ahora vamos a importar el router, y obtenemos el ID de los params. En primer lugar importar esto. Utilizamos ruta igualitaria. Esto es de la vista paquete relativo, y luego la tienda está en una constante para que podamos acceder a esto dentro de nuestra función. Estas rutas ahora se pueden usar para acceder a los params en lugar estos valores codificados duros, params de ruta, y el nombre del parámetro que diste esto en la página de índice de routers, era el ID del navegador, y solo quiere para ser ruta de uso. Ya desapareció la tarjeta. Probemos una más. Ahora, sí teníamos una tarjeta en la pantalla justo antes, pero ahora como reemplazamos esto por nuestro router, no vemos nada en la pantalla. Ahora, este es uno de ellos, el desarrollo web gotcha momentos. Lo que necesitamos aquí, es una identificación de tarjeta, cual nos metemos con el router.params.id Necesitamos que este sea un tipo de datos de número. En acto, cuando leemos algo de nuestros parámetros de URL, esto se devuelve de nuevo como una cadena. Podemos ver esto si hacemos un registro de consola. Justo en cualquier lugar dentro de este archivo, accede a la ruta params.id, y podemos usar JavaScript para rastrear el tipo de datos con tipo de en la consola, refresca el navegador y vemos que el tipo de datos es string, y es por ello que todos filtro no está funcionando porque esto es comparar, con la estricta igualdad comprobamos si el tipo de datos de cadena, es igual a esto, que es un número. Podríamos usar el doble igual así. Esto ignoraría la diferencia de tipo de datos, y solo usaría el valor. O alternativamente, podríamos agarrar esto, envolver esto dentro de la función numérica, y esto convertiría la cadena en un número, y esto también funcionaría para. Revisemos un par de tarjetas más. Este será el tercero. Vemos el ID 3. El quinto, ID 5. Esto también coincide hasta. 109. Seleccionar la página actual: En el video anterior, dijimos que esta página de creación muestra la información completa de la tarjeta seleccionada. Pero de hecho, para este punto de vista, sólo necesitamos mostrar cierta pieza de datos. Recuerda que nuestra tarjeta se divide en cuatro páginas. Tenemos el frente, el interior izquierdo, el interior derecho, y también la vista trasera. Cuando estamos editando esta página, sólo queremos ver una de estas secciones a la vez. Sólo cuando hacemos clic en estas tarjetas, entonces nos llevan a la vista, que es el frente de la tarjeta. El dato de estas cuatro páginas se almacena dentro de la matriz de esta página justo aquí, y recuperar la página exacta que necesitamos de esta matriz es en lo que nos vamos a centrar en este video. Después también agregaremos algunos enlaces para que puedas cambiar entre estas páginas. Para empezar de nuevo las cosas en el archivo de la tarjeta UseCurrent, lea la constante para almacenar la página seleccionada en. Ahora no necesitamos este registro de consola. Esta constante se va a almacenar en la página seleccionada. Esto también será dinámico y un tipo de fecha de objetos que es obedecer función llamada get selected page. Esta función va a establecer nuestra página seleccionada. Este es un ref, por lo que agarramos el valor, y esto va a ser igual a nuestra tarjeta seleccionada, el valor. Como hemos visto en el navegador, también necesitamos acceder a la matriz de páginas dentro de aquí. Después necesitamos obtener el número de índice para la página seleccionada. Tenemos cuatro valores diferentes para el frente, el interior izquierdo, derecho, y atrás, por lo que esto podría ser o cero, uno, dos o tres. Para obtener el número de índice de la página en particular que necesitamos, lo voy a entregar a una función separada, para mantener las cosas limpias. A la función se le llamará get page index. Para obtener el índice de página que necesitamos, necesitamos agarrar la tarjeta seleccionada, el valor, las páginas, y luego usar un método de matriz JavaScript llamado find index. Find index va a ejecutar una función para cada una de nuestras páginas en estas tarjetas. Cada una de nuestras páginas se almacenarán dentro de esta constante de página. Queremos comprobar si la página.name es igual a ruta. params.id Sólo para recapitular, estamos accediendo a todas las páginas de la tarjeta seleccionada. Después usamos cualquier JavaScript, encontrar método de índice, y esto va a comprobar si la página.name. cual puedes ver si entramos en nuestros datos, cada una de nuestras páginas tiene su propiedad de nombre como front, y estamos comparando este nombre con el valor dentro de todos los parámetros. De hecho, en lugar de ID, éste para ser la página, como el frente que tenemos justo aquí. Esto luego devolverá el número de índice, por lo que necesito devolver esto de nuevo desde nuestra función. Podemos acceder a este valor de retorno, mi llamada ahora funciona dentro de aquí. Bien. Ahora tenemos esta función llamada get selected page, y ahora necesitamos una manera de realmente llamar a esto. Bueno podemos hacer esto usando desmontado asumiendo nuestra función llamada get selected page. Está subiendo y bind se ha importado automáticamente al guardar, pero si el tuyo no lo ha hecho, si fueras a agregar desmontado a esta importación. Ahora también necesitamos volver a nuestra página seleccionada, para que podamos usar esto en la plantilla. Y también agrega un punto y coma si esto está causando algunos problemas, y pasa a la Crear. vista. Ahora en lugar de renderizar la tarjeta seleccionada completa, podemos sustituirla por la página seleccionada, devolviéndonos de vuelta, y luego pondré esto dentro de una plantilla. Refrescar. Bien, ahí está el frente. Probemos la espalda. Bien, el interior derecho. Excelente. Ahora esto está funcionando y ahora podemos configurar algunos enlaces en el siguiente video para cambiar entre estas cuatro páginas. 110. Cambiar páginas de la tarjeta: Ahora sabemos por el último video que podemos recuperar la página correcta que necesitamos de la URL. Ahora vamos a configurar algunos botones para cambiar entre estas cuatro páginas. Esto, un nuevo componente, una nueva carpeta de componentes, y luego en la carpeta de la tarjeta. A éste se le va a llamar cambiar página. Configura las plantillas a las que solo vas a enlace [inaudible] para que podamos pasar el elemento nav, la lista desordenada, y luego nuestros ítems de lista van a ser envoltorios para el link del router. Cada uno de estos enlaces de router va a enlazar a las cuatro páginas de nuestra tarjeta. Pasa en el a prop. Esto se va a enlazar al frente, y vamos a echar un vistazo a esto en tan solo un segundo. Pero ahora una clase de selección de página es relativamente igual a la mitad al texto al frente, junto a un icono a. Este ícono se ha proporcionado con este curso y se puede acceder a éste desde la carpeta de activos. En primer lugar, el texto dentro del lapso de corridas, y luego mostrar el icono con la imagen. Este no necesita ser dinámico, solo necesitamos entrar en los activos, en los iconos. Se va a utilizar el mismo icono en la parte delantera y trasera de la tarjeta, por lo que éste se llama front-back.svg. Coloque en algún texto alt y ahora podemos duplicar esto para los tres enlaces restantes. Copia y pega el elemento de lista completa. Este siguiente elemento de la lista es para el interior izquierdo. El nombre del icono está dentro de la izquierda. El texto alt, copia este, luego cambia todas estas ocurrencias por dentro a la derecha. Tenemos el enlace del router, tenemos el texto, fuente de la imagen, el texto alt. También podemos arreglar este tipográfico. Por último, pega en el último y esto es para el dorso de la tarjeta. Sabemos qué hacer ahora, el enlace del router, el texto. Recuerda, éste comparte el mismo icono que el frente, por lo que este nombre era front-back. Después, envuelve este último enlace con el texto alt. Guarda este archivo y este componente se va a colocar dentro del create.view. En primer lugar importar esto. Una vez duplicado el CardEdit, éste es para SwitchPage. Ahí está el camino y también importa esto a nuestro objeto de componentes. Coloca esto en la parte superior. Pasado al navegador al frente, dentro a la izquierda. Esto también está cambiando la URL, la derecha interior, la espalda también. Observe cómo cada uno de estos enlaces está reemplazando la sección final de nuestra URL. Esto se debe a que cuando agregamos el enlace del router, no hemos utilizado una barra inclinada hacia adelante antes de ninguna de estas rutas. Si hicimos uso de una barra inclinada hacia adelante, así como así, haga clic en la parte posterior. Esto reemplazará entonces nuestra URL completa. Pero dejar esto fuera sólo reemplazará la sección en la que estamos actualmente. Otra cosa a tener en cuenta aquí es cuando hacemos clic en alguno de estos enlaces, la página seleccionada no se está actualizando. El motivo por el que esto no se actualiza es el mismo motivo antes cuando intentamos actualizar estos tres enlaces de categoría. Esto se debe a que seguimos en el mismo crear componentes, por lo que cuando acabamos de cambiar los parámetros como estamos aquí, no se producirá ninguna actualización. También podemos arreglar esto con la misma solución, que es agregar un vigilante, o a UseCurrentCard en la parte superior. Importar reloj y podemos observar un cambio de parámetros. Primer pase en una función getter la cual va a observar cualquier cambio en todos los parámetros del router, y en particular, nuestra página. A continuación, una función de devolución de llamada, que se va a ejecutar cada vez que hay un cambio, y su función ya está configurada justo arriba. Esto, y añadir un punto y coma justo después de nuestro vigilante. Mantén esto separado de la siguiente expresión y luego pasa al navegador. Refrescar. Vemos el frente porque solo somos URL frontal. Dentro, izquierda, interior derecha, y también, la espalda también está funcionando. 111. El componente de la vista previa de la tarjeta: Pero más allá de este create.vue componentes.vue y por dentro aquí, estamos mostrando el SelectedPage. En lugar de mostrar esto así como esto como un objeto, ahora vamos a mover esto y pasar la página hacia abajo como apoyos a nuestros dos componentes, que fue la vista previa de la tarjeta y también la edición de la tarjeta. En primer lugar, quita esto, pasa esto primero a la vista previa de la tarjeta, el nombre propio de SelectedPage, que es igual a SelectedPage. El mismo justo debajo para la edición actual. Este prop le dará a la vista previa de la tarjeta toda la información que necesita para mostrar la tarjeta y otra vez a la derecha, la sección de edición de la tarjeta utilizará esta prop como valor inicial para todos nuestros campos de entrada. Si quisiéramos, en lugar de configurar esto aquí y pasar esto abajo como utilería, También podríamos importar estos directamente a nuestros dos componentes también. Pero para esto, me voy a apegar a los apoyos. En la vista previa de la tarjeta. Esto necesita una sección de guión para aceptar estos apoyos, pasarlos a nuestro objeto. El tipo, este objetos, y también, esto también se requiere. Hasta la plantilla, no necesitamos este encabezado de nivel 1. En cambio, reemplaza esto por un div y este div va a ser el envoltorio de nuestra tarjeta. Tenemos que añadir la imagen de fondo, igual que vemos si vamos a la versión final, en estas tarjetas. Este será el envoltorio para nuestra vista previa, y esto tendrá el atributo style para establecer la imagen de fondo. En primer lugar, una clase de envoltura de vista previa de tarjeta y luego se une un estilo dinámico, que tomará en un objeto, y es dentro del objeto de estilo donde vamos a pasar en la URL de fondo dentro de los bactics. Al igual que podríamos con CSS regular, podemos establecer la URL de fondo. Pero debido a que esto va a ser dinámico, también necesitamos poner esto dentro de los bacticos, lugar en nuestra variable, que es el SelectedPage de nuestros apoyos. Seleccione la propiedad de fondo. A continuación el tamaño de fondo, que será una cadena regular del 100 por ciento. A continuación, se repiten los antecedentes. Además, recuerda, ya que estamos haciendo esto dentro de JavaScript, necesitamos hacer cada uno de estos CamelCase. Si esto fuera CSS regular, lo haríamos así con el guión. Pero como estamos usando JavaScript, necesitamos hacer cada uno de estos CamelCase. El valor para esto no será repetido. Entonces, por último, la posición de fondo. Esto también será dinámico ya que tenemos este conjunto dentro de nuestros datos. Bajar al archivo de datos. Agarramos el fondo como antes, pero ahora vamos a agarrar esta posición de fondo. Esto también se extrae de todos los apoyos. Ahora, dentro de este div, necesitamos recorrer cada una de nuestras secciones. En este SelectedPage, vamos a ir a ver esto dentro de nuestros datos. Esta portada tiene este array de secciones. La mayor parte de la información en cada una de estas secciones es para estilo y CSS. Pero el que vamos a usar para mostrar el texto real de una sección es esta entrada del usuario. Colocaré dentro de aquí un div con un v-for, pasar en la sección en selectedPage.Secciones. Cada una de estas secciones tiene un ID único. Por lo que la clave será section.id Para comprobar esto está funcionando, pondré la sección completa, refrescar. Podemos apenas ver una imagen de fondo y nuestras superposiciones de texto. Pero también necesitamos darle a esta imagen de fondo un ancho y una altura. De vuelta a los componentes, podemos acceder al envoltorio de previsualización de tarjeta. A continuación, establece una sección de estilo en la parte inferior. Esto también puede ser de alcance. En primer lugar, el ancho para esta imagen se va a fijar en 450 píxeles, y luego una altura de 600. Bien. Ya podemos ver el tamaño completo de la imagen. El último que hay que hacer es establecer la propiedad de desbordamiento para esta sección y esto nos ayudará más adelante si el usuario aumenta la altura de cualquiera de estas secciones para que sea mayor que la tarjeta. Genial. Ahora bien, todo esto está funcionando. Vemos también que el frente de la tarjeta es el único con imagen y que algunas de estas secciones no tienen texto en absoluto. Todas estas secciones de texto, no queremos mostrar el objeto completo así. En cambio solo queremos dar salida a la entrada del usuario, que puedes hacerlo así, section.UserInput. Está bien, genial. Este texto que superponemos pronto se colocará en un componente separado y también le aplicaremos todos estos datos extra como el estilo, y también el diseño. 112. Componente de la salida de texto: Lo que tenemos en este momento es esta vista previa de tarjeta que muestra una imagen de fondo. Entonces justo debajo para cada una de nuestras secciones en esta página, entonces generará la entrada del usuario. Todos hemos visto algo como esto. Si vamos a la portada, vemos la imagen de fondo. Entonces el texto se superpuso para páginas con múltiples secciones de textos como el interior derecho. Vemos estos exhibiendo justo aquí. Este texto sin embargo no está destinado a mostrarse como texto sin formato, al igual que esto. Si vamos al data.js, tenemos un array de secciones con un objeto, y este en particular tiene esta entrada de usuario justo aquí. Entonces tenemos varias cosas para estilizar y maquetar. Para mostrarlos, vamos a crear un nuevo componente para enviar cada una de estas piezas de texto a la sección de componentes y a la tarjeta. Este es el texto output.vue, la plantilla, y sólo algún texto simple por ahora. Esto se va a mostrar dentro de nuestra vista previa de tarjeta en lugar de este texto justo aquí, en la acción de scripts, importar este archivo, que es la salida de texto. Esto está en la misma carpeta así que todo lo que tenemos que hacer es. /, y luego en nuestra salida de texto, registre nuestros componentes, y vuelva a la plantilla, no necesitamos esta sección, ya no usamos entradas. Sustitúyalo por nuestro nuevo componente. Por supuesto, esta salida de texto necesita algunos datos para mostrar, por lo que enviaremos abajo el contenido completo de la sección como prop. Esto es todo lo que tenemos que hacer para este componente. Pasado a la salida de texto. El guiones, colocar en nuestros apoyos, y el prop de sección tendrá el tipo de objeto. Recuerda, esta es la taquigrafía del tipo. En lugar de tener el objeto, estoy colocando el tipo así. Al igual que en la vista previa de la tarjeta, si ahora emitemos los contenidos de la sección, también deberíamos tener acceso a las entradas del usuario. A ver. Bien. Tenemos las tres entradas de usuario separadas y también, lo mismo para los frentes de la tarjeta también. Esto nos deja en la misma posición que el inicio del video. Tenemos sólo el texto plano home, pero esta vez desde un componente separado. Ahora podemos usar estos valores CSS que vemos en el archivo de datos para crear un objeto CSS y aplicarlo a este texto. En primer lugar, coloque en nuestra función de configuración y una constante para almacenar nuestro objeto CSS. Mantenga un ojo en cualquier cambio. Vamos a hacer uso de un valor computado dentro de esta función de configuración. Pasaremos en una función y esta función se va a ejecutar cada vez que cambien los datos dentro. Al igual que al usar la API de Opciones, esto también necesita devolver algunos datos, pero solo colocaré en un objeto vacío y volveremos a esto en tan solo un segundo. Antes de que nos olvidemos, el número de lugar devuelve acción para la configuración, donde vamos a devolver nuestro objeto CSS, porque ahora usamos computado, necesitamos importar esto desde la biblioteca de vistas a nuestro objeto CSS devuelto. Este va a ser un objeto con todas estas propiedades CSS que podemos sacar de esta sección. Pero primero, tenemos un par de valores CSS estáticos que no van a cambiar, sino solo un borde que rodeará cada una de estas piezas de texto para que el usuario conozca la altura de la sección como una cadena, el ancho de un píxel, un punteado de color gris, y luego separar cada una de estas con una coma. El tipo de pantalla va a ser igual a flex. Este tipo de flex nos permitirá hacer uso de las propiedades flexbox, que están terminadas en estos datos, y en particular, los valores de alineaciones como JustifyContent y alinear elementos. Ya que ahora estamos devolviendo el objeto CSS, podemos probar esto está funcionando en nuestro archivo de texto. Una propiedad de estilo CSS y establecer esto igual a nuestro objeto. Si ahora actualizamos el navegador, vemos la línea de puntos, por lo que nuestro objeto CSS ahora está surtiendo efecto. El resto del estilo a aplicar a este texto va a ser dinámico y basado en los valores que se habían transmitido desde nuestros apoyos. Por ejemplo, la propiedad de color CSS, normalmente podríamos acceder a esto usando el objeto de opciones con algo como esta.sección. Entonces podríamos acceder a las propiedades individuales, pero recuerda sin embargo, usando el liquidar sobre la composición, ya no tendremos acceso para leer esta palabra clave. El modo de hacerlo en composición es pasar en los apoyos a configurar. Esto nos dará entonces acceso directo a nuestros apoyos, donde podremos acceder a la sección, y luego uno de nuestros valores en este objeto de sección, que es el color. A continuación, la altura de la sección, props.section.height. Ya que estamos trabajando con CSS, también necesitamos agregar el valor de píxel. Después de la altura, tenemos JustifyContent, que es igual a prompts.section.JustifyContent. Alinear artículos. Después guarda esta sección y prueba esto de nuevo en el navegador. Bien. Vemos que tenemos varias alturas para estas piezas de texto. Tenemos un diferente en color. Pasado al frente. Bueno, tenemos una altura justo aquí también, y esto también está alineado en el centro, por lo que nuestras propiedades flexbox están surtiendo efecto. Coloquemos también en la familia de fuentes y el tamaño de fuente. El tamaño de la fuente. Colocar en la coma, y ahora vemos un texto más grande, y también se ha aplicado la familia de fuentes. No te preocupes por el espaciado entre estas secciones o el de abajo esté fuera de página por ahora. Arreglaremos esto con CSS en un poco. A pesar de que ahora hemos terminado con nuestro objeto de estilo y esta sección calculada mantendrá actualizada la vista previa de la tarjeta. Cuando actualicemos la tarjeta desde la sección de edición más adelante, todos estos valores se actualizarán en nuestra función composable. Entonces los valores reactivos se pasarán de nuevo por la cadena a este componente de vista previa. 113. Componente de edición de la tarjeta: Echaremos un vistazo a este componente create.vue. Temprano pasamos en el CardPreview y también el CardEdit. También pasamos en el SelectedPage a ambos componentes. En un video anterior, usamos esta SelectedPage, recorríamos cada una de las secciones y luego pondré el texto en cada sección. Vamos a hacer algo similar para el CardEdit, que también tiene los mismos apoyos. Para esta ocasión, va a estar del lado derecho. El texto se va a colocar en un área de texto que el usuario puede editar. También podemos flotar sobre esta sección. Veremos un menú desplegable para editar cualquiera de los estilos también. Pero esta sección, configuramos los componentes cardedit.vue desde el principio. Pongamos a trabajar en este componente agregando primero nuestra acción de guiones. Necesito tomar los apoyos como un objeto, pasar en el SelectedPage, que es el tipo de objeto. Pero ahora esta plantilla será bastante sencilla. Solo estamos conteniendo lugar en un div, que va a contener un v para atributos. Podemos vivir a través de cada una de las secciones en nuestro SelectedPage. El clave, todos tenemos una clave única para cada una de estas secciones la cual podemos ver en los datos. Podemos acceder a la sección.ID. Pero pasaré en la section.UserInput solo para comprobar esto está funcionando todo. Como acabamos de mencionar un poco más tarde, esto se colocó dentro de un área de texto para que el usuario pueda editar este texto, guardar esto y la única pieza de texto para esta tarjeta ahora se muestra todo en la sección de edición. Probemos con el derecho interno. Todo esto también está funcionando. Un video bastante sencillo, pero ahora tenemos el texto disponible en pantalla. En el siguiente video, vamos a reemplazar esta entrada de usuario por un componente separado. 114. Componente de entrada de texto y menú Hover: Actualmente, en la sección Editar, simplemente estamos sacando las etiquetas de cada una de estas secciones, pero al igual que hicimos con el lado de vista previa, vamos a reemplazar cada una de estas piezas de texto o cada una de estas secciones con unos componentes independientes. Este componente va a contener un área de texto el cual contendrá esta entrada del usuario para que puedan editar el texto, que luego se mostrará en la vista previa. También colocaremos en un menú desplegable, para que el usuario también pueda editar este texto. Pueden agregar diferentes estilos y también cambiar el diseño y posicionamiento también. De vuelta a la barra lateral, tenemos la salida de texto para el lado izquierdo. Entonces vamos a crear una entrada de texto para la pantalla de edición, una plantilla, luego un div con la clase de envoltura de entrada de texto. Colocar en cualquier texto dentro de aquí y luego podemos importar esto a nuestro componente Code Edit. Abajo al guión, la entrada de texto. Esto en la misma carpeta, por lo que esta será una entrada de texto de barra de puntos. Último en los componentes objetos, reemplace nuestra entrada de usuario por este nuevo componente. También necesita los datos completos de la sección, por lo que esto puede ser un prop. Esto ahora nos da alguna información con la que trabajar, colocando estos guiones sección, los apoyos de sección, que es el tipo de objeto, luego reemplazar nuestro texto por el área de texto, mover estos. A continuación, establezca las columnas predeterminadas para que sean 50 y luego cuatro filas. Ahora, vea esta entrada de usuario dentro de su área de texto. Ahora necesitamos colocar dentro de v-model, pero recuerda que no podemos mutar directamente los apoyos. En cambio, necesitamos tomar una copia de esta sección. Entonces podemos usar esto para nuestro modelo v. Esto podemos pasar en la configuración, tomando los apoyos, y luego una constante que va a ser una copia llamada la sección actual. Envuelve esto en una ref. Vamos a pasar en el punto.sección de apoyos. Importa este ref desde la biblioteca Ver, luego devuelve nuestra sección actual de nuevo de la configuración. Esta sección actual es ahora una copia de todos los apoyos, que ahora podemos usar dentro de v-model. El inmueble en esta sección es la entrada del usuario. Cargaremos el navegador y ahora tenemos nuestras áreas de texto libre, cada una con las entradas de texto. Además, si te estás preguntando qué es este círculo verde a la derecha, esta es una extensión Grammarly, que está disponible para ayudar con cualquier error de escritura. Algo a tener en cuenta aquí cuando escribimos en una de estas áreas de texto es, la vista previa actual también se actualizará automáticamente. Ahora bien, no he admitido ningún evento personalizado. No hemos creado ninguna función para actualizar esto, pero esto vuelve a la referencia de objeto que discutimos anteriormente. Podríamos quedarnos con esto y permitir que esto se actualice automáticamente, pero personalmente, prefiero romper la referencia y hacer una actualización manual solo para que tengamos un poco más de control sobre las actualizaciones, y lo hace un poco más predecible. Para romper esta referencia, lo que vamos a hacer es bajar a la configuración y en lugar de tomar directamente una copia así. Vamos a cortar esto, crear un nuevo objeto, y luego repartirlo de nuevo. Podemos probar esto, refrescar. Ahora, vamos a actualizar estas áreas de texto. El apartado anterior no se ve afectado. par de obtener en este texto del área de texto, también queremos proporcionar un menú desplegable cuando el usuario pase el cursor sobre cada una de estas secciones. Este menú desplegable va a contener todas las opciones para cambiar cosas como las fuentes, los colores, y también el posicionamiento. Esto, crea un div dentro de la plantilla, justo debajo del área de texto. Si dices clase de menú, necesitamos una forma de controlar este menú que aparece. Vamos a añadir los atributos V-show y establecer esto igual a Mostrar opciones. Por ahora, sólo algunos textos como menú está completamente bien. Después, hasta la función de configuración, ahora podemos configurar Mostrar opciones para que sea un valor inicial de false. Esto también será reactivo, por lo que pasa en la ref y el valor inicial de false. Entonces necesitamos devolver esto de nuestra función como esta. Todavía no vemos nuestros textos de menú. Necesitamos una forma de establecer esto para que sea cierto cuando el ratón pasa por encima de esta sección. Para ello, tenemos acceso al evento mouse sobre. Cuando el ratón pase por encima de esta sección div, vamos a establecer, mostrar opciones para que sean iguales a verdaderas. Entonces también hacemos uso del evento mouse out, que va a establecer las opciones de show para que sean iguales a false una vez que el usuario aleja el mouse de esta sección. Por lo tanto, esto luego cerrará un menú así y podemos probar esto. Sobre cualquiera de estas secciones está nuestro menú, que luego desaparecerá cuando nos alejemos del menú. Probemos este. Esto ahora funciona para cada una de nuestras secciones, y son componentes de menú, que vamos a estar construyendo a continuación. 115. Añadir opciones de menú: Pasemos ahora al menú para cada una de estas entradas de texto. Ya configuramos un hover, que luego muestra nuestro menú, y ahora vamos a agregar algunas opciones a este menú. Este fue un div que creamos en el último video. Rodeados dentro de este div, vamos a colocar en tres nuevos tramos. El primero será un div con la clase de menú top, el segundo, menú medio, y el tercero, menú inferior. Habrá bastantes opciones diferentes que añadiremos a este menú. En este video, nos vamos a centrar en este top de menú. Menú top será la fila superior de nuestras opciones y contendrá la familia de fuentes. El usuario puede cambiar el tamaño de la fuente, el color de la fuente, y también las opciones negrita y cursiva también. Primero pasamos en nuestra opción selecta, que va a agrupar a todas nuestras familias de fuentes. Todo lo que necesitamos hacer como atributo es pasar en v-model, que va a enlazar a nuestra sección actual. Entonces la familia de fuentes. La primera opción. Entonces dentro de los valores necesitamos escribir en la familia de fuentes exactamente de la misma manera que estarías en CSS porque esto se va a empujar a nuestro objeto de tarjeta. Al igual que en nuestros datos, si buscamos la familia de fuentes, estos serán los valores finales que vemos aquí. El primero, voy a ir por Times New Roman. Puedes cambiarlos para que sean cualquier familia de fuentes que te gusten. También el texto de visualización, duplicar esto. El segundo de Georgia. El número tres será Arial. Vamos un poco locos y sumamos Comic Sans. Vuelve a colocar esto en exactamente lo mismo que harías con CSS. La familia tipográfica Verdana para el número cinco. Entonces la última que voy a colocar en Courier New. Está bien. Vamos a probar esto, refrescar el navegador. Ahí está nuestro selecto con todas nuestras familias de fuentes. A continuación, justo después de este selecto, colocamos en un nuevo grupo selecto. Este va a ser para nuestro tamaño de fuente. Nuevamente, esto necesita modelo v por lo que tenemos todos los datos para empujar a nuestro objeto de tarjeta. Seleccionaremos la sección actual, luego esta vez el tamaño de fuente. La primera opción de 1.6 rems. Entonces el texto de lo normal. A continuación, el texto de grande con un valor de dos rems. El siguiente irá por 2.5 rems. El texto todo más grande. Entonces más grande, que van a ser tres rems. Está bien, probemos esto. Bien. El tercer insumo va a ser una entrada con el tipo de color. V-modela esto a la sección actual y seleccione el color. Está bien. Entonces esto y luego nos vamos. Esto justo ahora nos deja con las cursivas y las elecciones audaces. En primer lugar vamos a añadir en una etiqueta. Esta va a ser una casilla de verificación anidada en el interior para nuestra selección audaz. Analizar la entrada, el tipo de casilla de verificación, V-model. Para estos dos próximos, tenemos las opciones es negrita y cursiva, que sólo se construyen a partir de valores. Lo que vamos a hacer por estos es agregar una entrada junto a una imagen. Ahora, la razón por la que estamos haciendo esto es porque la imagen va a ser uno de los iconos que tienes en la carpeta de activos. Pero aún así queremos mantener estos insumos al lado por razones de accesibilidad. Esto significa que puede ser leído por los lectores de pantalla y también mantener las interacciones del teclado también. Pero en el CSS en solo un poco, ocultaremos esta entrada. Sólo vemos este ícono justo debajo. Para la fuente agregada a los activos, y así iconos. Tenemos un ícono proporcionado el cual se llama bold.svg y el icono de negrita del texto alt. A continuación, también tenemos una casilla de verificación para el es cursiva. Para acelerar las cosas, podemos copiar esta sección, entonces el cambio es audaz para ser es cursiva. El italic.svg, y también el texto alt también. Guarda esto. Veamos dónde nos deja esto. Está bien. Por lo que se ve bastante horrible al minuto, pero lo arreglaremos con CSS. Ahí están nuestras casillas de verificación junto a nuestros iconos. Pero como mencioné antes, más adelante esconderemos esta casilla de verificación. Algo a tener en cuenta aquí es, especialmente cuando se usa Chrome, puede que no sea lo mismo en diferentes navegadores. Creo que no es con Firefox, pero al usar el navegador Chrome si hacemos clic en este selector de color y luego tratamos de seleccionar en los colores, todo el menú desaparecerá. Ahora Chrome tiene una enorme cuota de mercado para el mercado de navegadores, por lo que obviamente esto es algo que queremos arreglar. ¿ Qué está pasando aquí cuando pasamos de esta entrada de color al selector de color real? El selector es una sección separada. Pasar a esta nueva sección significa que estamos dejando esta envoltura principal, esto luego desencadena el evento mouse out, y luego oculta tener opciones. solución para esto es vigilar que el ratón salga de esta sección superior del menú. Entonces, una vez más, establece cualquier opción de Mouse para que sea verdad. Agrega un ratón, deja eventos dentro de aquí. Estableceremos las opciones Mostrar V igual a true. Guarda y prueba esto. Haga clic en la entrada. Ahora nos alejaremos de esta sección superior. El Show Options sigue configurado en true, lo que significa que aún podemos ver nuestras entradas de color. Tenemos esto ahora arreglado. El último que tenemos que hacer es comprobar si nuestra sección actual se está actualizando con alguno de estos insumos. Colocaré esto dentro de las llaves dobles en la plantilla. Todo lo que tenemos que hacer es modificar nuestro texto. Vemos que se cambian las entradas del usuario. Da click en esta negrita, y esto cambiará esto justo aquí cursiva. El tipo de letra, esto cambia a Arial. Por último, el font-size. Todo esto parece estar funcionando, y en el próximo video añadiremos el resto de nuestras opciones de menú. 116. Opciones de menú, continuación: Continuando con esta sección de menú desplegable, todavía tenemos la sección media y también la sección inferior también en nuestra entrada de texto. Entonces si vamos a este menú en la sección media, esto va a contener una flecha arriba y una flecha abajo. Pero ahora sólo van a ser un conjunto de iconos, pero más adelante, estos activarían una función. Para cambiar la altura de la sección, envuélvalos en un botón, y el icono también está en la carpeta de activos, en los iconos. Esta es la flecha up.svg, el texto alt también. Entonces el segundo botón es para la flecha hacia abajo. Guardar. Ahí vamos. Entonces, por fin, tenemos este botón Menú. Este botón Menú va a ser principalmente alineación, por lo que podemos mover el texto arriba y abajo, y de izquierda a derecha también. Estos van a ser dos conjuntos de botones de radio, uno para la alineación vertical y otro para la alineación horizontal. Entonces pasaré en una etiqueta, que envolverá nuestra entrada con el tipo de radio, el modelo, que va a modelar a sección actual. Entonces justifique el contenido. Justificar el contenido controlará el posicionamiento a través de la página de izquierda a derecha. Entonces pasamos en un valor. El valor será el texto que pasamos a nuestro objeto de tarjeta y éste necesita ser uno de justificar los valores CSS del contenido. Por lo que este será flex-start. Entonces el nombre de horizontal. Este nombre de horizontal se utilizará para enlazar los tres de nuestros botones horizontales. Después tendremos algunos enlaces verticales para la alineación vertical. Al igual que lo hicimos anteriormente con la casilla de verificación, también vamos a ocultar esta entrada de radio también y reemplazarla por un ícono. El icono va en los elementos de la imagen y el camino está en los activos. En los iconos. El icon.svg izquierdo y el texto alt también. Entonces éste está controlando la alineación izquierda y vamos a copiar esto y pegar esto en dos veces más, y el medio es para el centro. Entonces seguimos justificando cualquier contenido, pero el valor esta vez es centro. Estos tres botones están relacionados, por lo que mantenemos el mismo nombre de horizontal. Esto significa que el usuario solo puede presionar uno de estos botones a la vez. El imagen es el centro, el texto alt. Entonces el tercero establecerá la alineación correcta o en lenguaje flex-box, este será el extremo flex. El imagen tiene el nombre de derecho, y también el texto alt también. Ahora, veamos si esto funciona bien en el navegador. Solo podemos seleccionar uno de estos a la vez ya que todos tienen el mismo nombre y estos también están actualizando nuestro objeto en la parte superior. Por lo que el siguiente grupo va a ser para la alineación vertical. Si copiamos uno de estos, pegamos esto justo debajo, tenemos un par de cambios más que hacer. En lugar de configurarlo JustifyContent, necesitamos cambiar esto para ser alinear elementos. El primer valor es para el flex-start, el nombre de vertical. Este icono es para la parte superior. Después duplicó ésta dos veces más. El siguiente es para el centro. El icono tiene un nombre de medio. El final es para el fondo, que es el valor flex-box de flex-end. La imagen es bottom.svg. Por último, el texto alt. Pasado al menú. Se ve bastante mal ahora, pero probemos esto. Para cada uno de estos, vemos el flex-start, el sensor, y también el flex-end también. Ahora tenemos este menú en su lugar y sabemos que ahora está vinculado a nuestra sección actual. A continuación vamos a pasar a mejorar el estilo. 117. Estilo del menú: Este menú ahora necesita algo de estilo y también algo de diseño también, que queremos hacer de nuevo en el textinput.view, comenzando con esta fila superior que tiene la clase de menú top. Así que saltaré hasta el fondo, crearé la sección de estilo, y también añadiré en el atributo de ámbito. Recuerda que cada uno de nuestros iconos está rodeado en el elemento de imagen, por lo que lo que vamos a hacer para esto es establecer el ancho máximo para que sea de 30 píxeles. El menú completo estaba rodeado en esta clase de menú y este fue un envoltorio para todas nuestras entradas. En primer lugar, vamos a establecer la posición para que sea absoluta y al establecer esto como absoluto, esto flotará por encima de todo el resto del contenido en lugar de empujar esto hacia abajo. A lo que nos referimos con esto, si vas a un proyecto, si tienes múltiples entradas, como lo hacemos justo aquí, los iconos aparecerán sobre cualquiera de los contenidos justo debajo, lugar de empujar esto hacia abajo de la página. El trasfondo. Puedes elegir cualquier color que te convenga, pero voy a colocar en un gradiente lineal de 30 grados y los valores de RGB 253, 207, 207, agregan una coma, y el segundo color de rojo, 140, verde 140 y azul, 236. Esto también necesita algo de relleno en el interior y redondearemos la parte inferior izquierda y la parte inferior derecha también. Acolchado de 10 píxeles y el radio del cuerpo, sólo queremos aplicar esto a dos externos, por lo que la parte superior será cero, y luego tres píxeles para nuestra parte inferior. Está bien. A continuación, envolvimos cada uno de nuestros roles en la clase de menú top, menu, middle, y muchos bottom, y podemos hacer uso del flexbox CSS para establecer la alineación a través de la página. Todas estas entradas son diferentes alturas, por lo que no necesitaremos estar a través de la misma línea central dentro de nuestro estilo. Agarra nuestro menu-top y también, el menu-inferior, el tipo de pantalla all flex, y luego alinea los elementos en nuestro centro. A continuación esta fila media, donde tenemos las flechas arriba y abajo, esto tiene que estar más a la izquierda del menú y podemos hacerlo configurando el tipo de pantalla para que sea flex. Agarra la sección media, configura esto como flex, y al establecer esto en flex, tendremos los valores predeterminados de fila de flujo y también aparecerán al inicio de la fila. Ahora, también queremos quitar el borde y el fondo de estos dos botones también, y también cambiar el cursor para que sea un puntero. También podríamos hacer esto dentro de estos mismos componentes, pero voy a colocar esto por dentro de la app.vue, y por lo tanto, esto también se aplicará a otros botones. Entonces vamos a agarrar nuestro botón. Quitar el fondo, quitar el borde sin ninguno, el cursor del puntero. El tamaño de fuente de 14 píxeles, y luego eliminar cualquier remo predeterminado con un valor de cero. Refrescar. Está bien. Entonces esto también tal vez quiere algo de espaciado también, así que volvamos a nuestra entrada de texto. Agarra el menú en medio, y seleccionaremos la imagen. El alto de 10 píxeles y luego algo de relleno. No queremos que este relleno aleje esto del borde izquierdo, así que vamos a aplicar el relleno a la parte superior, a la derecha, y también a la inferior. Ahí vamos. Esto ahora nos da un poco más de espaciado. Solo para aclarar, cuando agregamos este estilo de botón en la app, no es esencial que coloquemos aquí ningún estilo global. Simplemente puede ser un lugar conveniente para poner estilos sin alcance si no tenemos una cantidad enorme. Si sí tenemos muchos estilos diferentes, esta tal vez una mejor idea para tal vez externalizar esto en un archivo diferente. Lo siguiente que vamos a hacer es volver a nuestra entrada de texto y vamos a ocultar las casillas de verificación y también los botones de radio, incluso ajustar estos iconos. Recuerda desde antes, dijimos que los dejamos adentro por razones de accesibilidad y así el usuario también puede hacer uso de los controles del teclado. El motivo por el que estos siguen siendo accesibles y aún podemos controlarlos con el teclado es porque no los estamos quitando por completo. En cambio, simplemente los estamos escondiendo con CSS. Entonces el primer paso es seleccionar nuestra entrada con el tipo de radio, y luego también nuestra casilla de verificación también. Entonces esto ya no es visible. Estableceremos la opacidad para que sea igual a cero, el ancho de cero también, y también la altura. A ver si esto funciona. Bien. Estos ahora se quitan y lo siguiente que vamos a hacer es seleccionar la imagen y hacer del cursor un puntero, y para ello, agarraremos ambos, agregaremos estos en abajo. Hacer uso del selector adyacente, que es el icono más, y esto seleccionará todos los elementos de imagen que siguen a esta radio. Lo mismo para la casilla de verificación. El cursor para ser un puntero. Esto no cambiará cuando pasemos el cursor sobre nuestras casillas de verificación y nuestros botones de radio. [ inaudible] cualquier entrada de formulario original como esta, también necesitamos manejar el estado comprobado y si hacemos clic en alguno de estos, no vemos que los botones estén resaltados. Por lo que si el usuario navegaba con un teclado, no tendrían idea de cuál está actualmente activo. Por lo que para solucionar esto, también necesitamos dar cuenta del estado comprobado. Entonces agarra nuestros dos insumos y la imagen. Después crearemos una nueva sección justo debajo, pero esta vez, apuntaremos al estado de cheques. Ahora, lo que vamos a hacer dentro de aquí es establecer un contorno cuando se haya hecho clic en alguna de estas imágenes para que el usuario sepa que se está seleccionando esto, de dos píxeles, un color sólido, y luego un color para este contorno. Voy a ir por el valor rojo de 119, 123, y también 125. Esto se está acercando mucho, pero no está del todo ahí todavía. Esto va a colocar un contorno en el botón de la imagen cuando un usuario hace clic en cualquiera de ellos, pero también queremos que este esquema aparezca cuando el usuario esté usando el botón Tab en el teclado para recorrer estos botones. Entonces de nuevo, copiaremos ambos, agregaremos una coma, pegarlos nuevamente, pero esta vez, el estado de enfoque. Guarda este archivo y de nuevo en el navegador, vamos a echar un vistazo a esto. el cursor sobre el menú y al instante, vemos nuestros contornos para el primer grupo y también para el segundo grupo también. Podemos seleccionar diferentes valores y estos también se destacarán. También si usamos el botón de pestaña Teclado para recorrer nuestro sitio web, una vez que lleguemos al menú, tenemos las opciones, el negrita, cursiva, nuestros botones abiertos, y luego si pulsamos “Tab” una vez más, podemos utilizar los botones izquierdo y derecho del teclado para nuestro primer grupo. Golpea “Tab” una vez más, y el segundo grupo se vuelve activo. Bien. Solo para terminar esto, también añadiremos algunos estilos a nuestro área de texto, y también estos botones selectos también. En primer lugar, el área de texto. Mueve el borde predeterminado sin ninguno. Un radio poco aburrido de tres píxeles. El ancho del 100 por ciento. El peso de la fuente de más ligero. Cinco píxeles de relleno. También para el dimensionamiento, estableceremos el tamaño de caja para que sea igual a border-box. Entonces, por último, estas entradas selectas están un poco agrupadas y todo lo que voy a hacer es agregar algún margen a la derecha. Cinco píxeles deberían estar bien, y ahí vamos. Este es el estilo ahora terminado para nuestro menú, y a continuación, vamos a configurar las actualizaciones de tarjetas. 118. Actualizar la tarjeta: Podemos ver por todos estos objetos sobre derechos aquí, que todas estas secciones actualizadas se almacenan dentro de los componentes de entrada de texto. Ahora podemos utilizar estos datos para actualizar la tarjeta con toda esta nueva información actualizada. acabaría un buen lugar para hacer esto, dentro de la tarjeta actual de uso. Tendremos nuestra tarjeta seleccionada, que es nuestro principal objeto de tarjeta. Lo que vamos a hacer es crear una función para seleccionar esta tarjeta, y luego obtendremos la página en particular en la que estamos trabajando, luego actualizar cualquier sección desde la que se envíen estos datos. Esta función se va a llamar UpdateCard. Dado que esta tarjeta es una balsa, agarramos la tarjeta seleccionada, accedemos al valor, entramos en la matriz de páginas, y el elemento del que desea encontrar o la página que desea encontrar está disponible desde esta función justo arriba. Recuerda, esto va a obtener el número de índice seleccionado de los parámetros de los routers. Podemos llamar a esta función dentro de aquí. Después de esto, queremos actualizar una sección en particular. Para esta página, será cualquiera de estas tres secciones. Pero, ¿cómo sabemos cuál queremos agarrar? Bueno, actualmente no lo hacemos. No tenemos ninguna forma de acceder a esta información, por lo que vamos a tener que analizar esto cuando llamemos a la función. Esto significa que esta función recibirá algunos datos. Voy a llamar a esto el SectionIndex. [ inaudible] Junto con esto, también necesitamos analizar en los nuevos datos a esta función también, que se utilizará para actualizar la tarjeta. Estableceremos esta sección en particular para que sea igual a estos datos. Esto es todo lo que necesitamos hacer para esta función. Ahora podemos devolver esto, y luego podemos llamarlo con nuestro SectionIndex, y también los datos actualizados. Coloque el UpdateCard en nuestro objeto de retorno, y los componentes que necesitamos para llamar a esto, está dentro de la entrada de texto. Como siempre, necesitamos importar nuestro composable, que se llama UseCurrentCard y la ruta del archivo, usar el símbolo at para entrar en la fuente, la carpeta composable, y luego en UseCurrentCard. Abajo a nuestra configuración, extrae esto en una constante, y necesitamos extraer la función UpdateCard de la función que se llama UseCurrentCard. Tenemos ahora nuestra función en su lugar en los componentes actuales. Pero si pensamos en esto, ¿ cuándo ahora queremos llamar a esta función de actualización? ¿ Cómo realmente queremos ejecutar esto? Podríamos pasar a la tarjeta y cuando este componente se carga, podríamos ejecutar esta función después de un cierto retraso de tiempo. Podríamos ejecutar la función cuando el menú esté cerrado y tantas otras opciones. Pero uno sensato puede ser estar atento a este apartado actual. Recuerda, todas nuestras entradas desde arriba están vinculadas a esta sección actual mediante el uso de V-model. En cualquier momento que uno de nuestros insumos cambie, los datos actuales de la sección también cambiarán. Por lo tanto, una opción sensata puede ser estar atento a los cambios a esta sección actual, y luego llamó a esta función de actualización. Esto tendrá que importar ya sea reloj o efecto reloj. Yo quiero usar reloj, ya que efecto reloj se ejecutará de inmediato, y realmente no necesitamos eso. nuestra importación, después de la ref, importamos a nuestro vigilante, y luego llamamos a esto dentro de la configuración. Después analizamos en dos argumentos en este vigilante. El primero es la pieza real de datos que queremos ver, y en nuestro caso, es la sección actual, separada por una coma. Después queremos llamar a nuestra función UpdateCard cuando cambie alguno de estos datos. Analizando esta función, y también llamaremos a esto. Recuerda cuando configuramos esta función UpdateCard sobre en nuestro composable, también necesita recibir dos piezas de datos, el índice de sección y también la nueva sección a actualizar. Actualmente, todavía no tenemos este índice de sección, por lo que volveremos a esto. Pero sí tenemos los datos actualizados almacenados dentro de nuestra sección actual. También necesitamos acceder al valor ya que éste se almacena dentro de una ref. Esto sólo nos deja con la tarea de averiguar el índice de sección actual. Este archivo actual de la entrada de texto no tiene el número de índice, ya que todo lo que estamos haciendo es analizar en esta sección como apoyos. Para obtener el número de índice real para esta sección en particular, necesitamos subir un nivel. Esta entrada de texto se llama desde nuestra tarjeta, editar componente. Entonces en este archivo como nuestro componente de entrada de texto. Ya que estamos recorriendo todas estas secciones, también podemos acceder al índice número 2. Miramos cómo hacer esto desde el principio. Escribimos esto dentro de los corchetes, y también podemos acceder al índice número 2. Esto significa que ahora tenemos este índice, también podemos pasar esto hacia abajo como apoyos a nuestro componente de entrada de texto. El índice de sección es igual a nuestro índice. Bueno, ahora de vuelta a la entrada de texto y ahora tenemos un segundo prop para sumar a esto, que es el índice de sección, que es un tipo de número. Ahora, podemos analizar esto cuando llamamos a nuestra función. En nuestra configuración, tenemos acceso a todos los apoyos, y luego nuestro índice de sección. Además, solo asegúrate de que estamos viendo la sección actual del valor 2 y más al navegador, veamos dónde estamos ahora con nuestro proyecto. Nos falta el texto de la derecha. Ahora, entremos a la consola y veamos qué está pasando aquí. No podemos establecer la propiedad cero de indefinido y ningún uso tarjeta actual. Esta es nuestra función de tarjeta de actualización, parece que tenemos un error justo aquí. A ver qué está pasando. Accedemos en la tarjeta seleccionada el valor en las páginas, el índice de página. Sabemos que esto está funcionando porque hemos utilizado esto justo arriba cuando obtenemos la página seleccionada. Todo esto funciona bien. Después a las secciones. Creo que esto sólo debería ser sección con una S encendida en los datos. Sí, solo necesitamos una S al final de nuestra sección. Ojalá veamos nuestro texto una vez más. Bien. Ahora, intentemos editar este texto, y vemos una actualización. Entonces se ve un estilo de fuente, las alineaciones. Bueno, esto funciona porque cuando actualizamos la tarjeta, el valor de la tarjeta también es reactivo. Cualquier cambio luego se pasa de nuevo a los componentes que lo necesitan. Es por ello que vemos las actualizaciones en la vista previa de la tarjeta. Pero hay dos opciones que aún no funcionarán. Este es el audaz y cursiva. Esto se debe a que ambas son casillas de verificación que o bien van a ser un valor verdadero o falso. Para lidiar con esto, vamos a pasar a nuestra salida de texto y crear dos nuevos estilos. Estas clases se pueden activar o desactivar. El primero va a ser para negrita, que va a establecer la propiedad CSS from wave para negrita y luego la segunda es para cursiva. Estableceremos el estilo de fuente para que sea igual a cursiva hasta la parte superior. Todos tienen dentro de nuestra plantilla es nuestro elemento P para nuestro texto. Es dentro de aquí donde agregaremos las clases dinámicas como objeto. Dentro de este objeto, ahora tenemos dos clases que desea agregar. Estas son nuestras dos clases que se instaló abajo. Tenemos audaz y tenemos Italic. Ahora necesitamos una forma de activar o desactivar estas clases, dependiendo si se seleccionan estas casillas de verificación. El modo de hacerlo, vamos a echar un vistazo a nuestro objeto es que tenemos esta es propiedad cursiva y también es audaz. Ambos están disponibles en nuestro objeto de sección. El primero es punto de sección es negrita, y luego punto de sección es cursiva. Esto significa que si esto es cierto, se aplicará nuestra clase audaz y también la misma para Italic. Antes de terminar esto, digamos esto y probemos esto en el navegador. Vamos a cambiar el texto, ser audaces, y esto también funciona. Conviértete en cursiva y esto encenderá y desactivará la clase. También podemos ver si vamos a diferentes entradas de texto que todas estas secciones son completamente independientes también. 119. Añadir secciones nuevas: A pesar de que hemos suministrado al usuario algunas tarjetas de muestra editan, que son todas estas usadas aquí. También queremos hacerlos más flexibles permitiéndoles también agregar y quitar secciones, empezando por la “Agregar en nueva sección de texto”, que es esta sección justo aquí. Vamos a permitir que el usuario haga clic en un botón y agregue nuevas secciones justo debajo. Pero esto primero necesitamos un botón en el que el usuario pueda hacer clic. Voy a colocar esto encima en la edición de tarjetas. Justo por encima de este V for loop, colocado en un nuevo div con la clase de envoltura de sección add. Basado en un botón y efectos de agregar nueva sección de texto. No queremos que el usuario se vuelva loco y agregue montones y montones de secciones de texto diferentes que no caben en esta página. Entonces lo que vamos a hacer es restringir al usuario para que solo agregue en cuatro secciones. Dentro de la función también nos encargaremos de restringir esto a cuatro secciones. Pero en el front-end dentro de nuestra plantilla, sólo vamos a mostrar este botón si el número de secciones es menor a 4. Ya tenemos acceso a nuestros apoyos de página seleccionados los cuales tendrán esta información, agarra la página completa en las secciones y podemos comprobar si la longitud es menor a 4. Si lo es, lo aprenderemos mostrar este botón. Tenemos estos clústeres aquí, voy a agarrar esto y bajar a la “Sección de Estilo”, que también puede ser alcanzada. Antes de hacer esto actualicemos el navegador y veamos dónde se coloca este botón. Ahora esto nos deja con un tema. Vemos el error de no puede leer longitud de propiedad de indefinido. Si damos un paso atrás y pensamos en esto, algunas de nuestras páginas no tienen ninguna sección en absoluto, como algunas del reverso de las tarjetas y algunas del interior izquierdo no tienen secciones de texto que mostrar. Aquí estamos tratando de acceder a la propiedad length de algo que no existe. Para lidiar con esto, podemos agregar en un signo de interrogación justo después de las secciones y esto es lo que se llama encadenamiento opcional. Esto es todo JavaScript y nada que ver con VueJs. Este encadenamiento opcional es básicamente una forma de decir que a veces estas secciones pueden estar ahí y a veces pueden no estar. Estamos completamente conscientes de esto así que no arrojes un error. Si guardamos esto y ahora actualizamos el navegador, vemos que no vemos ningún problema aunque no tengamos secciones como esta parte posterior de la página. Con esta dirección, ahora podemos volver a nuestra sección de estilo y vamos a colocar esta “Añadir nueva sección de texto” sobre el lado derecho. Esto hará uso del flexbox y luego empuja hacia la derecha con “Justify Content Flex End”. Ver de inmediato, esto se empuja hacia la derecha de nuestra sección. Esto también necesita algún margen en la parte inferior. El espacio está fuera del soplo de contenido. El golpe de contenido es actualmente el tema y ya no tenemos un uso para esto. Podemos ir a las entradas de texto y también quitar esto de nuestra plantilla. Este botón y también los enlaces lo suficientemente libres sobre la plática también se beneficiarían de un estado flotante. Cuando el usuario pasa por encima de esto se puede cambiar el color para que el usuario sepa que esto se puede hacer clic. Ya que queremos aplicar esto a diferentes secciones, voy a colocar esto más en la vista [inaudible]. Dado que esta sección de estilo no tiene alcance, solo sopla el botón. Pase los estados y también lo mismo para cualquier elemento de la lista también. Tan solo una propiedad para esto definirá la propiedad de color. Este valor RGB de 108108241. Tu estado de flotación ahora está funcionando ya que ahora podemos presionar con la funcionalidad para agregar una nueva sección. Después de esto, vamos a pasar a lo que usamos tarjeta actual y crear una función la cual va a actualizar nuestra tarjeta seleccionada. Abajo, crea una nueva función llamada “Añadir sección”. Recuerda antes dijimos vamos a limitar el número de secciones a antes. Pero también podemos ocuparnos de esto en lo más alto de nuestra función. Podemos comprobar si la página seleccionada, el valor, las secciones, la longitud es mayor o igual a 4. Si esto es cierto, entonces regresará fuera de esta función sin ejecutar las líneas de código, que estamos a punto de escribir. Lo que vamos a hacer ahora es básicamente crear un nuevo objeto y luego empuja a nuestra tarjeta seleccionada para mantener la misma estructura que el resto de las tarjetas, dirigirse al punto de datos js, y copiar uno de estos objetos de sección. Pero a todas las tiendas de función en una constante llamada Sección Nueva. Esto igual a objetos. Para preguntar al usuario, vamos a configurar la entrada del usuario para que sea “ingrese su texto aquí”. Podemos mantener en su lugar una altura por defecto, un color por defecto, familia de fuentes, y todo el resto de las opciones que podemos mantener como valor por defecto. También puedes cambiar estos si lo prefieres. Entonces lo que tenemos que hacer ahora es seleccionar nuestras tarjetas completas, entrar en la página seleccionada y luego agregar cada nueva sección. Esto es muy similar a lo que estamos haciendo cuando actualizamos la tarjeta justo aquí. Basta con soplar nuestra nueva sección, recortar la tarjeta seleccionada, el valor en las páginas y podemos acceder al número de índice con nuestra función get page index. Llame a esta función a las secciones. Entonces vamos a empujar un nuevo elemento a esta matriz. A lo que queremos empujar es a este nuevo apartado. Devolver esta función en la parte inferior y luego volver a nuestra edición de código donde podemos importar este archivo y también acceder a nuestra función se utiliza para ejecutar tarjeta. Esto es de nuestra carpeta composable. Después entrevista tarjeta actual. A continuación necesitamos una función de configuración para acceder a esta función dentro de una constante. El funcion fue en la seccion. Esto es de uso tarjeta actual y finalmente agregar sección se puede devolver desde nuestra configuración. [ inaudible] cualquier clics puede llamar a esta función ese es nuestro botón, hago clic, que llamaremos a nuestra función de agregar sección. Vamos a probar esto, refrescar. Esta página en particular ya cuenta con tres secciones. Tratamos de sumar uno más. Eso son las cuatro secciones y nuestro botón ahora desaparece. Probemos con el frente. Tener una sección, 234 y esto ya está funcionando todo. En los próximos videos seguiremos un patrón similar sobre en el uso de tarjetas actuales. Vamos a estar creando una serie de funciones para actualizar nuestra tarjeta seleccionada y luego llamar a esta función desde nuestros componentes particulares. El siguiente será quitar una de nuestras secciones. 120. Eliminar secciones: En el último video, configuramos este botón para agregar una nueva sección de texto a cualquiera de nuestras páginas, y en este próximo video, vamos a configurar un botón para eliminar cualquiera de las secciones también. Eliminar una sección será un poco más simple que añadirla ya que si echamos un vistazo a nuestros datos, dentro de cualquiera de nuestras páginas, estas secciones se colocan dentro de una matriz. Este en particular sólo tiene una sola sección de texto, pero podríamos tener hasta cuatro secciones dentro de aquí. Para eliminarlos, solo necesitaremos conocer el número de índice de la sección que queremos eliminar. Esto, vamos a crear una función en UseCurrentCard. Entonces bajemos al fondo y creemos nuestra función llamada RemoveSection. Como acabamos de mencionar, la RemoveSection también necesitará tomar en el SectionIndex cuando llamemos a esta función. Entonces al igual que arriba cuando agregamos una nueva sección, también necesitamos agarrar la tarjeta seleccionada, entrar en la página actual, y luego en la matriz de secciones. Entonces vamos a pasar esto. Pero esta vez, en lugar de empujar un nuevo elemento a la matriz, queremos hacer uso del método de empalme de JavaScript. Con empalme, necesitamos pasar en ella dos valores. El primero va a ser la posición dentro de la matriz del elemento que queremos eliminar, y ésta será del SectionIndex, separado por una coma, el número de elementos que queremos eliminar. Tan solo queremos quitar la sección única. Está bien. A continuación, devuelve esta función. Esta función se va a llamar desde el componente de entrada de texto. Nuestro composable ya ha sido importado, por lo que todo lo que necesitamos hacer es importar o extraer nuestra función, que es RemoveSection. Además, el retorno es para que podamos usar esto dentro de nuestra plantilla. RemoveSection, como acabamos de ver también, requiere el SectionIndex cuando llamamos a esta función. Este componente ya tiene esta disponible dentro de los apoyos. Por lo que ahora podemos subir hasta la parte superior de nuestra plantilla y justo encima del área de texto, crear una nueva sección la cual va a envolver nuestro botón para quitar la sección. Para el estilo, coloque en la clase, text-input-header. Entonces dentro de aquí vamos a colocar en un botón. Al lado de este botón quitar, también añadiremos algunos de los otros botones más adelante también. Pero ahora, sólo necesitamos el botón único con una x, que va a escuchar por un clic. Entonces desencadenar nuestra función. Pase en el SectionIndex, que es nuestro prop. Acude al navegador y prueba esto. Haga clic en la X. Esto ya se elimina. Vayamos a una tarjeta diferente y quitemos la del medio. Dado que todo es reactivo, eliminar estos también se actualizará la vista previa también. También justo como nota al margen antes de terminar este video arriba, si entramos a la consola, vemos que actualmente estamos siendo gritados por la biblioteca de vistas porque estamos usando una función de reloj y esto es solo por la forma en que hemos estructurado esta vigilante. Si bajamos, este vigilante espera una función de devolución de llamada como segundo valor. Entonces para quitar este, lo que tenemos que hacer es quitar esta función directamente. Crea una nueva función UpdateCard a continuación. Pasa esto adentro. Entonces simplemente podemos llamar a esta actualización como devolución de llamada. Entra en el navegador. Abre las herramientas de desarrollador, en la consola, y esto ahora se deshace de nuestro mensaje de error. 121. Reorganizar el orden de las secciones: Si tenemos múltiples secciones de texto al igual que vemos aquí, sobre el lado derecho, puede ser útil colocar también en un botón arriba y abajo para reorganizar el orden de las secciones. Para ello, vamos a subir a las entradas de texto y luego necesita en la parte superior. En el último video, creamos esta sección. Esto fue para nuestro encabezado. Entonces justo encima de este botón, crea una nueva sección div, que será un envoltorio para ambos de este botón arriba y abajo. El primero, vamos a enumerar ahora por un clic, que va a activar una función que aún no hemos creado, pero esto se llamará UpdateSectionOrder. Esta función va a tomar dos cosas. El primero va a ser el SectionIndex, que es de utilería, y la función que necesitaremos para que sepa en qué sección queremos mover. El segundo valor es la dirección que queremos mover esta sección. Entonces si pensamos en esto, esta es una matriz. Por lo que esta será la posición de índice 0, ésta será una, y ésta será dos. Por lo que para mover cualquiera de estas secciones hacia arriba, necesitamos pasar una negativa para empujarnos hacia arriba en la matriz. Dentro de nuestro botón, colocaremos en un icono dentro del elemento de imagen. El origen es el símbolo at en los activos, los iconos, y tenemos un icono llamado arrow-up.svg, el texto alt de flecha hacia arriba, luego duplica este botón para el siguiente y coloca esto justo después. Esto llamará a la misma función, pero esta vez tendremos una positiva, la flecha hacia abajo, y la misma para el texto alt. Está bien. Ahí están nuestros dos botones, pero esto también necesita un poco de estilo. Esta sección envolverá todos los botones como el encabezado de entrada de texto clásico. Voy a agarrar esto y anidarlo por dentro. Tenemos nuestro div y también este botón también. Podemos hacer uso del flexbox y también del espacio entre propiedad para alinear esto a través de la página. Abajo al fondo en la sección de estilo, hice nuestra clase. En primer lugar, el tipo de pantalla de flex. Esto nos dará la dirección flex predeterminada de fila, por lo que esto se colocará a través de la página. Apenas por contenido, agregaremos el espacio entre y luego algún relleno en la parte inferior. A continuación, reduzca el tamaño de las imágenes apuntando a la misma envoltura y luego a los elementos de la imagen. Ancho de 15 píxeles y esto reducirá el tamaño de nuestros iconos. Algún relleno a la derecha de cinco píxeles. Simplemente juega un poco de espacio entre cada uno de estos iconos. Está bien. Ahora necesitamos configurar esta función de nuevo en UseCurrentCard. Abajo en la parte inferior, función, llame a esto UpdateSectionOrder. Esto también pasó el SectionIndex como primer valor, y el segundo fue la dirección, que era o positiva o negativa. Es positivo o negativo un número el cual utilizaremos para actualizar la posición del índice de secciones. El primer paso es crear una matriz que va a contener todas las secciones para esta página. Al igual que arriba, podemos acceder a nuestras secciones con esta parte del código, copiar esto. Justo debajo de esto antes de que realmente realicemos este interruptor, también necesitamos comprobar si este interruptor es realmente posible. Con esto, nos referimos a si estamos actualizando la parte superior de aquí y damos click en arriba, esto no tiene a dónde ir. El mismo para el de abajo también si hacemos click en abajo, no tenemos una sección debajo de esta para reemplazarla por. Entonces para resguardarnos contra esto, colocaremos en un comunicado if, pegamos en nuestras secciones. Entonces dentro de aquí, si pasamos en nuestro SectionIndex más la dirección, entonces comprobaremos si esto es igual a indefinido. Está bien. Entonces solo para aclarar lo que estamos haciendo aquí, estamos agarrando todas nuestras secciones en esta página. Queremos resguardarnos de que este sea el primero o el último apartado donde lo que estamos haciendo es agarrar el actual SectionIndex. Entonces si este fue el primero, se colocará cero. Si el usuario hizo clic en el botón arriba, éste será cero y luego uno negativo. Si así fuera, esto equivaldría a indefinido, por lo que esto sería entonces cierto. Si SectionIndex, sin embargo, fue nuestra última área de texto, en este caso será la posición de índice 2. Si la dirección fuera positiva, éste sería entonces el índice número 3, que no está disponible por lo tanto volveríamos indefinido. Si incluso uno de estos es el caso, queremos devolverlo de esta función sin actualizar nuestras secciones. De no ser así, la función seguirá funcionando, y si llegamos a esta etapa, ahora podemos cambiar todas las posiciones. Esto es realmente solo cuestión de cambiar las posiciones de índice de dos elementos de matriz. Estos dos artículos de matriz es la sección de impuestos en la que hemos hecho clic y también la sección de impuestos que está en el lugar al que queremos trasladarla. Así es como se ve. Necesitamos crear una matriz, que es igual a otra matriz. Vamos a establecer nuestra tasa de cambio para que sea igual a una diferente. Esta primera, que es la matriz actual, va a tomar dos cosas. En primer lugar, el elemento de matriz que queremos mover, al que podemos acceder con array, después pasando nuestro SectionIndex, y luego separado por una coma, seleccione el elemento de matriz que queremos reemplazar. Entonces vamos a agarrar nuestro array, pero esta vez pasaremos en el SectionIndex más la dirección. Después hacemos lo contrario en la segunda matriz, por lo que cambiamos alrededor de las posiciones. El primer hallazgo es nuestra matriz, pasar en el SectionIndex más la dirección, y luego reemplaza con array SectionIndex, y devolver esto de nuevo desde nuestra función y luego importar esto en nuestra entrada de texto. Ya estamos accediendo a nuestra función UseCurrentCard, pero simplemente pasando nuestra UpdateSelectionOrder. Este nombre coincide con la función que se colocan en la parte superior. Por lo que cuando hacemos clic en cualquiera de estos botones, ahora deben actualizar nuestros números de índice. Probemos esto en cualquiera de nuestras secciones. Ahora podemos dar click hacia abajo en la sección superior, ahora se mueve hacia el medio. Vuelve a hacer clic hacia abajo en la sección superior, y ésta cambiaré los números de índice. Mira la sección inferior y esto funciona, y también prueba contra nuestros guardias para la sección inferior. Si hacemos click hacia abajo, no pasa nada. Si hacemos clic en bucle en la sección superior, esto también funciona bien. Esto también actualizará la sección de edición y la sección de vista previa ya que todo es reactivo, pero tenemos un pequeño problema sin embargo. Si vamos a alguna de nuestras páginas que no tiene secciones nuevas, agregamos cuatro secciones nuevas aquí. Esto puede ser el número 1, el número 2, el número 3 y el número 4. Intentemos actualizar esto. Si hacemos click en el botón arriba y abajo, no vemos nada que se esté actualizando en este lado de edición. Ahora, esto se remonta a algo de lo que aprendimos antes, que es agregar claves a nuestro bucle v-for. Al actualizar una lista de elementos como este, v necesitará una clave única para poder actualizar eficientemente. Aún no hemos colocado una identificación en nuestras nuevas secciones. Podemos ver esto irá a la edición de tarjeta y a nuestro bucle v-for. Cada una de estas claves está confiando en un ID de sección. Para generar un ID para esto, acude a nuestra UseCurrentCard y podemos colocar en un campo ID dentro de nuestra nueva sección. ¿ Cómo vamos a generar una identificación única? Si estamos usando una base de datos, esto sería relativamente sencillo. La base de datos generaría uno para nosotros. Podríamos entonces recuperar el artículo guardado y también guardarlo en nuestra nueva sección. Para nuestro caso, necesitamos generar uno dentro de la app. Para esto, vamos a importar un nuevo paquete, así que abre la terminal. Host en este servidor con Command o Control C, y luego vamos a instalar un nuevo paquete con npm, he instalado, y el nombre del paquete es UUID. Este paquete va a generar un ID único para cada uno de los artículos. Es realmente sencillo de usar. Si vamos a la parte superior de este archivo, entonces importaremos este módulo. Vamos a importar la versión 4 como uuidv4 de nuestro paquete, que es UUID. Ahora, hemos importado nuestra versión 4 y vamos a poder acceder a ella con esta variable justo aquí. Ahora bien, si vamos a la otra sección y ponemos esto igual a nuestro nombre que es uuidv4, y luego llamamos a esta función por lo que generamos una nueva ID. Vamos a probar esto. Ahora, necesitamos reiniciar el servidor con npm run serve, abrir el servicio y agregar cuatro nuevas secciones; número 1, número 2, número 3, número 4. Vamos a dar click arriba, esto se moverá hacia arriba. De nuevo, intentémoslo. Ahora todo esto está funcionando correctamente. 122. Cambiar la altura de la sección: Cuando creamos el menú cuando pasamos el cursor sobre esta área de texto, también agregamos algunos botones para aumentar o disminuir la altura de la sección. Ahora podemos usar esto y crear la función para hacer este cambio. Esto va a hacer que cada una de estas áreas de texto sea aún más pequeña o más grande. Esto [inaudible] a nuestro menú, que está dentro de la entrada de texto, y luego voy a hacer una búsqueda del medio menú. Esta es la sección que necesitamos, justo aquí, tenemos nuestros botones arriba y abajo. El botón que necesita [inaudible] para un clic, que va a activar una función cuando aún no has creado llamada cambio de altura. Esta función va a tomar en el número de píxeles que queremos aumentar o disminuir la altura en. Voy a colocarlo en 100 aunque este botón aumentará la altura de esta sección. Sobre esto, el lugar está en nuestro segundo botón pero esta vez disminuiremos la altura en 100 hasta la configuración. Vamos a crear esta función. Esto está en la parte inferior. Esto fue cambio de altura, que aceptará el valor y éste será ya sea un positivo o un negativo de 100 píxeles. El primero que queremos hacer es almacenar la altura actual de la sección o podemos extraerlo de nuestra sección actual. Esto es [inaudible] por lo que también necesitamos acceder al valor y luego a la propiedad de altura. Justo antes de actualizar esta sección del tramo de alta ciudad, vamos a pasar en guardia. Queremos resguardarnos contra que el tramo sea demasiado pequeño o demasiado grande. Después de esto, comprobaremos si la sección se va a reducir a una altura de cero o se incrementará por encima de los 600 píxeles, que es la altura de esta tarjeta. Para ello, coloque en las sentencias if, vamos a comprobar si la altura actual que tenemos justo arriba es actualmente igual a 100 píxeles y el valor es igual a 100 negativos. Por lo que esto es comprobar si la altura actual del área de texto es 100 píxeles y también si el usuario ha hecho clic en el botón de disminución. Esto dará como resultado que una altura actual sea cero. Obviamente no queremos esto, por lo que necesitamos comprobar en contra de esto y también lo contrario si estamos a la altura máxima. Entonces si la altura actual es igual a 600 píxeles, y también si el valor que se pasa a esta función es igual a 100, si lo es, vamos a devolver alter disfunción sin ejecutar ningún código. Esto ha arrojado un error y creo que sólo necesitamos envolver toda la sección dentro de los corchetes. Pero si llegamos a esta etapa a continuación, esto significa que ahora podemos actualizar la altura. Para actualizar esto, vamos a actualizar esta sección actual, necesitamos acceder al valor, y luego a la propiedad height, y vamos a establecer esto igual a nuestra altura actual más el valor, que será [inaudible] 100 pixels más alto o 100 píxeles más bajo. Esto en realidad es todo lo que necesitamos hacer para esta función porque si actualizamos en ella la sección actual justo aquí, ya tenemos un vigilante colocado en esto, que luego actualizará nuestro composable. Esto significa que solo necesitamos devolver esto de vuelta de toda función, entonces podemos probar esto. Para el primero, aumenta el tamaño, vamos a hacerlo más grande, y también podemos disminuir el tamaño. Si seguimos haciendo clic, no podemos reducir esto debajo de los 100 píxeles y también si aumentamos esto, llega a un tamaño máximo también. 123. Estilo adicional: Este video se va a centrar en rematar algunos de los toques CSS que necesitamos añadir a nuestro proyecto, empezando por la fuente más en la app.vue. Actualmente, tenemos esta fuente que acaba de estar aquí, y eres libre de usar esta si lo prefieres, o cualquier otra familia de fuentes. Con el proyecto de inicio, si entramos en el index.html, dentro de la sección de encabezado, tenemos este enlace a dos familias de fuentes diferentes. Este Merriweather es el que voy a colocar dentro de la app.vue y ya usamos este oversoplado temprano en el interior de la cabecera. Podemos ver esto si entramos en el encabezado de la aplicación. Esta es la fuente que configuramos para esta sección. Pero volvamos a la app.view. Coloquemos en la fuente Merriweather, con un respaldo Serif, por si acaso hay algún problema al cargar esta fuente. Además, agregaremos esta fuente a la entrada, y también al área de texto. Sólo tienes que copiar esto. El motivo por el que hacemos esto es porque por defecto, las entradas no heredan las fuentes automáticamente. Por lo que también necesitamos ponerlos así. Guardemos esto. Esta nueva fuente ya ha entrado en vigor. Dentro de esta vista crear, que puedes ver justo aquí, también tenemos algunos problemas que resolver. Tenemos estos enormes botones de página que necesitan alinearse a través de la parte superior, y también reducir el tamaño también. También tenemos algún espaciado entre cada una de estas secciones de texto y esto también da como resultado que las secciones sean empujadas fuera de la página, hacia el componente de salida de texto. Primero nos ocuparemos de estas secciones de texto eliminando cualquier margen predeterminado y aprovechando también el tamaño de caja. Toda la sección de inicio está envuelta en el elemento p. El margen por defecto volverá a ser cero. Guarda esto y comprueba que está funcionando. Cada una de estas secciones p también está rodeada en la frontera. Recuerda cuando añadimos un borde a cualquier elemento HTML, también lo agregará al tamaño general. Para evitar esto, podemos configurar el tamaño de caja para que sea border-box. El siguiente que hay que hacer es sacar de estos cuatro botones para cambiar las páginas. Esto tiene su propio componente, que es el SwitchPage.vue. Tendremos una lista bastante estándar desordenada. Podemos hacer uso del flexbox CSS dentro de la sección Estilo. Ahí están nuestros enlaces colocados a través de la página porque la dirección flex predeterminada es fila y creo que solo necesitamos mover estos enlaces justo fuera de la sección de tarjetas. Podemos ver estos tienen este color de fondo gris. Pero sólo vamos a ir a la sección Crear, que está en los vues. Creo que solo levantaremos este switch page componentes para estar fuera de la envoltura. Esto se colocará justo por encima de todas las secciones de tarjetas. Si paso al estilo en el interior del componente de página de cambio, continúo trabajando con la lista desordenada agregando algún margen en la parte superior e inferior, de 1.6 gramos, y luego cero en la izquierda y la derecha. Lo siguiente que tenemos que hacer es reducir el tamaño de cada uno de estos iconos y también alinear el texto al centro de este icono. Cada uno de estos enlaces tenía la clase de selección de página, y podemos usar esta clase para reducir este tamaño de icono. En primer lugar, las alineaciones harán uso del flexbox, y luego establecerán la alineación vertical con elementos de línea en el centro. Ahí está nuestra alineación vertical, y a continuación, algún margen en el lado derecho de 10 píxeles. Esto nos va a dar algún espaciado en el lado derecho de cada uno de estos enlaces. A continuación, la imagen. El ancho máximo de este icono de esta imagen va a ser de 30 píxeles. Debería reducir el tamaño de nuestros iconos hacia abajo. Además, si agregamos algún margen a la izquierda, esto agregaremos un poco de espacio entre la imagen y también el texto. Bien. Este proyecto ahora se ve un poco mejor, y también eres libre de seguir adelante y cambiar cualquier estilo que te gustaría solo algunos estilos base para mejorar el aspecto y la sensación general. Justo antes de terminar esta sección, lo siguiente vamos a ver el uso de proveer e inyectar con la API de composición. 124. Proporcionar e inyectar con la composición: Proporcionar e inyectar es algo que ya hemos visto, el tener una fuente de datos en un componente de nivel superior, y luego inyectarlo directamente en cualquier componente hijo sin necesidad de pasar apoyos a cada nivel de componente. También podemos usar esto con la herramienta de composición. La función de configuración puede aceptar ya sea proporcionar o inyectar. Uno de los temas anteriores fue que los datos proporcionados no eran reactivos. Cuando hubo un cambio en los datos dentro de este proveedor, no se actualizó ninguno de los componentes hijo por debajo de los cuales se basaba en esto. Pero ahora sabemos de view free, la API de composición y también la reactividad, ahora podemos hacer uso de esto para solucionar este problema. Pasado a los componentes de vista de actualización y les voy a mostrar cómo podemos usar esto con la composición. Recuerda aunque un proveedor se puede colocar en cualquier componente, no solo en esta vista de actualización principal. En primer lugar, necesitamos una función de configuración con algunos datos. Coloque esto dentro de nuestra sección de script, y luego para nuestros propósitos de demostración, cree un objeto de usuario con la propiedad de nombre y también la ocupación. Dado que este es nuestro componente de nivel superior, vamos a colocar en el proveedor dentro de aquí. Para ello, necesitamos importar esto desde la biblioteca de vistas. Esto es proporcionar desde la biblioteca de vistas. Después hasta la función de configuración podemos colocar en nuestro proveedor, que va a tomar dos cosas. El primero es el nombre de estos datos, y esto es como un nombre de variable. El siguiente es el usuario. Después separados por coma vamos a pasar por abajo los datos reales que desea enviar. En nuestro caso, esto se refiere a nuestros objetos de usuario. Dentro de cualquiera de estos componentes hijo, cuando inyectamos en el usuario, estos son los datos que recibirá. Para guardar este archivo, voy a pasar a la salida de texto. Ya tenemos una función de configuración y también tenemos una importación justo aquí, por lo que también podemos importar inyectar aquí, y luego podemos inyectar este objeto de usuario hasta la configuración, crear una constante. Para almacenar esto, datos de usuario, acceso inyectar. Entonces cuando pase los datos que desea inyectar, y en nuestro caso, le damos este nombre al usuario. Pasa esto en forma de cuerda. También podemos agregar un segundo valor opcional dos, que es un valor predeterminado. Al igual que cuando usamos estas ranuras desde el principio cuando agregamos un dato predeterminado o una pieza de retroceso, solo voy a alternar cadena de no hay datos disponibles. El retorno es constante de datos de usuario hacia abajo en la parte inferior. Podemos comprobar que esto está funcionando generando esto dentro de nuestra plantilla, pasando al navegador y recargar esto, y ahí está nuestro objeto en la parte superior de cada uno de nuestros componentes de salida de texto. Ahora, la reactividad fue un tema desde el principio cuando miramos proveer e inyectar, con las opciones API, veamos cómo esto se compara con la composición. De vuelta a nuestra app dot vue, podemos simular los datos obtenidos con timeout establecido como función NA, que llamaremos después de tres segundos. Lo que quiero hacer dentro de aquí es comenzar a usar objetos, acceder a la propiedad name, y establecer esto en cualquier valor diferente. Podemos probar esto con una actualización. Dale a esto tres segundos. No vemos actualizaciones dentro de este componente infantil. Incluso con la composición proporciona e inyectar no es reactiva por defecto. Pero como ya sabemos, la composición nos da acceso a envoltorios reactivos, por lo que podemos usar ya sea áspera o reactiva. En esta ocasión voy a ir por reactivo, dentro de la app dot vue y tirar de esto. Esto ahora va a ser un envoltorio para nuestros objetos de uso. Cortar el contenido del objeto, colocar en reactivo, pegar esto dentro de los corchetes. Guarda esto una vez más y más en el navegador, actualiza. Dale tres segundos, y nuestro nombre ya está actualizado. Si tuviéramos múltiples piezas de datos para pasar a componentes hijos, también podríamos configurar múltiples proveedores, igual que este de aquí, o alternativamente, podríamos transmitir todos nuestros datos en un objeto reactivo grande, y luego pasa esto al proveedor. Es así como proveer e inyectar funciona con la composición. No necesitamos esto para nuestros proyectos, así que voy a quitar la función de configuración, las importaciones, también tenemos la inyección dentro de la salida de texto, mover los datos del usuario, la importación, los datos del usuario, y luego finalmente, nuestro objeto devuelto. los casos de uso para proveer e inyectar no sean tan comunes ahora, ya que también tenemos la capacidad de usar archivos componibles y luego importarlos directamente a los componentes hijos. Pero no es una opción y una forma novedosa de transmitir nuestros datos, sobre todo si tal vez tenemos una aplicación más pequeña, no planeamos descomponer nuestro código en archivos composables más pequeños. Hemos empujado a través de un buen código de proyecto en esta sección, y nuestro proyecto es casi completamente funcional. En la próxima sección, descubriremos que algunas características más geniales de vue.js Y también el router de vista proporciona. 125. Introducción a la sección: guardias de navegación y carga lenta: En ocasiones en nuestro proyecto, no queremos que el usuario visite cada ubicación que tenemos o a veces también queremos proporcionar algunas comprobaciones para ver si el usuario está realmente permitido en alguna ruta dada. En esta próxima sección, echaremos un vistazo a los guardias de navegación, que se proporciona con el router Vue. También veremos una técnica nunca realmente útil llamada carga perezosa, que nos permitirá dividir nuestra aplicación en piezas más pequeñas para mejorar el tiempo de carga de página. 126. Guardias de navegación: Como parte del paquete view router que hemos instalado, podemos hacer uso de guardias de navegación al cambiar entre nuestra ruta. Se puede pensar en un guardia de navegación como alguien parado en la puerta de un club, pidiendo ver alguna identificación antes de poder entrar. En cuanto a código, esta identificación, puede ser cualquier cosa como si el usuario está conectado, si tiene los permisos correctos o incluso cosas como solo permitir un usuario acceder a un área de descarga si ha adquirido ese artículo en particular. Básicamente podemos ejecutar cualquier código que nos guste ya sea antes o después de un cambio de ruta. Hay diferentes guardias disponibles, pero echemos un vistazo a algunos de los comunes, empezando por si queremos aplicar una guardia contra toda nuestra ruta, con esto podemos utilizar una guardia global que se llama BeforeEach. Hacemos esto a nuestro archivo de ruta, y esto está dentro del router y luego el index.js. Debajo de la matriz de nuestra ruta, podemos acceder a nuestro router con esta constantes de router. Tenemos que ir justo debajo de esto, después podemos acceder a este router y luego llamar al guardia, que es BeforeEach. BeforeEach es un guardia de navegación global por lo que se aplicará a todas las rutas en nuestro proyecto. Cuando es un cambio, vamos a proporcionar una función de devolución de llamada, y es dentro de esta función donde podemos interceptar este cambio de ruta y luego ejecuta algún código. Como ejemplo muy básico, podemos devolver falso dentro esta función y esto detendrá cualquier cambio de ruta que se produzca. Ni siquiera podemos cargar nuestra app. No podemos hacer clic en el botón Inicio y también estos enlaces de categoría tampoco funcionan. Pero es en su más básico. Es así como bloqueamos un cambio de ruta y como esto no es muy específico se aplicará a todos los cambios de ruta. BeforeEach también nos da acceso a los detalles de la ruta, de donde vas y también a la ruta a la que nos vamos. Vamos a pasar estos a nuestras funciones con hacia y desde. Según suena, el a valor es ruta a donde vas y el de es el que nos vamos. Veamos cómo se ven estos. Pasando el a, y luego también el de variables. Pasado a la consola. Esos son nuestros dos objetos. El primero es la ruta a la que vas y esta es solo la ruta de inicio. Esto tiene sentido. El segundo es el de los objetos, y como no estamos cambiando las rutas, esto sigue siendo la barras por defecto versus si eliminamos la sentencia return y para cambiar entre sus rutas sobre. Pasamos de la página principal a nuestra categoría, y podemos ver esta categoría si hacemos click en a sección, y hacemos convenio desde la ruta de inicio. Estos objetos nos dan acceso a cosas como el camino completo de la ruta, las consultas, el nombre de nuestras rutas, los params, y todos estos son totalmente accesibles desde nuestra función, y esta información significa que podemos ser más específicos con qué rutas queremos resguardar. Por ejemplo, en lugar de ver todas nuestras rutas dentro de aquí, podríamos vigilar a un usuario que ingresa a una ruta admin. Podemos agregar una declaración if dentro de aquí y podemos acceder a nuestro valor para luego seleccionar nuestro nombre. Este nombre, como la categoría que acaba de aquí, es un nombre que le damos a la ruta dentro de nuestra matriz justo arriba. Podemos acceder al admin. Si to.name es igual a admin, y asegúrese de que este mucho sea el nombre de arriba. Si esto es cierto, le vamos a devolver una alerta al usuario con el texto de “Esta área es sólo para usuarios que han iniciado sesión”. Echemos un vistazo a esto en el navegador. No usamos ninguna de las variables, por lo que también podemos eliminar esto. Toda la ruta parecía funcionar completamente bien, y vamos a ir a /Admin, y ahí está nuestra alerta. Una vez que hacemos click en “Ok”, seguimos siendo llevados a esta ruta admin. Actualmente no estamos bloqueados en el usuario, simplemente estamos mostrando una alerta. En realidad aunque tal vez quisiéramos comprobar si el usuario está conectado o tiene privilegios de administrador, en lugar de que solo sea una alerta. Si no se permitiera el acceso, podríamos devolver false o incluso devolver un método de redirección del router, como el método push, y la forma de hacerlo es acceder también a la variable relativa, y entonces todavía tenemos acceso para hacer cosas como el método push que miramos antes. Esto significa que si el usuario está intentando acceder a esta ruta de administración, podríamos luego redirigirlos a la página de inicio. Estamos en la página de inicio por el momento. Pero si vamos al admin, Esto luego nos empujará de vuelta a la página de inicio. Junto con esto ante cada guardia que se corre antes del cambio de ruta. También tenemos AfterEach to, y este es un gancho que corre una vez que la navegación ha terminado. Dado que la navegación ya ha sucedido, tampoco puede realizar ningún cambio como redireccionar o bloquear la ruta. O en su lugar, tal vez podamos usarlo para cosas como el seguimiento de las visitas de un usuario a una página en particular o incluso cambiar algunos detalles de página después de que se cargue. También puede tomar en el ida y desde los datos si es necesario también y ambos de estos guardias son considerados globales ya que correrá por cada cambio de navegación. Si no queríamos que fueran globales, también podemos colocarlos directamente en una sola ruta también. Yo sólo voy a comentar esto y dejar esto para una referencia. Pero también podemos colocar esto en cualquiera de nuestras rutas componentes. Significa que si solo quisiéramos proteger esta ruta de administración por ejemplo, podríamos colocar directamente un guardia sobre este objeto. El guardia para esto se llama antes de entrar y luego configuramos un método el cual se va a ejecutar cada vez que intentemos ingresar a esta ruta admin. Al igual que antes podemos hacer cosas como devolver un falso para bloquear cualquier acceso a esta ruta. El homepage funciona, la categoría funciona, la caja funciona. Pero si estamos tratando de entrar al admin, podemos ver que el componente no está cargado ya que no tenemos el título admin. Esto también podría tomar en las variables para y también el de si necesitábamos acceso a esta información. Pero de manera realista, volveríamos a hacer algo como comprobar si el usuario está conectado antes de que realmente carguemos esta ruta. Actualmente no tenemos acceso a un usuario para este proyecto, pero podemos simular uno para este ejemplo. Justo encima de las rutas que serían constantes llamadas login, las cuales serán inicialmente falsas. Entonces podemos usar esto abajo dentro de nuestra guardia. En lugar de devolver false directamente, primero vamos a comprobar si el usuario no ha iniciado sesión antes de bloquear esta ruta. Recuerda que esto actualmente es falso. Entonces si tratamos de refrescar, no vemos ningún acceso a estos componentes. Si cambiamos esto a cierto, ahora tenemos acceso a nuestro administrador. Este tipo de guardia también sólo se activará en un cambio de ruta completo. Significado, el cambio de ruta debe desencadenar un nuevo componente. No se ejecutará si solo tenemos un cambio de la consulta o el cambio de params en la URL. igual que antes cuando tuvimos que alterar estos manualmente, casi cambiando entre estas categorías. Bueno, para este ejemplo, seguimos quedándonos en los componentes de la categoría, pero sólo estamos cambiando los params. Para este caso en particular, el guardia no correrá ya que estamos en los mismos componentes. Otra cosa útil que podemos hacer con estos guardias es mover el código a funciones independientes, así que si tuviera una función que comprueba si el usuario está conectado. Podríamos entonces extraer nuestro código de nuestra guardia. Apagará las sentencias if-, colocará esto en nuestra función, y su nombre de función puede ser ahora guardia de avance rápido como una matriz. Entonces para esto, no queremos ejecutar este método, lugar de pasar en una matriz un nombre de función antiguo. Guarda esto y nuestras rutas funcionarán. Tratemos de visitar al administrador. Podemos acceder a esto ya que nuestro uso es verdadero, cambia a lo falso, y esta vez bloquea nuestro acceso. De ser necesario, estas funciones también pueden tomar estas dos y esto a partir de datos, si necesitamos acceder a la información de ruta. Un caso de uso realmente bueno para estas funciones es si tenemos múltiples guardias en diferentes rutas, y vamos a querer comprobar si el usuario ha iniciado sesión en más de uno. Esto significa que en lugar de duplicar este código dentro de la función para cada una de estas rutas, podríamos en cambio reutilizar estas funciones tantas veces como necesitemos. El último tipo de guardia que quiero mostrarles es en guardias de componentes. la misma manera que suenan, entran en los archivos de componentes individuales, como nuestro componente admin. Entonces antes de hacer esto, vamos a comentar esto fuera, también todos resguarden de estos componente, y luego también nuestra variable login. Para estos en guardias de componentes también nos quedaremos con el componente admin. Por lo tanto, dirígete a esta página dentro de las vistas. Escribe nuestra sección de guiones. El primer guardia que vamos a ver se llama BeforeRouteleave. Como suena esto va a ejecutar esta función antes de que tratáramos de salir de una ruta en particular. Esto puede ser útil para pedir al usuario que cierre sesión antes de salir de esta página en particular. Además, asegúrate de haber guardado los cambios antes de que se pierdan. En el prompt, el usuario al que vamos a acceder a la ventana, ellos confirman, y esto configurará un mensaje de confirmación al usuario. Este mensaje será una cuerda y voy a decir: “¿De verdad te quieres ir?” Tienes cambios no guardados. Solo necesita ser una w minúscula, y luego almacenará esto dentro de una constante llamada confirmar. Esta casilla de confirmación le va a dar al usuario la opción hacer clic en ok o cancelar, lo que dejará esta constante ya sea verdadera o falsa. Si esto es falso, vamos a cancelar la navegación devolviendo false. Eso parece estar funcionando, refresca la página de administración. Ahora si tratamos de dar click en una ruta diferente, vemos la confirmación. Haga clic en “Cancelar” y esto se establecerá como falso, por lo que volveremos false, y esto da como resultado permanecer en esta página de administración. No obstante, si tratamos de hacer un cambio y hacemos clic en “Ok”, entonces confirmamos que esto está bien de hacer, y luego seguiremos adelante con nuestro cambio de ruta. Esto también tiene acceso a y desde si necesitamos acceder a la información de la ruta. También tenemos acceso a dos guardias más que podemos utilizar; uno que es para entrar a la ruta, y uno fue para actualizarla. El primero es BeforeRouteEnter, y mira esto lo colocaremos en un registro de consola. Este es enter y una coma. El segundo es BeforeRouterUpdate, colocado en un registro de la consola de actualizaciones. Ya podemos ver cuándo se corre cada una de estas rutas. Guarda esto y abre las herramientas de desarrollador. Pasado a nuestro administrador. Solo vemos este mensaje enter, y aunque sigas actualizando, no vemos que se ejecute el mensaje de actualización. Entonces, ¿qué exactamente va a desencadenar este mensaje de actualización? Bueno, éste se ejecuta cuando la ruta se actualiza pero se reutiliza el mismo componente. Entonces como ejemplo, si hacemos clic en alguno de estos enlaces sobre la parte superior, lo confirmará. Cuando cambiamos entre los tres de estos enlaces, nos mantenemos en esta misma categoría componentes, pero solo actualizamos la consulta. Para este caso de uso, se ejecutará esta BeforeRouteUpdate. Confirma esto de [inaudible] ambos de estos guardias de perilla, y luego pasa a nuestra página de categoría. Esto está dentro de las vistas y pega esto en nuestra exportación. Refrescar. Vemos entra, ya que hemos entrado al componente catalítico. Cambia entre estas tres páginas, y ves que ahora se está llamando a la actualización. Los protectores de componentes también se pueden ejecutar dentro de la función de configuración también pero con un pequeño ajuste. En primer lugar, dentro de la categoría, quita estos dos guardias, y luego vuelve a nuestros componentes admin. Al usar la composición, primero necesitamos importarlos desde el paquete view router. Con composición, tenemos acceso a BeforeRouteleave y también BeforeRouteUpdate. La única diferencia es que usamos el prefijo on. Por lo que éste estará en BeforeRouteleave. Esto es del router de vista, comúnmente sección L para que no se ejecute, colocado en la función de configuración. Acceso en BeforeRouteleave, que luego va a ejecutar una función. Yo sólo voy a hacer uso del mismo ejemplo desde arriba. Pega esto en y descomenta esto hacia fuera. Guarda este archivo y dirígete a nuestro administrador. Trata de salir, cancelar y nos quedamos en la misma página. Haga clic en “Ok”, y luego se completa la navegación. Estos guardias son realmente útiles por tantas razones como proteger el acceso no autorizado, redirigir, y también escribir a través para simplemente mostrar en un simple mensaje al usuario. 127. Rutas de carga lentas: Otra característica que ofrece Vue Router es Lazy Loading. Esto se remonta al paquete de JavaScript que discutimos anteriormente. Nuestra aplicación se descompone en componentes y archivos más pequeños, lo que hace que sea mucho más fácil para nosotros el desarrollador escribir y mantener nuestro código. Herramientas como webpack, embundarán todos nuestros componentes y archivos juntos en un gran archivo JavaScript, que luego puede ser leído por el navegador. Como se puede imaginar en grandes proyectos, estos paquetes pueden volverse realmente grandes y ralentizar el tiempo de carga de la página en la primera visita. Por el momento, si pasamos a nuestro archivo index.js routers, importamos en todos los componentes que podamos necesitar. Por lo que cuando los usuarios que visitan nuestro sitio nunca hagan clic en alguno de estos enlaces o páginas, pero aún así pagarán el precio con descargarlos en el paquete inicial. carga perezosa es el proceso de dividir los componentes de estos enrutadores en paquetes o trozos separados, y solo se descargan cuando sea necesario dando como resultado que se reduzca el tamaño inicial del paquete. Por supuesto, habrá un pequeño tiempo de descarga para tirar de los nuevos componentes cuando se visite una ruta. Pero si estás usando componentes de manera eficiente, el efecto debe ser mínimo. Por el momento, todos estos componentes se importan utilizando la sintaxis de importación estándar. Con el add lazy loading, podemos hacer uso de una sintaxis de importación dinámica, que es compatible con el Vue Router, y lo hacemos sustituyendo cada importación por una función. Justo antes de hacer esto sin embargo, abramos las herramientas de desarrollador dentro del navegador, y podemos ver cómo se verán las cosas antes de hacer este cambio. Entra en la pestaña Red. Lo primero que vamos a hacer es hacer clic en “Deshabilitar caché”, para que no veamos ningún archivo guardado. Para este ejemplo, solo nos preocupamos por C y nuestros archivos JavaScript. Por lo que podemos hacer clic en el botón “JavaScript” para solo mostrar los archivos JavaScript. El mío ya está configurado en JavaScript, pero es posible que tengas este enlace todo seleccionado. Con esto seleccionado, refresca la página y ahora vemos que hemos descargado dos archivos JavaScript separados. El primero de los app.js es nuestro paquete principal de JavaScript y el paquete de proveedores contiene código de más de módulos de terceros, como los paquetes MPM que colocamos en nuestro proyecto. Lo clave a recordar aquí es que solo tenemos un paquete principal de proyectos, que es el app.js. De vuelta a nuestro archivo router, ahora podemos reemplazar estas importaciones estáticas por las dinámicas. En primer lugar, comenta esto, y luego vamos a crear una función para cada uno de estos para reemplazar nuestras importaciones estándar. El primero es el admin, luego establecer esto igual a una función, y la forma en que esto funciona es que todas estas importaciones originales se importarán inmediatamente. No obstante, una importación dinámica se coloca dentro de una función, y esta función solo se llamará cuando se requiera. En lugar de llamar directamente a nuestra importación, almacenamos esto dentro de una constante, agarramos la ruta del archivo, y luego pegamos esto como una cadena. También podríamos reemplazar esto, el símbolo @, y debería funcionar exactamente igual. He duplicado esto cinco veces más y la segunda es para el AppHome, pega el camino. El tercero es para Create. A continuación, tenemos la categoría, y luego la última es NotFound. Guarda esto casi ve qué efecto tiene esto. Si actualizamos el navegador, seguimos viendo nuestros dos archivos originales, que es nuestro paquete y el paquete del proveedor pero ahora habría renovado archivos JavaScript. Ahora bien, puede ser difícil saber exactamente cuál es cada uno de estos archivos, ya que son sólo un número. Si hacemos click en estos y entramos en la vista previa, solo vemos mucho código JavaScript. También podemos reemplazar este número por un nombre de trozo. Volver a nuestro router. El modo en que lo hacemos es agregar un comentario. Hacemos esto justo dentro de las declaraciones de importación, y esto está estructurado igual que un comentario CSS regular. El comentario que necesitamos colocar dentro de aquí es el WebPackchUnkName, y luego le damos a este trozo un nombre de nuestra elección. Mantengamos esto consistente y vayamos por el administrador, y se arregla. Entonces voy a copiar esto y reemplazar el resto de nuestra importación. El segundo es para el AppHome, Crear, la categoría, y luego finalmente el NotFound. Ahora bien, este WebPackchUnkName está en su lugar. Si vamos al navegador, vemos que ahora nuestros nombres se colocan en lugar de estos archivos numerados. Este de abajo que es el AppHome no debe ser una sorpresa ya que actualmente estamos en la página de AppHome. Pero por encima de esto, vemos algunos archivos diferentes. Vemos la categoría y también el Create.js. Ahora bien, esto puede parecer extraño porque todavía no hemos visitado esta página. Es posible que espere que, por ejemplo, la categoría no se cargue hasta que hagamos clic en uno de estos enlaces. Bueno, esto sucede porque por defecto, al usar la CLI de Vue, hará uso de una técnica llamada prerecuperación, que es como vista anticipando qué archivos podemos necesitar a continuación. Dado que ya somos dueños de estos componentes de AppHome, Vue entonces reconoce que esta página nos vincularemos a nuestra categoría y luego a la creación de componentes. Efectivamente anticipa necesitaremos estos componentes en algún momento pronto. No se iniciará la descarga de estos dos archivos hasta que termine de cargarse nuestra página inicial, por lo que no afectaremos el tiempo de carga de la página. Si miramos de cerca, tampoco vemos la página de administración ni los componentes NotFound también y esto se debe a que no tenemos ningún enlace directo a estos dos componentes desde este AppHome. Si queríamos ver esto, tendremos que ir al administrador, que luego descargará el admin.js. Además, si vamos a alguna ruta no reconocida, vemos que ahora se está descargando el componente NotFound. Tanto este admin en este NotFound no vincula a ninguno de los componentes, por lo que no vemos ninguna prerecuperación para esta página. Este Lazy Loading es una forma realmente eficiente de cargas en nuestros componentes y mejorando el tiempo de carga inicial de la página. Otra característica útil son nuestros componentes solo descargados quiere. Por ejemplo, estos componentes NotFound solo se descargarán del servidor la primera vez que se necesite, y luego cualquier visita futura a esta página servirá una versión en caché para eficiencia por lo que no descargamos un archivo múltiple tiempos. Es así como podemos usar Lazy Loading en nuestro Vue Router. A continuación, queremos echar un vistazo a cómo podemos agrupar trozos relacionados. 128. Agrupar las rutas en fragmentos: En el video anterior, le dimos un nombre a cada una de estas importaciones dinámicas poniendo en un comentario. cada una de estas importaciones se le llama un trozo, y junto con el uso de este comentario para nombrar nuestros archivos importados, también podemos usarlo para agrupar trozos a. Un ejemplo puede ser si tuviéramos un navbar, podríamos agrupar todas las páginas en enlaces de navbar también y descargarlas todas juntas. El modo de hacerlo es darle a cada componente que queremos agrupar el mismo nombre de trozo. Actualmente, a pesar de que prerecuperamos los trozos, la categoría en los componentes de crear aún lo descargan por separado. Si queríamos agruparlos, todo lo que tienes que hacer es darles el mismo nombre de grupo. Por ejemplo, un grupo de tarjetas-grupo. Lo mismo para la categoría. Después vuelve a tu pestaña de red y refresca. Vemos igual que antes, tenemos el Apphome que está flojo cargado, pero por encima de esto, ya no vemos nuestras importaciones separadas ni creamos y también nuestra categoría. En cambio tenemos este tarjeta-grupo el cual contiene el contenido de nuestros dos trozos. El uso es para agrupar trozos como este variará dependiendo de la estructura de tu proyecto, pero esto puede ser realmente útil para agrupar componentes que necesitabas al mismo tiempo. Esta técnica realmente nos da mucha flexibilidad para controlar qué componentes se descargan en un momento dado. 129. Introducción a la sección: subir imágenes: Hey, bienvenido a esta sección de imágenes. En estos próximos videos, vamos a ver cómo podemos permitir que el usuario suba una nueva imagen a cualquiera de nuestras cuatro páginas de tarjetas. Esta imagen será un fondo al igual que los que hemos visto en las fichas de muestra. Estas imágenes se subirán, leeremos el contenido del archivo, las guardaremos en Cloudinary, actualizaremos nuestra vista previa de tarjeta, y junto a todo esto también veremos cómo podemos eliminar las imágenes existentes y también reposicionarlos también. Te veré ahí dentro. 130. Componente de cargar imagen: Esta próxima sección estará enfocada en las imágenes de la tarjeta. En cada página, colocamos unos componentes de imagen sobre el lado de edición y esto va a sentarse justo encima de nuestros componentes de entrada de texto. Tendremos esto en la parte superior, y esto significará que podemos subir una nueva imagen a cualquiera de estas páginas. Si ya tenemos una imagen igual que tenemos en la portada aquí, también podemos reemplazar esta imagen también. Esta imagen de bajo componente va a enviar la imagen del Cloudinary. También vamos a mostrar una pequeña imagen de vista previa una vez que seleccionemos esto, y también esto se actualizará en la tarjeta Vue 2. Para ponernos en marcha, necesitamos un componente de esto a la carpeta de la tarjeta y luego llamaremos a esto la carga de la imagen. Configurar las plantillas. Todo este componente estará rodeado en el div con la clase de envoltorio de carga de imágenes. Dentro de este div, una frente nivelada con el texto de la imagen, y luego con eso, estamos usando todo el tamaño de imagen recomendado. Seguiremos siendo 450 píxeles por 600 píxeles por lo que esto encaja muy bien en la tarjeta. A continuación, se necesita archivar una entrada y el tipo de esta entrada para que el usuario pueda seleccionar cualquier archivo de imagen desde su propio equipo y elementos de imagen. Pero ahora esto va a estar vacío, no necesitamos una fuente. El origen se establecerá muy pronto desde el archivo que el usuario sube. Esta va a ser una pequeña imagen de vista previa, por lo que nos dará la clase de imagen de vista previa, un div con la clase de patrones de imagen, este es un envoltorio para una serie de botones los cuales entraremos en cómo reposicionar el imágenes a la parte superior, el medio, y la parte inferior de la tarjeta, y también un botón para quitar estos dos. El botón superior, el medio, y el inferior se van a agrupar en un div justo en el primer botón y cada uno de estos botones va a tener un icono. Para que podamos entrar en los activos, en la carpeta de iconos. Este es el top.svg, todo el texto del selector superior de imagen, y luego lo haremos dos veces más. El icono para esto, nuevo en los activos, en los iconos. Este es el middle.svg. El botón final es para la parte inferior. El icono para esto es el bottom.svg, el último texto alt es la parte inferior de la imagen. Los tres de estos botones se agrupan dentro de este div. Si vamos justo por debajo de esto, agregaremos un cuarto y último botón el cual será para quitar la imagen seleccionada. El tipo de remove_btn. Quiero configurar esto para activar una función más adelante en esta sección. Pero ahora, esta es toda la acción de plantillas que necesitamos mostrar en la pantalla y queremos que este componente de carga de imágenes se muestre en la parte superior de esta sección de edición. Por lo que pasa a la cardedit.vue, importa nuestro componente con el nombre de carga de imagen. El camino del archivo está en los componentes, esto fue almacenado en la carpeta de la tarjeta, y seleccione nuestra carga de imagen, coloque esto dentro del objeto de componentes, y luego renderizar esto en la parte superior de nuestra plantilla. Pasado al navegador, ahí está nuestra imagen, subir componentes, y deben mostrarse para cada una de todas las páginas. Esto por supuesto también necesita un poco de estilo. Necesitamos alinear todo este contenido y también reducir el tamaño de estos botones también. También queremos que esto se mezcle con las entradas de texto justo debajo para que agreguemos algunos estilos compartidos comunes a ambas secciones. El subir imágenes que acabamos de crear tiene esta clase de envoltorio de carga de imágenes, y las entradas de texto que están justo debajo tiene esta clase de envoltorio de entrada de texto. Ahora podemos aplicar algunos estilos compartidos sobre en la app.vue a ambas secciones. Entonces, hasta la parte inferior de la sección de estilo, la primera es la envoltura de carga de imágenes, y luego también selecciona la envoltura de entrada de texto también. Entonces para esto, vamos a colocar algún relleno dentro del elemento, algún espaciado en la parte inferior de cada uno o0f estos elementos con un margen, una sombra de caja, y también redondearemos las esquinas también. En primer lugar, 10 píxeles separados en los cuatro lados. Entonces margen, que sólo se va a aplicar al fondo de 10 píxeles, una sombra de caja de un píxel, un píxel, dos, dos. El color que es DDD, que será de color gris, y quiero que esta sombra de caja esté en el interior por lo que estableceremos esto para que sea insertado. Esto nos da este efecto de la sombra de un píxel a la derecha y también la parte inferior y esto también se mezcla a dos píxeles en la parte superior de la izquierda. Corriremos estos rincones con el radio fronterizo. Tan solo uno pequeño estará bien, los tres píxeles. Esto ahora nos da el efecto de que todas estas son secciones separadas. Ahora, vamos a volver a nuestro componente de carga de imágenes y aplicar algunos estilos que ahora sólo se aplican a esta imagen de bajo componente. Entonces el estilo que también va a ser de alcance. En primer lugar, empuja todo el contenido hacia la izquierda seleccionando el contenedor, que era envoltorio de carga de imagen. Línea extra fuera de la izquierda, y luego a continuación, vamos a agregar algo de espacio entre los tres botones y también reducir el tamaño del icono a, subiremos a la plantilla. Todos estos cuatro botones están rodeados en esta clase de botones de imagen. Entonces si configuramos este Clúster B, un tipo de pantalla de flex, este grupo de botones aparecerá junto a nuestro botón Eliminar. El tipo de botones de imagen, el tipo de pantalla de flex, y luego espacios fuera con justificar contenido y colocar el espacio entre, como nuestro botón ahora junto a los tres de estos iconos. A continuación, reduciremos el tamaño de las tres imágenes. Estos estaban en la misma envoltura que son los botones de imagen, pero sólo vamos a aplicar esto a las imágenes. El ancho de 30 píxeles. Esto ahora es un poco más pequeño en el encabezado de nivel cuatro que es el texto de la imagen. El peso de la fuente de 300, y solo reduciremos el tamaño de ésta para que podamos verlo mejor. Esto sólo nos dará el texto más claro. También algún margen de 10 píxeles en la parte superior e inferior, y cero en la izquierda y la derecha. Al bajar, también necesitamos algo de espacio entre esta entrada de archivo y nuestras imágenes libres. Entonces selecciona nuestra entrada y luego podemos colocar en el tipo que es igual a archivo, y el estilo solo se aplicará a cualquier entrada de archivo. Pega en algún margen de cero en la parte superior, cero en la derecha, 10 píxeles en la parte inferior, y luego cero en la izquierda, luego algo de espacio entre estos botones, agarra todos nuestros elementos de botón, y luego algún margen a la derecha de cinco píxeles. Bien. Lo siguiente que vamos a hacer es cambiar el color de este botón Eliminar y también el color del ratón a la parte inferior de todos los estilos. Estas son la clase de remove_btn. El único inmueble que necesitamos agregar dentro de aquí es el color, agregar un valor RGB de 208, 90, y 90 para el azul, lo que nos da el color rojo que vemos aquí. Entonces, por último, el estado hover. Entonces voy a duplicar esto, pero esta vez, apunte al estado de desplazamiento y modifique el color RGB para que sea 123, 44, y 44, que es sólo un color rojo un poco más oscuro el cual podemos ver si pasamos sobre este botón. Eso es todo ahora para los visuales de nuestro componente de carga de imágenes. A continuación necesitamos algún lugar para realmente almacenar estas imágenes que el usuario sube. Para esto, vamos a echar un vistazo a un servicio llamado Cloudinary. 131. Configurar la Cloudinary: Ahora necesitamos un lugar seguro para subir y almacenar nuestras imágenes. Un servicio popular que uso para muchos de mi propio sitio es Cloudinary, que puedes encontrar aquí en cloudinary.com. Cloudinary es un servicio de hosting para videos e imágenes, y además cuenta con un montón de grandes características como la capacidad transformar nuestras imágenes y también servir las imágenes de tamaño correcto, y también formatos para el dispositivo del usuario. Ya tengo una cuenta dice sobre Cloudinary, pero si nunca has usado esto, adelante y crea una cuenta gratuita. Es gratis inscribirse, y también nos da una enorme franquicia gratuita de alrededor de 20,000 subidas de imágenes gratis. Una vez que hayas iniciado sesión, te llevarán al área del tablero, que se verá algo así. Bueno, antes de subir cualquier imagen a Cloudinary, primero necesitamos configurar un preset. Un preset es un conjunto de predeterminados con imágenes que subimos para transformar el tamaño y el formato. Podemos establecer esto desde nuestra configuración. Se puede acceder a la configuración desde este botón justo aquí, y luego entra en la sección de subida. Bajen. Aquí, vamos a configurar y subir el preset. En la parte superior, tenemos este nombre preestablecido de subida, que va a ser importante. Voy a copiar esto con Comando o Control C, y luego ir a nuestra imagen, subir componentes. Vamos a crear una sección de guión por ahora, y luego colocar esto en la parte superior como comentario. La primera opción que tenemos es el Modo Firma. Tener la opción de Subidas firmadas y también Sin firmar. La opción Firmada implica usar un servidor web, diseñar las imágenes con nuestro secreto Cloudinary, que vimos justo antes en el tablero. O tenemos la versión Unsigned, que vamos a usar, lo que significa, podemos subir directamente desde el navegador sin necesidad del secreto. Si quisiéramos, también podemos crear una carpeta dedicada donde vamos a colocar en estas imágenes. Vayamos por las tarjetas. El resto, nos vamos a dejar por defecto, para luego dirigirnos a la sección de análisis de medios. Esta sección es si queremos subir nuestras imágenes con alguna etiqueta. Si queremos agregar algún tipo de IA como la detección de rostros, si queremos extraer algún texto de las imágenes, y muchas características más avanzadas, que actualmente no necesitamos. Debajo de esto, tenemos las manipulaciones de imagen. Esto nos dará la oportunidad de configurar cualquier tamaño de imagen por defecto y también formatos, e incluso agregar algo de rotación o radio de esquina a mientras subimos esta imagen. Dejemos todos estos por defecto, y luego guardemos estos presets. Asegúrate de haber tomado nota de este nombre preestablecido y añadido esto a tu proyecto. A continuación, daremos nuestros primeros pasos para subir esta imagen leyendo el contenido del fichero que carga. 132. Lectura de objetos de archivo y vista previa: Siguiente hizo una función para subir esta imagen. Podríamos agregar este archivo composable bidireccional si quisiéramos. Pero como solo necesitamos esto en este componente de carga de imágenes, queremos colocar esto dentro de aquí. Entonces tenemos un script que agregamos en la última sección, y colocamos en una función de configuración, para que podamos agregar algún código de composición. La función que necesitamos se llamará Subir Archivo, y esto también tendrá que tomar en los detalles del evento también. Los detalles de este evento se pasarán cuando subamos una imagen de este cargador de imágenes. No necesitamos pasar esto manualmente. Esto se recibirá automáticamente de nuestra entrada, y podemos acceder a esto dentro de nuestra función. Entonces, también devolvamos esto, y ahora podemos llamar a esta función en nuestra entrada de archivos. Para ello, enumeraremos ahora para un cambio, y luego ejecutaremos nuestra función. Este cambio se ejecutará una vez que se haya subido esa imagen. Volver a nuestra función, podemos ver qué información se incluye con este evento haciendo un registro de consola. Guarda este archivo y pasa al navegador en la consola. Ahora de aquí para ver esta carrera, necesitamos subir una imagen. Puedes usar nuevas imágenes si lo prefieres. Es bueno tener una lista de todas las imágenes que se utilizan en este curso. Entonces voy a seleccionar uno de estos, que entrará a una función y también a nuestro registro de consola si abrimos esto, dirigiéndonos al objetivo, y luego a los archivos. A partir de aquí, sólo subimos en una imagen a la vez. Por lo que nuestra imagen siempre será este primer archivo en esta matriz en la posición de índice cero. Vemos cosas como el nombre del archivo, el tamaño del archivo, y también que se trata de una imagen PNG. Entonces tenemos la información que necesitamos, pero a continuación necesitamos una forma de leer realmente estos datos de archivo y para esto, JavaScript tiene lo que se llama un objeto lector de archivos. Por lo que debajo de nuestro registro de consola. Obedezcamos constante para almacenar esto en lector frío. Esto es igual a un nuevo objeto lector de archivos JavaScript. Objeto de lectura de archivos es capaz de leer el contenido del archivo desde la computadora del usuario. Esta imagen se puede utilizar para establecer una pequeña imagen de vista previa, que se configuró anteriormente en la plantilla. Este es el elemento de imagen vacía que actualmente no tiene fuente. Para configurar la fuente, vamos a configurar algunos datos reactivos. Esto importará el paquete reactivo desde la vista, y luego dentro de la función de configuración, configurará un estado de llamada constante, que contendrá todos los datos que necesitamos para esta imagen. También envolveremos esto en el envoltorio reactivo y colocaremos en un objeto. El primer inmueble que vamos a añadir dentro aquí es para la vista previa de la imagen. Actualmente, esto sólo va a ser una cadena vacía, pero vamos a actualizar esto desde nuestro lector de archivos. Una vez que hagamos esto, esto se establecerá en la fuente de imagen dentro de la plantilla. Por lo que también necesitamos devolver nuestro estado. Pasa esto a nuestro objeto, y ahora lo combinaremos dentro de los elementos de la imagen. Colocar en la fuente, y esto va a ser igual a nuestro objeto de estado, y luego la propiedad de vista previa de imagen. Actualmente, por supuesto, esto no funcionará, ya que esta está configurada para ser una cadena vacía. Por lo que necesitamos actualizar esto con los contenidos de nuestro lector de archivos. El archivo leído tiene diversas propiedades y métodos a los que podemos acceder ahora ayudar con esto. Pero antes de actualizar la vista previa de la imagen, primero debemos asegurarnos de que el archivo haya terminado de leer. Entonces si tenemos una imagen realmente grande la cual se ha subido, esta etapa de lectura puede llevar algún tiempo, y así lo revisas. Primero accederemos a nuestro lector, y luego usaremos la propiedad onload. Esto significa que una vez que el lector de archivos ha terminado de leer nuestro objeto de imagen, esto entonces va a activar una función y es dentro de esta función donde queremos actualizar nuestra vista previa de imagen de punto de estado para ser igual a los resultados de punto del lector. Esto se ejecutará una vez finalizada la operación de lectura, pero en realidad aún no hemos empezado a leer el contenido del archivo. Todo lo que hemos hecho es crear un nuevo objeto de lector de archivos vacío. Para leer realmente el archivo, tenemos un método disponible llamado read as data URL. Entonces selecciona nuestro lector, objetivo, lee como URL de datos, y los datos de archivo que queremos leer es lo que acabamos de ver dentro de la consola. Por lo que esto fue dentro del evento, dentro del blanco. Los archivos que era una matriz, y siempre sólo subimos en un solo archivo. Por lo que esta siempre será la posición cero. Está bien. Entonces, una vez que esto haya terminado de leer el archivo, esto ejecutará entonces nuestra función onload, que luego actualizará nuestra vista previa de imagen. Echemos un vistazo a esto. Actualiza el navegador y selecciona cualquiera de estas imágenes. Abre esto. Podemos ver nuestra vista previa de imagen ahora está funcionando, y también podrías restringir el tamaño de esta imagen, también. Particularmente si tenemos una imagen alta como esta. También sería una buena idea manejar cualquier problema potencial de lectura, también, y enviar un nuevo mensaje al usuario. Esto podemos colocar un mensaje en nuestro estado, y valor vacío inicial, y justo antes de la propiedad onload, también podemos manejar cualquier error con on error. Entonces reader.onerror. Esta propiedad también va a desencadenar una función, es igual que arriba, donde actualizaremos nuestro state.message para que sea igual a una nueva cadena. Este mensaje depende de nosotros, pero colocando algo descriptivo, como, hubo un problema al subir tu mensaje, por favor inténtalo de nuevo. De acuerdo, no necesitamos devolver nada ya que ya devolvimos nuestro objeto estatal completo. Todo lo que necesitamos hacer es colocar en un elemento de texto, que pondré como el state.message y también un condicional también para mostrar solo este mensaje si el mensaje existe. Bueno, esto ahora hará saber al usuario si hubo un error al subir la imagen. Ahora sabemos que este lector de imágenes está funcionando correctamente. A continuación, lo usaremos para guardar nuestras imágenes en Cloudinary. 133. Subir el archivo de imagen: El primer video nos dio acceso a la imagen cargada por el usuario. Después iniciamos la vista previa de imagen para que el usuario lo vea. Ahora le vamos a guardar esto a Cloudinary. Una vez que Cloudinary reciba estas imágenes, también le asignaremos una URL única también. Pronto también guardaremos esta URL en nuestro objeto de tarjeta. Vamos a hacer esto dentro de nuestra función de subir archivo, justo debajo donde leemos el archivo real. Ya que estamos enviando datos a una ubicación diferente, podemos manejar esto usando try and catch, que manejará cualquier error. Entonces atrapar lo que tomará en cualquier error. Si hay un error, lanzaremos un nuevo error, pasando este mensaje de error. Hasta la sección try, lo primero que haremos aquí dentro es crear un nuevo objeto FormData. Un objeto FormData es una forma de construir conjuntos de pares de valores clave en un formato correcto el cual se necesita para enviarlo a un servidor. Estos pares de valores clave contendrán nuestros presets Cloudinary, y también el archivo de imagen que queremos enviar. También mantendremos esto sincronizado con nuestro estado, por lo que justo encima de donde tenemos nuestro objeto estatal. También el FormData, que inicialmente será nulo. Podemos entonces actualizar nuestro FormData con el contenido de este objeto. Por lo que esto será estado.FormData. Establezca esto igual a nuestro objeto que actualmente está vacío. Pero para agregar algunos contenidos a este FormData o algunos pares de valores clave, podemos usar el método append, que se verá así. Obtenemos acceso de nuestro estado.FormData. Entonces podemos llamar a anexar a pasar nuestros pares de valor clave. Una de las cosas que necesitamos subir con esta imagen es el upload_preset. Esta es la clave del nombre, y luego separado por coma el valor es el preset, que recibimos de Cloudinary. Envuelva esto, y colóquelo como una cuerda. Duplica esto y el segundo par de valor clave va a ser para nuestro archivo de imagen. El archivo está disponible a partir de event.target. Ahora se va a utilizar su FormData para enviar al Cloudinary. Pero primero necesitamos una forma de enviar esta solicitud. Para esto, voy a usar un paquete llamado axios. Axios es un paquete para realizar solicitudes web, y lo podemos instalar usando npm. Abre la terminal, cierra esto con el control C, y luego instala esto en nuestro proyecto con npm. Instalar todo el i mano corta, y luego el nombre del paquete que es axios. Una vez hecho esto, reinicie el servidor con npm run serve. Volver a nuestro componente, y para usar este paquete axios, primero necesitamos importarlo. Por lo que importar axios. Dado que este es un módulo de nodo, no necesitamos agregar en la ruta del archivo. Podemos simplemente agregar el nombre del paquete. Volver a nuestra función, axios, ahora necesitamos algunas cosas ciertas para hacer esta solicitud y enviar estos datos a Cloudinary. Voy a guardar todo esto dentro de un objeto. Por lo que const imageRequestData. Configura este objeto donde vamos a pasar en tres cosas. En primer lugar, la URL, el método, y también los datos. En primer lugar, tenemos la URL, y esta es la ubicación a la que queremos enviar esta imagen, y esta es la API Cloudinary, pasa esto en como una cadena, que es https://api.cloudinary.com/, la API número de versión, que es v1_1. Entonces necesitamos apuntar a nuestra propia cuenta, volver al panel Cloudinary. Podemos obtener esto de los detalles de nuestra cuenta. Este es el nombre de Cloud que está en la parte superior. Copia esto y esto al final de nuestra URL, y luego /upload. Por esto tenemos el método, y esta es una solicitud de post ya que estamos publicando datos. Entonces, por último, los datos, que son los datos reales que queremos enviar. Ya tenemos esto almacenado en nuestro estado.FormData. Bien. Esto es todo lo que ahora necesitamos para hacer una solicitud de axios. Por lo que llamaremos a la biblioteca axios, luego pasar en esta imagen los datos de solicitud. Si lo quisieras, podrías pasar un objeto directamente aquí, lugar de crear un objeto separado. Pero en lo personal, creo que se trata de un enfoque más limpio. ¿ Acabaría de cortar este error antes de que vayamos más lejos? De acuerdo, di esto. Ahora volvamos a nuestro proyecto, refresca esto. Ahora si subimos un nuevo archivo, usa cualquier imagen que se abra. Ahí está nuestro avance hacia Cloudinary y hacia la mediateca. Recuerda cuando configuramos el preset, también configuramos esta carpeta de tarjetas. Entonces entra en esto. Ahí vemos nuestra imagen, y ahora sabemos que esto está funcionando. En el siguiente video, vamos a agarrar nuestra URL de imágenes, cual es asignada a esta imagen por Cloudinary, luego configurar una función de actualización para guardar esto en nuestro objeto de tarjeta. 134. Guarda la URL de la imagen en nuestra tarjeta: Anteriormente hemos hecho una solicitud de axios para guardar nuestras imágenes en Cloudinary. Esta imagen o la URL de esta imagen también tendrá que guardarse en nuestro objeto de tarjeta también. Pero, ¿cómo metemos esta imagen en nuestro objeto de tarjeta? Bueno, podemos pasar en una referencia URL, cual es proporcionada por Cloudinary. Cuando vemos nuestras tarjetas justo aquí, tenemos esta sección de URL de copia. Si copiamos esto, pega esto en una nueva pestaña, y este es un enlace directo a nuestra imagen. Esto se proporciona para cualquier imagen que subas a Cloudinary, pero no necesitamos copiar manualmente todas las URL así. En cambio, cuando hacemos esta solicitud de post con axios, obtenemos una respuesta que luego podemos almacenar dentro de un objeto y acceder a estos datos, ahí que no sabemos cuánto tiempo tardará en guardar esta imagen y recuperar una respuesta. También podemos hacer uso de async/await. Async/await nos permitirá esperar los datos que regresen del servidor antes de guardar esto en nuestras constantes, esto nos impedirá intentar acceder a los datos guardados aquí dentro, antes de que realmente se devuelvan. Esperaremos que regresen estos datos, y así podremos usar esta palabra clave. También necesitamos marcar nuestra función como asíncrona. Podemos volver a registrar nuestra respuesta en la consola, y ver qué datos se devuelven a nuestro proyecto. Sube un nuevo archivo, ya que estamos enviando esto al servidor y necesita ser devuelto, puede que tengamos que esperar unos segundos para que esto suceda. Una vez que esto se guarda y recuperamos una respuesta, vemos nuestro registro de consola justo aquí. El dato que necesitamos está dentro de esta sección de datos, y esto luego contendrá nuestra URL, y es esta URL la que necesitamos guardar en nuestro objeto de tarjeta. Todavía no hemos creado una función para realizar esta actualización, pero podemos colocar esto dentro de nuestro componente por ahora, eliminar el registro de la consola, y esta función se llamará UpdateImage. Pasando la URL que se almacena dentro de la respuesta, los datos, y luego la URL, esta función se va a colocar dentro de nuestra UseCurrentCard composable junto con las otras funciones de actualización. También necesitamos importar esto para la parte superior. Importa la UseCurrentCard desde esta ruta de archivo, que son los composables, y luego a UseCurrentCard. Antes de poder llamar a esta función, que estamos haciendo justo aquí, también necesitamos extraer esto de nuestro archivo a la configuración. Guárdalo como una constante, que se llamará UpdateImage, desde nuestra función UseCurrentCard hasta el archivo UseCurrentCard, ahora tendremos que configurar esta UpdateImage. Ahora en la parte inferior, escribe esta función y para actualizar la tarjeta, esto necesita tomar en la URL, que estamos pasando cuando llamamos a esta función justo aquí. Ahora para actualizar esta tarjeta, usaremos una técnica similar que hemos utilizado en la función de actualización justo arriba. Agarramos la tarjeta seleccionada y luego la página actual. Voy a copiar esto, en este intervalo de función. No necesitamos entrar en las secciones porque si echamos un vistazo a nuestra tarjeta directamente dentro de nuestras páginas, es donde tenemos la imagen de fondo almacenada, lo que significa que solo necesitamos actualizar esta propiedad de fondo, así que así. Pongo esto igual a la URL que se pasa a esta función, devuelvo esto de vuelta de nuestra función, y ahora podemos probar esto de nuevo en el navegador. Lo que queremos ver aquí es, ahora cuando seleccionamos un nuevo archivo, vemos la vista previa, se guarda en Cloudinary, y esto también debería actualizar nuestra vista previa actual también, ya que esto se mantiene al día con nuestros datos reactivos, deja de usar un archivo. Nuestra función se activa y nuestra vista previa de tarjeta se actualiza ahora con esta nueva URL de imagen. Estas imágenes también se pueden colocar en diferentes páginas también. Si seleccionamos una imagen diferente para esta página, ésta será completamente independiente para todas las demás páginas. Bien. Ahora cuando todo esto está funcionando. En el siguiente video, nos vamos a centrar en estos tres botones de alineación para alinear esta imagen, la parte superior, la media o la parte inferior de esta tarjeta. 135. Reposicionamiento de la imagen: Dentro de nuestro componente ImageUpload más temprano cuando configuramos la plantilla, colocamos en tres botones para reubicar la imagen, la parte superior, la media, o la parte inferior de la página seleccionada. Para que estos botones funcionen, necesitamos [inaudible] dar clic en cualquiera de estos y luego ejecutar una función. La función que aún no hemos configurado, pero esto se llamará RepositionImage, que tomará ya sea la parte superior, la media, o la inferior. Agarremos esto, copiemos esto, y coloquemos esto en nuestro segundo botón, como en esta cadena del medio, al tercero se le llama abajo. Pasado al composable UseCurrentCard, ahora podemos configurar esto hacia abajo en la parte inferior. Esto fue RepositionImage, como en la posición. Esto será muy similar a nuestra función justo arriba. Pero esta vez en lugar de actualizar nuestros antecedentes, vamos a actualizar el BackgroundPosition y ponerlo igual a nuestra posición, que se pasa a toda función. Además, si quisiéramos justo arriba en esta función UpdateImage, también podríamos pasar esto y configurar una posición predeterminada para esta imagen, como el centro y luego devolver nuestra función. Entonces esto de vuelta a la image-upload, ya estamos importando nuestro composable. También necesitamos la función que fue RepositionImage, y luego devolver esta función de nuevo desde nuestra configuración. Esto coincide con el nombre de la función que estamos llamando cada vez que hacemos clic en estos tres botones. Vamos a probar esto. Actualmente, para imágenes de tamaño correcto que tenemos justo aquí, los botones no funcionarán para este caso en particular porque tenemos una imagen de tamaño completo. Pero si vamos a elegir “Archivo” e insertamos una imagen pequeña, que no cubra toda la altura de la tarjeta, ahora podemos probar todos estos botones. Vemos enseguida que la posición está en el centro, en la parte superior, y la del medio no está funcionando. Esto sólo tiene que ser centro. Probemos esto. Tenemos que volver a subir el archivo. Lo intentamos de nuevo. [ inaudible] la parte superior, el centro, y también la inferior, y esto soluciona nuestro problema. El motivo por el que esto funciona porque más en los componentes CardPreview, lo configuramos como una propiedad de estilo. Abre esto y en la plantilla temprano cuando establecimos el fondo, también agregamos la propiedad BackgroundPosition y como todo es reactivo, esto también se está actualizando con la nueva posición cada vez que cambian los datos. 136. Eliminar imágenes: El último que hay que hacer con nuestras imágenes es quitarlas de esta tarjeta. Esto no debería ser demasiados problemas. Todo lo que necesitamos hacer es establecerlo por función, que va a seleccionar el fondo y establecer esto para que sea una cadena vacía. Al igual que con el resto de la actualización, dirígete a la UseCurrentCard donde podemos configurar una función. RemoveImage. Esto será muy similar a la UpdateImage, por lo que podemos copiar esta línea de código, pegarlo en. Pero esta vez en lugar de establecer la URL, esta va a ser una cadena vacía. Eso es todo lo que necesitamos hacer. Devolver esta función. Entonces podemos colocar esto en el componente ImageUpload, guardarlo como una constante. Con esta función, también podríamos devolver esta parte desde nuestra configuración y llamar a esto directamente desde nuestro botón remove. Pero en cambio lo que vamos a hacer es configurar una nueva función llamada remove y esto es porque no sólo queremos llamar a esta función, también necesitaremos borrar la vista previa de la imagen también. Configura esto. La función llamada remove. En primer lugar accederemos a nuestro estado y a la ImagePreview y restableceremos esto para que sea una cadena vacía. Esto eliminará la imagen de vista previa más pequeña que vemos dentro de la pantalla de edición. Entonces podemos llamar a nuestra función importada. Devolver esto de nuevo de nuestra configuración. Ya tenemos una configuración remove_btn dentro de la plantilla. Podemos [inaudible] @click, que va a llamar a esta función. Voy a darle a esto una prueba en el navegador. Haga clic en “quitar”. Nuestra imagen se ha ido. Intentaremos subir una imagen. Haga clic en “quitar”. Esto aún borrará la imagen, dejando nuestra funcionalidad de imagen todo ahora completa. 137. Despliegue para Netlify: El primer paso hacia el despliegue de nuestra aplicación en la web es construir nuestro proyecto para nuestra producción. Podemos crear este paquete para producción usando el comando build, que puedes ver si vamos al paquete.json, dentro de la barra lateral. Abre esto, y hasta ahora, para ejecutar nuestro proyecto, hemos estado ejecutando NPM run servido, que comenzará con nuestro servidor de desarrollo, y también nos dará cosas como mensajes de error durante el desarrollo, pero no queremos ver cosas como esta durante la producción. En cambio, lo que queremos hacer es construir una versión preparada para la producción de nuestra aplicación, que es un paquete de JavaScript. Podemos hacer esto con el comando justo debajo, que es construir, y nosotros, de nuevo, ejecutamos esto desde la Terminal. Lo que tenemos que hacer es presionar “Control” y “C” para cerrar la Terminal, y esta vez, MPM ejecuta build, y esto empezará construyendo nuestro proyecto y todos los archivos se colocarán dentro de una carpeta de disco. Esto lo veremos en tan solo un segundo cuando esto termine. Ahora podemos decir esto sobre la parte superior de nuestra barra lateral. Esta carpeta de discos contiene una versión preparada para la producción de nuestra aplicación, que contiene todos nuestros CSS, nuestras imágenes, y también nuestros paquetes de JavaScript también. Para JavaScript, abrimos esto, contiene nuestro paquete del que hemos hablado previamente, o varios paquetes si estamos usando carga perezosa, tal como estamos aquí. Entonces veremos cosas como nuestros paquetes de administración, nuestros paquetes de aplicaciones, nuestra app home, nuestros grupos de tarjetas que configuramos para los grupos de partes. Vemos la página no encontrada, y estos son todos archivos de paquete JavaScript plomo los cuales podrían descargarse individualmente o juntos desde el navegador. Estos archivos también están minificados y optimizados para la producción, y también eliminamos cosas como los mensajes de error y cualquier advertencia que veamos durante el desarrollo. Ahora podemos tomar esta carpeta de disco y usarla para implementarla en un servicio de hosting. El servicio de hosting que te voy a mostrar va a estar terminado en netlify.com. Hay muchos grandes proveedores de hosting por ahí, pero esto es realmente popular y fácil de empezar, y también hay una generosa versión gratuita. Para hacer uso de este hosting, voy a abrir la terminal y hacer uso de la CLI Netlify. Si no has utilizado la CLI de Netlify en el pasado, necesitamos instalarla globalmente. Hacemos esto con MPM, instalamos. Este es el NetLify_CLI, y luego necesitamos usar la bandera -g para instalar esto globalmente. Ya tengo esto instalado, así que no voy a presionar Enter, y si sí ves algún tipo de permisos, errores, donde un ajuste esto apagado, es posible que también necesites arreglar estos permisos o usar el pseudoprefijo para instalar esto como el administrador. Una vez que tengamos acceso a esto, al instalarlo, podremos utilizar varios comandos Netlify, y el que queremos utilizar es el comando deploy. Asegúrate de estar dentro de la carpeta del proyecto, pulsa “Enter”, y si es tu primera vez que usas Netlify, es posible que también necesites iniciar sesión o crear una cuenta nueva si aún no tienes una. Una vez que te hayas inscrito y verifiques tu correo electrónico, entonces serás llevado al área de cuenta en el navegador, donde también podrás crear un nuevo proyecto. No hagas esto en el navegador ya que vamos a estar haciendo esto aquí mismo dentro de la Terminal. También se te puede pedir que autorices en Netlify CLI en tu primer uso también. Ya estoy conectado ya que he usado esto muchas veces en el pasado. Por lo que de vuelta a esta Terminal, necesitamos responder algunas preguntas simples para empezar. En primer lugar, no tenemos ya un sitio nuevo, así que vamos a crear uno dentro de Netlify. Ya tengo configurados los nombres de mi equipo en Netlify, así que le pegaré a “Enter”. También podemos agregar un nombre de sitio si queremos. Esto es opcional. También podemos simplemente golpear “Enter” y Netlify generará uno para nosotros. A continuación, el directorio público, y esta es la ubicación dentro de nuestro proyecto donde se va a almacenar nuestro sitio recién construido. Apenas estamos viendo el nuestro está almacenado dentro de la carpeta del disco. Por lo que voy a golpear “Entrar”, y esto permitirá un desplegar un borrador de sitio web. Aquí, si solo estiramos esto un poco más ancho, tenemos un sitio web, borrador de URL, abrimos este borrador de URL hacia arriba dentro del navegador, y luego vemos una URL en vivo que muestra nuestro sitio web. Podemos dar click y comprobar esto todo funciona. Todo esto se ve bien hasta ahora. Vemos nuestra tarjeta. También podemos editar y vemos todas las diversas páginas y categorías también. No obstante, sin embargo, al final de nuestra URL principal, intentemos entrar en el admin. Bueno, vemos página no encontrada, y también, si vamos a una URL no reconocida, vemos el mismo mensaje. El error es porque construimos una aplicación de una sola página, decir, cuando visitemos esta aplicación, obtendremos un solo paquete de JavaScript, que ya conocemos. Seguidamente navegamos por nuestras páginas de aplicaciones en el frontend utilizando el router. Cuando escribimos /admin o de hecho, reenviar barra cualquier cosa nosotros mismos manualmente, entonces estamos haciendo una solicitud al servidor y esperando que esta página esté disponible. No obstante, aunque, como sabemos, tenemos una aplicación de una sola página, no tenemos múltiples páginas para solicitar al servidor. En cambio, cuando usamos cosas como el enlace del router, esto interceptará la sección justo aquí y luego encontrará la parte exacta del JavaScript que necesitamos mostrar dentro del navegador. La solución para esto al usar aplicaciones de una sola página es ignorar cualquier solicitud de página adicional y siempre volver de vuelta nuestra página principal. Después, en el frontend, nuestro router puede entonces ocuparse de cualquier página que necesite mostrarse. Haga esto y sólo sirva esta página de inicio a cualquier solicitud. Esto es bastante sencillo de hacer. Dirígete a la carpeta dist recién creada, y dentro de la raíz de nuestra carpeta de disco, crea un nuevo archivo, que se llama _redirects. La sintaxis para solo devolver nuestra página de inicio se ve así. Es /* /index.html, y luego 200. Esto le dice al servidor web independientemente de qué página estamos tratando de solicitar, que solo vuelva a casa index.html principal, y también el código de estado del servicio de 200, que significa que todo está bien. Siempre devolver este mensaje bien significa que sí necesitamos manejar cualquier error en el frontend y lo estamos haciendo con nuestro componente no encontrado. Dale un guardado a este archivo y podemos volver a desplegar tu aplicación, cual vamos a despejar la Terminal y ejecutar netlify deploy por segunda vez. El directorio publicado sigue siendo dist. Entonces llama al borrador, y vemos que todas las páginas siguen funcionando. Si tratamos de ir a barra inclinada hacia adelante, entonces cualquier solicitud de página adicional. Netlify está respondiendo de nuevo con nuestra página principal de índice. Entonces el router vue reconoce que tenemos el componente admin para cargar, y es por ello que vemos al admin en la pantalla. Probemos la página 404 con una ruta no reconocida y veremos página no encontrada. Está bien, bien. Una vez que estamos contentos de que todo esté funcionando, ahora podemos deshacernos de este borrador de URL y generar una versión de producción en vivo. El modo en que hacemos esto es, una vez más, ejecutar Netlify deploy, pero esta vez —prod para señalar eso. Estamos contentos con todo lo que vemos y queremos finalmente empujar esto a la producción. Ahí vamos. Nuestro despliegue ya está en vivo, y vemos la URL de nuestra página web en lugar del borrador. Abre esto. Ahí está nuestra versión terminada. Solo probemos una vez más nuestras rutas no reconocidas. Ahí vamos. Si también entramos a nuestra cuenta de Netlify, inicia sesión si es necesario, ahora vemos nuestros sitios justo aquí. Haga clic en esto, y esta es la misma URL que acabamos de ver dentro del navegador. Este es un enlace en vivo y estará disponible para que cualquiera lo vea en la web. También podemos acceder a nuestra configuración de dominio. Si quieres un nombre personalizado en las opciones, podemos editar el nombre, y también puedes cambiarlo para que sea algo más descriptivo, siempre y cuando el nombre no haya sido usado en el pasado por otra persona. Esto también tendrá la extensión.netlify.app cuando estemos usando este plan gratuito. O también puedes usar un dominio totalmente personalizado si ya tienes uno. O también podrías comprar uno a Netlify. Por último, Netlify también hace que sea realmente fácil tener un sitio seguro por defecto, podemos ver, si hacemos click en esto, tenemos el símbolo del candado justo aquí. decir, por defecto, nuestro sitio está cargado con un certificado SSL, lo que significa que nuestro sitio es seguro. También podemos ver esto abajo en la parte inferior de nuestra configuración, debajo del HTTPS. Si también has subido un dominio personalizado, también puedes habilitarlo de forma gratuita. Este es nuestro sitio ahora desplegado en la web, que ahora puedes compartir con amigos y familiares. 138. ¡Gracias!: Bienvenido, lo has hecho hasta el final. Enhorabuena por llegar hasta aquí. Realmente espero que hayas disfrutado del curso y te hayas sacado mucho de él, y también disfrutado construyendo los proyectos también. Esto es todo por ahora. Sigue aprendiendo, sigue construyendo cosas, y te veo en la siguiente.