Vue JS 3: API de composición (con Pinia y Vite)

1. ¡Hola!: Si ya estás familiarizado con U2 y la API de opciones, y este curso te enseñará todo lo que necesitas saber para cambiar y comenzar con V3 y la increíble nueva API de composición. Mi nombre es Danny, estoy en la India desarrollador de aplicaciones y creo un presupuesto, las finanzas personales más valoradas hasta para iOS, Android, Mac o Windows. Y he pasado los últimos 12 meses creando 42, que se basa en U3 y la API de composición en este curso, comenzarás aprendiendo las diferencias clave en la API de Opciones y la API de composición al crear una aplicación API de opciones simples y convertirla a la API de composición. Luego dominará todos los conceptos básicos, incluidos los datos reactivos con balsas y objetos reactivos, métodos, propiedades y relojes calculados, ganchos del ciclo de vida, directivas, router de vista, componentes hijo, incluidas las nuevas formas. Por último, los cultivos emiten y valores modales componentes dinámicos componibles cómo crearlos desde cero y cómo importarlos desde la vista usan biblioteca y aprenderás administración estatal usando centavo en el increíble sucesor para ver x después de aprender estos básicos. Así que vas a crear una aplicación del mundo real llamada bolas de notas desde cero, que tiene capacidades completas de multitud. Utiliza penique o falso manejo estatal y demuestra noticias del mundo real de todos los conceptos básicos que aprendiste antes. Después de este curso, podrás crear tus propias tres nuevas aplicaciones basadas enteramente en la API de composición, completamente desde cero. Este curso requiere un entendimiento básico si sintoniza las opciones API, HTML, CSS, y JavaScript, por favor echa un vistazo a los videos de vista previa y espero verte en el curso. 2. Introducción [Module 1]: Hola ahí. Mi nombre es Danny Cano. Bienvenido a este curso, Vue.js tres composición API con centavo en VT. Si ya estás familiarizado con V2 y la API de opciones. Y este curso te enseñará todo lo que necesitas saber para cambiar y comenzar con B3 y la API de composición. Esto es más o menos lo que vamos a hacer en este curso. En el Módulo uno, les voy a presentar el curso. Explicar cuál es la API de composición. Muéstrale mi configuración del editor, que es código VS, incluyendo la instalación de todas las extensiones que voy a usar. Voy a instalar herramientas Vue dev para ayudarnos con nuestro desarrollo. En el Módulo dos, te vamos a presentar al sitio de documentación V3. Vamos a instalar NodeJS para que podamos empezar a crear apps V3. Y vamos a crear un proyecto de vista utilizando la última herramienta de compilación con VTE. Entonces vamos a poner ese proyecto listo para empecemos a aprender lo básico. En el módulo tres, vamos a ver las diferencias clave entre la API de opciones y la API de composición. Vamos a crear una aplicación API de opciones muy sencilla para recordarnos cómo funcionó la API de opciones. Entonces vamos a convertir esa aplicación API de opciones simples para usar la API de composición en su lugar. Esto nos dará una forma realmente rápida y sencilla de ver las diferencias clave entre los dos enfoques. Entonces vamos a buscar las diferencias entre los dos patrones diferentes que podemos usar con la API de composición, que es el patrón de función de configuración más antiguo y la configuración de script más nueva y superior patrón. En el módulo cuatro, vamos a aprender todo sobre los datos. Vamos a aprender sobre datos reactivos incluyendo refs, objetos reactivos. Vamos a aprender sobre el enlace bidireccional y vamos a ver los datos no reactivos. El módulo cinco se trata de métodos. Vamos a aprender sobre métodos, propiedades computadas y relojes. En el módulo seis, vamos a aprender todo sobre cómo usamos ganchos de ciclo de vida de manera diferente en la API de composición, incluyendo ganchos derretidos, ganchos activados, halcones actualizados, y cómo podemos usar múltiples ganchos de el mismo tipo dentro de un solo componente. En el módulo siete, vamos a aprender todo sobre las directivas en la API de composición. Vamos a aprender a crear directivas personalizadas locales, que son locales a un componente individual. Entonces vamos a ver cómo podemos crear directivas globales de clientes, que pueden ser utilizadas por cualquiera de los componentes de nuestra app. En el módulo ocho, aprenderemos todo sobre cómo usamos Router Vue de manera diferente en la API de composición, incluyendo cómo podemos usar las rutas del dólar, lo objeta para mostrar información de nuestro router en nuestro y las nuevas rutas estadounidenses y utilizan router composable. En el módulo nueve, vamos a aprender sobre listas usando v4, el asombroso nuevo componente de teletransporte. Vamos a aprender a usar refs de plantilla para que podamos acceder a elementos que están en nuestro componente y luego hacer algo con ese elemento cuando nuestro componente se haya cargado, como enfocar una entrada, También vamos a aprender a usar next tick usando la API de composición. Módulo diez, vamos a aprender todo sobre los componentes infantiles, incluyendo cómo podemos pasar contenido a un componente hijo usando ranuras. Puede pasar datos a componentes hijo usando apoyos. Cómo podemos emitir un evento de cliente de un componente hijo a un componente padre usando emite, cómo podemos obtener un componente hijo para modificar una propiedad de datos en su componente padre usando valor modal y actualizar el valor del modelo, vamos a ver los componentes dinámicos que nos permiten cambiar el componente que se está utilizando en una parte particular de nuestra app. Y vamos a ver cómo podemos proporcionar datos de un componente padre a todos sus componentes descendientes usando provide inyecta. Módulo 11, aprenderás todo sobre composable, que es una de las nuevas características más emocionantes con B3, vamos a responder primero la pregunta, ¿qué es una composable? Entonces vamos a crear una composable personalizada que nos permitirá compartir datos reactivos, métodos no relacionados a través de nuestros componentes. Entonces vamos a instalar y configurar una composable desde la biblioteca view también. En el módulo 12, vamos a aprender todo sobre la gestión estatal usando Pena, que actualmente es el estándar oro para gestión estatal en las apps API de composición v3, vamos a responder primero a la pregunta, ¿qué es la gestión estatal? Vamos a ver tres enfoques diferentes a la gestión estatal en una vista tres arriba usando cualquiera composable unos centavos. Y vamos a ver las diferencias entre estos. Entonces vamos a aprender todo sobre el estado con Penn. Estado es donde almacenamos todas nuestras propiedades de datos, una tienda de videos. Ahora vamos a aprender todo sobre acciones con Penny. Y las acciones son métodos que se encuentran en nuestra tienda que nos permiten modificar los datos que hay en nuestro estado. Entonces vamos a aprender sobre getters, que nos permiten obtener algunos datos de nuestro estado, modificarlos de alguna manera, y luego poner esos datos a disposición de todos nuestros componentes. Para este punto, habremos cubierto todos los conceptos básicos de Fe3 y la API de composición. Voy a poner todo ese conocimiento en práctica creando una aplicación del mundo real llamada Nope balls, que es una aplicación para tomar notas que vamos a hacer parecer receptivo y presentable usando la biblioteca CSS Bohmer. Te presentaré la nota app de Paul. Entonces vamos a crear un proyecto completamente nuevo utilizando la última herramienta view build. Nuevamente, usando V8, vamos a instalar Vue Router manualmente completamente desde cero y configurarlo todo desde cero. Entonces en el módulo 14, vamos a trabajar en el diseño de nuestra app usando la biblioteca CSS. Vamos a instalar Bohmer, crear un hermoso diseño navbar que sea sensible, que muestra directamente enlaces a páginas A2 en el escritorio, luego mostrará un menú de hamburguesas en el móvil. Y luego vamos a trabajar en el diseño de nuestra página de notas. En el módulo 15. Voy a agregar algunos métodos de datos y componentes infantiles a nuestra app. Vamos a configurar los datos y métodos para agregar una nueva nota. Vamos a crear un componente hijo para nuestras notas. Vamos a pasar datos a ese componente hijo usando accesorios. Vamos a configurar una propiedad computada y vamos a agregar la posibilidad de eliminar un nodo. Módulo 16. Vamos a instalar un centavo un set todo completamente desde cero. Y también vamos a crear un componente reutilizable, que vamos a utilizar en múltiples páginas de nuestra app. Entonces después de haber instalado centavos, vamos a configurar los estados para nuestra app donde vamos a almacenar todos nuestros datos de notas. Entonces vamos a configurar algunas acciones para agregar, eliminar y actualizar una nota. Entonces vamos a crear un getter en la puerta de nuestro Penny por conseguir el contenido de una nota basada en el ID de una nota. Entonces vamos a crear una segunda página, una página de Estadísticas, que se mostrarán estadísticas que se basan en nuestros datos de notas. Voy a montar un par de nuevos getters para hacer esto. También vamos a crear un componente reutilizable, que vamos a utilizar en múltiples páginas de nuestra app. Vamos a hacer que este componente reutilizable personalizable usando accesorios. En el módulo 17, vamos a añadir algunas directivas, relojes, y composable a nuestra app note balls. Vamos a añadir una directiva que nos permitirá enfocar de forma automática un área de texto. Voy a hacer que esta directiva sea global y usarla en múltiples páginas. Vamos a montar un vigilante. Vamos a crear una composable personalizada que nos permitirá compartir datos reactivos y métodos relacionados a través de páginas. Entonces vamos a mejorar esa composable al permitirle aceptar múltiples parámetros. Y también vamos a añadir una composable desde la vista use biblioteca, el click fuera composable. Por último, en el Módulo 18, soy un modal de eliminación a nuestra app, que se mostrará cuando tratemos de eliminar una nota. Y nos vamos a pedir que confirme, vamos a configurar el modal, conseguir que parezca presentable. Vamos a permitir que este modal modifique datos en su componente de página principal mediante valor modal y actualice el valor del modelo, vamos a reutilizar el clic fuera composable desde la vista utilizar para que podamos hacer click fuera de este modal para cerrarlo, vamos a configurar algún control de teclado piramidal para que podamos golpear Escape para cerrar el modal encendido en el proceso de hacer eso, también vamos a hacer uso de algunos ganchos de ciclo de vida. 3. ¿Cuál es la API de composición?: El API de composición es la nueva característica más grande que vino con V3. Pero, ¿cuál es la API de composición? Bueno, nos da una nueva forma de crear componentes de vista, una alternativa a la API de Opciones. Ahora todavía podemos usar la API de opciones en v3 ups, pero consideraría usar la API de composición exclusivamente, especialmente en aplicaciones más complicadas y componentes de visualización. El API de composición resuelve dos problemas principales que a veces vemos con opciones aplicaciones API, especialmente ups más complicados. Número uno, nos permite agrupar más fácilmente el código relevante en las secciones de scripts de nuestros componentes de vista. Y número dos, nos permite reutilizar nuestro código más fácilmente en nuestros datos reactivos y nuestros métodos y relojes, etc., utilizando composable. Para demostrar esto primero, echemos un vistazo a este código API de Opciones. En la API de Opciones tenemos nuestra exportación predeterminada, y dentro de eso tenemos todas nuestras diferentes opciones separadas por opciones. Me refiero a cosas como métodos de datos, ganchos de ciclo de vida. En este ejemplo aquí tenemos dos conjuntos de datos completamente no relacionados. Contamos con una propiedad de nombre de usuario fuera de propiedad para determinar si se muestra o no un modal. Entonces en nuestra opción de métodos, tenemos un método para actualizar el nombre de usuario y un método para mostrar el modal cambiando esta propiedad de datos. También tenemos un gancho de ciclo de vida, el gancho montado, que disparará ambos métodos. No obstante, todo el código pertinente está separado. Tenemos el nombre de usuario aparecer. El método para el nombre de usuario aquí abajo. El gatillo de este método en este halcón derretido aquí abajo. Esto significa que en componentes más complicados, tenemos que hacer mucho desplazamiento hacia arriba y hacia abajo a métodos de datos, propiedades computadas, ganchos de ciclo para trabajar en código que está relacionado. El API de composición resuelve este problema al permitir va a eliminar todas estas opciones y permitir va a agrupar todo nuestro código juntos lógicamente. Echemos un vistazo a una versión API de composición de este código. En este ejemplo, estamos haciendo exactamente lo mismo. Estamos configurando variables de datos reactivas para nuestro nombre de usuario y nuestras propiedades modales de fechas mostradas con la configuración de métodos para manipular estas propiedades de datos seguían activando estos métodos en el gancho montado aquí y aquí. Excepto esta vez todo nuestro código relevante se agrupa. Todo el código relacionado con el nombre de usuario agrupado aquí. En todo el código relacionado con el modal se agrupa aquí con la composición API no es sólo propiedades de datos, métodos y ganchos del ciclo de vida. Podemos agrupar juntos, podemos agrupar todo, ya sea computado, propiedades, relojes, directivas, etc. Esto hace que nuestras vidas sean mucho más fáciles, sobre todo cuando estamos trabajando en componentes de vista mucho más complicados y más largos. El segundo problema, no la API de composición resuelve, es que nos facilita mucho la reutilización del código a través de nuestros componentes usando composable en la API de Opciones, podríamos compartir código entre componentes usando mixins. Echemos un vistazo a nuestro ejemplo de código API de opciones. Nuevamente, digamos que queremos reutilizar la propiedad de datos de nombre de usuario y nuestro método update Username a través de múltiples componentes en la API Options, podríamos extraer este código en un mixin, como este, donde literalmente acabamos de copiar la propiedad de datos de nombre en el método octeto username y ponerlo en un mixin. Podemos entonces importar este mixin en un componente o un montón de diferentes componentes como este, importar nombre de usuario de mezcla de etc.. Pero en este ejemplo aquí también estamos importando diferentes mixin que no tiene relación. Esta mezcla modal mezcla en. Y se puede ver que en la charla de MTSU donde método de disparo desde el nombre de usuario de mezcla, esta actualización Método de nombre de usuario. El problema es que no es obvio de dónde viene este método. ¿ Viene del nombre de usuario mezclando o viene de los lagos modales en si no estás familiarizado con el proyecto que estás trabajando actualmente, es posible que no puedas decir dónde este método viene de sin abrir realmente estos archivos de mezcla y estoy mirando a través del código. Nuevamente, esto puede convertirse en un problema enorme en aplicaciones de vista más complicadas donde tenemos muchos componentes diferentes, siendo utilizados muchos mix-ins diferentes. Echemos un vistazo a nuestro ejemplo de API de composición de nuevo. Digamos que queremos hacer lo mismo. Queremos extraer la variable de datos de nombre de usuario, y queremos extraer esta actualización Método de nombre de usuario donde podamos recortarlos y pegarlos en una composable, que se vería algo así. En una composable acabamos de exportar función. Y se puede decir dentro de que tenemos nuestra variable de datos de nombre de usuario y nuestro método de actualización Nombre de usuario también. Y entonces podemos importar este composable a cualquier componente de vista que queramos. Así, solo importamos la función de nivel raíz que exportamos. Entonces podemos usar la estructuración para extraer sólo las cosas que necesitamos de esa composable. En este caso, estamos extrayendo la variable de datos de nombre de usuario y el método update Username. Ahora cuando usamos algo de nuestra composable, como en este gancho montado, estamos disparando el método de actualización Username. Podemos ver exactamente de dónde viene este método. Así que de nuevo, esto se convierte en una ventaja masiva con la API de composición, especialmente en aplicaciones mucho más complicadas y componentes de visualización. Ojalá esto explique las enormes ventajas que vienen con la API de composición sobre la API de opciones. 4. Configuración del editor y de software: Puedes usar cualquier editor que quieras para este curso, pero voy a estar usando VS Code porque es gratis y tiene un montón de extensiones diferentes que van a hacer nuestra vida más fácil. Si quieres tener la misma configuración se hace, entonces sigue a lo largo. Quieres ir al código dot Visual Studio.com. Simplemente descárgalo. Si estás en Windows, es posible que necesites ejecutar un instalador, pero en un Mac, te dará un archivo zip con una aplicación que solo puedes arrastrar a la carpeta de aplicaciones. Solo voy a conseguir la carpeta Aplicaciones y arrastrar esto hasta allí. Ahora deberíamos poder lanzarlo. Haga clic en abrir. Ya podemos ver la instalación por defecto del código VS. Solo voy a arrastrar un proyecto de vista a esto solo para demostrar algunas de las extensiones que vamos a usar. A pesar de que no es necesario hacer esto. Pero si tienes un proyecto de vista, ¿cómo acaban de arrastrarlo? Voy a arrastrar en esta vista las pruebas hacia arriba, que es básicamente solo la aplicación de vista predeterminada construida con la última herramienta de compilación. Con eso vamos a estar usando más adelante, voy a hacer clic en verdades y luego sí. Entonces solo voy a agrandar esto un poco. Acercar presionando Command Plus allow. El atajo podría ser diferente en Windows. Vamos a instalar algunas extensiones. Queremos dar click sobre esto aquí con estas casillas. Esta es la tienda de extensión. En las dos primeras extensiones hay un tema de iconos y un tema general para simplemente hacer que el solicitante sea un poco más bonito, pero estas son simplemente totalmente opcionales. Por lo que quieres buscar material, yo llamo tema. Queremos este aquí. Haga clic en Instalar. Y luego queremos elegir Material Icon Theme de este menú desplegable. Y ahora si volvemos al Explorador, verás que en nuestro Explorer aquí tenemos estos hermosos iconos para todos nuestros diferentes tipos de archivos, como este bonito pequeño View icon fall components. Vamos a saltar de nuevo a la tienda de extensiones y voy a buscar el tema de make apps. Y esto es lo mismo que yo uso, pero esto es totalmente opcional. Voy a hacer click en eso. Haga clic en Instalar. Elija el nombre de maquillajes en el menú desplegable. Este es un tema relajado, fácil en los ojos con agradable y suave resaltado de sintaxis. Como se puede ver aquí. Si no te gusta este tema, entonces hay un sitio web donde puedes navegar por todos los diferentes temas. Quieres ir a. Vs Código themes.com. Puedes encontrar hasta los diferentes temas claros y oscuros aquí. Sólo escoge uno que te guste. Sólo voy a cerrar esto, saltar nuevo a la tienda de extensión. Vamos a instalar una extensión llamada acción duplicada. Así que sólo voy a buscar eso. Es éste de aquí. Haga clic en Instalar. Lo que esto hará es si saltamos de nuevo a nuestro explorador, haz clic derecho en un archivo, ahora tenemos esta opción para duplicar archivo o directorio, lo cual es realmente útil cuando estás trabajando en ver apps porque muchas veces quieren simplemente duplicar un componente y luego modificarlo. Y volveré a saltar de nuevo a la tienda de extensiones por defecto, como viste antes. Ver componentes no se ven muy bonitos. Y dijeron, Vamos a arreglar eso con la siguiente extensión. Y queremos buscar vista extensión volar, APAC. Tenemos que desplazarse un poco hacia abajo para encontrar el correcto. Es éste de aquí por el bro Enero. Voy a instalar eso. Esto tiene un montón de diferentes extensiones en ella por TEA, que es un formato de código que en realidad voy a desactivar porque realmente no soy gran fan de los formatos de código está alternando etiqueta que cambiar automáticamente el nombre de los ataques. Si cambiamos el nombre del objetivo de apertura, cambie el nombre de la etiqueta de cierre por nosotros. Tenemos algunos fragmentos de código JavaScript, etiqueta de cierre automático, que cerrará automáticamente las etiquetas HTML, y luego un montón de otras. Los principales que queremos aquí en estos dos en la parte inferior, estos nos van a dar hermoso resaltado de sintaxis , soporte de lenguaje, ver fragmentos y cosas así. Quiero instalar esto, y eso ya está instalado, pero en realidad voy a desactivar algunas de estas extensiones que se agrega. Voy a borrar el campo de búsqueda y podríamos desplazarnos por nuestras extensiones instaladas aquí. Voy a desactivar más bonita, que por cierto, creo que puede interferir con la siguiente extensión que vamos a instalar, pero puedes dejarlo brazo si lo prefieres y ver si funciona para ti. Voy a deshabilitar la pelusa CSS porque no vamos a estar haciendo ningún TypeScript en este curso. Mucho al respecto. Por lo que haré clic en este botón Recargar requerido para recargar la app. Ya verás que ahora tenemos este hermoso resaltado de sintaxis para nuestros componentes de vista. A la última extensión que voy a instalar se llama atributos HTML divididos. Cuando estamos trabajando en aplicaciones de visualización, a menudo tenemos elementos de componentes de vista con toneladas de diferentes atributos, directivas y manejadores de clics, todo eso. Estos pueden llegar bastante largos y a menudo queremos en cada atributo en una nueva línea como esta, que realmente consume mucho tiempo haciéndolo manualmente. Bueno, esta prórroga hará eso por nosotros. Voy a buscar atributos HTML divididos. Es éste con el ícono verde. Yo instalaré eso. Voy a cambiar la configuración predeterminada para esta extensión. Voy a desplazar hacia abajo esta descripción hasta la sección de ajustes aquí abajo. Sales o la opción determinará el orden de los atributos. Para que puedas ver que estamos poniendo atributos más importantes como Vf y Vi. Vi modelo en la parte superior y atributos menos importantes como ID de clase más abajo hacia abajo hacia abajo. Entonces voy a seleccionar esta matriz y copiarla. Entonces voy a saltar a los ajustes de configuración y luego a la configuración de extensión. Voy a marcar esta casilla aquí, que colocará nuestro soporte de cierre en una nueva línea, que prefiero. Y luego bajo orden de asalto, voy a hacer click en editar en settings.js. Normalmente mucha esta opción bosques, pero no lo es. Entonces vamos a tener que hacerlo manualmente. Mucha coma aquí después de esta última opción, fuera algunas cotizaciones. Y vamos a escribir en atributos HTML divididos orden de clasificación de puntos, no es auto completado ese bosque. Y luego seleccionaré esta matriz. Pegue el que copiamos de la página de configuración. Ahorra eso. Y ahora si volvemos a este archivo App.vue, si selecciono esta etiqueta de imagen, que es una etiqueta de cierre automático, y phi son la extensión con Control Alt Shift y un. por cierto, puedes cambiar eso atajo de teclado si lo desea. Dices que divide todos nuestros atributos en nuevas líneas al instante. También hará el revés también. Si selecciono esto y phi son la extensión de nuevo, los volverá a poner en una sola línea. Echemos un vistazo a que el orden de las sales está funcionando. Por lo que una gran cantidad de atributo de modelo V al final myVar. Ojalá que si ejecutamos la extensión, este modelo V se colocará en la parte superior, que es, solo voy a deshacer todos mis cambios aquí. Ahorra eso. Creo que estas son todas las extensiones que voy a usar. También vamos a estar usando mucho el terminal en VS Code para alternar el terminal, solo presiona Control y Buck enfermo y saldrá así. Y también puedes hacer que desaparezca también con el mismo atajo, tus indicaciones podrían parecer un poco diferentes, pero no te preocupes, todo debería seguir funcionando. 5. Vue Devtools: Lo siguiente que queremos instalar es ver herramientas de profundidad, que nos ayudarán a depurar nuestras apps de Vue, sobre todo cuando empezamos a trabajar con centavo encendido, más adelante, quieres ir a gatear, acompaña pequeños puntos, más herramientas y extensiones. Un ángulo a este menú de la izquierda. Y luego abre Chrome Web Store. Buscar vista, herramientas dev. Aquí hay tres extensiones diferentes. En el momento en que estoy grabando esto, necesitamos usar la versión Beta para V3 ups. Pero como estás viendo esto en el futuro que la versión de lanzamiento, ésta podría funcionar. Entonces solo te sugeriría que pruebes la versión de lanzamiento y pensé que no funciona, luego prueba la versión Beta, pero voy a instalar la versión beta. Haga clic en Agregar a la extensión Chrome que ahora está instalada. Basta con comprobar que está funcionando. Vamos a lanzar una vista hacia arriba en el navegador. Voy a abrir el proyecto que había abierto antes. Saltar a la terminal y ejecutar npm run dev, no funcionó. Creo que eso es porque no tengo instaladas las dependencias. Entonces ejecutaré npm install primero. Luego ejecute npm run dev comando y haga clic en este enlace aquí. Ahora puede ver esta aplicación de vista básica ejecutándose en el navegador. Lanzamiento, las herramientas dev. Podemos simplemente ir a nuestras herramientas de desarrollo de Chrome yendo a View Developer, Developer Tools. O puedes usar el atajo de teclado. Si hacemos click en esta pequeña flecha, deberías tener una opción de vista. Y ahí es donde vive nuestra vista DevTools. Y puedes ver todos nuestros componentes aquí. También podemos ver datos relacionados con componentes. Por lo que este componente Helloworld cuesta la propiedad del mensaje, el valor de usted lo hizo. Solo voy a acercar un poco en realidad a las herramientas dev. Y esto va a ser especialmente útil más adelante cuando empecemos a trabajar con la gerencia de Penn State. 6. Vue 3 Docs y instala Node.js [Module 2]: De acuerdo, empecemos ahora creando una nueva vista de proyectos. En primer lugar, vamos a saltar al sitio view doc. Sólo voy a Google V3. Joe a la página web V3. En su momento estoy grabando esto, el View Docs o a punto de ser rebota masivamente. Voy a estar usando la nueva versión de los docs en este curso porque nos muestra cómo construir un proyecto de vista tres con V8 utilizando la última herramienta de compilación. Para saltar a la siguiente versión de la documentación, voy a saltar a la barra de direcciones. Acaba de cambiar esta v3 a puesta en escena. Ahora vemos la hermosa nueva documentación. Si ya estás viendo esto, entonces De alguna manera lo estás. Y después queremos hacer click en instalar. Desplázate un poco hacia abajo. Antes de poder crear un nuevo proyecto de Vue, necesitamos asegurarnos de que tenemos instalado Node.js. Si no tienes eso instalado, entonces haz clic en este enlace. Probablemente quieras instalar el de la izquierda aquí. Y solo quieres descargarlo e instalarlo. O si lo prefiere, puede usar herramientas de control de versiones de nodos como nvm. 7. Crea un proyecto Vue: Volvamos a la página de view docs y creamos nuestra primera vista tres proyectos con VT con la última herramienta de compilación. Para crear un nuevo proyecto puede simplemente ejecutar este comando en nuestra terminal. Simplemente acercaré un poco, NPM en él, ver más reciente. Voy a copiar este Código VS y saltar a la terminal. Y de nuevo, podemos alterar eso con el comando y la espalda enfermos. Voy a pegar ese comando en. Lánzala. Por cierto, quieres asegurarte de que estás en la carpeta donde guardas tus proyectos. Necesitamos instalar este crear vista último paquete. Así que sólo escribiré y dos, permitir eso. Nos va a pedir algunas opciones aquí para el nombre del proyecto, que también será el nombre de la carpeta. Voy a usar los conceptos básicos del tablero de API de composición de Vue porque vamos a estar usando esto para aprender todos los conceptos básicos de v3 y la API de composición. Voy a elegir nodo a TypeScript saber al soporte de JSX. Voy a elegir sí para agregar Vue Router a nuestra app más adelante en el curso, cuando creamos nuestra app de curso, notas bolas, vamos a estar eligiendo notas, esta opción. Y en realidad te voy a mostrar cómo instalar Vue Router manualmente desde cero. Pero por simplicidad, mientras estamos aprendiendo lo básico, voy a elegir Sí y conseguir la herramienta de compilación para hacer esto sigue automáticamente. De nuevo para opinión, voy a elegir sí, aunque más adelante en el curso, les voy a mostrar cómo agregar opinión a una vista tres proyectos manualmente. Voy a elegir saber volver a probar saber a Chipre, saber a ES pelusa. Es posible que quieras considerar usar ES pelusa en tus propios proyectos. Pero por simplicidad, voy a elegir saber solo para los fines de este curso para que no te pongas un montón de molestos errores de pelusa. Pero si de verdad quieres elegir sí, entonces puedes hacerlo pero voy a elegir No. Eso está terminado. Lo puedes ver andamios nuestro proyecto súper rápido y nos dice cómo empezar. Necesitamos cd en la carpeta que creó, ejecutar NPM install para instalar las dependencias y ejecutar npm run dev para iniciar la aplicación en el navegador. Así que sólo voy a saltar al buscador. Puedo ver aquí se crea la carpeta. Así que voy a arrastrar eso al Código VS. Abra de nuevo el terminal, ejecute NPM install para instalar las dependencias. Terminemos y podemos lanzar la app con npm run dev. Podemos ver esta URL aquí. Nosotros Comandamos y hacemos clic en eso. Ahora podemos ver el básico V3 y V2 empieza a envolver corriendo en el navegador. 8. Configuración de proyectos: Simplificemos este proyecto tanto como sea posible para que nos sea fácil practicar los conceptos básicos de v3 y la API de composición. En primer lugar, solo quería cambiar el título que aparece en la parte superior, que actualmente dice VTE arriba. Entonces voy a saltar a index.html, cambiar el texto en esta etiqueta de título para ver los conceptos básicos de la API de composición. Ahorra eso. Y vemos esa actualización al instante, yendo a cerrar eso. Y ahora simplificemos nuestras páginas o nuestras vistas. Actualmente solo tenemos dos páginas o vistas, la vista de casa y la vista. Simplificemos primero toda la vista, voy a ir a fuente y vistas, vista casa, vista de puntos. Sólo voy a dejar de aparecer este mensaje eligiendo No volver a mostrar. Simplemente cerraré eso. Y a veces voy a estar escondiendo la barra lateral aquí. Si quieres ocultarlo, puedes ir a Ver y apariencia y cambiar esta barra lateral de mostrar o puedes usar el atajo de teclado. Sólo voy a ocultar eso por ahora. Voy a quitar esta etiqueta de script. Voy a quitar todo dentro de las etiquetas de plantilla y apenas arrancar un div con una clase de casa. Dentro de eso asignan un rumbo H1. Simplemente ponga el texto a casa y guarde eso. Ahora podemos ver que está actualizado. Que voy a copiar este código. Saltar a sobre la vista de puntos Vue en la misma carpeta. Sólo pega sobre todo aquí. Cambiaré la clase a aproximadamente. Cambie el texto en el encabezamiento a aproximadamente también. Ahorra eso. Y ahora tenemos dos vistas realmente simples. Ahora vamos a deshacernos de todas estas cosas en la parte superior. Y eso es todo. Nuestro componente de vista raíz, que es app.vue en la fuente app.vue. Así que voy a abrir eso arriba de la barra lateral. Cuánto vas a esconder la terminal también. No necesitamos ver la terminal la mayor parte del tiempo. Todo lo que realmente quiero en nuestro diseño es esta navegación aquí para que podamos llegar a nuestras páginas. Y ese es este elemento nav aquí con estos dos componentes del link del router. Entonces voy a copiar este elemento nav en ambos de estos enlaces del router. Y luego voy a seleccionar el conjunto de este encabezado. Sólo pega esos sobre eso. Arreglar la sangría. Sí necesitamos asegurarnos de dejar este componente de vista del router porque nos permiten mostrar nuestras vistas reales, nuestra vista de casa y nuestra vista. Yo lo guardaré. Esto se ve bonito y sencillo. Voy a quitar la sección de script y guardar eso. Voy a quitar algunos de estos estilos, pero no todos porque algunos de ellos se ven bastante iguales. Si arrastramos esto, podemos ver que más allá de cierta resolución, todo se mueve alrededor. Así que sólo voy a quitar los estilos que están haciendo eso. Si nos desplazamos por esta sección de estilo, podemos ver aquí esta consulta de medios con el min-width establecido en 100 a cuatro píxeles. Sólo voy a derrumbarme haciendo clic en esta pequeña flecha al lado de eso. Seleccione toda esa consulta de medios. Simplemente elimine eso y guárdelo. Y ahora si aumentamos el ancho del navegador simplemente debe permanecer igual, que no necesitamos ninguno de los componentes en la carpeta de componentes. Ahora, voy a caer a los componentes fuente. Voy a seleccionar todo en la carpeta de estos componentes haciendo clic en el primer elemento, manteniendo pulsada la tecla Mayús y haciendo clic en la parte inferior, y luego haga clic con el botón derecho, Eliminar. Deshazte de esos. Vemos esta flecha, pero si solo recargamos la página que el error desaparece. Y ahora tenemos app súper simple que podemos usar para empezar a aprender los conceptos básicos de v3 y la API de composición. Así que empecemos a aprender lo básico. 9. Opciones API vs. API de composición [módulo 3]: Vamos a crear una cuenta realmente simple están fuera usando la API de opciones y luego convertirlo en la API de composición. Esto nos ayudará a ver rápidamente las diferencias entre los dos enfoques. Y lo haremos en nuestra vista de casa. Voy a saltar a vistas de fuente sobre la vista de casa, vista de puntos. Sólo voy a deshacerme de este rumbo. Sólo voy a tener un div con un botón y un contador. Mucho, un elemento de botón con una clase de btn con el texto menos. Entonces voy a duplicar eso. Cambia el texto a plus. Y luego en el medio, agregaremos un lapso con una clase de conteos. Por ahora, solo pondré 0 ahí y guardaré eso. Pensemos sólo algunos estilos para poner esto en el centro, que se vea un poco más bonito. Agreguemos un bloque de estilo. Se dirigirá a esta casa div acaba de enviar a todo. Así que no mantengas el texto alinear centro. Ahorra eso. Un poco de relleno. Entonces nuestro consejero no se detiene justo en contra del nav. Establezca el relleno en 20 píxeles y guárdelo. Apenas aumentemos el tamaño de estos botones y el contador y lo hagamos un poco de espacio entre todo. Así que voy a apuntar a la clase de botones en la clase de consejo. Establezca el tamaño de fuente en 14 píxeles. Ahorra eso. Y pondré el margen en diez píxeles, guarde eso. Eso se ve bastante decente. 10. API de opciones: datos y métodos: Vamos a configurar algunos datos y métodos para que esto funcione usando la API de opciones. Tenemos que agregar nuestra sección de guiones. Y dentro de eso necesitamos sumar nuestro defecto de exportación. Vamos a configurar nuestros datos primero. Para este contador, necesitamos agregar un método de datos que devuelva un objeto. Podemos poner todas nuestras propiedades de datos aquí. Mucha propiedad llamada consejera, establece eso en 0, salvo eso. Deberíamos poder usar eso en nuestra plantilla. Ahora, deshazte de este 0, nuestras llaves dobles rizadas. Y vamos a poner contador aquí y ahorrar eso. Si cambio esto ahora, deberíamos verlo actualizar en la plantilla que hacemos. Voy a volver a poner eso a 0. Ahora vamos a establecer algunos métodos para aumentar y disminuir este contador. Voy a agregar un manejador de clics a este botón. Este botón plus. Haga clic en iguales disparará un método llamado contador de aumento. Vamos a crear este método. Entonces después de nuestro método de datos, mucha coma, y luego necesitamos agregar nuestros métodos objeto. Y vamos a crear este método aumentar los recuentos de todo lo que queremos hacer es aumentar esta propiedad de mostrador en uno. Entonces para acceder a nuestras propiedades de datos, solo podemos hacer estos puntos y luego asesorarnos. Y sólo podemos hacer plus plus para aumentarlo en uno. Lo guardaré y veamos si eso está funcionando todavía. Podemos aumentar el contador. Por lo que ahora solo necesitamos un método para disminuir al consejero. Entonces mucha coma aquí y voy a duplicar este método, renombrarlo para disminuir contador, acaba de cambiar el código a este contador de puntos menos menos menos para disminuir esta propiedad del consejo. Y luego copiaré este manejador de clics del botón más y lo agregaré al botón menos y acabo de cambiar el nombre del método para disminuir counte y guardarlo. Y ahora podemos aumentar y disminuir nuestro contador. 11. Conviértalo a API de composición: Cambiemos esta sencilla aplicación a usar la API de composición. Y una cosa importante a tener en cuenta es que todo en la plantilla se mantiene igual. No necesitamos cambiar nada en la plantilla. Generalmente con la API de composición, todo en la plantilla funciona exactamente igual. Utilizamos propiedades de datos, métodos de propiedades calculadas exactamente de la misma manera. El único lugar en el que hacemos las cosas manera diferente es en la sección de guiones. Voy a comentar esta sección de script de API de Opciones. Por ahora. Mucho comentario de apertura en la parte superior de la misma, y luego un cierre comenta en la parte inferior de la misma. Agreguemos una nueva sección de script donde usaremos los scripts de la API de composición. Ahora podemos usar la API de Composición con dos patrones diferentes. Ahí está el patrón de función de configuración, que fue el patrón original, que vino en la API de composición salió por primera vez. Y luego tenemos el segundo patrón, que es el patrón de configuración de script, que fue lanzado más adelante es mucho mejor. Pero por ahora, solo utilicemos el patrón de función de configuración original. Aunque nos gustará usar el patrón de configuración de script superior. Para utilizar el patrón de función de configuración, nuevamente, necesitamos agregar nuestro valor predeterminado de exportación. Pero no agregamos opciones como métodos de datos, etc. En cambio, agregamos una función de configuración como esta y colocamos todo nuestro código aquí. Básicamente todas nuestras propiedades de datos, métodos, propiedades computadas, relojes, etc., todos irán dentro de esta función de configuración. 12. API de composición: datos (refs) y métodos: Vamos a configurar una variable de datos reactiva para nuestro contador. Ahora en la API de composición, hay dos tipos principales de datos reactivos. Tenemos refs y objetos reactivos. Voy, me meteré en estos con más detalle más adelante en el curso. Bueno, básicamente un objeto reactivo nos permite crear un objeto de datos con un montón de propiedades de datos relacionadas dentro del objeto. Considerando que el RF se utiliza generalmente para elementos simples de datos individuales, como una cadena y matriz o un número. Por lo que tiene sentido usar un áspero para esto, para configurar un href, solo podemos crear una constante y darle un nombre. Cualquiera que sea el nombre que utilicemos será el nombre que está disponible en la plantilla a. Entonces vamos a llamar a este contador, ya que ese es el nombre que hemos usado en nuestra plantilla aquí. Y queremos establecer eso igual al método ref como este. Y luego podemos pasar nuestro valor inicial dentro de este método. Así que vamos a establecer eso a 0 inicialmente porque estamos usando este método ref, necesitamos importar este método desde la vista. Entonces por encima de nuestra exportación, necesitamos importar desde la vista. Ahora este representante de consejo aún no está disponible en nuestra plantilla. También tenemos que devolverlo cuando estamos utilizando la función de configuración, ollas a la derecha a la parte inferior de nuestra función de configuración, necesitamos agregar una declaración de retorno. Esta declaración de retorno siempre debe permanecer en la parte inferior de la función de configuración. Y entonces sólo tenemos que devolver este consejo ref, así y salvarlo. Y ojalá este contador se espere arriba ahora podemos ver 0 en la página. Y si cambiamos el valor de este href y lo guardamos, podemos ver que está actualizado en la plantilla. Sólo voy a volver a poner esto a 0 y guardar eso. Ahora tenemos que sumar nuestro contador disminuido y aumentar los métodos de contador. Y la forma en que hacemos esto es solo creando algunas funciones con nombre en cualquier lugar dentro de esta función de configuración. Y entonces tenemos que devolverlos igual que devolvemos este contador ref. Entonces vamos a crear un método para aumentar el contador. Entonces podemos hacer esto así con la palabra clave function, función increase. Consejero. Podemos hacer una constante llamada contador de aumento, que configuramos igual a una función como esta, que es el método que suelo usar. Todo lo que queremos hacer es aumentar este contador ref por uno. Y se podría pensar que podríamos simplemente hacer contar plus, plus. Pero en realidad esto no funcionará con la API de composición porque cuando creamos un bruto, realmente crean un objeto y el valor de nuestro ref se almacena en una propiedad llamada valor. Entonces para acceder a esto, en realidad necesitamos hacer consejero dot value, y entonces podemos hacer plus plus de nuevo, para poder utilizar este método en nuestra plantilla, necesitamos devolverlo. Por lo que sólo podemos pensarlo a este objeto de retorno como este contador de aumento. Dado que ya tenemos OK click handler aquí, que está disparando el mismo método, debería funcionar. Por lo que guardaré eso, haga clic en el botón más y eso está funcionando. Ahora solo necesitamos crear el método de contador disminuido. Duplicaré este método aumentado de calcio, renombrarlo para disminuir contador y solo cambiaré el plus plus a menos menos para que disminuya el valor del contador en uno. Y de nuevo, tenemos que devolverlo mucho esto a nuestra declaración de retorno aquí abajo, disminuir delta, salvo eso. Y ojalá ambos botones deban estar trabajando sin embargo todo está funcionando. 13. Configuración de guiones: ¡Una manera más fácil!: En pocos tres puntos se una nueva sintaxis o patrón introdujo una nueva sintaxis o patrón para la API de composición, que es el patrón de configuración de script o sintaxis. La configuración de script nos permite hacer que nuestros componentes sean mucho más simples, menos desordenados, y más fáciles de administrar, nos permite deshacernos del valor predeterminado de exportación, deshacernos de la función de configuración, y lo más importante, deshacerse de la declaración de devolución. Con la configuración de scripts A2, ya no tenemos que preocuparnos por asegurarnos de que todas nuestras propiedades de datos, métodos, propiedades computadas, etc, sean devueltos. Ahora en un componente simple como este, podría no marcar mucha diferencia, pero en una realmente lo complica con cientos de componentes que cada uno tiene sonidos de diferentes propiedades de datos, métodos, vigilantes, propiedades computadas, etcétera Realmente hace nuestra vida más fácil no tener que mantener constantemente esta declaración de retorno actualizada cada vez que cambiamos cualquiera de nuestros datos propiedades, métodos, o renombrarlos, etc. Para mi propio up, Fujitsu, que actualmente está trabajando, en realidad pasó un día entero convirtiendo alrededor de 100 componentes de esto un patrón de función de configuración al nuevo script patrón de configuración. Y ese fue un día realmente aburrido, pero valió la pena porque ahora la app es mucho más fácil trabajar. Por cierto, el patrón de configuración de script es el patrón que voy a usar para el resto del curso porque es mucho más simple y es el patrón que recomienda el equipo Vue. Así que vamos a convertir este código al nuevo patrón de configuración de script. Voy a comentar esta sección de guiones. Agregaremos aquí una nueva sección de guiones. Ahora no necesitamos agregar nuestro valor predeterminado de exportación, y no necesitamos agregar esta función de configuración. Todo lo que tenemos que hacer es agregar un atributo a esta etiqueta de script de apertura como esta. Ahora podemos colocar todo nuestro código aquí, todas nuestras propiedades de datos, métodos, etc. Y ni siquiera necesitamos devolver ninguno de estos. Vamos a copiar nuestros dos métodos en nuestro consejo ref del viejo código. Pega directamente aquí y solo arregla la sangría. Todavía necesitamos importar este método ref desde la vista. Así que voy a copiar eso. Simplemente colocamos todas nuestras entradas en la parte superior de esta sección de guiones En esto. Y ahora no necesitamos devolver nuestros datos ni nuestros métodos. Cualquier propiedad o método de datos son propiedades calculadas que declaramos en el nivel superior de esta etiqueta de script estarán disponibles en nuestra plantilla automáticamente. Entonces si guardo esto ahora, solo debería estar funcionando de inmediato. Aún así. Sigue funcionando. Ahora hemos reducido nuestra sección de guiones de, digamos, 21 líneas a solo 11 líneas. Hemos simplificado masivamente nuestro código y ya no tenemos que preocuparnos por esta molesta declaración de devolución. 14. Refs [Module 4]: Existen tres tipos principales de datos que podemos utilizar en una aplicación API de composición. Reps, que ya hemos agregado en esta app, objetos reactivos y datos no reactivos. Ya hemos cubierto refs. Básicamente acabamos de configurar una constante o un conjunto de variables que sea igual al método ref que necesitamos importar desde vista y luego simplemente pasar en el valor inicial. Podemos hacer cambios a ese valor accediendo a la propiedad value de la constante que hemos configurado, no podemos tantos repetidores como queramos. Así que agreguemos otro. Digamos que queremos un título para nuestro contador y queremos poder cambiar ese título programáticamente, todo con vinculación bidireccional. Añadamos otro rep aquí. Podríamos hacer const conteos en el título, establecer eso igual a un método ref, pasar en un valor inicial de, digamos mi contador. O podemos mostrar esto al deshacernos de la palabra clave const y luego agregando una coma después de la primera const. Nuevamente, no necesitamos devolver esta constante. Debe estar disponible en nuestra plantilla de forma directa. Así que agreguemos la etiqueta H3, tanto este div dará salida a este título. Así que dobles llaves rizadas, título de contador, salvo eso. Ahora podemos ver ese título en la plantilla para que sea un poco más claro cuál es este título, solo voy a añadir un punto y coma después de este título. Ahora si cambiamos el valor de este gráfico, deberíamos ver la actualización del título, que hacemos. 15. Binding de datos bidireccional: su mayor parte, el enlace de datos bidireccional funciona exactamente igual en la API de composición que en la API de opciones. Sólo para demostrar esto, vamos a añadir una entrada a nuestra página, lo que nos permite modificar este título de contador que hemos almacenado en este dato ref después de este div con nuestro contador y botones mucho de div con una clase de edición. Y luego dentro de eso voy a añadir h4 encabezado con el texto, editar contador, título, dos puntos, y luego mucho. Y salva eso. Solo voy a agregar un poco de margen a la parte superior de este div. Saltaré al mientras estamos en ello. Simplemente eliminemos todos estos viejos comentarios. Y saltaré a la sección de guiones. Target, la clase de edición, a la que acabamos de empezar a ese dip, y mucho margen, superior de 60 píxeles y guardar eso. Ahora vamos a vincular esta entrada para contrarrestar, este contador título rref. Entonces para hacer eso, solo podemos saltar a esta entrada y agregar una directiva modelo V. Apenas ponerlo igual a este conteo const, el título, título de cabildo. Di eso. Ahora podemos ver nuestro recuento el título en esta entrada. Y si lo cambiamos, no es actualizar el encabezamiento aquí arriba. A lo mejor sólo tenemos que refrescar, intentarlo de nuevo aún si cambiamos el título del encabezado en esta entrada, lo vemos actualizado en nuestro rubro o lo pagamos. 16. Objetos reactivos: Podemos ver que los refs son prácticos para almacenar elementos simples independientes de datos, como un número o una cadena, o tal vez una matriz o un booleano. Pero y si queremos almacenar un montón de datos diferentes que estén relacionados juntos en un solo objeto. Un poco como lo hicimos con el método de datos en Options API Apps. Bueno, podemos hacerlo con un objeto reactivo. Digamos que queremos almacenar juntos nuestro contador y nuestro título de consejero en un solo objeto. Dado que estos datos están relacionados, entonces podríamos hacer eso con un objeto reactivo. Para configurar unos objetos reactivos, nuevamente creamos un const o podemos usar una variable. Ahora le damos un nombre a eso para que pudiéramos llamarlo consejero data. Y fijamos eso igual al método reactivo. Sí necesitamos importar esto desde la vista. Por lo que sólo podemos añadir eso a nuestro objeto de importación aquí, reactivo. Podemos simplemente pasar un objeto a este método reactivo y podemos colocar todas nuestras propiedades de datos aquí. Vamos a crear una propiedad llamada Count para nuestro contador, darle a eso un valor inicial de 0. Y entonces mucha propiedad llamada título, el título, y lo pondré a mi contador, salvo eso. Vamos a utilizar los datos de estos objetos reactivos en nuestra plantilla en lugar de los datos de estas refs. Si queremos usar el consejero que está en estos objetos reactivos aquí, solo podemos hacer recuento de puntos de datos de consejero. Si queremos usar el título, está en los objetos reactivos. Podemos simplemente cambiar esto en esta etiqueta de encabezado a Orientador data dot title. Actualicemos también este modelo V. Para utilizar estos objetos reactivos. Voy a establecer este modelo V para asesinar datos, puntos, título, y lo guardaré y recargaré. Y veamos si nuestro título está empapado. De acuerdo, sí, eso sigue trabajando en el enlace de datos bidireccional sigue funcionando así y las cuentas o está funcionando, podemos ver 0 mostrados allí. Y si cambio el valor de los contadores de puntos de datos, podemos verlo actualizar. No obstante, estos fondos no están funcionando. Y eso es porque estos métodos, el método incrementado del consejo y el método de consejero de disminución, siguen manipulando este href y no el descuento que está en nuestro objeto reactivo. Entonces vamos a actualizar estos métodos. En lugar de contar o dot value plus plus, solo podemos hacer datos de consejero, conteo de puntos más plus. Entonces en el método disminuido del consejo, solo podemos hacer recuentos de datos, conteo de puntos menos menos menos. Tenga en cuenta que no necesitamos usar el valor de punto cuando estamos usando datos que están en objetos reactivos, solo usamos el nombre de la propiedad recta, recuento de puntos de datos del consejero. Ahora vamos a guardar eso y ver si estos botones están funcionando. Sí, eso está funcionando de nuevo ahora, ya no estamos usando estos refs. El código Vs nos muestra que al encanear estos un poco. Así que vamos a comentar estos fuera. Dado que ya no usamos este método ref desde la vista, podemos eliminar eso de esta declaración import como tal y guardarla. 17. Datos no reactivos: A veces en nuestra vista componentes queremos tener una propiedad de datos que no necesita ser reactiva. Esto es fácil de hacer con la API de composición. Y te recomendaría que cualquier propiedad de datos en tu componente que no necesite ser reactivo, debes hacer no reactiva ya que esto mejorará el rendimiento de tu app. Digamos que queremos almacenar el título de nuestra app en una variable de datos, pero no necesitamos que sea reactiva. No necesitamos poder cambiar el valor de ese título programáticamente y verlo actualizado en la plantilla. Todo lo que tenemos que hacer es configurar una constante o variable. Por lo que voy a crear una constante llamada título. Simplemente establece eso igual a una cadena. Así que no estoy usando un reactivo solo una constante estándar de bog que se establece en una cadena. Pondré esta cuerda a mi increíble Kaltura arriba y guardaré eso. Esta constante ahora debería estar disponible en nuestra plantilla. Saltaré a la plantilla dentro de este div con la clase de casa. H2 dará salida a esta constante, por lo que dobles llaves rizadas. Y luego afuera, se ahorrará eso. Y ahora podemos ver nuestro título en la página. Y si cambiamos esta cadena a mi bien, contrarrestar, que tiene un poco más apt, entonces vemos esa actualización en la página. 18. Métodos [Modulo 5]: Ya hemos aprendido a agregar métodos a nuestro componente. Vamos a repasar rápidamente cómo podemos pasar parámetros a los métodos. En primer lugar, sólo voy a eliminar estos comentarios de antes. Entonces digamos que queremos poder aumentar nuestro contador por un número específico en lugar de solo por uno. Bueno, podríamos pasar en el número que queremos aumentarlo por un parámetro sobre nuestras contrapartes de aumento. Aquí, sólo podemos empezar paréntesis a nuestro nombre de método pasando un valor. Pasemos uno por ahora. Y si saltamos hacia abajo a nuestro método de contador aumentado, ahora podemos recibir ese parámetro como este. Como taquigrafía, en realidad podríamos simplemente quitar estos paréntesis si queremos. Simplemente cierre la sesión para asegurarse de que está viniendo a través de console.log y cantidad. Ahorra eso. Sólo voy a abrir las DevTools Chrome. Puedes ir a Ver en Chrome Developer Developer Tools o puedes usar el atajo de teclado en la consola aquí abajo. Si hago clic en el contable aumentado, sí, podemos ver que este número uno está bloqueado. Ajustemos la lógica y nuestro método de contador aumentado para que aumente el recuento en nuestros objetos reactivos por la cantidad que estamos pasando en lugar de solo por uno. Por lo que podemos hacer cuentas de conteo de puntos de datos igual a contar los datos, conteos de puntos más cantidad, o como taquigrafía, podríamos hacer contadores de datos de contadores de puntos más igual a cantidad. Yo lo guardaré. Asegúrate de que todavía esté funcionando. Sin embargo, sigue trabajando. Ahora podríamos sumar un segundo Boltzmann por incrementar el contador en dos. Volveré a saltar a la plantilla y duplicaré este botón de contador de aumento, pero pasaremos a este método. Simplemente cambiaré el texto de este botón a plus, plus. Guarda eso, y simplemente alejaré un poco. Ahora cuando hacemos clic en este botón, podemos ver que nuestro contador se incrementa en dos. Bueno, este botón sigue aumentando en uno. Simplemente me desplazaré hacia abajo y eliminaré ese console.log. Hagamos lo mismo por nuestra disminución del cáncer. Duplicaré este botón Contador disminuido. En el segundo botón pasaremos el valor uno, y luego en el primer botón pasaremos el valor para cambiar el texto en el botón a menos menos. Si eso, necesitamos actualizar este método de consejero disminuido. Por lo que de nuevo, podemos hacer recuentos de puntos de datos del Consejo equivale conteos de conteo de puntos de datos menos cantidad. O no necesitábamos pasar en la cantidad fossa aquí. O como taquigrafía, podemos hacer Council data dot count menos equivale a cantidad. Así que ahorremos eso y veamos si eso está funcionando. Simplemente arrastra la consola un poco. Este botón está disminuyendo el contador en uno. Este botón lo está disminuyendo en dos. Por cierto, si quieres obtener acceso al objeto de evento, entonces podríamos hacerlo con solo pasar un segundo parámetro a nuestro método. Entonces se lo pasaré a éste de aquí. En esto hay que llamarse evento Dollar. Y ahora si saltamos a nuestro mayor método de consejero tendrá que volver a poner los paréntesis. Ya que va a haber dos parámetros, entonces podemos simplemente pasar en el objeto de evento así. Puedes usar cualquier nombre que quieras, pero solo usaré una Ahora deberíamos poder cerrar esta sesión. Y luego cuando hacemos clic en esto aumentado en un voltaje, podemos decir que el objeto de evento que se está cerrando la sesión. Y entonces podemos obtener acceso a qué elemento se hizo clic, paradero estaba el cursor, etcétera Antes de seguir adelante, simplemente eliminemos este console.log. 19. Propiedades computarizadas: Las propiedades computadas son propiedades que generalmente se generan en base a datos reactivos, que se guardan en caché y solo se actualizan cuando hay cambios de dependencias. Por ejemplo, podríamos crear una propiedad computada que tome el valor de este contador, la manipule de alguna manera. El valor de nuestra propiedad computada solo se regenerará siempre que cambie el contador. Así que solo recordemos cómo agregamos propiedades computadas usando la API de opciones. Saltaré a la parte inferior de esta sección de script y agregaré otra sección de script. El valor predeterminado de exportación. El API de opciones. Tuvimos que agregar una opción calculada. Tuvimos que colocar todas nuestras propiedades computadas aquí, como mi propiedad computada. Entonces dentro de eso realizaríamos alguna lógica basada en una propiedad de datos. Entonces devolveríamos algo. Esto significaba que todas nuestras propiedades computadas tenían que ser agrupadas en este objeto computado. No obstante, con la API de composición, podemos crear una propiedad calculada literalmente en cualquier lugar dentro de nuestra sección de script. Esto es realmente útil, especialmente en componentes más grandes porque significa que podemos agrupar todo nuestro código relevante juntos, que es algo que demostré nuevo en el módulo uno. Como dije de nuevo en el módulo uno, esta es una de las principales ventajas de la API de composición. El hecho de que nos permita agrupar todo nuestro código relacionado, ya sean propiedades de datos, métodos, propiedades computadas, relojes, ciclo de vida, ganchos, etcétera. Vamos a comentar este ejemplo de API de Opciones aquí. Agregaremos una propiedad calculada a nuestro código API de composición. Ahora para crear una propiedad calculada, sí necesitamos importar el método computado desde la vista. Simplemente podemos empezar eso a nuestra entrada aquí, comas computadas. Y ahora vamos a configurar una propiedad calculada que determina si el contador es extraño o par. Y luego espacie esto en la página. Primero, acabemos de configurar el narco después este div con todos nuestros botones y el contador, mucha etiqueta de párrafo, y solo agregaré el texto. Este contador es extraño. Hola, vamos a hacer que esta palabra sea impar dinámica usando nuestra propiedad informática. Yo lo guardaré. Desplazemos un poco hacia abajo. Y de nuevo, podemos crear nuestra propiedad de computación en cualquier lugar que queramos. Supongo que tiene sentido colocarlo después un objeto reactivo sin datos. Para crear una propiedad calculada, solo necesitamos disparar el método computado. Dentro de eso, sólo tenemos que pasar en un método como este. Entonces tenemos que devolver algo. Para poder hacer uso de esta propiedad de computadora, necesitamos asignarla a una constante o a una variable. Entonces asignaré esto a una constante llamada impar o par. Uy, escribí eso mal. Extraño o par. Podemos usar el operador restante para determinar si un número es impar o par. Por lo que sólo podemos hacer IF y luego acceder a nuestros conteos. Por lo que sólo podemos hacer recuentos de conteo de puntos de datos. Si conteo de puntos de datos de contador, el resto dos es igual a 0. En otras palabras, si dividimos nuestro valor de cout por dos y obtenemos el resto, bueno, si es un número par y lo dividimos por dos, entonces el resto será 0. Y sabemos que el número es parejo. Si este es el caso, entonces podemos volver parejos. De lo contrario. De lo contrario sólo podemos volver extraño. Ahora en realidad podemos simplemente deshacernos de esto más si queremos sentir que en realidad nunca llegará a esta línea. Si esta primera línea es cierta, me desharé de la palabra else en Guardar que esta propiedad calculada ya está lista para usar en nuestra plantilla. Saltaré al mercado que acabamos de empezar este párrafo. Quita la palabra impar, un extraño doble rizado llaves, solo da salida a nuestra propiedad calculada impar o par. Ahorra eso. Podemos ver que el consejero es 0 y dice que este contador es parejo. Lo aumentamos en uno. Y dice descuentos o es extraño. Lo configuramos en dos y es incluso de nuevo, etc. 20. Una nota sobre los filtros: Si te estás preguntando cómo hacer filtros con V3 en la API de composición, bueno, en realidad se han eliminado de V3. Si solo Google ve tres filtros en broma a esta página desde la guía de migración, podemos ver que en realidad se han eliminado. En vista de, podríamos agregar un objeto filtros a nuestra exportación predeterminada. Y podríamos crear un filtro que aceptara el valor y luego devolvería algo más. Y luego podríamos usar ese filtro en nuestra plantilla simplemente agregando una tubería seguida del nombre del filtro. Si nos desplazamos hacia abajo hasta el a3x, actualización, se eliminan los impulsos, ya no se soportan. En cambio, recomendamos reemplazarlos con llamadas a métodos o propiedades computadas. Ahora bien, esto no es un gran problema porque podemos lograr fácilmente la misma funcionalidad que un filtro mediante el uso de propiedades o métodos calculados. Hecho, lo que hemos hecho aquí con este extraño o incluso es algo así como un filtro. Estamos tomando un valor y dando salida a algo basado en ese valor. Pero una de las cosas a mano de los filtros de paredes, podríamos hacer fácilmente un filtro global, usarlo en toda nuestra aplicación. Entonces digamos que teníamos una app que mostraba moneda en muchas páginas diferentes. Podríamos crear un filtro que convertiría un número en una cadena de moneda formateada con un dólar al inicio y tal vez algunas comas para separar los ceros. No obstante, si V3 podemos lograr lo mismo creando una propiedad computada o un método para hacer que esa propiedad o método computado sea global mediante el uso de composable. Y entonces podemos usar fácilmente esa funcionalidad todos modos, yo dentro de nuestra app. Y aprenderemos más sobre esto más adelante en el curso cuando cubramos composable. 21. Reloj: Los relojes nos permiten esencialmente ver una propiedad de datos reactiva y hacen algo cada vez que cambia. Solo recordemos cómo lo hicimos con la API de opciones. Así que voy a mover aquí este comentario de cierre. Digamos que teníamos un método de datos. Dentro de eso teníamos una propiedad de recuento establecida a 0 inicialmente. Y entonces queremos ver este recuento y digamos hacer algo cuando llegue a un valor en particular, donde tendríamos que agregar una opción de reloj, objeto para exportar. Y luego dentro de eso, podríamos agregar un vigilante para ver cómo estos cuentan así. Podríamos crear un método llamado count. Podemos pasar en dos parámetros, el nuevo contar con el viejo recuento. Entonces podemos hacer algo cada vez que el recuento cambia, podríamos hacer algo como si cuentas es igual a 20, entonces podríamos alertar mensaje. Nuevamente, esto significaba con la API de opciones que todos nuestros relojes tienen que agruparse dentro de este objeto de reloj. Y esto significaba que estos relojes suelen estar muchas, muchas líneas de código alejadas los datos reales con los que están trabajando. No obstante, con la API de composición, podemos configurar nuestros relojes en cualquier lugar nos guste dentro de nuestra sección de script, lo que significa que podemos agrupar fácilmente relojes con sus datos relevantes. Solo voy a dejar caer este comentario de cierre y colocarlo en la parte inferior de la sección de guiones de nuevo, hagamos esto. El API de composición forma menos configura un vigilante, que es nuestros recuentos y nuestros dispara una alerta cuando alcanza los 20. Para usar un vigilante, sí necesitamos importar el método de reloj desde la vista. Y tiene sentido colocar a nuestro vigilante después de los datos que vamos a estar viendo. Entonces colocaremos ese golpe para crear el vigilante. Solo queremos disparar el método de reloj. El primer parámetro debe ser el elemento de datos reactivos que vamos a ver si nuestro consejo estaba en un ref, como const conteos igual a ref así, entonces sólo podríamos pasar en cuenta el primero parámetro. Si bien dado que nuestro contador está en un objeto reactivo, realidad es una propiedad de datos anidada. Y en realidad no podemos hacer recuento de puntos de datos de consejero. Eso no va a funcionar. Entonces tenemos que usar un getter en su lugar para realmente agarrar esta propiedad de datos anidados para nosotros. Y podríamos hacer eso como para que solo podamos hacer paréntesis y luego un símbolo de flecha, y luego solo podemos agregar la propiedad de datos anidados que queremos agarrar, que es datos de consejeros, conteo de puntos. Y luego para el segundo parámetro agregamos un método, paréntesis y luego flecha llaves rizadas. Y de nuevo, podemos acceder aquí al nuevo valor y al antiguo valor. Tan nuevos conteos, conteos antiguos. Simplemente me deshago de este recuento REF que agregamos. Y así deberíamos poder bloquear estos ahora, un cierre de sesión, nuevo recuento, guardar eso, volver a cargar la página. Y si cambiamos nuestro contador, podemos ver que nuestro vigilante está siendo despedido y podemos ver nuevo recuento uno en la consola. Y cada vez que cambie, vigilante será despedido de nuevo. Vamos a mostrar alertas si nuestro contador golpea 20. Simplemente podemos hacer si el nuevo recuento es igual a 20, alerta. Camino a seguir. Lo lograste a 20. Ya que no estamos usando el viejo conteo, no necesitamos realmente declararlo aquí, así que me desharé de eso y lo guardaré. Y veamos si eso está funcionando. Por lo que ojalá cuando lleguemos a los 20, decimos una alerta. 22. Gooks de ciclo de vida: montado [módulo 6]: Los ganchos del ciclo de vida nos permiten ejecutar código en diferentes etapas del ciclo de vida de nuestros componentes. Podemos ejecutar código cuando se monta un componente, como en cuando se carga en el navegador. O podemos ejecutar código cuando está desmontado como descargado desde el navegador. Y solo recordemos cómo usamos ganchos del ciclo de vida en la API de Opciones. Voy a desplazarse hacia abajo a la sección de guiones de nuevo. Apenas cogió el comentario de cierre y pégalo en la parte superior. En la API de Opciones, añadiríamos ganchos como este. Para agregar un gancho montado, por ejemplo, simplemente añadiríamos un método montado a nuestra exportación predeterminada como esta. Entonces podríamos hacer cosas. Cuando se carga el componente. Podríamos añadir un gancho desmontado como este. Hacer cosas cuando el componente se descarga desde el navegador. Y ahora vamos a meter aquí un par de registros de consola. Console.log montado y console.log en montado y guardar eso. Y esto seguirá funcionando por cierto, realidad podemos combinar la API de composición con la API de opciones. Ya verás si vuelvo a cargar la página, podemos ver montado siendo bloqueado en la consola. Y si dejo la página, se puede ver desmontado siendo bloqueado porque nuestra vista de inicio se ha eliminado del navegador. No obstante, no recomendaría usar tanto la API de composición la API de opciones al mismo tiempo. Número uno, hace que nuestros componentes realmente desordenados e inconsistentes. Y el número dos es difícil de comunicar entre las diferentes secciones de guiones. Por ejemplo, en nuestro código API de opciones, no podemos acceder a las propiedades de datos que están en la etiqueta de script API de composición. Pero de todos modos, porque con la API de opciones, solo podíamos agregar un gancho de cada tipo, un gancho montado, y otro en gancho montado. Esto significaba que a menudo la necesitamos para agrupar mucha lógica no relacionada por completo en estos halcones. Pero en la API de composición no podemos tantos ganchos como nos guste, tantos ganchos montados como nos guste, y tantos ganchos desmontados como nos guste. Y podemos colocar esto en cualquier lugar que queramos dentro de nuestra sección de guiones. Vamos a comentar esta sección de script de API de Opciones. Nuevamente. Agreguemos todos los montajes que engancha a este componente. Lote estos en orden de ejecución. El primero es el gancho de montaje antes, que se disparará justo antes el componente se cargue en el navegador. Para hacer esto en la API de composición, acabamos de pensar en un método llamado antes de montar. Y luego pasamos un método a este método, podemos pegar todo nuestro código aquí que queremos disparar antes de que se monte el componente. Así que acabo de cerrar sesión antes y luego voy a duplicar esto. Y a continuación tenemos el gancho desmontado para agregar así. Entonces tenemos el R&B para gancho desmontado. Entonces antes de desmontar. Por cierto, solo estoy haciendo aquí una selección múltiple manteniendo presionada la tecla Alt, seleccionando los textos, manteniendo pulsada la tecla Alt y luego seleccionando los otros textos. Por último, tenemos el gancho desmontado. Para esto, agregamos un método llamado desmontado. Para utilizar estos ganchos, sí necesitamos importarlos desde la vista. Así que voy a hacer una selección múltiple aquí y seleccionar todos estos nombres de métodos y copiarlos. Y salta a nuestra importación, agrega una coma y solo pega los adentro. Y luego solo voy a volver a unir esto presionando Cambio de comando y pagar para mostrar la paleta de comandos. Creo que el atajo es diferente en Windows, solo disparando el comando join lines. Entonces acabo de empezar algunas comas entre estas. Vamos a guardar eso y ver si está funcionando. Volveré a cargar la página. Y sí, podemos ver encendido antes de montar ser bloqueado y luego en montarlo siendo bloqueado. Y si saltamos a la página sobre, podemos ver en antes en Mount estar bloqueado y en desmontado siendo bloqueado. Una cosa a saber es que no hay ganchos creados o antes creados en la API de composición. Y eso es porque el código que ponemos en el nivel raíz de las etiquetas de script será efectivamente disparado en este punto. Entonces todo este código en nuestra sección de script se está disparando efectivamente antes de que se cree el componente. 23. Gooks activados: Veamos cómo no podemos activarlo en ganchos desactivados con la API de composición. Hacemos esto de la misma manera. Simplemente duplicaré esto en gancho montado. Acabamos de añadir en el gancho activado, acabamos de cerrar sesión en activado. Y luego para el gancho desactivado, solo usamos el desactivado. Nuevamente, necesitamos añadir estos a nuestra importación o parece que VS Code se agrega automáticamente. Estos, solo añádelos aquí. Si no lo hizo. Ahorraré que ahora estos ganchos solo se dispararán si nuestros componentes se mantienen vivos. Eso significa que el componente sigue funcionando en segundo plano, incluso cuando no se muestra en la página. Para ello, necesitamos envolver nuestro componente de vista de enrutador en etiquetas keep-alive. Queremos saltar a app.vue. Queremos envolver esta vista de enrutador en etiquetas keep-alive. O bien podemos usar el caso del tablero como este. Podemos usar el caso Pascal. Utilizaré el caso Pascal ya que eso es lo que estamos usando en todas partes en nuestro AP. Solo quiero pegar esta vista del router dentro de estas etiquetas. Ahorra eso. En realidad lo hacemos de manera diferente en V3 porque vemos esta advertencia aquí. vista del router ya no se puede utilizar directamente dentro de la transición o mantener vivos los apoyos de ranura en su lugar. Y nos da un pequeño ejemplo aquí de cómo hacer eso. Podemos simplemente copiar esto, pegarlo por aquí. Ahora debería mantener vivos todos los componentes que se cargan en esta vista del router que se cargan en esta vista del routery deberíamos ver que están activados y desactivados el trabajo de Hook en. Entonces lo guardaré y recargaré la app. Podemos ver en activado ahí. Si dejamos esta página, déjame ver el on desactivado esperanza siendo despedido también. Ahora no quiero mantener las páginas vivas en esto arriba, así que solo voy a deshacer todo lo que cambiamos en app.vue para que solo tengamos nuestro componente de vista del router por su cuenta. Y entonces lo guardaré. 24. Gooks actualizados: También tenemos los ganchos actualizados que se disparan cada vez que cambia nuestra plantilla. Entonces, por ejemplo, cada vez que cambie nuestro consejo, agreguemos esos ganchos a esta vista de casa dot componente Vue. Y esto está un poco desordenado ahora. Por lo que voy a quitar todos estos ganchos y quitar las entradas de estos ganchos. Va a agregar un on antes de actualizar el gancho. Acabamos de cerrar la sesión antes de la actualización. Este gancho se disparará justo antes de que se actualice la plantilla. Por lo que si hacemos clic en este botón en los cambios de contador, esto se disparará justo antes de que se actualice la plantilla. Y luego tenemos el gancho actualizado el cual será disparado en el punto en que se actualice la plantilla y acabaremos cerrar la sesión en la actualización. En realidad, mi BOD no es todo actualizado, todo está actualizado. Así que sólo arreglaré eso. Nuevamente. Tenemos que importar estos. A continuación, se tire de encendido antes de las actualizaciones en, actualizado desde la vista y guardar eso. Si recargamos, entonces se puede decir que estos ganchos no se disparan cuando se carga el componente por primera vez. Si hago clic en este botón y el contador aumenta y nuestra plantilla cambia, entonces podemos ver estos ganchos siendo disparados primero el encendido antes del gancho de actualización, seguido del gancho actualizado. 25. ¡Múltiples ganchos!: Antes de seguir adelante, solo demostremos agregando múltiples ganchos del mismo tipo. Sólo voy a quitar estos ganchos actualizados. Voy a quitar las entradas. Retire los ganchos naturales. Digamos que queremos hacer algunas cosas relacionadas con título de nuestra app cuando se carga el componente por primera vez. También queremos hacer algunas cosas relacionadas con nuestro contador cuando el componente se carga por primera vez también. Por lo que sólo podemos parar a halcones sin derretir. Vamos a importar sobre montado desde la vista. Y luego después de nuestro título de aplicación, no podemos ser desmontados gancho. Acabo de cerrar sesión, hacer cosas relacionadas con Título. Y luego digamos que queremos hacer algunas cosas relacionadas con el contador cuando se monta el componente, entonces podríamos querer añadir eso aquí abajo. Por lo que sólo podemos pegar en otra charla. Simplemente cambiaré el texto en este registro para hacer cosas relacionadas con contador. Ahorra eso. De esta manera con la API de composición, podemos mantener todos nuestros ganchos junto con el código relacionado, especialmente si usamos comentarios para separar nuestras diferentes secciones de código. Lo que a menudo hago a la vista componentes es agrego un comentario de bloque como este. Simplemente agregaré un comentario para nuestras aportaciones. Entonces mueva esto hacia arriba. Sangría. Y luego mucho, un pequeño comentario para el título de nuestra app. Pondremos las llamadas al título de la aplicación y el gancho desmontado relacionado con ella debajo de este comentario. Y luego mucho comentario de un bloque topo para el cabildo. Colocaré todo el código relacionado con nuestro consejo debajo de este comentario. Y lo guardaré. A pesar este componente no es especialmente complicado, ya estamos empezando a ver el beneficio que nos da la API de composición en términos de mantener por completo nuestra lógica relacionada, en lugar de dispersada a través de las diversas opciones, que tenemos que hacer cuando estábamos utilizando la API de opciones. 26. Directivas personalizadas locales [Modulo 7]: Se sigue Vue.js. Directivas fuera de la caja como modelo V, V show, v-if, etcétera Pero podemos crear nuestras propias directivas personalizadas para agregar funcionalidad a elementos para que podamos hacer algo a un elemento una vez que sea sido creado o montado. Ejemplo clásico es crear una directiva cuyo enfoque automático es un campo de entrada. Así que vamos a crear un ahorro directo que también enfoca esta importación en nuestra vista de casa. Voy a saltar a la vista de casa en vistas de fuente y vista de casa dot view. Y recordemos cómo hacemos esto. La forma de las opciones API. Voy a descomentar el código API de opciones. El API de opciones. Tuvimos que añadir una opción de directivas, que es un objeto. Podríamos colocar todas nuestras directivas aquí. Vamos a crear una directiva de enfoque automático. Por lo que podríamos llamar a este autofocus. Y de nuevo, fijamos esto a un objeto. En el interior aquí podemos añadir cualquier gancho que lo queramos como creado o montado. Entonces vamos a añadir un gancho montado. Podemos obtener acceso al elemento pasando este parámetro l. Y entonces podemos hacer algo con ese elemento. En este caso, queremos enfocarlo para que podamos hacer L dot focus. Yo lo guardaré. Ahora deberíamos poder utilizar esta directiva en nuestra aportación. Y sólo tenemos que prepararnos y sea cual sea nombre que hayamos usado aquí con v dash. Si salto hasta la entrada que está aquí, deberíamos poder simplemente agregar v dash, también enfocarnos. Esto todavía debería funcionar a pesar de que estamos usando opciones API aquí. Si vuelvo a cargar la página ahora, puedes ver que también está enfocada esta entrada con la API de opciones. Todas nuestras directivas locales tuvieron que colocarse dentro de estas directivas objetos, que de nuevo, como sigo diciendo con la API de opciones, esto a menudo lleva a que el código relacionado se disperse por muchas líneas de código. Considerando que con la API de composición, podemos crear una directiva local en cualquier lugar dentro de una función de configuración. Vamos a comentar nuestras opciones código API y hacer esto de la forma API de composición. Acabo de comentar esta sección de script en Júpiter a nuestra sección de scripts API de composición. En el botón, voy a añadir otro de estos comentarios de bloque llamado directivas. Para crear una directiva, necesitamos crear un const. El nombre de esto causado tiene que ser camelcase y tiene que comenzar con una minúscula v Podríamos llamar a esto V también foco. Cualquiera que sea el nombre que utilicemos aquí determinará el atributo que realmente usamos, aunque se convertirá en caso de guión como este. V autofocus, CamelCase se convierte en v dash autofocus cuando lo usamos en la plantilla. En fin, queremos establecer esto a un objeto. Dentro aquí podemos añadir un gancho de ciclo de vida como el creado. Y lo configuramos como una propiedad que se establece en un método como este. Podemos entonces hacer algo con el elemento al que hemos añadido esta directiva en este halcón creado. Y también podemos utilizar todos los demás libros, como antes de montar y montar antes de la actualización. Actualizado antes en montura. Montado. Pero para esto, utilicemos nuevamente el gancho montado. Podemos simplemente usar el mismo código que hicimos antes para enfocar el simple enfoque de l dot. Ya hemos añadido esta directiva a lo simple. Con suerte esto debería estar funcionando ahora, simplemente recargaré la página y sin embargo sigue siendo auto enfocando esta entrada. Pero ahora tenemos la libertad de colocar esta directiva local en cualquierlugar esta directiva local en cualquier que queramos dentro de nuestra sección de guiones. 27. Directivas personalizadas globales: momento sólo podemos usar esta directiva V autofocus en este componente particular, home view dot view. Si queremos poder usar esta directiva toda Sarah en diferentes componentes, entonces podemos tomar nuestra directiva, ponerla en su propio archivo, y crear una directiva personalizada global. Así que saltemos al Explorador de Archivos y crearemos una carpeta donde podamos colocar nuestras directivas personalizadas. Entonces voy a crear una nueva carpeta dentro la carpeta fuente llamada directivas. Voy a crear un nuevo archivo. Y vamos a conseguir este archivo el mismo nombre que nuestra directiva. Así V autofocus dot js. Y por cierto, si tienes problemas con tu espaciado tabulador aquí, porque todos estos archivos en este proyecto que creamos espacio de hábitat de dos espacios. Es posible que al crear un nuevo archivo se establezca en cuatro espacios porque ese es el valor predeterminado en el código VS. Si quieres arreglar eso, solo tienes que ir al código y preferencias y ajustes. Simplemente cambia esta configuración de tamaño de grifo a dos. Y es posible que necesites simplemente eliminar este archivo y recrearlo también, este archivo de enfoque automático V. Pero de todos modos, pasemos nuestra directiva a este archivo. Saltaré de nuevo a la vista de puntos de vista de casa. Ahora sólo podemos cortar este código. Yo también borraré el comentario. Podemos saltar al autofocus JS y solo pegarlo en. Y todo lo que necesitamos hacer para poner esto a disposición de otros archivos es exportar esta constante. Por lo que sólo podemos empezar a exportar y ahorrar eso. Ahora si saltamos de nuevo a toda la vista de punto vista, ahora podemos importar esta directiva y utilizarla. Simplemente saltaré a la sección de impulsos. Importar esta directiva. Simplemente podemos hacer importar autofocus desde slash directivas slash v autofocus. Ya tenemos directiva añadida a este impulso, por lo que ojalá esto debería estar funcionando. Voy a volver a cargar la página en todavía está trabajando en, excepto que esta es ahora una directiva global que podemos usar en cualquier lugar. Solo para demostrar que agreguemos un área de texto a nuestra página sobre. Así que vamos a abrir las vistas Acerca de la página Fuente sobre bu.edu, mucha área de texto. Después de este rumbo. Entonces necesitamos agregar sección de configuración de script, una gran cantidad de comentarios para las importaciones. Entonces después de eso, solo copiaré el código de importación de vista propia vista de punto, pegaré eso ahí dentro, y ahora deberíamos poder usar eso aquí también. Entonces vamos a añadirlo a esta área de texto v autofocus. Guarda esa recarga. Y sin embargo también está funcionando aquí. Ahora tenemos una directiva global práctica que podemos usar en cualquier parte de nuestra app. 28. Vue Router - $route - parte 1 [módulo 8]: Veamos cómo hacemos las cosas de manera diferente con Vue Router en la API de composición. Ahora puedes recordar el dólar rutas objetos que podríamos usar para acceder a cosas como la ruta de ruta actual o parámetros de ruta en la API de Opciones. Bueno, todavía podemos usar este dólar objetos raíz en nuestra plantilla cuando estamos usando la API de composición. Para demostrar eso, vamos a crear una página de detalles de publicación que acepte un parámetro de ID. Y luego usaremos el objeto de raíces de dólar para mostrar este ID en esa página de detalles de publicación. Pero antes de hacer eso, vamos a cambiar esta página Acerca a una página de posts, que más adelante agregaremos una lista de publicaciones a. Queremos saltar a nuestro archivo router en el router fuente index.js. Y por cierto, voy a mostrarte cómo configurar el router de vista desde cero más adelante en el curso cuando creamos nuestras bolas de notas. Pero en este proyecto todo eso ha sido configurado para nosotros. No nos preocupamos, te estaré mostrando cómo configurar todas estas cosas desde cero. Puedes entender lo que está pasando aquí un poco mejor si aún no estás familiarizado con Vue Router. Pero de todos modos, vamos a ajustar esto Acerca página y convertirla en una página de publicaciones. Entonces voy a cambiar el camino para recortar publicaciones. Cambiaré el nombre a posts y me desharé de este montón de comentarios. Y vamos a importar un componente llamado Posts view en su lugar. Yo lo guardaré. Esto romperá nuestra app porque está buscando este componente que no existe. Así que vamos a abrir nuestro explorador, saltar a vistas y cambiaremos el nombre de esto sobre Vue dot view a posts view dot view ahora está funcionando de nuevo. Y ahora vamos a actualizar nuestros enlaces de navegación en la parte superior. Estos están en app.vue, source app.vue. Queremos cambiar este segundo enlace de enrutador para ir a las publicaciones de barras de ruta. Y queremos cambiar el texto a publicaciones también. Guarda eso, ahora deberíamos poder llegar a argumentar la página de publicaciones. Así que ajustemos un poco esta página de publicaciones. vistas de origen y las publicaciones vista superior cambiarán esta clase en este div raíz, dos publicaciones, y cambiaremos el texto en este encabezado, dos publicaciones también. Ahorra eso en un poco. Vamos a añadir una lista de enlaces a algunos posts. Bueno, en primer lugar, vamos a configurar una ruta para nuestra página de detalles de posts. Entonces saltaremos de nuevo a index.js en la carpeta del router. Y voy a añadir una coma después esta ruta de posts y luego duplicar eso. Y vamos a establecer el camino para publicar detalle. Y queremos esta ruta, y queremos que esta ruta acepte un parámetro llamado ID. Entonces para hacer eso, solo podemos agregar slash colon ID al final. Esto significa que si vamos a slash posts slash detallado ID uno, entonces el valor del parámetro ID que estamos pasando a esta ruta será ID1. Y luego cambiaremos el nombre para publicar detalle, y cambiaremos el componente para publicar vista de detalle, vista superior. Y lo guardaremos de nuevo, esto romperá nuestra app porque este componente no existe. Así que vamos a duplicar el componente de vista de este post haciendo clic derecho en él y usando el comando duplicado de archivo o directorio, que viene de la extensión de acción duplicada que instalamos anteriormente en el curso. Vamos a duplicar esto y lo llamaremos post vista de detalle. Voy a quitar todo dentro las etiquetas de script se eliminan. Área de texto. Cambiaré esta clase a detalle postdoc. Cambie el texto del encabezado a página de publicación, guárdelo, vuelva a cargar la página, y eso no funciona. Y eso es porque cambio el nombre de este componente incorrectamente. Se debe publicar vista detallada vista de punto. Vamos a cambiar el nombre de eso otra vez, solo pensé la cosmovisión al final. Vamos a agregar algunos enlaces a esta página de posts para que podamos llegar a nuestra página de detalles de post y luego usar las rutas del dólar. Objeto para acceder a nuestro parámetro de ruta. 29. $route - parte 2: Agreguemos algunos enlaces a nuestra página de detalles de post. En esta página de posts, voy a saltar a vistas en la vista de publicaciones, vista de puntos. Y después de éste, voy a añadir una lista desordenada. Dentro de eso voy a añadir una etiqueta LI. Y luego dentro de eso voy a agregar un enlace de enrutador al enlace del router. Podemos usar el caso del tablero como este, o podemos usar el caso Pascal. Y voy a usar el caso Pascal. Dentro de la salida, el texto publica una respuesta, establece la ruta para este enlace del router. Simplemente podemos agregar un atributo dos y establecer eso a nuestro camino. Y si saltamos de nuevo a nuestro router fuente de archivos router index.js, la ruta que especificamos aquí fue slash, post barra detallada y luego el ID. Así que voy a establecer esto para atribuir a barra barra de detalle de post id uno. Y luego voy a duplicar este LI dos veces, cambié el valor de dos en el segundo enlace a id2 al final, y luego publicar dos, y luego el tercero, lo cambiaré a tres y luego publicaré tres. Vamos a guardar eso y podemos ver un enlace a esos posts. Empecemos un poco de margen en la parte inferior. Mucho. Una sección de estilo que está encaminado, lo que significa que cualquier estilo que pongamos aquí, solo se aplicará a este componente en particular. Así que solo agregaré algún margen inferior a la UL, margen, inferior 30 pixeles. Ahorra eso. Veamos si estos enlaces están funcionando. Y sin embargo estamos en nuestra página de publicaciones o en la página de detalles de la publicación. Podemos ver slash id uno en la barra de direcciones. Y si volvemos y hacemos click en el segundo, permítanme decir slash id2 al final, ahora podemos usar los objetos de rutas de dólar en nuestra plantilla obtener acceso a este parámetro ID que estamos pasando. Vamos a abrir la página de detalles de la publicación, detalle de publicaciones, vista de puntos. Deja salir un párrafo debajo de este rubro. Y sólo tendré que el texto muestre el contenido de las publicaciones con ID de esmalte, agregue llaves dobles rizadas, raíz de dólar, params de punto, y luego el nombre de nuestro parámetro, que es ID dot ID aquí. Vamos a salvar eso. Y podemos decir mostrar el contenido de los posts con un ID de id2 aquí. Si volvemos y hacemos click en el tercer post, entonces vemos ID3. Y salgamos rápidamente del botón Atrás aquí, agregaré otro párrafo en un enlace de router con los textos de vuelta, solo para agregar aquí un poco de flecha a la izquierda, vamos a usar una entidad HTML, LT, que suena por menos de y luego punto y coma. Y luego estableceremos los dos valores en este enlace del router para reducir las publicaciones. Guardar que el botón Atrás no está funcionando. Se puede ver que el acceso a los objetos de rutas de dólar en nuestra plantilla es exactamente el mismo en la API de composición como lo es en la API de Opciones. Pero, ¿cómo podemos acceder a la información de nuestra ruta en nuestra sección de guiones? Bueno, en la API de Opciones, podríamos simplemente hacer este acceso root dot dollar, toda la misma información. Podríamos usar esto dentro de los métodos computados las propiedades son ganchos del ciclo o en la API de composición, no tenemos acceso a esto. No tenemos acceso a ver instancia en todas las opciones porque no tenemos ninguna opción. En la API de composición, necesitamos usar view threes, usar route composable en su lugar. 30. useRoute: No podemos usar esta raíz de dólar de puntos en la API de composición. Si guardo eso, vemos un error y nuestros brotes. Entonces vamos a quitar eso. Haga esto de la forma API de composición. Agreguemos un botón a esta página que dispara un método cuando hacemos clic en él. Entonces después de esta etiqueta de párrafo entre estos dos párrafos, vamos a agregar un div. Dentro de eso. Voy a añadir un botón con el texto show post ID. Cuando hacemos clic en esto, queremos mostrar un LIT que muestre el ID del post. Agreguemos un manejador de clics a esto. Por lo que haré clic en Mostrar publicado. Vamos a crear mucho este método. Este método como const, const, show posts I equivale a un método. Por ahora vamos a cerrar la sesión show post ID para asegurarnos de que esto esté funcionando. Guarda ese click en el botón y podemos decir show post ID en la consola. Por lo que ahora en este método queremos mostrar una alerta que muestre el ID del post. Y de nuevo, no podemos hacer esta raíz de dolar punto. Por lo que necesitamos importar vistas nueva ruta de uso composable. Por lo que necesitamos importar eso primero. Así importación uso ruta desde vista router. Tenga en cuenta que estamos reportando esto desde Vue Router y no desde la vista. Para obtener acceso a esa composable, necesitamos asignarlo a una variable o constante en el View Team recomienda utilizar la ruta del nombre. Por lo que muchos conceptos llaman colono de ruta igual a paréntesis de rutas de Estados Unidos. Ahora podemos acceder a esta composable utilizando esta constante de ruta. Y por cierto, me estaré metiendo en composable es con más detalle más adelante en el curso, incluyendo cómo crear una composable personalizada y cómo importar componible desde bibliotecas de terceros como view uso. Pero de todos modos, ahora podemos usar esta constante de ruta igual que usaríamos este dolar dot out. Dentro de este método, vamos a mostrar una alerta. Voy a usar backticks para generar una cadena de plantilla aquí, y acabaremos de mostrar el ID de este post es Colab. Entonces permita tirantes de dólar y rizados para que podamos sacar algo aquí y queremos mostrar nuestro parámetro de ruta ID. Entonces en lugar de este dot dollar roots dot params dot ID, ahora podemos simplemente hacer ruta dot params dot ID. Salvemos eso y veamos si eso está funcionando. Haga clic en el botón. Vemos la alerta. La idea de este post es ID3, y eso está funcionando. Vamos a probarlo en un post diferente, publicar para hacer click en el botón. La idea de este post es id2. 31. useRouter: En la API de Opciones, podríamos manejar el router programáticamente usando este router dot dollar. Por ejemplo, si quisiéramos enviar al usuario a la página de inicio, podríamos hacer este dot dollar router dot push y luego el path slash. Y eso los empujaría de nuevo a la página de inicio. Pero de nuevo, en la API de composición, no tenemos acceso a esto. Por lo que necesitamos usar el enrutador estadounidense composable de Vue Router. Deshaznos de esta línea. Importará el enrutador de uso desde el router de vista. Y de nuevo, necesitamos asignar esto a una constante que típicamente llamamos router. Entonces duplicaré esta constante aquí, cambiaré a enrutador, y cambiaré esto para usar paréntesis de enrutador. Ahora vamos a añadir otro botón a nuestra página después de este div con el primer botón. Agreguemos otro div. Y luego otro botón con el texto ir a casa. En tres segundos. Agreguemos un manejador de clics a este botón. Haga clic igual a ir a casa en tres segundos. Y ahora vamos a crear este método después de este método. Entonces const, ir a casa en tres segundos es igual a una función de flecha setTimeout en código VS. Si acaba de escribir en set, puede elegir este fragmento de función setTimeout, que permitió que los extranjeros. Sólo voy a deshacerme del punto y coma y pondremos el tiempo de espera a 3 mil milisegundos tres segundos. Después de este tiempo de espera de 3 segundos, queremos enviar al usuario a la página de inicio. Y así que en lugar de hacer este dot dollar router dot push, paréntesis slash, ahora podemos simplemente hacer el router dot push slash. Ahora vamos a salvar eso. Haga clic en el botón y espere tres segundos. Volvió a la página de inicio. Si queremos empujar al usuario basado en el nombre de la ruta en lugar de esta ruta explícita por nombre, me refiero al sin nombre especificado aquí en cada una de nuestras rutas en index.js en la carpeta router, entonces podemos hacer eso también. Podemos simplemente cambiar esto a router dot push y luego un objeto y su nombre. Y luego el nombre de la ruta a la que queremos ir, que es casa minúscula. Guarda eso y mira si eso funciona. Haga clic en el botón. Espera tres segundos. Sí, eso funciona también. O si queremos enviar al usuario a una página de detalles de publicación en particular con un ID en particular, entonces podríamos hacerlo también. Así que voy a saltar de nuevo a la página de detalles de la publicación, un pequeño botón. Simplemente duplicaré este div y botón. Y digamos que queremos enviar al usuario a la primera publicación. El puesto con ID de ID uno. Cambiaré el texto dentro de este botón para ir a la primera publicación, cambié el nombre del método para ir a las primeras publicaciones. Vamos a crear ese método. Simplemente duplicaré éste. Cambia el nombre para ir a la primera publicación, eliminar el código dentro de ese método para enviar al usuario a la página de detalles de la publicación para los posts con un ID de uno, solo podemos hacer router dot push y luego un objeto, establece el nombre para publicar detalle. Y luego podemos agregar un objeto params y establecer el ID para guardarlo. Actualmente estoy en la página de detalles de la publicación de los posts con un ID de tres. Así que vamos a hacer clic en esto, ir al botón de primera publicación y ahora estamos en la página de detalles de la publicación para los posts con un ID de uno. 32. Listas (v-for) [módulo 9]: Las listas que utilizan la directiva V4 funcionan exactamente de la misma manera en la API de composición que antes. Pero sólo para demostrar rápidamente eso, vamos a mostrar esta lista de publicaciones dinámicamente usando una ira de datos y AV para dirigido. Así que vamos a saltar a nuestra página de publicaciones. Así vistas de fuente, vista de publicaciones, vista de puntos. Y vamos a configurar un href donde podamos colocar una serie de posts. Así que voy a añadir aquí un nuevo comentario, que acaba de decir, vamos a configurar una constante llamada posts, va a establecer eso igual a un href. Necesitamos importar el método ref desde la vista. Pondré esto en la parte superior aquí. Importar desde la vista colocará una matriz dentro de este href. Y cada elemento de la matriz será un objeto con un par de propiedades. Por lo que agregaremos una propiedad ID y estableceremos esta primera para agregar una propiedad title y estableceremos esta para publicar una. Y luego mucha coma después de este objeto, duplica esto dos veces. Acaba de cambiar los identificadores a dos en el título publicar dos para el segundo I M. Y luego para el tercer ítem, estableceré el ID en ID3, estableceré el título para publicar tres, y guardaré eso. Esta matriz de publicaciones ya está disponible en nuestra plantilla. Así que lo utilicemos para escupir a estos aliados con nuestros enlaces de router dinámicamente usando la directiva V fall, voy a deshacerme de todos los Aliados y las rutas están vinculadas. Entonces, aparte de la primera, salvo eso, agreguemos una directiva VFR a este LI. Así v4 publicar mensajes. Esto va a recorrer nuestro array posts ref. A medida que está pasando por un bucle, cada objeto estará disponible en el placeholder que especificaba aquí, post. Y también necesitamos agregar una propiedad clave, colon k es igual. Y queremos poner esto a algo que va a ser único. Entonces vamos a poner esto a posdoc ordenado. Ahorra eso. Y ahora podemos ver tres posts siendo escupidos. Entonces vamos a dar salida aquí el título del post, que va a ser un título postdoc. Y luego actualicemos el enlace y los dos prop también. Entonces usaré una cadena de plantilla agregando algunas garrapatas atrás alrededor de esto, deshacerme de ID1 y escupir esto dinámicamente agregando llaves rizadas de dólar. También tenemos que sumar un colon al inicio de este prop. Y luego dentro de los tirantes rizados dará salida el ID que está en el postdoc ordenado. Ahorra eso, recarga. Si hacemos clic en la Roma de la posguerra, el ID de una página, gratis, clic en Publicar para ejecutar el ID de dos páginas. Se puede decir que no hay absolutamente ninguna diferencia cuando se trata de listas bajo directiva VFR en la API de composición. 33. Plantilla Refs: Hablemos de refs de plantilla. Ahora, no me refiero a las refs de datos que hemos estado usando para algunos de nuestros datos reactivos. Quiero decir, cómo de vuelta en la API de Opciones podríamos agregar un atributo href a un elemento, darle un nombre. Y entonces podríamos acceder a este elemento en el componente está montado y luego hacerle algo para que tenga enfocarlo o fuera de clase o averiguar el ancho de los elementos o algo así. Sólo voy a quitar esto. Ahora, digamos que queremos acceder a este elemento de encabezado es H2. Queremos averiguar el ancho de este elemento. Podríamos necesitar el ancho de este elemento para propósitos de diseño receptivo o algo así. Por ejemplo, podríamos necesitar cambiar el tamaño del texto, también delgado si el elemento es demasiado ancho o no lo suficientemente ancho. En la API de composición, seguimos siendo el atributo href al elemento que queremos apuntar. Y puedes usar cualquier nombre que te guste. Pero el estándar aceptado es usar CamelCase con la palabra ref al final. Podríamos configurar esto, título ref, ahorrar. ¿ Cómo podemos acceder a este elemento cuando se carga este componente? Desplazemos hacia abajo hasta el título de nuestra aplicación aquí. Ahora en la API de Opciones, podríamos simplemente hacer este dot dollar refs, dot a title ref. Y entonces podríamos acceder al elemento y luego hacer algo con él, averiguar su ancho o lo que sea. No obstante, en la API de composición, no tenemos acceso a este dólar puntual Fs, por lo que esto no va a funcionar. Lo que tenemos que hacer en su lugar es configurar un const con el mismo nombre que nuestro ref, título ref. Por lo que const título href es igual. Y entonces tenemos que configurar esto un poco confusamente, un href de datos. Establecemos esto en un método ref y establecemos el valor inicial a saber. Y de nuevo, vamos a necesitar importar este método ref desde la vista. Entonces vamos a añadirlo a nuestra importación aquí, coma áspera, y ahora podemos acceder a este elemento por este href. Valor de esta constante salió componente está montado en esta montaña, tomó lo que podemos hacer es afuera, por lo ref, valor de punto, todavía necesitamos usar valor de punto para refs plantilla. Esto debería darnos acceso a este elemento h2. Vamos a cerrar esto por ahora. Consola dot log. Ahorra eso. Y podríamos decir rumbo siendo encerrado en la consola. Si quisiéramos obtener el ancho de ese elemento, solo podríamos empezar el ancho de desplazamiento de puntos hasta el final de este. Solo voy a cerrar la sesión una cadena de plantilla con el texto. El título son llaves rizadas de dólar, y luego pegaré en ese código otra vez afuera. Así valor de punto ref, ancho de desplazamiento de punto. Y luego después de eso solo agregaré píxeles ancho y guardaré esa recarga. Y podemos ver aquí dice que el círculo exterior tiene 318 píxeles ancho para un cambio de tamaño libre nuestra recarga AP. Y ahora dice que el título tiene 453 píxeles de ancho. 34. nextTick: Siguiente tick nos permite esperar hasta que el DOM se haya actualizado y luego hacer algo. Por ejemplo, si hacemos clic en el botón Plus aquí, nuestro contador se actualiza, en el DOM se actualiza. Nuestra siguiente garrapata nos permite esperar hasta que se haya completado la actualización lock dom antes de que hagamos otra cosa. Digamos que cuando aumentemos nuestro contador, queremos esperar hasta que haya finalizado la actualización dom. Antes de hacer algo más, voy a saltar hacia abajo a nuestro método de contador aumentado, que está aquí en la API de Opciones. Podríamos hacer este dolar punto siguiente tick y luego pasar una devolución de llamadas a eso así, y luego hacer algo después de que el DOM se haya actualizado. No obstante, esto no funcionará en la API de composición. Si guardo eso y cambio el contador verá un error en la API de composición. Necesitamos importar el siguiente método tick desde la vista. Así que me desplazaré hacia arriba a nuestra declaración de importación y apenas empiezo al siguiente tick hasta el final. En lugar de este dólar de puntos Alexis, sólo podemos hacer el siguiente tick. Entonces pasa una devolución de llamadas a eso. Entonces podemos hacer algo cuando el DOM se haya actualizado. Entonces haz algo cuando contador actualizado en el punto, guarde eso. Y si cambiamos el contador, podemos ver que estar bloqueado o ya que el siguiente tick es una función asíncrona, también podemos usar async await para hacer esto. Para ello, sí necesitamos hacer de nuestro contador aumentado una función asíncrona como esta agregando aquí la palabra clave asíncrona. En lugar de este método con la devolución de llamadas, simplemente me desharé de eso. Ahora podemos simplemente hacer esperar. Siguiente garrapata. Mentir que si guardamos eso, aumentar el contador, podemos decir que eso sigue trabajando en. 35. Teleport : parte 1: V3 nos trae una nueva característica llamada teletransporte. Ahora esto no es específicamente una característica de la API de composición. En realidad podemos usarlo tanto con la API de composición la API de opciones exactamente de la misma manera dentro de cualquier vista tres arriba, sin embargo, quería cubrirlo de todos modos, ya que es una característica tan increíble, nos permite mover un elemento de su lugar predeterminado en el volcado a otro lugar del perro, generalmente fuera de nuestra vista hacia arriba como fuera de este div con un id de app, que es la raíz elemento de nuestra visión hacia arriba o teletransportarlo a otro div, que es un hijo del cuerpo. Esto es realmente útil para cosas como modales, que podrían no mostrarse correctamente si los mostramos en algún lugar profundamente anidado dentro de nuestro árbol DOM de aplicaciones. Ahora esta página de inicio es bastante complicada ahora y también lo es la página de posts. Entonces vamos a crear una nueva página donde podamos jugar con teletransporte. Así que voy a crear una nueva vista en fuente y vistas llamada modals view top view, etiqueta de plantilla dentro de una gran cantidad de div con una clase de modales. Y entonces solo iniciaré una etiqueta H1 con los modales de texto. On Guardar que necesitamos configurar una nueva ruta para esto. Por lo que queremos ir a fuente y router index.js. Vamos a duplicar esta ruta de mensajes. Entonces cambiaré la ruta a modales de barras, cambiaré el nombre a modales, cambiaré la ruta al componente a vista modales, vista superior. Y vamos a guardar eso y para que podamos llegar fácilmente a esta página. Agreguemos un enlace a nuestra navegación, que está en la fuente app.vue. Y agreguemos un nuevo enlace de enrutador después de este enlace de inicio. Así que voy a duplicar eso. Establezca la ruta para slash modales, establezca el texto en modales también. Ahorra eso. Y veamos si podemos llegar allí. Y sin embargo ahora estamos en esta página modales. Así que vamos a saltar a esa vista modales ver punto. Vamos a crear un botón que al hacer clic mostrará un modal. Entonces después de este encabezamiento, una gran cantidad de botón con el texto muestran modal. Ahorra eso. Y agreguemos algún marcado para un modal con algún texto en un botón que lo impusiera. Entonces mucha div con una clase de modal dentro de eso, mucho H1 encabezando con el texto, esto es modal. Y luego mucho párrafo con algunos Lorem Ipsum en VS Code, podemos emitir algún Lorem Ipsum con solo escribir en lorem y golpear Enter en esta abreviatura Emmet. Y estoy mucho botón debajo para esconder el modal. Y acabo de poner el texto Ocultar modal y guardar eso. Y agreguemos algunos estilos para darle a esto un color de fondo y algún relleno. Así que mucha etiqueta de estilo. Apuntar a la clase modal. Establezca el fondo en beige, establezca el relleno en diez píxeles. Ahora pongámonos a pagar renta por determinar si se muestra o no este modelo. Muchas de nuestras etiquetas de configuración de script, mucho comentario, que acaba de decir modales, mucha constante llamada show modal y establece eso igual a un ref con un valor inicial de false. Entonces si esto es falso, entonces no mostraremos el modal. Y si es cierto, entonces vamos a mostrar el modal y necesitamos importar ref desde la vista. Agregaré aquí otro comentario, que solo dice insumos. Entonces vamos a importar desde la vista. Y eso permitirá que la directiva v-if a este div con la clase de modal. Dividiré los atributos en eso con la extensión de atributos HTML divididos que instalamos anteriormente. V-if show modal, salva eso y podemos ver desaparecer el modal. Y si cambiamos este valor a verdadero, déjame verlo volver a aparecer. Volvamos a ponerlo en falso. Cambiemos el valor de esto sin botones. En este botón show modal, agregaremos un controlador de clics, que establece show modal a true. Y eso está funcionando. Y luego en este botón modal alto, agregaremos otro controlador de clics, que establece show modal a false, guardarlo, ver si eso está funcionando y eso está funcionando. Ahora podemos mostrar y ocultar este modal. 36. Teleport : parte 2: Ahora vamos a añadir algunos estilos a este modelo para que sea absolutamente posicionado en pantalla completa. Entonces voy a bajar a la sección de estilo, establecer la posición a absoluta, establecer la izquierda en 0, la parte superior a 0, establecer el ancho al 100% y la altura al 100%. Ahorra eso. Se puede decir que esto no ha funcionado. Simplemente estiraré esto un poco. Ahora la razón por la que no se ha trabajado es porque este elemento modal tiene un elemento ancestro que tiene su posición establecida en relativa. Vamos a abrir el volcado y elegimos nuestro elemento root, este div con un id de app. Mira hacia fuera los estilos que podemos ver esto tiene una posición de relativa. Esta es exactamente la razón por la que a menudo necesitamos usar el componente de teletransporte. Y verás si arrastramos este div para ser un hijo directo del cuerpo, entonces el modal es de pantalla completa, aunque no se ve del todo bien porque creo que necesitamos agregar un índice Z para asegurarnos se sienta encima de todo. Así que sólo voy a saltar de nuevo al estilo y nuestro índice deseado de uno. Guarda eso, recarga la página, muestra el modal y arrastraré esto a la raíz de nuestra página. De niño del cuerpo. Dice que esto ahora mira como queremos que lo haga. Ahora podemos usar el componente de teletransporte para teletransportar este div con la clase de modal para subir aún más árbol DOM, como lo hemos hecho aquí en las herramientas dev. Para ello, todo lo que tenemos que hacer, solo recargaré eso es rodear el elemento que queremos teletransportar, que es este div. En un componente de teletransporte. Simplemente seleccionaré el div y lo moveré al teletransporte. Y luego agregamos un atributo to el cual configuramos a un selector CSS para determinar dónde queremos diferenciar este elemento dos. Si solo queremos hacer de esto un hijo directo del cuerpo, entonces podemos simplemente poner esto en cuerpo. Yo lo guardaré. Y si recargamos, he escrito ese mal ahí que debería ser teletransportado, Di eso otra vez y recargar. Y ya verás si mostramos el modal ahora, ahora mira cómo lo queremos, porque el componente de teletransporte lo ha teletransportado para ser un hijo directo del cuerpo. O si no queremos diferenciar esto al cuerpo y queremos enviarlo a un div en particular, y podemos hacerlo también. Simplemente saltemos a nuestra página HTML en la raíz de nuestro proyecto, index.html. Lote de div después de este div con un ID de aplicación, que es donde nuestra vista arriba está viviendo allí para la clase de modals dash container. Ahorra eso. Y ahora si saltamos de nuevo a tus modales ver punto view, podemos saltar a este componente de teletransporte y simplemente cambiar el contenedor de dos prop, dos modales de punto y guardar esa recarga. Muestra el modal. Se está moviendo el modal a los modales container div que acabamos de empezar. obstante, no se ve bien porque a todos los elementos de esta app se les está dando una posición de relativa por este estilo asterisco aquí, tal vez solo necesitemos anular este estilo para este modales contenedor div. Podríamos hacer esto en nuestro CSS base. Si vamos a los activos fuente y CSS base, podemos simplemente saltar hacia abajo al fondo. Destino son modales, contenedor. Contenedor. Establezca la posición en inicial. Ahorra eso. Ahora se ve bien. 37. Componentes Child [módulo 10]: Repasemos los componentes de un hijo en este módulo. Ya que mucho ha cambiado con respecto a los componentes secundarios cuando usamos la API de Composición, sobre todo cómo manejamos apoyos emite el nuevo valor del modelo y actualizamos valores modales patrón componentes dinámicos proporcionar inyectar. Empecemos convirtiendo este modal en un componente hijo. Voy a crear un nuevo archivo en la carpeta de componentes fuente. Por alguna razón no tengo esa carpeta, así que solo la crearé componentes. Ahí dentro. Voy a crear un nuevo archivo llamado vista de punto modal. Mucho las etiquetas de la plantilla ahorran eso. Y ahora vamos a saltar a nuestra vista modales en vistas de fuente y modales ver vista de punto. Cortemos nuestro código modal incluyendo el componente de teletransporte, y luego peguemos eso en nuestra plantilla en la vista modal de puntos. Por ahora solo eliminaré la directiva v-if. Este manejador de clics en el botón modal alto, ya que no tenemos estos datos aquí mismo. También pondré los estilos de modales bu.edu. Pondré toda la etiqueta de estilo, pegaré eso en modal dot Vue. Ahorra eso. Ahora vamos a importar este model.py de dos componentes en modales view dot view. Solo recordemos cómo hicimos esto con la API de opciones. Se permiten algunas etiquetas de script más son el valor predeterminado de exportación. En la API de Opciones, primero tuvimos que importar nuestro modal de entrada de componentes desde slash components slash modal dot view. Y luego en nuestra exportación predeterminada, tuvimos que agregar un componente, los objetos sobresalen componente ahí. Entonces seríamos capaces de utilizar este componente en nuestra plantilla. Esto aún debería funcionar porque recuerda, podemos combinar la API de opciones con la API de composición. Aunque no recomendaría que si pegamos este componente en la página modal y ponemos ese cubo v-if. Por lo que VF muestran modal. Ahorra eso. Haga clic en el botón. Podemos ver nuestro modal en la API de Opciones, estos componentes objetos siempre fue un poco de dolor en el libro porque cada vez que agregamos un nuevo componente hijo o cambiamos el nombre de un componente, siempre tenemos que mantener este componentes objetos actualizados o en la API de composición. No tenemos que preocuparnos por eso. Todo lo que tenemos que hacer es importar nuestro componente y podemos usarlo. Sólo voy a comentar este código. Hagamos esto de la forma API de composición. Y todo lo que tenemos que hacer es sólo importar este componente. Simplemente copiaré esta declaración de importación, pegaré aquí, y eso es todo lo que tenemos que hacer. Entonces guardaré esa recarga. Ahora podemos ver que nuestro modal y alto modal incorporado no está funcionando, pero no te preocupes, lo arreglaremos más adelante. 38. Arreglar vistas de carga perezosos: Antes de seguir adelante, me he dado cuenta que hay un retraso muy leve. La primera vez que cargamos la página de modales en la página de posts, no siempre la veo, pero a veces lo hago. Es un poco molesto. Así que sólo voy a arreglar eso. Voy a saltar a fuente y router index.js. Y la razón por la que esto está sucediendo es porque somos perezosos cargando estos componentes. En otras palabras, cuando cargamos un componente como este en lugar de puerta importante de antemano, solo lo estoy agregando así. Entonces el componente sólo se carga en memoria en el punto en que visitamos esa ruta, lo que sí resulta en un retraso muy leve cuando cargamos esos componentes por primera vez. Para solucionar esto, podemos simplemente importar explícitamente todos estos componentes de antemano, igual que lo hemos hecho con la vista de punto de vista de inicio. Así que sólo voy a duplicar esta línea y ponerme a la vista tres veces. Y luego haré una selección múltiple en la vista de casa. Sustituyo eso por vista modales. Y luego en la siguiente, haré una selección múltiple y la reemplazaré por postes. Para el último, reemplazaré eso por vista de detalles de publicaciones. Entonces solo voy a hacer una selección múltiple en estos tres nombres manteniendo presionado la tecla Alt. Y luego voy a hacer selección múltiple aquí abajo en cada uno de estos métodos que son perezosos cargando esos componentes, solo pega en esos nombres de componentes. Yo lo guardaré. Ahora ya no deberíamos ver ningún retraso y todas nuestras páginas deben cargarse agradable y rápidamente. Incluso la primera vez que les pegamos. 39. Ranura: En su mayor parte, slops, funcionan exactamente de la misma manera en la API de composición. Sólo para demostrar que si saltamos a la vista modal de puntos, en lugar de codificar duro este contenido en este componente w modal. Vamos a pasar esto hacia abajo desde los modelos de componentes padre ver vista de punto usando una ranura. Entonces voy a saltar a la vista modal de puntos. Corta este párrafo y en cambio solo coloca aquí una ranura y guarda eso. Y luego en modales view dot Vue pegará el párrafo aquí que cociné antes. Vamos a guardar esa jukebox que son modales página click en el botón. Y sin embargo ese contenido está consiguiendo a través de usar nuestra ranura y también llamadas ranuras funcionan de la misma manera también. Voy a saltar a la vista modal. Y digamos que queremos pasar el título modal hacia abajo usando una ranura con nombre. Simplemente eliminaré este texto y agregaré otra ranura aquí. daremos a éste un nombre de título. Ahorra eso. Ahora deberíamos poder pasar este título abajo usando una ranura con nombre. Entonces para hacer eso, solo podemos agregar una etiqueta de plantilla aquí escribiendo el concepto que queremos enviar usando esta ranura, así que mi nuevo título y luego a nuestra etiqueta de plantilla de apertura, necesitamos agregar ranura v dash, colon, y luego el nombre de la ley estadounidense, y lo nombramos el título. Título. Veamos si eso está funcionando. Sí, allí podemos ver mi nuevo título. Y también podemos taquigrafía este v dash slot colon bit usando un símbolo hash en su lugar. Entonces voy a decir que ver si eso sigue funcionando todavía. Todavía trabajo en. Puedes ver que todo esto funciona exactamente de la misma manera que antes con la API de opciones, lo único que funciona de manera diferente es cómo accedemos programáticamente a nuestros datos de slots. Ahora si queremos acceder a nuestros datos de slots en la plantilla, todavía podemos hacerlo de la misma manera que antes. Entonces después de esta ranura aquí, sólo voy a añadir una etiqueta pre. Aún podemos acceder a nuestros datos de slots usando la palabra clave dollar slots, igual que podríamos en la API de Opciones. Entonces si quiero dejar caer los datos relacionados con La ranura del título, solo puedo hacer dólar slots dot title, y luego paréntesis. Ahorra eso. Y podemos ver todos los datos relacionados con nuestra ranura siendo escupir. No obstante, si queremos acceder a estos datos programáticamente en nuestra sección de script, que probablemente sea algo que rara vez necesitarás hacer. A pesar de que sí encontré lo que necesitaba para hacer esto una vez en mi presupuesto a que estoy trabajando en ellos. Tenemos que hacer esto un poco diferente en la API de composición. Entonces muchas de nuestras etiquetas de configuración de script. Entonces en la API de opciones, si quisiéramos acceder a estos datos de slots, podríamos simplemente hacer este dot dollar slots dot title. En la API de composición, necesitamos importar nuestra composable desde la vista, que es la componible de los EE.UU. slops. Lo que podemos hacer en su lugar es importar, usar ranuras desde la vista. Y entonces podemos asignar esta composable a una constante. Entonces const slots es igual a usar ranuras paréntesis, y entonces podemos acceder a nuestros datos de slots usando esta constante de slots. Si quisiéramos volver a conseguir este título, podríamos simplemente hacer slots dot title, paréntesis. Y vamos a cerrar la sesión. Console.log. Guarda eso, muestra el modal y ahora podemos decir que nuestros datos de slots se escupen en la consola. Nuevamente, esto no es algo que vas a necesitar muy a menudo, pero hay algunos casos raros en los que lo harás. Antes de seguir adelante, simplemente eliminemos todo en la sección de guiones aquí. Y vamos a quitar esta etiqueta pre que hemos añadido también. 40. Accesorios: Veamos cómo manejamos apoyos usando la API de composición. Ahora la forma en que pasamos los apoyos hacia abajo del componente de prendas de vestir a un componente hijo es exactamente la misma que antes. Es sólo la forma en que recibimos apoyos en el componente hijo del componente padre lo que ha cambiado. Entonces vamos a saltar a la vista modales, vista de puntos. Y digamos que queremos pasar este título abajo usando un prop en lugar de usar una ranura con nombre. Así que vamos a quitar esta etiqueta de plantilla aquí. Voy a dividir los atributos en este modal, y en su lugar pasaremos esto abajo usando un prop, para que podamos agregar un prop llamado title y luego pasar nuestro título. Entonces mis paréntesis de título modal vía prop. Ahorra eso. Ahora vamos a saltar a la vista modal de puntos, y ahora necesitamos recibir este prop en la API de Opciones. Simplemente iniciaré otra sección de script, la exportación predeterminada. El API de opciones. Agregamos una opción de utilería. Podemos establecer esto en una matriz o un objeto. Podríamos colocar nuestros apoyos aquí. Podríamos añadir un título prop, colono a2, un objeto. Y podríamos establecer el tipo a cadena, porque esto va a ser una cadena. Si queremos, podemos establecer un valor predeterminado en caso no se haya especificado el prop en el componente padre. Por lo que podríamos establecer el default para conocer el título especificado. Ahorra que esto todavía debería funcionar como recuerde, podemos combinar las opciones de ancho API, la API de composición. Así que me desharé de esta ranura aquí. Y en cambio solo salida. Mira llaves rizadas y el título. Ahorra eso. Y veamos si podemos ver el título en nuestro modal. Sin embargo podemos ver el título que mi título modal vía prop. No obstante, lo hacemos un poco diferente usando la API de composición. Vamos a comentar esta sección de guiones. Haremos esto de la forma API de composición. Entonces primero solo voy a agregar uno de estos comentarios de bloque, que dice prompts. Para recibir nuestros apoyos usando la API de composición, necesitamos crear una constante llamada props y establecer eso igual a un nuevo método llamado define prompts. Una cosa a tener en cuenta es que a diferencia de la mayoría de los métodos V como Raf y reactivo, y computado, etc, en realidad no necesitamos importar este método de apoyos definido desde la vista. Simplemente está disponible automáticamente. Y ahora sólo podemos definir nuestros apoyos de la misma manera dentro de estos paréntesis. Podemos pasarlos como una matriz como esta. O si quieres conseguir más específico y pasar en el tipo y el default, etcétera de nuestros apoyos, entonces podemos pasar en un objeto. En cambio. Podemos definir nuestros apoyos de la misma manera. Sólo voy a copiar este título prop que definimos antes. Pega eso aquí y guarda eso. Y ojalá eso debería estar funcionando. Ahora, solo volveré a cargar la página, mostrar el modal. Y sin embargo podemos ver que el prop está pasando. Y vamos a asegurarnos de que nuestro valor predeterminado esté superando si no especificamos el componente padre. Entonces saltaré a modales ver dot Vue. Acaba de quitar este título prop y guardarlo. Y sí, podemos decir que no hay título especificado y simplemente lo desharé y lo pondré de nuevo y lo guardaré. Una cosa a tener en cuenta es que cuando usamos unos apoyos en nuestra plantilla, ya sea podemos simplemente usar el nombre de roble recto del prop. Tenemos aquí título, y también podemos usar puntales dot title, ahorrar. Se puede ver que estos dos funcionan. Sólo pondré esto de nuevo a solo título. No obstante, si queremos acceder a nuestro prop en nuestra sección de script, y entonces sí necesitamos usar esta constante de apoyos. Entonces si trato de consola log title, entonces vemos un error. No obstante, si consolamos log props dot title, entonces podemos ver el prop siendo bloqueado. Antes de seguir adelante, simplemente eliminemos este registro de consola y guardemos eso. 41. Emites: Actualmente no podemos cerrar este modal. Entonces, ¿cómo podemos conseguir este botón cuando hacemos clic en él para cerrar este modal? Bueno, este botón está en la vista modal de puntos. Y si saltamos a sus modales de componente parent view dot view, tenemos este show modal ref. Esto es determinar si el modelo se muestra en arriba. Entonces cuando hacemos clic en este botón en el componente hijo, necesitamos de alguna manera establecer este href modal, que está en el componente paralelo, vuelta a false para ocultar el modal. Y una forma en que podríamos hacer esto es emitiendo un evento personalizado. Permítanme hacer clic en este botón y después escuchando ese evento en el componente padre, en este componente modal. Y luego cuando recibimos ese evento, solo podemos establecer mostrar partes modales de false, aquellas que ocultan el modal. Así que vamos a saltar a la vista modal de puntos y emitiremos un evento personalizado cuando hacemos clic en este botón. Ahora en la API de Opciones, acabaré de descomentar este código. Por un segundo. Tuvimos que agregar una opción de emisión establecida a una matriz. Y tuvimos que declarar aquí nuestros eventos personalizados, como hide modal. Y no seríamos capaces evento personalizado desde nuestra plantilla, pero declaramos nuestros límites manera diferente con la API de descomposición. Así que acabo de comentar esto otra vez. Lo que tenemos que hacer, acabo de empezar otro comentario de bloque aquí, que dice emite. Lo que tenemos que hacer en la API de composición para declarar nuestros límites es crear una constante llamada emit. Establezca eso igual a un método llamado define. Emite. Un poco como el método definido. Nuevamente, es probable que encuentre el método de utilería, no necesitamos importar este método desde la vista. Y luego solo pasamos una matriz a eso donde podemos declarar todos nuestros eventos personalizados. Declaremos y emitamos llamado Hyde modal. Ahora podemos emitir evento ocultar modal desde cualquier lugar de nuestra plantilla. Ahora podemos simplemente saltar a este elemento botón y agregar un manejador de clics y luego usar el dólar emita método y luego simplemente omitir este método personalizado ocultar modal. Se puede ver la forma en que usamos las emisiones en nuestra plantilla es exactamente de la misma manera que antes. Es sólo la forma en que las declaramos en nuestra sección de guiones lo que es diferente. Si guardo eso, ahora podemos escuchar este evento en la vista de modales de componente padre, vista de puntos. Así que vamos a saltar a eso. Si saltamos a este componente modal, solo podemos pensar que escondería modal, que es el nombre que usamos aquí y aquí. Y ahora podemos hacer algo cuando recibimos ese evento y solo queremos volver a poner show modal a false. Simplemente podemos hacer mostrar modal es igual a falso. Así que ahorremos eso y veamos si está funcionando. Recargaré la página, haga clic en el botón y luego haga clic en el botón de altura. Podemos decir que ahora está funcionando. Es así como emitimos un evento directamente desde nuestra plantilla. Pero y si necesitamos emitir un evento programáticamente desde nuestra sección de scripts, bueno, con la API de opciones, solo podemos hacer este dot dollar emitir y luego emitir el evento como este. No obstante, eso no va a funcionar en la API de composición. En cambio, tenemos que utilizar esta constante emita. Pero antes de hacerlo, cuando hacemos clic en este botón, en lugar de emitir el evento directamente desde la plantilla, activemos un método local en su lugar. Vamos a desencadenar un método llamado handle Wilson click. Entonces agregaré otro comentario de bloque aquí, botón de manejar click configura ese método. Vamos a asegurarnos de que eso esté disparando. Cuando hacemos clic en el botón. Eso es disparador y sal admitir nuestro evento desde aquí, todo lo que tenemos que hacer es emitir y luego el nombre de nuestro evento personalizado. Así que esconde modal. Salvemos eso y esto debería estar funcionando ahora. Entonces voy a recargar, mostrar el Modal onclick. En modal alto, vemos desaparecer el modal. 42. model/model/Valor: momento cuando hacemos clic en este ocultar modal atornillado, activamos este método de clic botón manejado. Y luego ahí emitimos este evento personalizado hi modal. Después en el componente padre escuchamos ese evento de cliente y luego configuramos show modal de nuevo a false. Pero en realidad podemos simplificar esto accediendo a este show modal ref directamente desde el componente child modal dot view y cambiándolo directamente de nuevo a false. Aquellos que eliminan la necesidad de configurar eventos personalizados y luego emitir esos eventos en la API de Opciones, podríamos hacer algo como esto con el modificador fregadero. Pero en la API de composición, podemos hacer esto con el modelo V, el nuevo modelo value prop, y los eventos de valor del modelo de actualización. En primer lugar, saltemos los modales bu.edu. En lugar de esta directiva v-if agregará la directiva de modelo av, y vamos a establecer eso a este href show modal para que podamos conseguir este componente hijo acceso a este show modal ref, oops, he escrito en V modal que debería ser modelo V. Yo lo guardaré. Ahora si saltamos a model.fit, podemos obtener acceso a la propiedad de datos que se está pasando con el modelo V usando un nuevo prop especial llamado valor del modelo. Y por lo general declaré este apuntalamiento en la parte superior de mis objetos de gotas. Así que mucho de eso aquí. Por lo que acabamos de modelar volumen. Podemos establecer el tipo si nos gusta. Esto va a ser un booleano porque voy a mostrar el ref modal es un booleano. Por lo que vamos a establecer el tipo 2 mil millones, establecerá el default a false. Vamos a salvar eso. Ahora vamos a utilizar este prop de valor modal para determinar si se muestra el modal. En lugar del v-if que teníamos antes, el componente padre. Podemos simplemente saltar a este div con una clase de modal fuera de la directiva v-if y establecer eso al valor del modelo vf. En otras palabras, si este show modal ref es falso, entonces se va a pasar con el modelo como falso y luego recibido como valor modal. Y así el valor modal será falso en este div con una clase de modal no se mostrará. No obstante, si show modal es trig, eso va a ser transmitido con botella V y luego recogido por este prop de valor modelo, donde seguirá siendo cierto. Y luego mostraremos el modal. Así que ahorremos eso y veamos si está funcionando. Voy a hacer clic en el botón todavía podemos ver el modal. Sabemos que esto se está pasando correctamente. 43. update:modelValue: Con el fin de ocultar este modal, todavía estaba activando este método de clic de botón de mango. Cuando hacemos clic en el botón, entonces estamos emitiendo estos eventos costales de alto modal y estoy escuchando ese evento y luego configurando show modal de vuelta a false. Pero en realidad podemos manipular el href que estamos pasando aquí mostrar modal directamente mediante el uso del nuevo evento de valor del modelo de actualización. De esta manera podemos deshacernos de este evento modal alto y eliminarlo de este componente. Así que vamos a saltar de nuevo a la vista modal de puntos. En lugar de emitir este evento personalizado, emita un nuevo evento llamado update colon model volume que necesitamos para pasar el valor que queremos cambiar el valor modal dos. Por lo que queremos cambiarlo a falso. Lo que esto va a hacer es cualquier valor que estamos pasando con el modelo V va a cambiarlo directamente a cualquier valor que especifiquemos aquí. Si guardo eso, ahora, muestro el modal, hago clic en el botón modal alto. Podemos ver que el modal está oculto. Ahora sí vemos una advertencia en la consola aquí, valor del modelo de actualización de eventos, pero no se declara en la opción emite ni como problema de valor modal de actualización. Solo necesitamos agregar este evento a nuestro array emite aquí, así, actualiza el valor modal de colon. Esto debería deshacerse de esa advertencia. Muestra el modal y esconde el modal. Y ya no vemos la advertencia. Dado que ya no estamos usando este evento modal alto, podemos simplemente eliminarlo de esta matriz. Ahorra eso. Y si salto de nuevo a la vista modales, vista de punto ya no necesitamos escuchar este evento modal de ocultar ya que ahora estamos manipulando el vector modal show usando el valor modal de actualización de n. Por lo que sólo podemos deshacernos de esto ahora. Ahorra eso. Ahora veamos si esta es la obra. Y, sin embargo, sigue funcionando. Saltemos de nuevo a la vista modal de puntos. También podemos emitir si tuviera actualización de valor del modelo directamente de nuestra plantilla también. Entonces, en lugar de disparar este método aquí, solo voy a comentar este método, pero dejarlo ahí como referencia. Podemos simplemente cambiar este manejador de clics al usar el método de emit dólar. Simplemente emite actualizaciones valor del modelo de dos puntos y luego establece el valor en el que queremos configurarlo, que es false. Ahorra eso. Y vamos a ver si eso todavía está funcionando, eso todavía lo funciona también. pueda ver que el uso del valor modal y valor del modelo de actualización simplifica masivamente nuestra comunicación hijo a padre y, a menudo, elimina la necesidad configurar eventos personalizados y luego escuchar aquellos personalizados eventos. 44. Componentes dinámicos: parte 1: Los componentes dinámicos nos permiten cambiar el componente que se está utilizando en algunas partes particulares de nuestra app. Demostremos esto creando una versión oscura de nuestro modelo, que podemos cambiar en esta página modales bu.edu basada en una casilla de verificación. Ahora en una app del mundo real, si quisieras tener modales que fueran tanto claros como oscuros, entonces lo mejor que hay que hacer sería solo tener un componente modal y cambiar los estilos usando apoyos. Lo que estamos a punto de hacer no es exactamente una mejor práctica, pero es una forma agradable y fácil de demostrar los conceptos de componentes dinámicos. En primer lugar, hagamos que nuestro componente modal en modales view dot view, un componente dinámico. Entonces todo lo que tenemos que hacer es cambiar esto a un componente. Componente. Me aseguraré de que tanto las etiquetas de apertura como de cierre hayan sido renombradas. Y luego solo agregamos un S prop. Entonces colon es, y acabamos de establecer eso al componente que queremos mostrar aquí. Solo queremos mostrar nuestro componente modal. Por lo que sólo podemos usar el nombre modal. Establezca esto en modal salvo eso. Debería estar funcionando igual que antes. Voy a hacer clic en show modal. Y sin embargo todavía podemos ver el modal. Todavía podemos ocultarlo, excepto ahora podemos cambiar realmente el componente que se muestra aquí simplemente cambiando esto es prop, programáticamente. Entonces antes de crear nuestra visión oscura de nuestro modal, solo agreguemos una casilla de verificación a la página que podemos usarla para alternar si mostramos o no modales claros u oscuros. Entonces después de nuestro rumbo, voy a añadir un div. Y luego dentro de eso voy a añadir una etiqueta. Y luego dentro de eso voy a poner los textos muestran modales oscuros, signo de interrogación. Y luego después de que los textos permitieron una entrada, establece el tipo en casilla de verificación. Vamos a ahorrar eso para asegurarnos de que se vea bien. Y sí, eso se ve bastante decente. Ahora vamos a establecer así pagar ref, que combinamos a esta casilla de verificación. Así que desplácese hacia abajo a nuestra sección de guiones en la parte superior de este show modal href. Agreguemos un nuevo ref llamado Chau Doc modales que equivalen a un rap con un valor inicial de false. Y usaremos este gráfico para determinar si mostramos modales de punto o modales de luz. Entonces ahora vamos a encontrar este href a nuestra casilla de verificación, que está aquí. Simplemente podemos configurar el modelo V para mostrar modales doc. Ahorra eso. Solo para asegurarme de que esto esté funcionando, voy a agregar una etiqueta pre después de este div y solo salida show doc modales. Ahorra que podamos decir es falso inicialmente. Y si verificamos, la casilla de verificación se establece en true. Y si desmarcamos, se vuelve a falso antes de crear nuestro punto modal, simplemente eliminemos esta etiqueta pre en Guardar. 45. Componentes dinámicos: parte 2: Vamos a crear nuestro modal oscuro. Así que saltemos a la vista modal de puntos. Sólo voy a eliminar estos comentarios sobre éste también. Ahorra eso. Y ahora vamos a duplicar este módulo componente a componentes fuente en modal w. Duplicar con la extensión de acción duplicada nombrará esta vista modal doc dot. Cambiemos la clase en este div a dash modal dark. Desplácese hacia abajo hasta los estilos, cambió la clase aquí a dash modal dark en lugar de un fondo beige. Vamos a establecer esto en hash 333, que será de color gris oscuro. Y luego pondremos el color, el color del texto a blanco y guardaremos eso. Solo para reiterar, si quisieras tener modales que fueran claros y oscuros en un mundo real arriba, entonces esta no sería la mejor manera de hacerlo porque estamos duplicando mucho de nuestro código aquí. Sería mejor solo tener un solo componente de punto modal Vue, que luego podemos pasar un prop para decir un prop llamado dark. Y luego si recibimos ese prop, entonces agrega una clase diferente al modal para darle diferentes estilos. Solo estoy usando esto como ejemplo para demostrar componentes dinámicos, pero no como un ejemplo de mejores prácticas. Ahora vamos a saltar modales vista, vista de punto, y ahora podemos cambiar el componente que se utiliza en este S prop basado en nuestros modales show dot ref. Entonces, antes que nada, necesitamos importar el componente modal oscuro. Duplicaré esta línea, cambiaré eso a doc modal, cambiaré el nombre de archivo aquí a oscuro modal. Lo que podemos hacer en esto es prop. Podemos usar una declaración ternaria if aquí para escupir un componente diferente basado en nuestros modales show dot ref. Entonces podemos hacer si los modales de Chau Doc es cierto, entonces usaremos el componente modal oscuro. De lo contrario, usaremos el componente modal. Así que vamos a salvar eso. Haga clic en el botón Mostrar modal. Vemos la luz modal alta Doc. Marcaré la casilla de verificación que mostró set apareció modales a true. Y deberíamos ver nuestro modal. Ahora, si hacemos clic en el botón, ahí vamos. Ahora podemos cambiar fácilmente de ida y vuelta entre nuestros modales claros y oscuros. 46. Proporción/Inject : parte 1: Vimos cómo pasar datos de un componente padre a su componente hijo directo usando apoyos. Pero y si queremos pasar datos a un componente hijo realmente profundamente anidado, bueno, usando apoyos, necesitaríamos pasar los datos de padre a hijo a hijo y así sucesivamente hasta que alcanzar el componente hijo deseado en esto puede ser una forma muy desordenada de pasar datos alrededor. Y podemos sortear este problema mediante el uso de provide inyectar. Vamos a saltar a nuestro componente raíz app.vue. Sólo vamos a cerrar todo primero y iremos a fuente y app.vue. Digamos que tenemos un objeto reactivo en este componente con algunos datos que queremos pasar todo el camino hacia abajo a este componente modal. En primer lugar, vamos a configurar un objeto reactivo en app.vue. Agreguemos nuestra sección de script, nuestras etiquetas de configuración de script. Digamos que tenemos un objeto reactivo con algunos datos de usuario. Un montón de comentario de bloque aquí, que dice datos de usuario, configura una constante llamada conjunto de datos de usuario que igual a un objeto reactivo. Ahora tenemos que importar reactivo desde la vista. Mucho otro comentario que dice que las importaciones importarán reactivas desde la vista. Y agreguemos algunos datos a estos objetos reactivos de datos de usuario. Digamos que tiene una propiedad de nombre. Vamos a poner eso a Danny y a una propiedad de nombre de usuario, y vamos a poner eso a Dani caudal. Ahorra eso. Y vamos a mostrar estos datos en la esquina superior derecha de nuestra página. Voy a saltar hasta la parte superior de la plantilla. Agregue un div con una clase de datos de usuario que permitan llaves dobles rizadas. Nombre de punto de datos de usuario. Entonces vamos a dar salida también el nombre de usuario. Así que mucho un símbolo en y luego dobles llaves rizadas, luego usa un nombre de usuario de punto de datos. Ahorra eso. Solo pensemos algunos estilos para que esto se vea un poco mejor. Me desplazaré hacia abajo hasta la parte inferior de la sección de estilo. Datos de usuario objetivo div. Estableceremos la posición absoluta, el fondo, beige en la parte superior a 0 para pegarlo en la parte superior, la derecha a 0 también. Entonces lo tenemos en la esquina superior derecha. Estableceré el tamaño de fuente a 12 píxeles, un poco trazando también, cinco píxeles. Ahorra eso. Ahora digamos que queremos pasar estos datos hacia abajo al componente modal usando apoyos. Bueno, en primer lugar, tenemos que pasarlo como un prop a nuestro componente de vista de enrutador, así, los datos de usuario de dos puntos son iguales a los datos de usuario. Ahorra eso, que necesitamos recibir esto en nuestra página modales. Vistas de fuente, modales vista arriba vista. Sólo agregaré aquí un comentario que dice apoyos. Que necesitamos agregar una constante nombrada props, establecer eso igual a definir. Los apoyos pasan en los datos del usuario. Prop. Estableceré el tipo a objeto. Y ahora tenemos que pasar estos objetos de datos de usuario de nuevo hacia abajo al componente modal, que es, Hey, podemos hacer, ir a lo largo de los datos de usuario iguales a datos de usuario, guarde eso. Y ahora tenemos que abrir el componente modal recibido este prop. Tenemos que sumar aquí el prop. Entonces usa un conjunto de datos, el tipo dos objetos. Ahora podemos finalmente utilizar estos objetos de datos de usuario en nuestro modal. Entonces una gran cantidad de div después de este botón aquí. Ahí acabo de poner nombre de usuario es llaves dobles rizadas. Utilice un nombre de usuario de punto de datos. Guardar eso, recargar, mostrar el modal. Podemos ver el nombre de usuario en el modal. Se puede ver que esto se desordena muy rápidamente, especialmente en un mundo real cuando podría tener componentes que están mucho más profundamente anidados. Hecho este componente modal. 47. Proporción/Inject : parte 2: Entonces vimos que no quería pasar datos de app.vue hacia abajo a la vista modal de puntos, tenemos que pasarlo como un prop a nuestra vista del router. Entonces recibe ese prop en vista modales, vista de punto, y luego pasarlo como propaganda a model.py EU y luego recibirlo en w modal antes de que podamos realmente utilizarlo. Este enfoque no es mucho problema. Así que vamos a solucionar este problema usando provide inyect. Entonces primero vamos a eliminar todos los cambios que hicimos aquí con props en la vista model.py. Eliminemos este div que agregamos y también eliminemos este prop de datos de usuario de nuestro objeto de props. Guarde eso, y luego salta a modales ver vista de punto. Elimine esto un prop de datos de usuario del componente, componente, y luego elimine nuestro objeto de utilería. Ahorra eso. Entonces saltaremos a app.vue y eliminaremos este prop de nuestra vista del router, guardaremos esa recarga. Y ahora vamos a utilizar provide para que este objeto reactivo de datos de usuario esté disponible para todos nuestros componentes hijo app.vue, sin importar cuán profundamente anidados estén. En primer lugar, necesitamos importar el método provide desde la vista. Y ahora después de que declaramos estos datos de usuario objetos reactivos, sólo podemos disparar este método de proporcionar. Para el primer parámetro, solo necesitamos proporcionar un nombre de placeholder para estos datos para poder acceder a él en nuestros componentes hijo. Y lo hacemos como una cuerda. Y simplemente le daré a este el mismo nombre que nuestros datos de usuario de objeto reactivo y luego seguiré el segundo parámetro. Simplemente pasamos los datos que queremos poner a disposición, que en este caso es este objeto reactivo UserData. Estableceré el segundo parámetro para usar un dato. Ahorra eso. Y ahora estos datos deberían estar ahora disponibles para todos los componentes hijo de app.use. Ahora no necesitamos hacer nada a la vista de punto de vista del modelo. Podemos simplemente saltar directamente hacia abajo a la vista model.py componente nieto y podemos agarrar estos datos usando inyectar. Saltemos directamente hacia abajo a la vista modal de puntos del nieto. Y ahora tenemos que importar el método de inyectar desde la vista. Comentario ruidoso que dice impulso en la parte superior, solo importará inyectar desde la vista. Y ahora podemos usar este método. Por lo que voy a saltar al fondo de la sección de script hacia fuera un nuevo comentario que dice datos de usuario. Todo lo que necesitamos hacer para agarrar estos datos que se están proporcionando es phi del método objeto. Y pasa el nombre del placeholder como una cadena, que utilizamos en nuestro método Proporcionar, que son datos de usuario. Todo lo que necesita hacer es inyectar datos de usuario para ponerlos a disposición en esta plantilla, sólo tenemos que asignarlos a una constante o a una variable. Por lo que sólo asignaremos esto a una constante con el mismo nombre, datos de usuario así. Y ahora podemos acceder a estos datos con esta constante UserData. Entonces si volvemos a saltar a la plantilla, mucho div después de este botón. Y acabo de poner nombre de usuario es colon, llaves dobles rizadas, y luego usar un nombre de usuario de punto de datos. Guarda eso, recarga, muestra el modal y ahora podemos ver nuestro nombre de usuario. Pero hemos simplificado masivamente nuestros componentes mediante el uso de provide inyect. 48. ¿Qué es un Composable? [Módulo 11]: En este módulo, vamos a aprender sobre composable. En composable son una de las características más emocionantes por venir con FY2013 en la API de composición. Pero, ¿qué es un componible? Bueno, se puede pensar en composable como la composición APIs equivalente a mixins de la API de opciones. Si bien con muchos beneficios añadidos, nos permiten extraer datos y métodos reactivos. Los mantengo separados de cualquier componente en particular para que podamos reutilizar fácilmente esos datos y métodos reactivos a través múltiples componentes sin tener que duplicar código. Aquí tenemos un ejemplo de algún código de un componente de vista usando la API de composición. Y tenemos algún código relacionado con un nombre de usuario. Aquí, tenemos un nombre de usuario data ref para almacenar un nombre de usuario, y luego tenemos una función para actualizar ese nombre de usuario. Entonces digamos que queremos reutilizar este nombre de usuario rref y este método de actualización Nombre de usuario en múltiples componentes. Que sólo podemos extraer estos hacia fuera en una composable, así. Composable es básicamente solo una función y podemos pegar todos nuestros datos y métodos reactivos , relojes, propiedades computadas, etc, en esta función y luego devolver las cosas de esta composable que queremos poner a disposición. Podemos entonces importar esta composable a cualquier componente y luego usar la estructuración para extraer las cosas que queremos. En este caso el nombre de usuario data ref y la función nombre de usuario. Y entonces podemos usarlos en ese componente. Si quieres conocer más detalle sobre los beneficios de composable sobre mix-ins, entonces puedes saltar a este artículo en View skill.io. ¿ Qué es un Vue.js composable? Mucho el enlace a la conferencia. Pero en resumen, los principales beneficios de composable sobre mixins es ante todo, dejan completamente claro de dónde vienen todos nuestros datos y métodos, etc,. Si miramos este ejemplo desde la API de opciones aquí, tenemos un componente que está importando tres mixins diferentes. Y luego estamos usando una propiedad de datos llamada sitio de uno de estos mixins. Pero al mirar este código no es obvio de dónde viene esta propiedad del sitio sin tener que abrir estos mixins y mirar a través de los archivos. tanto que con composable, siempre sabemos exactamente de dónde vienen nuestros datos. Se puede decir en este ejemplo de API de composición, estamos importando tres diferentes composables. Aquí. Estoy agarrando una propiedad de nombre de uno de ellos. Podemos decir claramente que esto viene del producto estadounidense composable. Entonces composable es hacerlo mucho más claro de dónde viene todo. Composable también se reduce el riesgo de nombrar colisiones. Así que de nuevo, tenemos aquí un ejemplo de API de Opciones que está tirando de tres mix-ins diferentes. Ahora si todos estos mix-ins tienen una propiedad de datos llamada name, y luego usamos eso en nuestro componente. Eso sólo va a agarrar la propiedad de nombre del último mixin, que hemos importado. Las propiedades de nombre en los otros dos Mixins serán completamente ignoradas. Composable también nos facilita salvaguardia de nuestros datos reactivos. En otras palabras, hacer que las propiedades de los datos en nuestros objetos de datos sean de solo lectura desde fuera de la mezcla, para que en realidad solo podamos cambiar los datos dentro del mixin. No podemos hacer eso con mix-ins. Lo que tenemos composable. Cuando devolvemos las cosas que queremos exponer de lo composable, podemos exponer valores como de solo lectura para que no se puedan cambiar desde fuera de lo composable, solo de un método que está dentro de lo composable. El último beneficio de la composable es que en realidad podemos utilizarlos como un sistema global de gestión estatal. Por lo que podemos crear efectivamente una tienda componible con un montón de datos y métodos diferentes. Cuando cambiamos las propiedades de datos en esa tienda. Siempre estarán actualizados en todos los diferentes componentes de nuestra app. En tanto que no podemos hacer eso con mix-ins. Si tratamos de hacer eso con mix-ins, entonces los datos siempre se restablecerán para cada componente en el que usamos esa mezcla. tanto que con composable, podemos crear fácilmente una tienda de gestión estatal donde cuando los datos cambien, siempre veremos los cambios a esos datos reflejados en todos los componentes que están utilizando ese composable. Si no sabes qué es la gestión estatal y no te preocupes porque vamos a estar cubriendo eso en el siguiente módulo. Bueno, estos son algunos de los principales beneficios de composable sobre mixins. 49. Crea un compostable: Vamos a crear nuestra primera composable. Vamos a saltar de nuevo a nuestra página de inicio. Abriremos la página de inicio. Así vistas de fuente y vista entera, vista de puntos. Digamos que queremos utilizar los datos de nuestro consejero y los métodos relacionados en múltiples componentes. Bueno, podríamos hacer esto usando una composable. Ahora volvamos a saltar a nuestro explorador. Y se recomienda que todas nuestras composables entren en una carpeta llamada use. En nuestra carpeta fuente, crearemos una carpeta llamada US. Y ahí vamos a crear nuestra primera composable. Y por cierto se recomienda que todos los nombres para composable estén escritos en CamelCase. Comience con el uso de la palabra. Llamaremos a esto composable. Usa contador dot js. En nuestra composable, solo queremos crear una función con el mismo nombre que nuestro consejero de uso de archivos. Entonces queremos exportar esta función para ponerla a disposición de todos los archivos. Y ahora solo podemos cortar todas nuestras cuentas de datos y métodos relacionados y pegarlos aquí. Voy a saltar de nuevo a nuestra vista de casa dot view. Y voy a copiar todo el código relacionado con contador, los objetos reactivos de datos de contador, el vigilante, la propiedad impar o incluso calculada, el aumento de contador y disminución los métodos de calcio y la halcón sin derretir. Por lo que sólo podemos cortar esa broma para usar el consejo dot js dentro de esta función. Y aún tenemos que importar todos los pocos métodos que estamos utilizando como reactivos y ver y calculados. Por lo que voy a saltar de nuevo a una vista de casa dot Vue. Simplemente copie la declaración de importación. Saltar hacia atrás para usar contador dot js. Simplemente pega esto a la parte superior. Simplemente estiraré esto un poco. No estamos utilizando los métodos ref, por lo que podemos deshacernos de eso y guardarlos ahora para que estos datos y métodos estén a disposición de cualquier componente en el que utilicemos esta composable, necesitamos exponerlos devolviéndolos en la parte inferior de esta función. Al igual que lo hicimos en nuestros componentes cuando estábamos usando el patrón de función de configuración más antiguo para nuestros componentes. Así que empecemos aquí un objeto de retorno, y simplemente devolveremos las cosas que queremos usar. Devolvamos los datos del contador, los objetos reactivos, la propiedad impar o incluso calculada, los dos métodos para aumentar y disminuir el contador. Por lo que sólo podemos devolver datos de contador, luego impar o par, luego aumentar contador y disminuir contador y guardar eso. Y ahora podemos tirar de esta composable en cualquier componente que queramos y obtener acceso a la propiedad calculada de datos y métodos que estamos regresando aquí. 50. Usa nuestra compostable: Ahora podemos importar esta composable a nuestra página de inicio que ahora está rota porque está tratando de acceder a los datos del consejero. Auditar una propiedad incluso calculada que ya no existe en este componente. Entonces, antes que nada, necesitamos importar esta composable. Por lo que sólo podemos hacer la importación. Entonces el nombre de la función que creamos aquí usa Kaltura import, use counter from slash, usuarios slash use counter, guarde eso. Por cierto, hay algunas cosas que ya no estamos usando en esta declaración de importación. Podemos ver que está en gris. Por lo que me deshago de reactivo computado y veré el siguiente tick. Y ahora tenemos que tener acceso para usar consejo composable. Así que desplácese hacia abajo a este contador comentario que quedan en antes. Hay dos formas en que podemos acceder a los datos y métodos que están en nuestra composable. Si no queremos cambiar nuestra plantilla, que actualmente está buscando un objeto llamado métodos de datos de Kaltura llamado contador de disminución y contador de aumento, esta propiedad auto o incluso calculada. Entonces podemos usar la estructuración para agarrar solo las cosas que necesitamos de nuestra composable los datos de contador impar o incluso bajo nuestros métodos de consejero de contador y disminución aumentados . Para ello, podemos crear una constante que es un objeto y establecer eso igual a nuestro contador composable estadounidense. Y entonces solo podemos sumar las cosas que queremos extraer de lo descomposable a este objeto. Por lo que no vamos a los datos del consejero impar o incluso, aumentar contador, disminuir contador. Porque estos son los mismos nombres que estamos usando en nuestra plantilla aquí. consejero de disminución de datos de Caltech aumenta contador, impar o incluso que esto no debería funcionar. Así que guardaré esa recarga la página de inicio, que ahora parece estar funcionando de nuevo. Podemos decir que todo sigue funcionando, incluido nuestro inmueble computado aquí. Ahora la otra forma en que podemos acceder a todas las cosas en imposible es simplemente asignando el conjunto de nuestra composable esta función COUNTA de uso a una constante o variable como esta. Por ejemplo, entonces podemos acceder a nuestros conteos, un objeto de datos, contador de datos de puntos contrarios objetos. Y podemos acceder a nuestro método de aumento de calcio o contador contador de aumento de puntos. Si lo estamos haciendo de esta manera, necesitaremos actualizar nuestra plantilla, estamos preparados y todo con puntos de consejero donde estamos usando Counter data dot title, necesitamos anteponer eso con counter dot. Todos estos métodos necesitamos anteponer con punto de cáncer y luego necesitamos preparar este contador datos con recuentos adoptan y nuestra propiedad computada con consejero punto en el modelo V en este título aquí con consejero dot también. Guarda esa recarga y ojalá todo siga funcionando. Sí, parece estar funcionando. No obstante, aunque a veces agarrar toda la composable como esta podría tener sentido en este caso, y en muchos casos creo que el enfoque anterior tiene más sentido porque nos permite ver exactamente lo que estamos sacando de esta composable particular. Así que sólo voy a deshacer todo. Lo acabo de hacer. Deshazte de todos esos conteos de puntos que agregamos. Cambia esto de nuevo al enfoque de estructuración D donde podemos decir con claridad exactamente lo que estamos agarrando de lo composable. Sólo asegúrate de que eso siga funcionando. Todo sigue funcionando. 51. Reutiliza nuestra compostable: Ahora reutilicemos nuestra composable en nuestra página de posts. Entonces vamos a abrir eso. vistas y postes, vista superior. Digamos que queremos una versión mucho más simple de nuestro contador en esta página, digamos que podríamos agregar un botón que tenga el contador dentro de él. Y luego cuando hacemos clic en el botón, aumenta el contador en uno. Así que primero vamos a sumar la maqueta. Después del área de texto. Agregaré un botón. Dentro de eso. Sólo pondré 0 por ahora. Lote de clase de botón Contador guardar eso. Vamos a rodear eso en un div para que vaya a una nueva línea. Guardar eso permitió algunos estilos básicos. Por lo que los conteos oscuros o el tamaño de fuente a 60 píxeles, establece el ancho en 100%, establece el color de fondo en rosa. Ahorra eso. Queremos reemplazar este 0 por nuestro contador. Y cuando hacemos clic en la parte inferior, queremos aumentar el contador. Entonces primero vamos a importar lo composable. Así que importar contador de uso de slash usuarios slash uso consejero, ahorre mucho nuevo comentario aquí abajo. El abogado Bolton creció las cosas que necesitamos de lo composable. Entonces vamos a configurar un const con un objeto, establecer eso igual a nuestra función composable. Usas paréntesis de contador. Y todo lo que vamos a necesitar por ahora es el objeto reactivo de datos del consejero que contiene nuestro contador, el método de contador de aumento. Ahorra eso. Ahora volvamos a saltar a nuestra plantilla. Deshazte de este 0, reemplázalo con llaves dobles rizadas y datos de consejero, conteo de puntos, guarda eso. Y luego agreguemos un manejador de clics a este botón. Por lo que haga clic en aumentar contador. Lo aumentaré en uno ahorre. Se puede decir que esto está funcionando ahora. Ahora digamos que decidimos que queremos que este botón sea amarillo. Cuando el número es impar. Podemos hacer eso sin siquiera propiedad computada que está en nuestra composable. Por lo que sólo tenemos que saltar hacia abajo a nuestro objeto estructurado D aquí y también son los impares o pares. Y volvamos a desplazarse hacia arriba hasta nuestro botón. Entonces digamos que queremos sumar una clase a esto. Si el número es impar, solo podemos pensar en una clase de amarillo, digamos. Pero sólo cuando impar o par es igual a extraño. Porque recuerda esta propiedad auto o incluso computada devuelve una cadena de par o impar. Yo lo guardaré. Y si miramos el botón en las herramientas dev, hacemos clic en él, cambia a uno y podemos ver que se está agregando clase de amarillo. Para volver a hacer clic en él, se ha eliminado la clase. Así que vamos a añadir un poco de estilo para que este amarillo apuntará nuevamente al elemento del botón del contador Dash, pero cuando tenga una clase de amarillo, establezca el color de fondo en amarillo, guarde esa recarga. Salimos, decimos que los libros, es amarillo cuando el número es impar. Ahora una cosa a tener en cuenta es que el cabildo se volverá a 0 cuando cambiemos de páginas. Si salto a la página de inicio, podemos decir que esto es 0 de nuevo. Si lo aumento y salto de nuevo a la página de posts, esta vuelve a 0. Eso se debe a que se creará una nueva instancia de este método de contador de uso este método de contador de usocada vez que cambiemos de página. Si queremos que nuestro consejero sea un contador global que no restablezca cuando cambiemos páginas y solo podemos mover este objeto de datos de consejero fuera de la función del Consejo de Estados Unidos. Simplemente seleccionaré esto y lo moveré fuera de la función. Y eso hará de este consejo los objetos de datos un objeto global que está disponible en todas partes. Entonces vamos a salvar eso. Y ahora, si aumento el personaje a, digamos seis y nos bajamos a la página de inicio porque dicen que todavía son seis. Si lo aumentamos de nuevo aquí para digamos diez, broma de nuevo a la página de publicación. Podemos ver que el consejero tiene diez años y ahora nunca perdemos la noción de nuestro contador global. 52. Añade Composición de VueUse: Una gran fuente de listo para usar composable es la biblioteca de uso de vista. Vamos a saltar para ver use.org. Todo lo que tenemos que hacer es instalar esta biblioteca y tendremos acceso a más de 150 composables ya hechos. Así que vamos a saltar para empezar. Y así es como podemos instalar una biblioteca con este comando. Así que voy a copiar eso, abrir nuestra terminal. Alkyne es proceso sordo presionando Control y C en ese atajo podría ser diferente en tu plataforma. Y luego lanzaremos este comando que acabamos de copiar. Ahora instalado. Así que relanzemos nuestro proyecto ejecutando npm run dev. Ahora deberíamos poder utilizar esta biblioteca. Simplemente estiraré esto un poco. Voy a saltar al censo. Desplázate hacia abajo. Voy a usar este uso en línea composable. Esta composable nos permite ver fácilmente si estamos o no en línea actualmente. Entonces si miras este estatus en línea aquí, si me desconecto de Internet, puedes ver ese cambio a offline. Y sólo voy a volver a conectarme. Yo usaré éste porque es agradable y fácil de integrar. Entonces podríamos usar esto en nuestro pequeño widget de información de usuario en la columna. Vamos a cerrar todo. Se abrirá la fuente app.vue. Vamos a saltar de nuevo a la página de documentación. Solo necesitamos importar uso en línea desde si usas slash core. Entonces vamos a copiar estas dos líneas. Los pegará a la parte superior de nuestra sección de scripts en app.vue. Sangría que. Y voy a llamar a éste, ponerlo en su propia sección aquí. Mucho comentario que dice estado en línea. Pega eso ahí dentro. Y ahora esta constante en línea debe cambiar el Verdadero o falso dependiendo de si estamos en línea o fuera de línea. Así que vamos a usar esto en nuestro pequeño widget de usuario. Entonces después del nombre de usuario, mucha pipa y un espacio, y acabaré de golpear Enter para pegar esto en nueva línea. Me encantó la Palabra Online llaves dobles rizadas. Deberíamos poder dar salida a esta constante en línea. Ahorra eso. Ahora podemos decir en línea true, y si desconecto el Wi-Fi, se ve en línea falsa. Podríamos mejorar esto mediante el uso esta constante en línea para escupir diferentes textos de diferentes colores dependiendo de si esto es verdadero o falso. Así que voy a quitar todo esto, solo pongo el espacio de estado de la red de textos y luego una nueva línea y que mucho lapso. Y luego dentro de las llaves dobles rizadas, usaré aquí una declaración ternaria if. Si en línea es cierto, entonces se escupirá en línea. De lo contrario escupirá fuera de línea. Ahorra eso. Y está configurado en línea en este momento, vamos a deshabilitar internet. Vemos un cambio a offline. Cambiemos también el color. En este punto, me voy a unir al atributo style. Estableceremos la propiedad color, y de nuevo, usaremos una declaración ternaria if. Entonces si en línea es cierto, entonces estableceré el grado más fresco. De lo contrario lo pondremos en rojo. Ahorra eso. Y podemos decir el estado de red en línea con texto verde, deshabilitó el Wi-Fi. Y decimos offline con texto rojo, y solo volveré a habilitar el Wi-Fi. Asegúrate de revisar todas las diferentes composables que están disponibles en el uso de la vista antes de empezar a trabajar en tu próximo proyecto de gran vista porque podría ahorrarte mucho trabajo. 53. ¿Qué es la gestión estatal? [Módulo 12]: En este módulo vamos a agregar la gestión estatal a nuestro arte usando penny on. Pero, ¿qué es la gestión estatal? Bueno, en primer lugar, echemos un vistazo al problema que resuelve. Así que tengo tres de nuestros componentes de aplicaciones, cabello abierto, App.vue, que es nuestro componente de vista raíz. Entonces los modales ven vista de punto, que es esta página, que es un hijo directo de App.vue. Y entonces he modelado vista, que es este modal, que es un hijo directo de modales ver punto view. Vimos anteriormente en que podíamos pasar datos de App.vue, este objeto de datos de usuario, hasta su nieta componente modal punto vista usando props. Para hacer esto, tenemos que pasar un prop hacia abajo al componente de vista del router. Entonces en modales view dot view, tuvimos que recibir este prop configurando un método de prompts definido. Entonces sumamos para pasar este prop hacia abajo nuevo a nuestro componente modal. Que en la vista de puntos modal tenemos que recibir de nuevo esto agregándolo a nuestro objeto de utilería. Y entonces finalmente podríamos usar estos datos en la vista modal de puntos. Y vimos que este acercamiento era un verdadero dolor en el balón. Luego mejoramos sobre esto mediante el uso de provide inyectar, lo que significaba que en app.vue, podríamos simplemente proporcionar este objeto de datos de usuario una vez que los que lo pongan a disposición de todos nuestros componentes descendientes app.vue, todos sus hijos y nietos. Y luego en la vista modal de puntos, podríamos simplemente inyectar este objeto de datos de usuario una vez y luego usarlo en nuestra plantilla. Esto fue definitivamente una mejora. Todavía podríamos tener algunos problemas aquí. Número uno, proporcionar sólo hará que los datos estén a disposición de los descendientes del componente donde lo usamos. Por lo que sólo pondrá los datos a disposición de los hijos y nietos de ese componente. Pero y si tenemos un componente que no es descendiente de App.vue, que no forma parte de su árbol componente. Y queremos que ese componente pueda acceder a estos datos. En este caso, proveer no va a funcionar porque sólo pone datos a disposición de los descendientes de este componente. El otro problema es, y si queremos poder cambiar estos datos que están en app.vue desde su nieta componente modal dot view. Bueno, ahora mismo necesitaríamos desencadenar un evento personalizado en la vista modal de puntos. Escucha el evento en modales ver vista de punto, activa otro evento personalizado. Escucha ese evento en app.vue antes de que finalmente podamos desencadenar un método en App.vue, que luego cambia los datos. Y de nuevo, esto se pone muy desordenado. Si queremos cambiar estos datos de un componente que está fuera del árbol de componentes App.vue, entonces no podemos hacer eso en absoluto a menos que estemos usando un evento más biblioteca o algo así. Incluso el uso de eventos la mayoría de las bibliotecas pueden volverse bastante desordenado a la administración estatal nos permite resolver este problema almacenando todos nuestros datos de núcleo de aplicaciones, y todos los métodos relacionados con esos datos en una sola lugar centralizado, que está fuera de todos nuestros componentes, pero de una manera que todos nuestros componentes puedan acceder a todos los datos y métodos. El lugar donde almacenamos estos datos y métodos llamamos tienda. Porque cuando creamos nuestros proyectos, elegimos agregar opinión automáticamente a nuestra app. La herramienta de compilación ya ha creado un archivo de centavo o tienda para nosotros. Vamos a abrir eso. Abriré el Explorador. Y queremos ir a las tiendas Source y cuenta ab.js. En opinión como si tuviéramos tres secciones principales. Acciones estatales sobre conjeturas. En estado es donde almacenamos todas nuestras propiedades de datos. Para que pueda ver una propiedad de datos de contador aquí. No te confundas por el hecho de que hemos creado un contador arriba. Este código no se genera en base a nada de lo que hemos estado haciendo. Esta es solo la tienda predeterminada que se envía cuando opinamos a nuestros proyectos usando la build x2. Tenemos estado donde almacenamos todas nuestras propiedades de datos. Vamos a estar agregando nuestras propiedades de datos de título de mostrador y consejero aquí. Entonces tenemos acciones donde podemos almacenar métodos que puedan acceder a los datos que hay en el estado y también modificarlos. Se puede ver aquí tenemos una subasta de incrementos, que está aumentando a estos consejeros en el Estado. Y vamos a estar agregando nuestro mayor consejero y disminuyendo los métodos del consejo aquí más adelante. Por último, tenemos conjeturas aquí. Colocamos métodos que pueden agarrar algo del estado, luego posiblemente modificarlo de alguna manera, y luego devolverlo. Por lo que se podría pensar en estos como una especie de propiedades computadas. Una tienda de administración estatal como esta está disponible en todas partes dentro de nuestra app. Todos los componentes de nuestra app, no importa de qué árbol de componentes que formaron parte o cuán profundamente anidados puedan acceder a todas las acciones estatales y nos consigue que estén en esta tienda. Esto nos facilita mucho la gestión de nuestras aplicaciones llamadas datos y todos los métodos relacionados con esos datos. Y también significa que no tenemos que preocuparnos por tener que pasar datos de padres, un niño a niño usando apoyos o proporcionar. No tenemos que preocuparnos por burbujear eventos de niño a padre a padre, etcétera. Ya que todos nuestros componentes de aplicaciones tienen acceso a todo lo que hay en esta tienda. En una salida v3, hay algunas formas diferentes en que podemos integrar la gestión estatal a menos que el espacio del discurso próximo. 54. Estado compostable vs. Vuex vs. Pinia: En una vista tres arriba, hay tres formas principales en las que podemos integrar la gestión estatal. Número uno, podemos integrar gestión estatal mediante el uso de composable. Número dos, podemos usar UX, que es un paquete de gestión estatal creado por el equipo de Vue. En el número tres, podemos usar penique, que es otro paquete de gestión estatal creado por el equipo de Vue. Echemos un vistazo al número uno, gestión estatal usando composable. Bueno, si saltamos a lo composable que creamos antes, usa contador en la carpeta de Estados Unidos. Lo que aquí hemos establecido es la base para un sistema de gestión estatal global. Porque tenemos nuestros conteos son datos golpeados, que se podría pensar en un estado. Tenemos un par de métodos para cambiar los datos en ese estado, que se podría pensar como acciones. Tenemos esta propiedad calculada que agarra los datos del estado y emite una cadena basada en eso, ya sea par o impar. Podríamos pensar en esto como un getter. Debido a que el objeto de datos está fuera de esta función, entonces estos datos son globales. Y así podemos cambiar esto desde cualquier lugar y ver siempre los cambios que hacemos en todas partes. Por lo que vimos que podemos aumentar el consejero en la página de inicio y luego saltar a la página de publicaciones. Seguimos viendo que el consejero se fija al mismo valor que y de igual manera, si saltamos de nuevo a la página de inicio. Por lo que en realidad podemos usar composable como esta para gestionar toda la gestión estatal de nuestra app sin tener que instalar ningún paquete extra. Si quieres conocer más sobre gestión estatal con la API de composición y checkout mi composición API estado de gestión video en YouTube. Enlace a esta conferencia. No obstante, si desea un enfoque más estandarizado y optimizado para administración estatal con capacidades de depuración más avanzadas e integración de DevTools. Entonces querrás usar un paquete construido específicamente para la administración estatal, como UX o penny on. Durante mucho tiempo, la UX ha sido el estándar de oro para la gestión estatal para las aplicaciones Vue. No obstante, según Avenue, el creador de ti, el actual estándar de oro para la gestión estatal para la composición V3 Apps API es Penny. Penny o tiene algunas ventajas sobre UX. Si saltamos de nuevo a esta tienda, este centavo una tienda cuenta ab.js. En opinión, aunque solo tenemos tres secciones, acciones estatales y getters, nuestras acciones pueden tanto acceder al estado como manipularlo también. Si bien a la vista, las acciones no pueden manipular al estado. Pueden acceder al estado para la cuenta, manipularla. Si esto fuera una puerta UX, entonces esto no funcionaría porque en una tienda así como acciones estatales y nos consigue, también tenemos mutaciones, que son métodos que pueden manipular los datos que hay en el estado. Si esto fuera una vista de al lado y quisiéramos aumentar este contador, no seríamos capaces de aumentar el contador a partir de esta acción. Tendríamos que desencadenar una mutación. Primero. Podríamos tener una mutación llamada incrementos. Esta mutación entonces aumentaría el contador y necesitaríamos desencadenar esta mutación desde la subasta usando algo así como incrementos de Despacho. Esto significa que en una vista de al lado, a menudo terminas con toneladas de métodos diferentes que tienen el mismo nombre, Donde estamos desencadenando una acción y luego desencadenando una mutación y luego cambiando el estado en una tienda complicada. Esto dio como resultado toneladas de líneas extra de código y complejidad a nuestra tienda, cuales aún no tenemos que preocuparnos con pin. Porque con Penny Are no tenemos mutaciones. Sólo tenemos acciones. Y las acciones pueden tanto acceder al estado como manipularlo también. También tenemos capacidades de depuración más avanzadas integradas en Pena, que veremos más adelante. También es extremadamente ligero alrededor de un kilobytes y está optimizado específicamente para la API de composición. Veamos cómo podríamos usar centavo en toda la gestión estatal a esta app. Desde cuando construimos nuestros proyectos, elegimos agregar automáticamente Pena. Entonces ya se ha agregado opinión a nuestro proyecto y esta tienda ya se ha liquidado para nosotros. Podemos utilizar esto como base para nuestra gestión estatal. No obstante, más adelante en el curso, cuando creamos las bolas de notas arriba, te estaré mostrando cómo agregar penique encendido, desasentado tu primera tienda completamente desde cero. Esto es realmente útil saber en caso de que alguna vez necesites agregar opinión a un v3 proyectos que ya existe. Pero si tienes curiosidad sobre cómo hacer eso ahora, pero solo salta hacia adelante a las bolas de nota. Penny, un módulo, mira el primer par de videos y luego salta de nuevo aquí. 55. Pinia - Estado: parte 1: Actualmente estamos utilizando este contador de uso composable para administrar toda la funcionalidad de este contador. Por lo que tenemos todos nuestros datos y métodos computados propiedad aquí. En cambio, utilicemos penny F2 configura la gestión estatal para este contador arriba. En primer lugar, eliminemos este uso consejo composable de esta página de inicio y toda la funcionalidad dinámica. Vamos a saltar a la vista de puntos de vista de inicio en la carpeta vistas se desplazará hasta nuestras importaciones, basta con quitar nuestro contador de uso composable. Y luego desplábamos hacia arriba hasta la parte superior y eliminemos toda la funcionalidad dinámica. Entonces esta h3 donde estamos mostrando nuestro título, vamos a reemplazar las llaves dobles rizadas por título codificado duro. Y eliminemos todos estos manejadores de clics de nuestros botones donde nuestro consejero se muestra en este lapso. Menos reemplaza eso con solo 0 y donde dice descuentos que es impar o par. Seleccionemos las llaves rizadas y simplemente tiraremos de la vara impar incluso por ahora. Entonces este impulso, en realidad sólo voy a dividir los atributos en eso. Apenas quitemos este modelo V por ahora. Creo que eso es todo. Aquí tenemos un error. El consejero de uso no está definido. Desplazemos hacia abajo a nuestra sección de guiones. Este error se debe a que estamos tratando de sacar cosas de nuestro contador composable de Estados Unidos que ya no importaban. Vamos a quitar todo esto también. Guarda eso, refresque. Y ahora hemos eliminado toda la funcionalidad dinámica de esta página. Esto es todo acaba de marcar ahora, oh, parece que acerca de tirar algunos tipos de ataques allí en lugar de la palabra título. Así que sólo arreglaré eso y lo guardaré. Agreguemos algunas propiedades estatales para nuestro mostrador y nuestro título de consejero. Saltaremos al centavo un archivo de tienda, que fue creado cuando generamos el proyecto ya se llama contador. Por lo que sólo podemos dejar el nombre tal como está. Y de nuevo, esto es simplemente coincidental. Esta tienda no se generó en base a ninguno de nuestro código. Se generó cuando creamos por primera vez el proyecto. Por ahora, solo voy a quitar las subastas y nos consigue y solo enfocarme en estado quitará esta propiedad estatal también. No hagamos una propiedad estatal para nuestro mostrador. Simplemente llamaré a este recuento, estableceré eso a 0 por defecto. Mucha propiedad para nuestro título de mostrador. Y simplemente llamaremos a este título. Y acabamos de poner esto a mi título de contador. Ahorra eso. Ahora podemos usar estas propiedades estatales en cualquier lugar dentro de nuestra app. Veamos si podemos usarlos en esta página de inicio. 56. Pinia - Estado: parte 2: Para utilizar nuestra tienda de mostrador, necesitamos importarlo y lo importamos usando este nombre de método aquí, use tienda de mostrador. Así que vamos a saltar a la vista de puntos de vista de casa, donde está todo nuestro marcado de calcio. Desplázate hacia abajo hasta la sección de impulsos. Y vamos a hacer importación, usar tienda de mostrador. Y escribí eso mal. Usas puerta consciente no está bien. Sólo revisemos. Tengo el nombre correcto. Usa la tienda del consejo de la app slash stores slash consejo. Digamos que accede a la tienda, necesitamos asignarla a una constante o a una variable. Me desplazaré hacia abajo hasta el fondo aquí. Pondré nuestro consejo comentarios cubo. Podemos simplemente hacer const y darle un nombre. Vamos a llamarlo contador, establecer eso igual a usar contador, almacenar paréntesis. Y ahora deberíamos poder acceder a todo lo que hay en nuestra tienda de consejo mediante el uso este costo de mostrador. Yo lo guardaré. Y ahora en realidad deberíamos poder ver nuestra tienda de mostrador en nuestra vista DevTools, queremos abrir las herramientas de desarrollo de Chrome yendo a Ver Herramientas para Desarrolladores o usando el atajo de teclado. Entonces podemos hacer click en esta pequeña flecha y elegir Ver. Recargar la página por alguna razón ver DevTools no funciona. Solo voy a intentar dejar Chrome y reiniciarlo, a ver si eso corrige. Es. Apenas saltó a la terminal. Comando. Haga clic en este enlace para abrir la aplicación, abrir las DevTools, haga clic en la flecha y vaya a ver. Parece estar funcionando. Ahora, vamos a estirar un poco esto. Estirar esto. Si vamos a este pequeño ícono aquí y Penny Are, podemos ver nuestra tienda de mostrador. Y si hacemos click en eso, podemos ver las propiedades estatales en ella. Se podría decir contar y podemos decir título. Ahora veamos si podemos usar esta propiedad estatal de recuento en nuestra página. Sólo voy a volver a aparecer esto por aquí. Mueve esto un poco. Asignamos nuestra tienda a esta constante de contador. Entonces para acceder a este recuento de propiedades de datos, que es un estado R, deberíamos poder simplemente hacer conteo de puntos contadores. Así que desplábamos hacia arriba hasta donde está nuestro mostrador. Selecciona este 0, un doble llaves rizadas, luego contarán puntos contrarios, guarda eso, recarga. Todavía podemos ver 0 allí y en realidad podemos modificar nuestras propiedades de estado usando el penique a dev tools dentro de las herramientas de dev view. Por lo que podemos hacer clic en este lápiz e ingresar un número. Y vemos esa actualización. Podemos usar estos pequeños botones plus y menos también para cambiar el contador. No todo parece estar conectado correctamente. Y si saltamos a nuestra tienda de mostrador y cambiamos el valor, guardamos esa recarga, vemos que ahora está configurado en diez. Cambiemos esto a 0 y guardemos eso. Por alguna razón la recarga en caliente, no parece estar funcionando en este momento. Ahora hay una página sobre el centavo, un sitio que te dice cómo habilitarlo. Y he intentado seguir eso antes y no pude conseguir que funcionara, pero vamos a tener un montón de Go ya que podría haber sido actualizado. Sólo voy a Google centavo en salto a Penny app.vue js.org. Saltar a guiar, saltará hacia abajo a Reemplazo de Módulo. Dice bla, bla, bla. Es necesario agregar este fragmento de código junto a cualquier declaración de tienda. Digamos que tienes tres tiendas de GIS, carro JS, y cobran JS, tendrás que añadir un adaptar esto después de la creación de la definición de tienda. asegura de pasar la definición de tienda correcta. Use off en este caso, sólo vamos a copiar este fragmento aquí y lo pegaremos después de usar tienda de mostrador. Supongo que necesitamos reemplazar a este usuario apagado por usar tienda de mostrador. Pega eso y guarda esa recarga. Tenemos un error aquí, no capturado ReferenceError aceptar actualización HTML no está definido. Vamos a saltar de nuevo al ejemplo. Necesitamos importar esto, aceptar actualización HTML de opinión también. Así que voy a copiar eso y darle una prueba. Guarda esa recarga. Veamos si la recarga caliente está funcionando ahora voy a cambiar el consejero a diez, guardarlo, y todavía no parece estar funcionando. A lo mejor necesitamos matar ese proceso y volver a iniciarlo. Lo mataré proceso con control y diré ejecutar npm, ejecutar dev, recargar la aplicación. Vamos a cambiar esto a 100, y todavía no parece estar funcionando. Ojalá esto se arregle en algún momento. Y si encuentro una solución, mucho video al curso, pero por ahora, solo voy a eliminar este código que acabamos de empezar. Y como no parece estar funcionando. Además, si sabes cómo hacerlo funcionar y por favor deja un mensaje con esta conferencia. Entonces vamos a eliminar esto excepto HMM, actualizar también. Contador de vuelta a 0. Por ahora, sólo vamos a tener que seguir recargando cada vez que hagamos cambios en nuestra tienda. Ahora enganchemos el título del contador. Saltaremos de nuevo a la vista de punto de vista de inicio, seleccionaremos este texto título codificado duro, eliminaremos que sean llaves dobles rizadas. Y de nuevo, para acceder a nuestra tienda, solo podemos usar contador. Y luego para acceder a la propiedad del título, solo podemos hacer título de punto, salvo eso. Y podemos ver el título de mi consejero en la página. Y si lo cambiamos en las herramientas dev aquí, entonces deberíamos verlo actualizarlo también. Y eso está funcionando. Echemos un vistazo también a esta entrada, que está aquí. Simplemente agregaremos modelo V y pondremos eso a lo mismo, cuenta, conteo de puntos. Ahorra eso. En realidad no, esto debe fijarse al título. Por lo que queremos consejero dot title, salvo eso. Si actualizamos este título en la entrada, decimos actualización en este rubro también. Y también lo vemos actualización en el DevTools. 57. Pinia: acciones: Añadamos algunas acciones a través de nuestra tienda de opiniones. En opinión las acciones de tienda son básicamente solo métodos que pueden acceder a las propiedades en nuestro estado y modificarlas. Entonces las acciones son el equivalente de los objetos métodos en la API de Opciones o cualquier método que modifique sus datos reactivos en la API de composición, solo necesitamos agregar un objeto después del estado llamadas acciones. Uy, eso debería ser subastas. Y podemos colocar todas nuestras acciones aquí. Entonces vamos a crear una acción para aumentar nuestro contador. Así que voy a crear un método aquí llamado asesor de aumento para acceder a propiedades en nuestro estado, solo podemos usar el, esta palabra clave poco como lo hicimos en la API de Opciones para acceder a nuestras propiedades de datos. Por lo que sólo podemos hacer este contador de puntos plus, plus. Este oxígeno debe ser bueno para ir. Entonces vamos a añadir una coma, duplicar esta acción, deshacernos de esa coma. Y vamos a configurar una acción para disminuir el contador llamado contador de disminución, solo diremos este contador de puntos menos menos menos. Y acabo de darme cuenta de que esto debería ser contar, no contraer. Entonces solo cambiaré eso para contar y cambiar eso para contar también. Ahorra eso. Y ahora deberíamos poder utilizar estas acciones. Así que vamos a saltar de nuevo a toda la vista de puntos de vista, y vamos a saltar a este primer botón. Después del contador, se me permite hacer clic manejador. Entonces app click es igual. Para acceder a la tienda, podemos usar contador, que es el nombre de la constante que hemos utilizado aquí. Y luego para acceder a la acción, solo podemos hacer puntos y luego el nombre de la acción. Entonces aumentar contador, salvo eso. Veamos si eso está funcionando. Creo que podríamos necesitar añadir paréntesis al final aquí. Así que intentemos eso, guarde eso, y aquí tenemos algunos errores. Tal vez solo necesitemos recargar. Vamos a intentarlo de nuevo. Veamos si sí necesitamos sumar estos paréntesis. En realidad, lo guardaré. Recargar. En realidad, no necesitamos sumar los paréntesis. Saltemos al botón menos que está directamente antes del contador. Y vamos a copiar este manejador de clics. Pegar en ese botón, cambiará esto a Counselor dot decremento contador, salvo eso. Ambos botones están funcionando ahora. Y también podemos enviar parámetros a nuestras acciones. Entonces si solo salto de nuevo al contador dot js, si queremos que estos reciban parámetros, entonces solo podemos agregar un nombre para ese parámetro aquí. Entonces llamémosle cantidad. Digamos que queremos aumentar o disminuir el contador por esta cantidad que estamos pasando. Para aumentarlo por este parámetro, solo podemos hacer este conteo de puntos más equivale a cantidad. Y luego para disminuir, solo hará este recuento de puntos menos igual a cantidad. Ahorra eso. Si queremos pasar un parámetro en, acabas de parar paréntesis al final del nombre del método para este botón, lo disminuirá en uno. Y entonces para esto Boltzmann lo disminuirá por uno menos también enganchar los otros botones también, éste y éste hará que disminuya en dos. Incremento en dos. Copiaré este manejador de clics desde el botón más, lo pegaré en este. Simplemente cambiaremos el valor que estamos pasando en dos. Entonces haremos lo mismo por los otros puntos de disminución lo, copiar el manejador de clics, pegarlo aquí, cambiar el número a dos. Y digamos que ahora ojalá todo sobre voltajes esté funcionando. Sí, podemos disminuirlo en uno y aumentarlo en uno. Estos no están funcionando. Es posible que solo necesites recargar de nuevo. Sí, eso no funciona. Podemos aumentar en dos y disminuir en dos también. Y también podemos ver los datos cambiando en DevTools. 58. Pinia: Getters: Getters nos permiten obtener un valor de nuestro estado y después modificarlo de alguna manera o generar algo basado en ese valor, luego devolverlo y ponerlo a disposición de cualquier componente que esté utilizando esta tienda, se puede pensar en nos consigue como el equivalente de gestión estatal de las propiedades computadas. Por lo que los valores de retorno de los getters se almacenan caché y solo se actualizan cada vez que cambian sus dependencias, siempre que cambien las propiedades de estado que los getters están utilizando. Así que vamos a crear un getter para dividir aquí impar o incluso, que actualmente está codificado en función del valor del contador, esta propiedad de recuento. Para empezar a sumar deudores, solo necesitamos otro objeto llamado getters. Por cierto, no importa en qué orden pongamos estos. Si lo prefieres, puedes poner a los getters tras estado y luego subastas en la parte inferior. Realmente no importa. Pero de todos modos, agreguemos un get-up que resuelve si este número es impar o par, y luego devuelve los textos impares o pares. Entonces crearemos un getter llamado impar o par. Esta debería ser una propiedad que nos fijamos a un método como este para acceder a nuestro estado, solo podemos pasar en el estado como parámetro en este método. Entonces para agarrar esta propiedad de conteo que está en el estado, solo podemos hacer recuento de puntos estatales. Queremos saber si esto es extraño o parejo. Así que de nuevo, usaremos el operador restante para hacer esto. Simplemente puede hacer si el recuento de puntos del estado resto dos es igual a 0. Es decir, si dividimos el conteo por dos y obtenemos el resto, y ese resto es igual a 0, entonces sabemos que el número es parejo para podamos devolver el texto, incluso. De lo contrario, podemos devolver la autonomía del texto. Es importante señalar que para que nos lleve a trabajar, sí necesitan devolver un valor. Así que guardemos esa recarga. Y deberíamos poder usar esto en nuestra página. Así que vamos a saltar a nuestra vista de casa dot Vue. Deshazte de esta impar slash. Incluso los textos son llaves dobles rizadas. Podemos simplemente hacer contra-punto impar o par. Ahorra eso. Y podemos decir que el contador es parejo, lo cambiamos a uno. Vemos que el mostrador es extraño. Si también estamos mirando herramientas dev, podemos ver a nuestros captadores aquí también, y podemos ver el valor de eso cambiando también. Otra ventaja de centavos sobre unas cuantas x, que no mencioné antes, es que no necesitamos especificar las acciones estatales de los getters cuando las estamos usando en nuestra plantilla o en nuestra sección de scripts. Entonces en una vista x arriba, tendríamos que hacer consejero dot state, dot title. Y luego cuando desencadenamos una acción, tendríamos que hacer acción contra puntos, disminuir el consejo, etc. En opinión Europa, no necesitamos especificarlos, lo que hace que nuestro código sea un poco menos verboso. 59. Pinia: Usa nuestra tienda en cualquier lugar: Ahora que nuestra tienda de opiniones está configurada, podemos usar las acciones estatales y nos lleva a cualquier parte de nuestra app. Vamos a usar esta tienda en nuestra página de posts para este contador. Este contador actualmente está utilizando el contador de uso composable que creamos anteriormente. Entonces vamos a quitar eso de esta página. Y toda la funcionalidad dinámica y enganchar los spots no son demasiado nuevos. Penny cuenta o tienda. Saltemos a esta página. Vistas y publicaciones view dot Vue eliminará esta importación del contador estadounidense, composable. Y también quita este const dondequiera agarra las cosas que estamos usando de lo composable. Y luego saltaré a la plantilla. Vamos a reemplazar este contador de datos de puntos cuenta con los innumerables en nuestra tienda. Entonces contador conteo de puntos. Y vamos a reemplazar este método aquí, aumentar contador a la mayor acción de contador que hay en nuestra tienda. Podemos simplemente cambiar esto para contrarrestar , punto aumentado contador. Ya que el método tiene el mismo nombre. Esta clase que estaba escupiendo en base a si el número es impar o par, solo podemos reemplazar este extraño o incluso con el getter que está en nuestra tienda. Entonces contrarresta punto impar o par. Así que vamos a cambiar eso cuenta punto impar o par, guarde esa recarga y tenemos un error aquí. ¿ Qué está pasando? El contador de propiedad es el acceso durante render pero no se definió en instancia. Vamos a desplazar hacia abajo. Nos olvidamos de importar nuestra tienda. Vamos a saltar a casa vista dot Vue. Copia esta línea de entrada donde estamos importando el taburete, pegarlo en la vista de postes, vista de puntos. Y entonces también necesitamos asignar esto a una variable. Así que voy a copiar esto desde casa view dot view, pegue eso aquí. Simplemente eliminaré ese comentario, guarde eso y deberíamos estar bien para ir. Entonces volvamos a cargar. El botón ahora está funcionando. Podemos decir en las herramientas dev está modificando los innumerables en nuestra tienda de opinión porque nuestra tienda de opinión es global. ELLOS. Cuando saltamos a la página de inicio, deberíamos ver que el conteo se establece en ocho. Lo es. Si aumentamos el contador aquí y saltamos de nuevo a la página de posts, podemos ver que el valor del contador siempre está actualizado independientemente de dónde estemos dentro de nuestra app. 60. Proyecto de clase: Noteballs de notas [Módulo 13]: Vamos a pasar el resto de este curso tomando todo lo que hemos aprendido para crear esta aplicación de toma de notas del mundo real llamada Nope balls, creando esto, pero permítanos tomar todo nuestro nuevo conocimiento de los fundamentos de la composición API y solidificar ese conocimiento con la creación de un mundo real fuera de cero. En esta app, podemos mostrar una lista de notas. Cada nodo tiene la nota sobre el número de caracteres y un botón de edición y eliminación. Podemos añadir una nueva nota. Podemos editar una nota, guardarla, y podemos eliminar una nota también con este modal de conformación. Y también tenemos un encabezado con enlaces lo largo de dos páginas, notas y estadísticas. Y tenemos esta página de Estadísticas donde mostramos estadísticas relacionadas con nuestras notas, incluyendo el número de notas que tenemos sobre el número total de caracteres de todas nuestras notas. También va a parecer presentable como se puede ver usando la biblioteca CSS bowler. Y también va a ser receptivo también. En escritorio tenemos estos enlaces a nuestras dos páginas, pero si escalamos esto hacia abajo, podemos ver todos los elementos escalados hacia fuera para móvil y nuestros enlaces en el encabezado cambiaron a este icono poco más grande. Y cuando hacemos click en eso, podemos ver los enlaces a nuestras dos páginas. Esta app va a hacer uso de casi todos los conceptos que aprendimos anteriormente en el curso, incluyendo ver router en las rutas de Estados Unidos y usar router composable. Esta vez realmente vamos a instalar Vue Router y configurarlo todo desde cero, se va a utilizar datos reactivos incluyendo refs y objetos reactivos va a utilizar métodos de propiedades computadas, y relojes va a utilizar componentes secundarios incluyendo apoyos, emite, y actualizar el valor del modelo va a utilizar refs de plantilla en composable, incluyendo composable personalizado en un componible de los pocos use biblioteca va a usar directivas y ganchos de ciclo de vida. Y vamos a configurar toda la gestión estatal de nuestra app usando centavos. Aunque esta vez realmente vamos a instalar penique a, configura nuestro penique una tienda completamente desde cero. Y por supuesto también estaremos agregando acciones estatales y un montón de getters a nuestro centavo una tienda. 61. Crea un proyecto: Vamos a crear una vista completamente nueva, tres proyectos para nuestras bolas de nota arriba. Vamos a saltar a la página web V3. Buscaré V3 bromeado a v3 punto Vue js.org. Y más temprano en el curso, te dije que los docs están a punto de ser renovados masivamente y tuve que cambiar la URL para llegar a los nuevos patos. Pero parece que los nuevos docs y nuestras vidas, sólo podemos saltar a instalar. Desplázate hacia abajo. Nuevamente, necesitamos no tener JS instalado. Lo que probablemente ya tenga eso instalado en este punto. Vamos a crear un nuevo proyecto de vista con este comando. Copia eso, salta a mi terminal y VS Code y un gamete puede cambiar esto con control y volver tick. Y me aseguraré de que estés en la carpeta donde guardas tus proyectos. Definitivamente no quieres ejecutar esto en la carpeta de proyectos anteriores si ahí es donde estás, lo pegaré y lanzaré eso. Escribiré y para aceptar instalar, Crear vista para el nombre del proyecto y la carpeta del proyecto. Voy a usar view dash composition API. No bolas. Podemos usar cualquier nombre de carpeta que te guste. Voy a elegir nodo a todas las opciones. No vamos a instalar rutas Vue a esta vez porque va a instalar eso desde cero en cambio todo desde cero. Entonces no, y de nuevo con centavos, vamos a poner eso todo desde cero. Entonces voy a elegir No, no, no. Es posible que quieras considerar usar yes Lynn en tus propios proyectos para ayudarte a garantizar la calidad del código. Pero por simplicidad, solo voy a elegir nota a esto. Y tenemos algunos pasos de lanzamiento aquí. Entonces solo necesitamos cd en la carpeta y ejecutar npm install para instalar las dependencias y luego ejecutar npm run dev. Y puedo ver aquí se crea la carpeta, composición API nope balls. Así que voy a arrastrar eso al Código VS. Y luego abre la terminal y ejecuta npm install. Entonces npm ejecuta dev para lanzarlo. Ahora podemos Command y dar click en este enlace y podemos ver la app básica ejecutándose en el navegador. Antes de empezar, sólo cambiemos el nombre que aparece ahí en la parte superior. Entonces voy a abrir el Explorer y ir a index.html. Acabo de cambiar el texto en estas etiquetas de título para anotar bolas. Guarda eso, y ahora estamos listos para empezar a crear bolas de nope. 62. Router instala y configuración: Si bien hay una opción en la herramienta de compilación solo usamos para agregar Vue Router a nuestro proyecto de forma automática. Es bueno saber cómo hacer esto manualmente solo en caso de que tenga alguno para agregar Vue Router a una vista existente. Tres proyectos que no lo tienen ya montados. Agreguemos el Router Vue a nuestro proyecto y consigamos que todo esté configurado. Entonces vamos a saltar a nuestra terminal y matar el proceso de muerte con control y digamos instalar Vue Router. Simplemente podemos ejecutar npm install Vue Router four para obtener la última versión de tu router que ahora está instalado. Podemos volver a lanzar nuestro proyecto con npm run dev, cerrar la terminal. A lo largo del router a nuestra API necesita saltar fuente y main.js. No podemos ser enrutados a nuestra aplicación importando el método Create Router desde Vue Router y agregarlo a esto crea una cadena con algunas opciones. En primer lugar, después de esta primera línea, necesitamos importar Create Router desde el router. Y ahora podemos usar este crear rutas o método para configurar nuestro router. Tenemos que asignar esto a una constante. Entonces crearemos una constante llamada router y asignaremos esto a eso. Queremos pasarle un objetivo con todas nuestras opciones de router. La primera opción que necesitamos agregar es el modo historia. Podemos establecer esto para crear historial web o crear historial de hash web. Ahora crear el historial web usará URLs reales en el navegador cuando navegamos por todas las páginas. Por ejemplo, si fuéramos a una página Acerca de que la ruta simplemente sería slash sobre. Mientras que con el historial de hash web, diremos slash luego hash, luego slash, y luego sobre cuando vayamos a nuestra página sobre, y voy a usar el historial de hash web aquí, porque cuando estamos usando este modo, no necesitamos ninguna configuración de servidor elegante para que nuestra aplicación se ejecute si decidimos implementarla en un servidor, vamos a establecer esta propiedad de historial para crear el historial de hash web. Tenemos que importar eso desde Vue Router VS Code se agrega automáticamente eso para mí aquí. Pero si el tuyo no tiene injusto, agrégalo a este impulso. La siguiente opción que necesitamos sumar es nuestras rutas. Creamos una propiedad llamada configuración de rutas a una matriz. Y podemos configurar todas nuestras rutas aquí. Pero antes de hacer eso, agreguemos esta instancia de enrutador a nuestra aplicación. Entonces después de esto, crea nuestra app, podemos agregar el método estadounidense a esta cadena dot use paréntesis, y solo podemos pasar esta constante de enrutador. Solo voy a romper esto en múltiples líneas y ahorrar eso. Vamos a asegurarnos de que no estamos viendo ningún error. Voy a recargar. Y creo que esta flecha podría ser simplemente porque aún no hemos establecido ninguna ruta. Hagámoslo a continuación. 63. Router añade algunas rutas: Vamos a configurar algunas rutas para nuestra app. Y nuestra app va a tener una vista de notas, nuestra página, y una vista de estadísticas. Vamos a configurar una ruta para nuestras notas ver primero. Bueno, antes que nada, vamos a necesitar un componente que podamos utilizar para esa vista de notas. Vamos a saltar de nuevo al Explorador de archivos y haremos clic derecho en la carpeta fuente y crearemos una nueva carpeta llamada vistas. Esto no tiene que llamarse puntos de vista. Podrías llamarlo páginas si quieres, pero lo voy a llamar vistas. Y vamos a crear un nuevo componente ahí dentro, y llamaremos a esta vista notas. No vea las etiquetas de plantilla. Por ahora, acabo de empezar un div con una clase de notas. Dentro de eso, una gran cantidad de H uno que acaba de decir notas y guardar eso. Y ahora podemos usar este componente para nuestra vista de notas. Saltemos a main.js y agreguemos una ruta para nuestra vista de notas. Para cada ruta en nuestra app, necesitamos agregar un objeto con algunas opciones. En primer lugar, necesitamos la opción de camino. Esto determinará qué camino nos llevará a esta ruta. Voy a establecer el camino para recortar seguir la vista de notas, lo que solo significa que esta será la ruta raíz de nuestra app cuando la primera visita estemos arriba, esta es la ruta a la que irá. También necesitamos agregar una propiedad de nombre. Estableceré esto en notas sobre esta propiedad name hace que sea más fácil para nosotros enviar al usuario a una ruta en particular mediante programación. Y por último, necesitamos agregar la propiedad componente que acabamos de establecer al componente que queremos utilizar para esta ruta. Entonces, antes que nada, necesitamos importar nuestro componente. Por lo que vamos a importar notas de vista desde vistas de barra inclinada, vista de barra inclinada notas vista de punto. Ahora en la vista anterior construye que usaban Webpack, no necesitábamos poner aquí la vista de puntos, pero cuando estamos usando VT, que estamos ahora que sí necesitamos adoptar vista. Y también esto en símbolo aquí. Esto es solo un alias que se refiere a esta carpeta fuente. Y este alias se está definiendo en este archivo vt dot config dot js. Podemos ver eso aquí. También puedes agregar tu propia introducción de alias a diferentes carpetas si lo deseas. Pero de todos modos, vamos a saltar de nuevo a main.js y ahora podemos establecer el componente para esta ruta. Estableceremos esto para ver notas. Vamos a guardar eso y recargar. Todavía tenemos un error aquí. Y acabo de averiguar cuál es el tema cuando establecemos el historial para crear el historial de hash web, esto necesita ser una llamada al método. Solo tenemos que agregar paréntesis al final de eso, salvo que la app esté funcionando de nuevo. No obstante, no podemos ver esta vista de notas que acabamos de crear en el navegador. Y eso es porque necesitamos agregar un componente de vista de enrutador a nuestra aplicación, a nuestro componente raíz app.vue. Y lo haremos en un minuto. Pero antes de que hagamos eso, acabemos de configurar una ruta para nuestra página de estadísticas. Así que vamos a saltar de nuevo a la carpeta vistas. Notas de vista duplicadas, vista de puntos. Llamaremos a esta vista estadísticas punto vista. Simplemente cambiaré la clase el día de dos arranques. Cambiaremos el texto en el rubro dos arranca también. Ahorra eso. Saltar de nuevo a main.js. Y agreguemos una coma después esta ruta y dupliquemos eso. Por cierto, lo hice al seleccionar estos textos y presionar Alt Shift y hacia abajo, el atajo podría ser diferente en su plataforma. Ahora vamos a deshacernos de esta coma aquí. Casi establece el camino para cortar estadísticas para que cuando vayamos a cortar, eso es lleguemos a las estadísticas. Cambió el nombre a parar también. Y ahora tenemos que configurar el componente para que pregunte a la vista de puntos, pero primero tenemos que importarlo. Así que duplicaré esta línea de notas de vista e importaremos estadísticas de vista de la vista de barra inclinada del arte, estadísticas vista de punto, y guardaremos eso. Ahora solo necesitamos cambiar este componente para ver estadísticas, digamos eso, pero aún no podemos ver en la vista de Notas en la página si vamos a la barra de ruta y no podemos ver la vista de estadísticas si vamos a el camino slash estadísticas. Y eso es porque necesitamos agregar un componente de vista de enrutador a nuestra aplicación. Hagámoslo a continuación. 64. Añade RouterView y navegación: Déjame ir a la barra de camino. No te vemos notas componente con este encabezado con las notas de texto. Y eso es porque necesitamos agregar un componente de vista de enrutador a nuestra aplicación es el componente de vista del router que determina dónde se mostrarán nuestras rutas. Así que vamos a saltar a nuestra fuente de componente raíz, app.vue. Y en realidad solo voy a eliminar esta sección de script, eliminar todo dentro de la plantilla, y eliminar la etiqueta de estilo y todos los estilos también. Ahorra eso. Y ahora también podemos eliminar todos los componentes en la carpeta de componentes de origen. Seleccionaré todo aquí, haga clic derecho y eliminaré. Vemos una flecha, pero si recargamos, entonces el error desaparece. Ahora para mostrar nuestras rutas, solo necesitamos agregar un componente de vista de enrutador. Y podemos hacer esto en el caso del guión como esta vista del router. Podemos hacerlo en el caso Pascal, que voy a hacer. Entonces vista del router, guarde eso. Y ahora podemos ver nuestra ruta de notas en la página. Y si vamos al camino slash estadísticas, podemos ver nuestra vista de estadísticas. Ahora usar la barra de direcciones para navegar no es muy divertido. Agreguemos algunos componentes de enlace de enrutador a nuestra página para que podamos navegar por encima de este componente de vista de enrutador. Voy a agregar un componente de enlace de enrutador dentro de eso, pondré las notas de texto y luego lo duplicaré. En éste, pondremos las estadísticas de texto para determinar a dónde irán estos enlaces del router. Podemos simplemente añadir un dos prop y configurarlo al camino que queremos ir demasiado lejos, la vista de notas, sólo podemos establecer esto para cortar. Y luego para la vista de estadísticas, solo podemos establecer esto para cortar estadísticas. Vamos a salvar eso. Apenas agreguemos espacio después de la primera y una tubería y luego otro espacio. Digamos que ahora podemos navegar por nuestra app. 65. Router alineación: Nuestro router ahora está todo configurado y funciona en. Pero antes de seguir adelante, vamos a ordenar un poco nuestro código. Entonces, antes que nada, solo voy a extraer todo nuestro código de configuración del router en su propio archivo en la carpeta fuente. Voy a crear una nueva carpeta llamada router. Ahí dentro. Voy a crear un nuevo archivo llamado index.js. Vamos a saltar de nuevo a main.js. Voy a usar una selección múltiple manteniendo presionado la tecla Alt. Aunque el atajo podría ser diferente en tu plataforma, voy a seleccionar todo este router, const las dos entradas para nuestra vista de notas y vista de estadísticas. Esta línea donde estamos importando el Create Router y los grandes métodos de historial de hash web desde Vue Router. Voy a cortar mucho y simplemente ordenar esto un poco. Y luego salta a index.js en nuestra carpeta del router, pega todo ese código en, y apenas comenzaremos una línea después de nuestras entradas. Y ahora queremos exportar esta instancia de router para ponerla a disposición de otros archivos. Entonces al final sólo podemos hacer exportar router predeterminado y guardar eso. Y ahora si volvemos a main.js, podemos importar esta instancia de enrutador agregando importación desde el router de barras. Y en realidad no necesitamos agregar slash index.js cuando usamos el nombre de archivo index.js, siempre buscará este archivo automáticamente. Por lo que sólo podemos hacer importar router desde el router de la slash. Y ahora cuando activamos usar router, estamos usando la instancia del router del archivo index.js en la carpeta del router. Salvemos eso y veamos si todo sigue funcionando. Todo sigue funcionando. Una cosa más, voy a saltar al index.js y voy a poner todas estas rutas en su antigua constante. Por lo que voy a configurar una constante llamada rutas. Establezca eso igual a una matriz. Entonces voy a cocinar estos dos objetos, pegarlos aquí. Y ahora sólo podemos establecer esta propiedad rutas, dos rutas. O como estos nombres son los dos mismos, sólo podemos taquigrafía esto a solo rutas. Así que vamos a guardar eso, asegurarnos de que siga funcionando. Aún así. Todavía está funcionando bien ahora lo hemos atado al archivo main.js. Moví todo el código relacionado con nuestro router a su propio archivo. 66. Bulma y diseño: Instala Bulma [Module 14]: Para ayudarnos a que nuestra perspectiva sea bonita, vamos a usar la biblioteca CSS Bulmer. Voy a saltar a Walmart.io. Ahora este no es un curso de CSS, así que no me voy a centrar en bulla y CSS hasta marzo. Simplemente lo usamos para ayudarnos a que nuestra perspectiva sea bonita sin tener que pasar toneladas de tiempo escribiendo exceso de CSS. Y de esa manera podemos enfocarnos puramente en Vue.js tres y en la API de composición. Además, no necesariamente estoy sugiriendo que debas usar Bulmer para tus proyectos. Deberías hacer una elección informada en función tus necesidades individuales de proyectos. No obstante, creo que bombardero es actualmente el tercer framework CSS más popular después de bootstrap, tailwind CSS. No obstante, he elegido bola para este proyecto porque es el framework CSS más fácil para empezar. Y tiene todos los componentes que vamos a necesitar para este proyecto. Si salto a documentación y componentes, tenemos este componente de tarjeta que vamos a utilizar, este componente Navbar que vamos a utilizar, el componente modal. Ahora vamos a usar, tiene un montón de componentes de granja que vamos a utilizar como esta entrada. Y también tiene un bonito componente de botón que vamos a usar también. Vamos a instalar bullet a nuestro proyecto. Voy a saltar a resumen y luego empezar a desplazarse hacia abajo. Y hay algunas formas en que podemos instalarlo. Podemos instalarlo usando un enlace CDN donde estará cargando externamente. Podemos descargarlo desde GitHub. Podemos instalar el paquete npm. Esta es la forma en que lo voy a hacer. Por lo que necesitamos ejecutar npm install Puma. Así que vamos a copiar eso. Abre nuestra terminal, mata el proceso de muerte y ejecuta npm install bulla. Y eso está instalado. Y si saltamos a nuestra carpeta de módulos de nodo, podemos decir que Bulmer está aquí. Y si saltamos a la carpeta CSS, podemos decir archivos CSS bola. Voy a usar la versión minificada, Bohmer dot main.css. Lo que también podríamos usar la versión minificada forma dot CSS. Voy a hacer clic derecho en bullet dot main.css. Da click en Copiar ruta que voy a saltar a app.vue. Voy a agregar una etiqueta de estilo para importar ese archivo CSS. Voy a sumar en Importación. Entonces pegaré en ese camino. Tenemos el camino completo en mi computadora aquí. Sólo necesitamos el camino de esta carpeta de bolos aquí. Entonces lo eliminaré todo antes de esa carpeta bullet. Tenemos que agregar un punto y coma al final. Digamos que necesitamos relanzar nuestra app. Vamos a ejecutar npm, ejecutar dev. Regresa a nuestra app. Podemos ver nuestros estilos ya han cambiado un poco, pero solo para asegurarnos de que Bulmer esté funcionando, agreguemos una clase a cada uno de nuestros componentes de enlace de router aquí de botón. Y esto debería darle a este un bonito estilo de botón. Ahorra eso. Podemos ver algunos bonitos botoncitos ahora, y ahora podemos empezar a usar Bohmer para que Kiara se vea hermosa. 67. Barra Naval: diseño: Agreguemos un bonito y hermoso navbar a nuestra app. Ahora en primer lugar, vamos a crear sólo un componente para él que se importará en app.vue. Y por alguna razón mi carpeta de componentes ha desaparecido. Pero deberías tener aquí una carpeta de componentes. Pero voy a crear esos componentes. Dentro de eso. Voy a crear una carpeta llamada Layout. No me gusta la forma en que los grupos VS Code son carpetas juntas como esta por defecto. Así que sólo voy a arreglarlo. Entraré en código y preferencias y ajustes, y voy a buscar compactos. Podríamos simplemente desmarcar esta opción de compilar carpetas. Y ahora tenemos aquí un sistema de carpetas normal. Dentro de la carpeta de diseño. Voy a crear un archivo llamado navbar dot view. Por ahora solo comenzaremos las etiquetas de plantilla. Simplemente agrega un div con mi barra de navegación, el texto. Ahora vamos a saltar a app.vue e importar este componente scripts Up tags. Voy a añadir aquí un comentario de bloque que solo dice importaciones. Entonces vamos a importar barra de navegación de componentes de barra inclinada diseño barra barra suficiente vista de punto de barra. Yo uso estos grandes comentarios para dividir mi código en secciones. Acabo de encontrar que me hace mucho más fácil escanear a través de mi código. Bueno, esto es totalmente opcional. No necesitas agregar estos comentarios si no quieres. Ahora vamos a pegar este componente Navbar en la página. Voy a deshacerme de estas rutas de vista piernas por ahora y acaba de salir nuestra navbar. Vamos a salvar eso. Y podemos decir mi navbar en la página. Ahora vamos a saltar al sitio de la calvicie y vamos a ir a Componentes. Navbar, desplázate hacia abajo, estirar esto un poco, y sólo vamos a copiar este ejemplo aquí para una barra de navegación básica y luego vamos a modificarlo. Entonces voy a copiar todo este código. Mueve esto hacia atrás, y luego saltaremos a Navbar vista de puntos, pegarla todo aquí, sangrar eso y guardar. Y ahora podemos ver navbar. Sólo voy a alejar un poco. Quiero terminar en un bonito color verde en lugar de blanco. Y podemos hacer eso agregando una clase a este elemento NEF cuándo dividir los atributos en eso usando la extensión de atributos HTML divididos que instalamos anteriormente. Mucha clase de éxito, salvo eso. Ahora tenemos una bonita Napa verde. Y de nuevo, no voy a estar explicando todas estas clases desde balas mucho porque quiero estar enfocado en la vista y en la composición API tanto como sea posible. Pero puedes encontrar todas estas clases disponibles en el sitio. Por ejemplo, para esta barra de navegación desplegable, dos colores te muestran cómo agregar todos estos diferentes colores aquí. 68. Barra de Nav, navegación y logotipo: Personalicemos esta barra de navegación. En primer lugar, quiero deshacerme de este Más enlace aquí con este desplegable. Desplazemos hacia abajo suficiente vista de Bardot y veamos si podemos encontrar eso. Podemos ver ese enlace más aquí. Y podemos ver este div con una clase de navbar. Vamos a colapsar ese div, solo deshazte de él. Salva eso y vemos que desaparecen. Ahora vamos a mover estos dos enlaces hacia el lado derecho. Así que voy a desplazarse hacia arriba en estos dos enlaces de elementos navbar aquí. Voy a cortarlas y acabo de deshacerme de este navbar dash stop Dip. Voy a pegar esos enlaces en esta navbar end div, que los pondrá a la derecha. Vamos a colapsar este dip dentro de eso, no por artículo, y deshacernos de eso. Simplemente pegaré en los enlaces que cocinamos antes y guardaré eso. Hagamos estos enlaces dos notas ver y nuestro personal ver. Sólo voy a quitar la segunda barra de laboratorio I2. Ahora en este primero, voy a cambiar esto a un componente de enlace de enrutador. Se asegura de cambiar tanto las etiquetas de apertura como de cierre que voy a dividir los atributos en esto, cambiar el texto a notas. Tengo mucho que apuntalar a este enlace del router, conformarme con la barra de ruta, que es donde nuestros routers de notas. Y luego seleccionaré este enlace del router, lo duplicaré. Y cambiaremos los dos prop a las estadísticas de barra de ruta, y cambiaremos el texto para empiece también y guardaremos eso. Ahora tenemos enlaces a nuestra página de notas y paradas. Podemos ver este rubro de citas. Paula tiene una clase que está activa, que no podemos a uno de estos elementos navbar para que parezca activo. Se puede ver este enlace ahora se ve activo. Estos componentes de enlace de rutas pueden realmente agregar una clase al enlace cuando ese enlace es el enlace activo. Si acabo de atrapar esa clase, sólo podemos agregar un prop de clase de dash activo, configurarlo en. Esta clase es octava, y también copiaré eso y lo pegaré al enlace de estadísticas. Decir que ahora deberíamos tener lugares activos en nuestros enlaces. Y sí, eso está funcionando. Ahora vamos a reemplazar esta bomba un logotipo por un título para nuestra app. Me desplazaré hasta arriba y dentro de este navbar marca div, tenemos este ataque con una clase de elemento navbar. Voy a quitar la imagen que está dentro de eso y quitar esta H ref. No quiero cambiar esto una etiqueta en un div porque no quiero que esto sea un enlace. Y luego dentro de eso solo agregaré los textos nope bolas. Y guarde eso para mejorar el estilo del texto aquí, vamos a sumar una clase a este día de, de talla cuatro para que sea un poco más grande. Y luego una clase de monoespacio familiar para darle esta fuente de estilo monoespacial. Y de nuevo, puedes encontrar todas estas clases en el sitio del bolo, que está muy bien documentado. 69. Barra de nav, diseño y menú responsivo: Ahora actualmente el contenido de esta barra de navegación seguirá estirándose a medida que el navegador se vuelve más amplio y ancho, lo que no se ve demasiado genial, especialmente en pantallas realmente grandes. Tenemos el logo justo por aquí y luego estos enlaces justo por aquí. Me gustaría que todo esto se limitara en el medio después de cierto punto. Y podemos usar elementos de contenedor deshuesados para hacer esto. Entonces voy a rodear todo dentro en navbar con un div, con una clase de contenedor. Así que acabo de minimizar todo lo que hay ahí dentro. Mucho div con una clase de contenedor. Y para asegurarnos de que limite una vez el navegador sea más ancho que un cierto número de píxeles, podemos agregar una clase de is dash marks, dash desktop. Y estas clases están todas documentadas en el balón de la vista. Y entonces solo voy a mover esta marca navbar, este menú navbar a ese div y guardar eso. Y ahora podemos ver unas pantallas más grandes. Todo está limitado a la mitad de la página. Ahora si nuestra vista se pone por debajo de 100 a cuatro píxeles, vemos que los enlaces de navegación desaparecen y vemos esto, el viejo icono del mendigo, pero no pasa nada cuando hacemos clic en él. Eso es porque para mostrar el menú móvil y cambiar este ícono a su estado activo, necesitamos agregar una clase de activo tanto al ícono de la hamburguesa como al menú nav también. Ahora todo esto está documentado en la página navbar. Pero sólo para demostrar esto, vamos a codificar esas clases en. Ahora, voy a dividir los atributos en esto una etiqueta con una clase de navbar grande. Voy a sumar una clase de activo y guardar eso. Y podemos ver el icono cambiar a una X. Y si nos desplazamos hacia abajo a este menú navbar div, también voy a dividir los atributos en eso mucho la misma clase a este div. Se ahorra eso. Y ahora podemos ver aparecer el menú móvil. Vamos a configurar un href para cambiar estas clases. Cuando hacemos clic en el menú de hamburguesas, voy a quitar estas clases codificadas por ahora del menú navbar div en el navbar Berger una etiqueta, decir que a menos que salte hacia abajo a nuestra sección de script, que no existen todavía. Así que vamos a crearlo configuración de Scripts. Lote de comentario de bloque que dice nav móvil. Casi configura una constante llamada Show Mobile Nav. Establezca eso igual a un href con un valor inicial de false. Esto es falso. No mostraremos la siesta móvil cuando sea verdad, mostraremos y necesitamos importar el método ref desde la vista. Así que sólo voy a añadir un comentario rápido aquí. Las importaciones importarán ref desde la vista. Ahorra eso. Ahora agreguemos condicionalmente esas clases basadas en este href. Así que saltemos primero al ícono de la hamburguesa, que está aquí con una clase de hamburguesa navbar dash. Ahora vamos a enlazar al atributo de clase agregando llaves rizadas de clase de colon, y muchas clases, el guión de A activo. Pero sólo cuando Show Mobile Nav es cierto. Y luego copiaré esto y también lo agregaré a este div con una clase de menú de guión navbar. Y lo guardaré. Ahora si saltamos a nuestro ref y cambiamos el valor a true, entonces ahora podemos ver el nav móvil en la versión activa del ícono de la hamburguesa. Así que vamos a volver a poner eso a falso. Cambiará el valor de este href. Cuando hacemos click en el menú de hamburguesas, saltaremos hasta la etiqueta de hamburguesa navbar y agregaremos un manejador de clics. Y cuando hacemos click en esto, vamos a establecer Show Mobile Nav igual al opuesto de Show Mobile Nav. Si es falso, lo pondremos en true. Y si es cierto, lo vamos a poner en falso porque esta es una etiqueta va a intentar ir a algún lugar cuando le pinchemos. Entonces para evitar que eso suceda, solo voy a añadir un modificador de punto prevenga. Esto evitará que el comportamiento predeterminado del elemento que estamos haciendo clic en el comportamiento predeterminado de una etiqueta es ir a otra página. Salvemos eso y veamos si eso está funcionando. Da click en el botón y vemos aparecer el nav móvil. Haga clic de nuevo y lo vemos desaparecer. Ahora, no me gusta el hecho de que nuestro menú móvil esté empujando hacia abajo el contenido de nuestra página. A ver cómo está empujando este rumbo ahora, preferiría que solo estuviera posicionado absolutamente sobre la parte superior de nuestra página. Apenas agreguemos un poco de estilo para que eso suceda. Desplazemos hacia abajo hasta la parte inferior de la etiqueta de estilo. Mucha consulta de medios aquí para medios móviles, ancho máximo 1023 píxeles porque es cuando los estilos de navegación móvil inician cuando bajamos el navegador. Ahora queremos apuntar en suficiente menú inferior, que es este div con una clase de menú navbar. Así que solo voy a agregar guión, menú de guión, configuración para posicionar absoluta y establecer la izquierda en 0 y establecer el ancho al 100%. Guarda ese clic en el botón. El menú móvil ahora se coloca sobre la parte superior de nuestro contenido en lugar de empujarlo hacia abajo. 70. Páginas (diseño): Antes de empezar a trabajar en el diseño de nuestra página de notas, la página principal en nuestra app. En primer lugar, me gustaría limitarme el contenido de todas nuestras páginas. También agregaré un poco de relleno porque ahora mismo podemos ver el contenido de nuestras páginas está justo arriba en la esquina sin relleno. Y también una constante siempre está justo encima a la izquierda. Independientemente de lo ancho que sea el navegador, que no se ve demasiado bonito. Solo voy a usar las mismas clases que usamos para frenar el contenido en nuestro contenedor Napa y son las clases de escritorio de Mac. Y así para hacer esto, voy a saltar a nuestra app.Vue. Simplemente rodear nuestra vista de enrutador en un div con estas clases. Por lo que el contenedor es max desktop. Simplemente mueva la vista del enrutador a eso y guarde eso. Podemos decir que nuestro contenido ahora está limitado. Bona tiene algunas clases de relleno que podemos usar para agregar un poco de relleno alrededor de nuestras páginas también. Y todos estos están documentados en el balón deben citar muchas clases de Px dash T2 para agregar algún relleno horizontal y luego un racimo de P, guión cuatro para agregar algún relleno vertical. Esto se ve bien ahora en pantallas más pequeñas, pero en pantallas más anchas, nuestro logotipo no está alineando con nuestro contenido. Creo que se vería mejor si esto se alineó. Así que agreguemos un poco de relleno a nuestra barra de navegación también. Simplemente voy a hacer navbar dot view y luego este contenedor div que agregamos. Y mucho clásico PX. Eso se ve bastante bien. Ahora, vamos a dar a todas nuestras páginas un sutil color de fondo que coincida con el color de nuestra barra de navegación. Entonces voy a saltar al Explorador de archivos y abrir index.html. Voy a agregar una clase a nuestro elemento HTML. Bomber tiene clases de tonos de color que podemos usar, y todas están documentadas en el lado palmar. Bueno, voy a usar la clase tiene fondo, guión, éxito, luz de guión. Ahorra eso. Ahora tenemos este bonito color verde social en el fondo de todas nuestras páginas. 71. Notas (diseño): Ahora vamos a crear el diseño para nuestras notas usando el componente de tarjeta de bolo. Voy a saltar al sitio de audacia e ir a Componentes y cortar nuestra pantalla completa esto un segundo, no quiero desplazarse hacia abajo este ejemplo aquí, que tiene estos botones en la parte inferior, que podemos usar para agregar la capacidad editar y eliminar una nota. Voy a copiar este ejemplo aquí haciendo clic en copia. Y luego saltaré de nuevo a anotar bolas. Vamos a añadir esto a nuestra vista de notas. Por lo que vamos a ir a Vistas de fuente y ver las notas no se ven. Y voy a pegar eso dentro de este div sobre la parte superior de éste. Se sangró un poco y guarde eso. Y voy a deshacerme de esta cabecera en la parte superior. Entonces ese es este elemento de cabecera aquí. Así que nos libraremos de eso, guarde eso, y solo voy a habilitar el wrap de palabras por defecto. Entonces voy a ir al código y preferencias y configuraciones, buscar el wrap de palabras y ponerlo en encendido por defecto, eso es mejor. Ahora voy a deshacerme de todo dentro de este div con la clase de contenido. Así que deshazte de eso. Espe algo de Lorem solo escribiendo en lorem y luego golpeando Enter. Deberías ver esta abreviatura Emmet. Ahorra eso. Simplemente me deshago de este botón de guardar porque sólo vamos a necesitar una edición en el botón eliminar. Guarda eso, y vamos a ver cómo se verá esto con múltiples cortes en. Un truco rápido para hacer esto es simplemente agregar un v4 al div padre. Entonces antes de entonces sólo podemos hacerlo, acabo de escupir tres de estos. Y se puede ver necesitamos un poco de espacio entre cada nota. Así que mucha clase a este div con una clase de tarjeta de M, margen beta, tablero inferior. Ahorra eso. Estos se ven bastante bien. Vamos a asegurarnos de que se vean bien en una pantalla grande o en una pantalla pequeña? Sí. Bastante bueno. 72. Añadir formulario de nota (diseño): Empecemos a caer a lo alto de nuestra vista de notas con un área de texto en un botón que podemos usar para agregar una nueva nota. Por lo que de vuelta al sitio del molino de bolas y vamos a ir a formar y general. Voy a desplazarse hacia abajo para completar muestra agrícola, mostrar el código. Todo lo que voy a agarrar aquí es desde esta área de texto hasta estos botones. Así que desplácese hacia abajo el código que tiene un área de texto. Y sí queremos este div con una clase de campos que lo rodeen. Entonces seleccionaré de ahí a esta profundidad aquí abajo con los dos botones dentro de ella. Copiar eso. Pega esto por encima de nuestras notas. Todavía está dentro de este div con una clase de notas. Voy a pegar eso aquí, sangrar un poco y guardar eso. Ahora voy a quitar esta etiqueta aquí con el mensaje de texto que está aquí. Así que deshazte de eso. Y voy a deshacerme de esta casilla de verificación aquí a este div con una clase de campo. Entonces nos libraremos de eso, nos libraremos de estos dos botones de radio, que es este div aquí. Ahorra eso. Ahora voy a rodear el área de texto y los botones en un componente de tarjeta con un color de fondo. Así que voy a pegar que va a emparejar. Por lo que mucho div con una clase de tarjeta para darle un color de fondo, agregaremos una clase de tiene éxito de fondo Doc. Voy a seleccionar estos dos divs con una clase de campo, cortarlas, pegarlas dentro de este div, guardar eso, necesitamos agregar un poco de relleno aquí. Entonces vamos a sumar una clase de P dash cuatro, darle un poco de relleno y necesitamos un poco de margen en la parte inferior. Entonces muchas clases, MBA, margin-bottom, dash f5, salvo eso. Ahora voy a quitar este botón de cancelar. Por lo que eliminaré este div con una clase de control la cual tiene el botón de cancelar dentro de él. Ahorra eso. No quiero tirar de este botón hacia el lado derecho. Se puede hacer eso agregando una clase de is dash, dash, derecho a este día de la clase de campo. Ahorra eso. Y quiero cambiar el color y el texto de este botón. Sólo voy a dividirlo en múltiples líneas y cambiaré el texto dentro de él por nuevas notas. Digamos que cambiaremos el color de fondo agregando una clase de tablero de casa, fondo, guión, éxito, salvo eso. Por último, cambiemos el Marcador de posición en esta área de texto. Y de hecho, voy a cambiar esto en una etiqueta de autocierre como esa. Dividir los atributos y vamos a establecer el placeholder a nueva nota, salvo que esto se vea bastante bien en el escritorio. Luciendo bastante bien en el móvil también. 73. Array de notas (Ref) [Módulo 15]: De acuerdo, Así que nuestra página de notas se ve bastante guapo abajo hermosa. Ahora hagamos que esto funcione realmente agregando algunos datos y métodos. También vamos a convertir esta nota en un componente hijo. Vamos a agregar una propiedad calculada para mostrar el número de caracteres en cada nota. Y también vamos a configurar un evento personalizado usando emit. Bueno, en primer lugar, vamos a configurar un href donde podamos almacenar una lista de notas a la vista, notas vista de punto. Voy a desplazarse hacia abajo hasta la parte inferior y agregar nuestras etiquetas de configuración de script. Voy a crear aquí un comentario de bloque que diga notas, establece una constante llamada notas, establece eso igual a un href. Necesitamos importar este método ref. Por lo que muchos otros bloques comentan aquí que dice importaciones. Y de nuevo, estos comentarios son opcionales. No es necesario agregarlas si no quieres. Necesitamos importar ref desde la vista. Ahora vamos a configurar nuestra matriz de notas. Entonces pasaremos una matriz a este href. Cada elemento de la matriz será un campo de ID permitido de un objeto. Simplemente lo estableceremos para agregar mucho campo conceptual para el contenido de la nota. Voy a meter un poco de lorem ahí. Por alguna razón M, no está funcionando en este momento. Simplemente copiaré este Lorem de una nota codificada. Pega eso ahí. Mucha coma después de este objeto. Duplica las notas, deshazte de esta coma, establece el ID en id2. Simplemente cambiaré el texto de éste. Esta es una nota más corta. Nosotros ahorramos eso. Ahora vamos a mostrar estas notas en nuestra página usando una directiva V4. Ya tenemos una directiva V4 en este div con la clase de tarjeta que estamos usando para nuestras notas. Por lo que sólo voy a cambiar esto para ser para anotar en notas. Entonces usaremos notas como nuestro placeholder mientras recorremos estas notas o escribimos. Para configurar aquí. También necesitamos agregar una propiedad clave. Casi establece esto para señalar que este k siempre es único. Yo lo guardaré. Y ahora podemos ver dos notas en nuestra página. Y sólo tenemos que dar salida a nuestro contenido, que va a estar fuera notas dot content. Seleccionaré este texto aquí en esta tabla, la clase de contenido o llaves dobles rizadas. Y luego nota el contenido de puntos. Ahorra eso. Recargar. Ahora podemos decir notas A2 en la página que ahora vienen de nuestra matriz de notas. 74. Añadir un método de nota: Vamos a configurar un método de notas de anuncio que se dispara después de escribir algo en esta área de texto y hacer clic en el botón, que luego agrega esta nueva nota a nuestra matriz de notas, las que lo muestran en la página. En primer lugar, vamos a configurar un href, que podemos vincular a esta área de texto para que en realidad podamos tener acceso al contenido que el usuario ha escrito. Por encima de nuestra matriz de notas, voy a configurar una nueva columna llamada New Note. Establezca eso igual a un href con un valor predeterminado de una cadena vacía. Ahora vamos a encontrar esta constante a nuestra área de texto. Por lo que nos desplazaremos hasta el área de texto que está aquí. Fuera de la directiva modelo V. Ponga eso a nueva nota. Ahorra eso. Ahora si escribimos algo en este valor href, pulsa Guardar eso. Ya lo podemos ver en el área de texto. Vamos a volver a poner eso en una cadena vacía y guardarla. Ahora vamos a configurar un método que se dispara. Cuando hacemos click en este botón, saltaré al botón Añadir nueva nota, que está aquí. Dividiré los atributos en la etiqueta de apertura. Añadir un manejador de clics. Click activará un método llamado agregar notas. Y ahora necesitamos crear este método. Así que nos desplazaremos hacia abajo después nuestra configuración de matriz de notas este método const note es igual a una función de flecha. Por ahora, solo cerraré la sesión de la nota del anuncio, guarde eso. Abre la consola. Haga clic en este botón. Podemos decir que este método está siendo disparado porque podemos ver que este registro está siendo despedido. Ahora no queremos que el usuario pueda hacer click en este botón si el área de texto está vacía, porque de repente sólo se va añadiendo un nodo vacío. Desactivemos este botón cuando no haya nada en esta área de texto. Vamos a saltar a este botón, que está aquí. Podemos simplemente enlazar al atributo disabled y agregar condicionalmente este atributo disabled a la parte inferior. Sólo queremos agregar este atributo. Esta nueva nota, href es una cadena vacía. Para hacer eso simplemente no podemos hacer nota nueva. Porque si esa cadena está vacía, contará como un valor 0 o un valor falsy. Así que vamos a salvar eso. Ya podemos ver que este botón está deshabilitado. No podemos hacer clic en él. Y si tocamos algo, ahora podemos hacer clic en él. Ahora trabajemos en nuestro método de notas. En primer lugar, necesitamos un objeto con un ID y una propiedad de contenido con las propiedades conceptuales establecidas al contenido que se encuentra en el área de texto. Y luego empujar el objeto a estas notas tienen razón. Deberíamos entonces ver las notas en la página. Primero, vamos a configurar este objeto. Voy a crear una variable llamada nota. Establezca eso en un objeto. Y vamos a necesitar una propiedad de identificación. El concepto de propiedad. Ahora el concepto de propiedad que sólo podemos agarrar de esta nueva nota, href, que está enlazada al área de texto. Podemos simplemente establecer esta propiedad de contenido dos. Nuevo Nota valor de punto. Ahora para el ID, necesitamos algo único. Si lo desea, podría usar un paquete para generar un ID único. Uuid. Sólo voy a Google UUID npm. Usualmente uso esta versión UUID para el paquete. Puedes usar eso si quieres. Pero solo por simplicidad, solo voy a usar la marca de tiempo en milisegundos a partir de la fecha actual para generar este ID por encima de este objeto, primero voy a agarrar la marca de tiempo actual, así que sólo podemos hacer nuevo paréntesis de fecha. Y esto agarrará la fecha actual como objeto de fecha. Y luego para convertir eso en una marca de tiempo en milisegundos, solo podemos agregar punto, consigue tiempo, paréntesis. Y ahora voy a asignar esto a una variable. Por lo que sólo podemos hacer, vamos a la fecha actual es igual. Ahora esto realmente devolverá un entero. Voy a convertirlo en una cadena porque estamos usando cadenas aquí. Voy a configurar otra variable llamada ID. Casi establece eso igual a la fecha actual. Dot dos cadenas para convertir ese número en una cadena. Si queremos un tiro esto un poco, podemos deshacernos de la palabra dejar un poco una ley sangría. Simplemente no soy una coma. Después de la primera variable. Ahora podemos simplemente establecer esta propiedad ID a esta variable ID que configuramos aquí así como una taquigrafía ya que estos nombres son ambos iguales, solo podemos establecer esto a ID así. Ahora vamos a cerrar la sesión de esta nota y asegurarnos de que esto esté funcionando. Consola. Notas de registro de puntos. Ahorra eso. Añadamos un poco de texto aquí. Haga clic en el botón. Podemos ver que este objeto está siendo bloqueado. Sí, podemos ver la propiedad del contenido y también podemos ver el ID, que se ha generado. Con base en la marca de tiempo de la fecha actual. Ahora todo lo que tenemos que hacer es empujar este objeto a anotar. Por lo que aquí mismo deberíamos ver la nueva nota en la página. Para obtener acceso a estas notas, href, simplemente podemos hacer el valor de punto de no. Simplemente podemos hacer nota valor stop. Entonces para empujar este objeto a la matriz, solo podemos hacer push dot. Entonces nota. Salvemos eso y veamos si eso está funcionando. Voy a escribir una nota nueva. Haga clic en el botón. Sin embargo podemos ver la nota agregada a la página. En realidad tiene sentido que nuestra última nota esté en la parte superior de la lista. En lugar de empujarlo lo descambiará, lo que básicamente sólo lo pegará al inicio de los derechos que al final de la matriz, simplemente cambiaré la palabra push a on, minúsculas en turno. Ahorra eso. Y intentemos eso otra vez. Sí, eso está funcionando ahora. Lo está agregando a la parte superior. Ahora después de sumar las notas, podemos ver que el área de texto todavía tiene el mismo contenido en ella que acabamos de agregar. Como nota, vamos a borrar esta área de texto después de agregar el nuevo nodo simplemente estableciendo esta nueva nota href, que está enlazada al área de texto de nuevo a una cadena vacía. Por lo que sólo podemos hacer nueva nota, el valor es igual a cadena vacía. Veamos si eso está funcionando. Haga clic en el botón. Podemos ver que el área de texto se vacía. También podríamos usar una plantilla ref, para reenfocar esta área de texto después de agregar la nueva nota también. Para que el usuario pueda agregar fácilmente otra nota de inmediato sin tener que hacer click en esta área de texto. Vamos a saltar a los elementos del área de texto aquí. Mucho ref. Voy a poner eso a nueva nota ref. Ahora podemos usar este href para enfocar esta área de texto después de agregar la nueva nota. Así que vamos a saltar de nuevo a nuestro método add notes. El fondo aquí, solo podemos hacer nueva nota ref, valor de punto para agarrar el elemento de área de texto real. Y entonces sólo podemos hacer punto focus. Esto esperemos enfocar el área de texto después de agregar la nueva nota. Vamos a guardar eso y recargar. Asegúrate de que eso esté funcionando. Hola. Añadir unas notas nuevas. Esto no ha funcionado. Nueva nota ref no está definida. Simplemente desplázate hacia arriba y revisemos el href que agregamos. Ya sabes, href. Necesitamos realmente configurar un dato antes de poder utilizar esta plantilla ref. Después de esta nueva nota const, vamos a agregar otra columna establecida a nueva nota, HREF, establecer eso igual a f con un valor inicial de null. Ahorra eso. Y volvamos a recargar. Hola ahí. Haga clic en el botón. Eso parece haber funcionado. Ahora hemos agregado las nuevas notas. Hemos despejado el área de texto, y enfocamos el área de texto. 75. Componente de niños: nota: Este componente de notas de vista se está volviendo bastante largo. Ahora, vamos a estar agregando algo más de funcionalidad a cada nota individual, como mostrar el número de caracteres, mostrar un modal cuando se hace clic en el botón de borrar y enviar el usuario a la página de edición cuando se hace clic en el botón Editar. Entonces antes de que este componente de notas de vista se vuelva demasiado desordenado, vamos a crear un componente hijo para una nota individual. Voy a saltar al Explorador e ir a los componentes fuente. Vamos a crear aquí una nueva carpeta para todos los componentes relacionados con nuestras notas. Llamaremos a esto notas. Dentro de eso crearé un nuevo archivo llamado etiquetas de plantilla de vista de puntos. Y voy a saltar de nuevo para ver notas vista de punto. Casi selecciona todo este div con una clase de tarjeta que está mostrando nuestra nota. Sólo copia eso. Pega en las etiquetas de plantilla. Arreglar la sangría. Simplemente eliminaré el V4 y los atributos clave. Ahorra eso. Ahora vamos a saltar de nuevo a ver las notas vista de punto, e importar este componente. En nuestra sección de entrada, vamos a hacer importar notas de componentes de slash, notas de slash, nota de slash, dot Vue. Ahorra eso. Ahora vamos a desplazarnos hasta este div con la clase de tarjeta, donde estamos mostrando la nota anterior que usaremos nuestro componente de nota en su lugar. Así que tenga en cuenta, si podemos hacer de esta una etiqueta de autocierre, mueva la etiqueta de cierre a una nueva línea. Ahora solo podemos copiar la directiva VFR y la propiedad, pegarla en este componente de nota. Ahora solo podemos deshacernos de este div con una clase de tarjeta completamente. En guardar esa recarga. Vemos un error aquí, no se pueden leer propiedades de contenido de lectura indefinida en nuestra app está roto. Y eso es porque en la vista de punto de nota en nuestra plantilla, estamos tratando de acceder a esta nota objetos y a esta propiedad conceptual desde los objetos. Bueno, este objeto nodo no existe dentro del contexto de estos componentes de vista de puntos de nota. Tenemos que pasar esto hacia abajo desde las notas de vista vista punto vista, hacia abajo para anotar vista de punto usando un prop. 76. Propósitos (Nota): Vamos a pasar por los objetos de notas, que estamos usando como titular del lugar en nuestro bucle V4 aquí. Abajo desde la vista las notas no se ven hacia abajo para anotar la vista de punto. Por lo que esa nota dot Vue tiene acceso a anotar contenido de puntos. No ves componente de nota aquí. Lote de prop llamó notas y establece que igual a anotar en guardar eso. Ahora si saltamos a anotar punto view, necesitamos recibir ese prop. Necesitamos agregar scripts, etiquetas de configuración, mucho comentario de bloque, que dice apoyos. Ahora ¿recuerdas cómo inicializamos nuestros apoyos? Eso es correcto. Creamos una constante llamada props. Nos fijamos eso igual para definir los apoyos. Podemos pasar nuestras indicaciones aquí, ya sea una matriz o un objeto. Voy a usar un objeto para ello. Vamos a recibir una prop llamada nota. El apretado va a ser un objeto. Definitivamente necesitamos este prop para que nuestro componente se renderice correctamente. También debemos agregar requerido para hacer de este un prop requerido. Ahorra eso. Y ojalá esto debería estar funcionando. Ahora, voy a recargar todavía Todo es trabajo. Y de nuevo, podemos ver nuestro contenido de nota correcta viniendo de la matriz de componentes padre aquí. Vamos a asegurarnos de que aún podamos añadir una nueva nota. Todavía podemos sumar una nueva nota. 77. Computado (la longitud de la Nota): Agreguemos una propiedad computada que muestre el número de caracteres que hay en cada nota debajo del contenido de la nota. Primero, vamos a montar la maqueta. Así que la vista de punto de nota final debajo donde estamos escupiendo el contenido, voy a agregar un div. Y luego dentro de eso vamos a añadir una pequeña etiqueta. Por ahora, solo pondré los textos XXX caracteres. Ahorra eso. Podemos ver eso en la página. Para mover este texto hacia la derecha, voy a agregar una clase al div de dash. Derechos de Dash para darle al texto un color gris claro, voy a añadir una clase de texto, salpicar gris luces Dash, guardar eso. Al menos las clases son de bola en el documentado en ese sitio web. Y solo para agregar un poco de margen en la parte superior, muchas clases vacías para margen top dash para ahorrar eso, ahora en realidad no necesitamos una propiedad computada para mostrar el número de caracteres. Podríamos simplemente hacer dobles llaves rizadas y luego notas, contenido de puntos, longitud de punto. Ahorra eso. Podemos ver que funciona. No obstante, quiero usar una propiedad computada en algún lugar de nuestra app solo para recordarnos cómo configuramos estos, eliminemos note dot content dot length. En cambio, crearemos una propiedad computada llamada longitud de caracteres, que muestra aquí el número de caracteres de la nota. Vamos a desplazarse hacia abajo y configura esta propiedad computada llamada carácter como. Ahora, ¿recuerdas cómo hacer esto? Si lo desea, puede pausar el video y ver si puede tener esto por su cuenta. ¿ Lo lograste? Si no, no te preocupes. Entonces para agregar una propiedad computada, antes que nada, necesitamos importar el método computado desde la vista. Por lo que muchas entradas, comentar, voy a importar computado desde la vista. Y saltaré al fondo. No sé el comentario de bloque que dice que longitud del personaje establece aquí una propiedad computada. Queremos llamar a este carácter longitud, va a crear una constante llamada longitud de carácter. Vamos a establecer eso igual al método computado, y luego pasaremos otro método a este método. Ahora todo lo que tenemos que hacer aquí es devuelto algo. Queremos devolver la longitud de la propiedad conceptual, que es en esta nota prop que estamos pasando hacia abajo desde las notas de vista vista vista punto. Recuerda cuando estábamos en sección de script para acceder a un prop, sí necesitamos usar estos apoyos. Objeto. Para acceder a esta nota prop. Podemos simplemente hacer indicaciones puntonota. Entonces para acceder al concepto de propiedad dentro de eso, solo podemos hacer contenido de puntos. Queremos recortar la longitud de eso. Queremos devolver esto. Por lo que sólo podemos agregar retorno a la acción. Ahorra eso, recarga. Esto parece estar funcionando. No obstante, una cosa que podrías notar es si creamos una nota pero solo tiene un carácter, entonces todavía dice uno de los personajes. Sería mejor que dijera un personaje. Podemos adaptar nuestra propiedad computada para escupir esta palabra también. Basado en el número de caracteres. Voy a saltar a nuestra propiedad computada. Antes de hacer eso, déjame saltar a nuestra plantilla. Quita aquí los caracteres de la palabra y ahora sólo vemos el número. Vamos a desplazarse hacia atrás hacia abajo hacia nuestra propiedad computada antes de devolver el valor, voy a configurar una variable llamada descripción. Y vamos a establecer esto a carácter o caracteres dependiendo de la longitud de la nota. Y podemos usar una declaración ternaria if para hacer esto. Por lo que podemos hacer let description iguala si puntales dot, dot content dot dot dot length es mayor que uno, entonces podemos usar los caracteres de la palabra. De lo contrario, usaremos la palabra carácter. Ahora sólo podemos depender de esta variable de descripción, ya sea caracteres o carácter, la longitud que estamos dando salida aquí. Entonces voy a devolver aquí una cadena de plantilla. Coloca este props.net.content longitud de punto, dólar, llaves rizadas así, mucho espacio y luego permitió nuestra descripción. Así dólar llaves rizadas y luego descripción. Ahorra eso. Eso no funciona. Podemos ver 199 caracteres. Un personaje, la nota que sólo tiene un carácter. Ahora qué duplicar un poco de código, un pide punto, punto contenido dot longitud de punto. Podríamos ordenar esto un poco poniéndolo en una variable. Entonces en la parte superior aquí permitido, Vamos, llamémoslo longitud es igual a prop stop notes dot content, dot length. Y luego reemplazaré props.net.content dot length, tanto aquí como aquí. Presionaré el Comando D para seleccionar ambos. El atajo podría ser diferente en tu plataforma. Simplemente reemplace eso con estas longitud variable. Guarde eso, asegúrate de que todavía esté funcionando. Vemos personajes. Si hay más de un personaje, carácter, es sólo un personaje. 78. Eliminar nota (Emit): Vamos a permitir que se elimine una nota cuando hay botón de eliminar se hace clic. Ahora que esta nota está en un componente hijo, note dot Vue necesitará emitir un evento de la vista de punto de nota. Cuando se hace clic en el botón. A continuación, escuche hacia fuera para ese evento en las notas de vista vista de punto, y luego dispara otro método aquí, que luego elimina la nota de la matriz de notas. Desde nuestras notas arrays en este par de componentes o no en este componente hijo. Así que primero vamos a desencadenar una vista de punto de nota final de método local. Cuando se hace clic en este botón eliminar, encontremos el botón Eliminar en la plantilla, y eso está aquí. Voy a dividir los atributos en ese lote de manejador de clics a eso. También usaré el modificador preventivo para evitar que este enlace se comporte como un enlace y tratar de enviarlos a una página diferente. Animal activa un método local llamado handle, delete clicked. Vamos a crear este método. Permitido mucho comentario de bloque aquí. Manejar eliminaciones clicadas configurará este método. Entonces const handle delete clicked equivale a una función de flecha. Por ahora solo voy a cerrar la sesión manejar eliminar, hacer clic, y guardar eso. Haga clic en el botón Eliminar. On. Sí, podemos ver que ese método está siendo despedido. Por lo que ahora podemos emitir un evento personalizado de este método. Pero antes que nada, necesitamos configurar nuestra matriz de emits. ¿ Recuerdas cómo hacemos eso? Un poco como cómo configuramos nuestros apoyos. Quieres probarlo por tu cuenta, entonces siéntete libre de pausar el video. Pero de todos modos, voy a añadir un comentario que dice emite. Para configurar nuestros límites, podemos crear una constante llamada emit, configurarla igual al método define emite. Podemos pasar todas nuestras imágenes aquí en una matriz. Así que vamos a definir un emit llamado delete clicked. Ahorra eso. Ahora podemos emitir este evento desde este componente. Así que de vuelta a nuestro mango eliminar clips método. Ahora podemos simplemente hacer emiten paréntesis y luego eliminar clicado. Ahorra eso. Asegúrate de que no tengamos errores. Ahora podemos escuchar este evento delete clicked en el componente padre vista notas vista punto. Saltemos a ese componente. Saltar a nuestro componente de notas aquí. Se me permite manejador de eventos personalizado aquí. Entonces delete clicked, que es el nombre usamos para nuestro mandato cuando recibimos ese evento, vamos a desencadenar un método en este componente activará un método llamado delete note. Vamos a crear ese método. Descarga en la parte inferior. Mucho comentario de bloque que dice Borrar Nota. Podemos configurar este método, const delete notes es igual a la función de flecha. Vamos a cerrar la sesión eliminar nota. Por ahora, salva eso. Haga clic en el botón Eliminar. Podemos decir que este método en el componente padre está siendo disparado. No obstante, en este punto, ¿cómo sabemos qué nota eliminar de la matriz? Necesitamos algo para identificar la nota que queremos eliminar. Podríamos usar la propiedad ID. Si saltamos de nuevo a la vista de punto de nota, podríamos pasar el ID de nota junto con esta imagen. Podemos simplemente agregar un segundo parámetro aquí. Podemos agarrar la identificación de este apunte de nota que estamos pasando hacia abajo. Esto va a ser en props dot note, dot ID. Aquí adentro. Podemos simplemente hacer apuntes puntuales en guardar eso. Ahora vamos a saltar de nuevo al componente padre denota vista de punto hacia abajo a este método delete note. Podemos pasar este parámetro aquí. Llamémoslo ID para eliminar. Vamos a cerrar la sesión y asegurarnos de que está pasando. Entonces ID para eliminar, guarde eso. Voy a recargar, haga clic en el botón Eliminar. Sí, podemos ver Delete Note Id1, que es el ID de la primera nota. Si hacemos clic en el botón Eliminar en la segunda nota, se puede decir eliminar saber id2. Sabemos que este ID se está pasando correctamente. Ahora hay una serie de formas en que podríamos eliminar las notas de la matriz. Podríamos averiguar el índice de las notas con base en el ID, y luego eliminar el ítem que se encuentra en el índice. Si queremos utilizar una solución de una línea que podamos usar filter para establecer esta matriz de notas en sí, pero filtrada para que solo se devuelvan las notas que no tienen este ID. Lo que podemos hacer aquí, vamos a sobrescribir esta matriz de notas ref. Para acceder a ese href no podemos hacer el valor de punto. Eso es sobrescribirlo. Sólo podemos hacer iguales. Y vamos a volver a hacer el valor de puntos de no. Pero esta vez lo vamos a filtrar. Así filtro de puntos. Primero necesitamos agregar nuestro placeholder, que se usará mientras estamos haciendo un lazo a través de la matriz, ya que está mirando cada elemento en la matriz. Por lo que sólo podemos usar nota para eso. Entonces podemos agregar una función de flecha, que será disparada por cada nota en la matriz a medida que estamos haciendo un lazo a través de ella. Y entonces solo podemos especificar lo que queremos devolver. Simplemente estiraré esto en un minuto. Vamos a devolver solo elementos en la matriz donde notes dot ID no es igual a este ID que estamos pasando a esta función. Por lo que no es igual a id2, suprimir. Creo que eso debería hacerlo. Así que vamos a salvar eso. Recargar. Haga clic en Eliminar. Y ahora podemos eliminar nuestras notas. 79. Pinia: configuración y estado [módulo 16]: Creo que ahora es un buen momento para agregar administración estatal a nuestra app usando penny up. En términos generales, si vas a agregar administración estatal a tu app, cuanto antes mejor. Porque agregar la administración estatal a una app, que ya es realmente complicada, puede traer muchos dolores de cabeza. Pero esta vez vamos a instalar un centavo desde cero en cambio todo desde cero porque no elegimos agregarlo a nuestro proyecto automáticamente. Vamos sólo a Google penique. El centavo un sitio web. Empieza y voy a saltar para empezar. En primer lugar, necesitamos instalarlo con NPM o Yarn. Voy a usar npm. Por lo que tenemos que saltar a nuestra terminal. Mata al proceso sordo con Control C. Ejecutar npm install, penique, eso está instalado. Así que vamos a lanzar nuestra aplicación de nuevo con npm run dev, cerrar la terminal. Lo siguiente que tenemos que hacer es crear una pedia, la tienda raíz, y pasarla a la app. Hacemos esto en main.js. Abriré el Explorador e iré a fuente y main.js. Entonces primero tenemos que importar, crear centavo encendido desde Pena. Voy a copiar esta línea y la pegaré después esta importación crear a partir de la línea de vista , pegue eso ahí. Y ahora solo necesitamos activar el método estadounidense en nuestra aplicación y luego activar este crear penique, un método dentro de eso. Después de que esto crea contorno, solo voy a agregar paréntesis de uso de puntos. Y luego dentro de eso sólo voy a crear un paréntesis. Vamos a guardar eso, asegurarnos de que no tengamos ningún error. Recarguemos la app. No hay errores. Entonces ahora necesitamos crear un centavo un tallo. Voy a volver a saltar al centavo un sitio. Voy a saltar hacia atrás a lo que es centavo una broma al ejemplo básico. Y nos da un ejemplo básico aquí. Puedes poner tu centavo una tienda archivos donde quieras. Pero parecen recomendar ponerlos en esta carpeta de tiendas. Vamos a crear una nueva carpeta. La carpeta fuente llamada tiendas creará aquí nuestro archivo STL. Puedes llamar a esto como quieras, pero lo voy a llamar notas de tienda, porque esta es una tienda para nuestras notas y todos los métodos relacionados con esas notas. Ahora sólo voy a copiar el código de este ejemplo básico. Pega eso aquí. Todo esto está haciendo básicamente es usar este método define tienda para configurar nuestra tienda. Y ponemos aquí todas nuestras acciones y getters estatales. Y luego solo asignamos esa tienda a esta constante y exportándola para ponerla a disposición de cualquier componente de nuestra app. Entonces vamos a dar este nombre constante, un nombre más significativo. Por lo que podríamos llamar a esta tienda estadounidense notas. Y también vamos a darle aquí a este nombre un nombre más significativo que podríamos llamar a esta tienda notas. Por ahora, eliminemos el objeto de esta acción en estos dos comentarios. Y sólo nos enfocaremos en el estado para empezar. Pongamos esto en múltiples líneas. Y ahora podemos copiar notas o escribir al estado en la tienda. Voy a cerrar main.js y saltaremos a ver notas. Vista de punto donde actualmente tenemos en las notas están aquí mismo. Solo voy a copiar los dos objetos dentro esta matriz por ahora, copiar esos, saltar. Pero para almacenar Node.js establecerá una propiedad llamada notas. Establezca eso igual a una matriz. Simplemente pegaremos esas notas en esta matriz de notas. Ahorra eso. Ahora deberíamos poder importar esta tienda a cualquiera de nuestros componentes donde puedan obtener acceso a esta matriz de notas, que está en nuestro estado en esta tienda. Recuerde que el estado es sólo para almacenar datos. 80. Usa nuestra tienda: Vamos a importar este penniless aunque hemos creado en vista notas vista punto, página de notas. Y usa la matriz de notas que hay en nuestra tienda para mostrar nuestras notas en la página. En lugar de usar la matriz de notas, que hemos codificado en la vista de notas de punto vista. En primer lugar, necesitamos importar nuestra tienda a las notas de vista vista vista punto. Queremos importar esta constante aquí, usar notas de tienda. Así que vamos a saltar a ver notas vista de punto. Mira nuestros insumos y solo agregaremos llaves rizadas importadas. Usa notas robadas de en tiendas de slash, tienda de slash sabe, guarda eso. Recargar. Para obtener acceso a la tienda en nuestro componente, necesitamos asignarla a constante o variable. Mucho. Otro comentario de bloque aquí que dice tienda. Y crearemos una constante llamada notas de tienda. Asignar eso para usar notas de tienda, paréntesis. Ahorra eso. Ahora que hemos hecho eso, deberíamos poder ver nuestra tienda en nuestra vista herramientas dev. Así que vamos a hacer clic en esta pequeña flecha doble y luego ver. Dice en la consola última tienda de rosquilla instalada. Y podemos ver cómo robó su clic libre sobre eso. Podemos decir que nuestras notas matriz todos los datos de cada nota. Ahora vamos a sacar estas notas de la matriz de notas que está en nuestra tienda. En lugar de desde la matriz que está codificada en las notas de vista vista vista punto aquí, podemos simplemente saltar a nuestro componente de notas. En lugar de v para nota en notas. Podemos hacer notas V4 en entonces el nombre de nuestra tienda, que es notas de tienda. Podemos hacer notas de tienda sobre desde esa tienda a las que queremos acceder las notas son correctas. Por lo que sólo podemos hacer notas de punto. Ahorra eso, recarga. Todavía podemos ver en las notas de la página, excepto que ahora vienen de nuestra tienda. En lugar de esta matriz, que está en nuestra vista nota stop view componente, ahora deberíamos poder simplemente deshacernos de esta nota. Así que bien, salvo eso. Todavía podemos ver nuestras notas en la página. Si vamos a las DevTools, cambiamos el contenido en una de nuestras notas. Podríamos decir que nuestras notas se actualizan en tiempo real en la plantilla también. Simplemente recargaré eso. Si saltamos a almacenar notas, dot js, cambia el contenido de una de estas notas. Simplemente eliminaré algunos de los textos y lo guardaré. Mencioné anteriormente en esa recarga en caliente no parece estar funcionando en este momento. No vimos esa recarga caliente cuando cambio el contenido de esta nota en la tienda. Y también te mostré que hay una guía, el centavo, un sitio. Nos desplazamos aquí abajo, reemplazo de módulo, e intentamos conseguir este trabajo en base a este ejemplo. No funcionaría. Todavía no he logrado encontrar una manera de conseguir este trabajo en el momento en que estoy grabando esto, pero siéntete libre de darle una oportunidad. A lo mejor está funcionando ahora en el futuro donde estás. Y si encuentras una solución, por favor compártala con esta conferencia. Si encuentro una solución y mucha conferencia a este curso explicando eso. 81. Acción : añade una nota: Agreguemos una acción a Penny, una tienda, que nos permitirá agregar una nueva nota a esta nota, que está en nuestro estado y nuestras opiniones las almacenan, agregando las nuevas notas a la página, ya que estas notas ya están llegando de estas notas justo en nuestro estado. Ahora, si tratamos de añadir unas notas nuevas en este momento, vemos que no se define un error notas. Y eso es porque si vamos a ver notas vista punto en este método Add note en esta línea aquí, tratamos de agregar un nuevo objeto de nota a esta matriz de notas ref, que ya no existe aquí. Pero ahora queremos agregar un nuevo objeto de nota a esta matriz de notas, que está en nuestra tienda de opinión. Saltemos de nuevo al centavo un sitio y saltemos a lo que es centavo un ejemplo básico. Aquí nos muestra cómo agregamos acciones a nuestra tienda. Sólo tenemos que añadir un objeto llamado acciones después de nuestro estado y podemos colocar todas nuestras acciones aquí. Recuerdo que las acciones son solo métodos que nos permiten acceder a los datos en nuestro estado y luego modificarlos. Vamos a saltar de nuevo a la tienda Node.js. Y por ahora, simplemente colapsaré el método y objeto del estado simplemente haciendo clic en esta pequeña flecha. Después de esto, agregaremos un objeto llamado subastas. Y ahora podemos colocar todas nuestras opciones aquí. Vamos a crear una nueva opción llamada nota impar. Por ahora, solo voy a cerrar la sesión de nuestras notas y decir que ahora podemos desencadenar esta acción desde cualquier lugar dentro de nuestra app. Vamos a activarlo desde las notas de vista vista vista de punto. Podríamos simplemente desencadenar este oxígeno directamente en nuevas notas pone aquí en este manejador de clics. Y estamos tirando en una tienda como notas robadas. Entonces para acceder a nuestra tienda, solo podemos empezar las notas de tienda. Y luego para acceder a la acción acabamos de iniciar notas. Podemos empezar apenas punto nota impar. No necesitamos agregar paréntesis a este método cuando lo activamos en nuestra plantilla. Así que ahorremos eso y veamos si eso está funcionando. Voy a escribir una nota y hacer clic en nuevas notas. Sí, podemos ver que notaría estar bloqueado. Esto está disparando con éxito nuestra acción. No obstante, si saltamos hacia abajo a nuestro método de nota de anuncio anterior, que está en la vista notas vista de punto. Tenemos estas dos líneas en la parte inferior, ésta que está despejando la nueva nota ref, las que despejan el área de texto. Esta línea, que está enfocando el área de texto mediante esta plantilla REF que hemos establecido que hemos agregado al área de texto aquí. Ahora no vamos a tener acceso a este modelo V, declararlo fuera, toda esta plantilla ref para enfocar el área de texto desde dentro de nuestra tienda. Tiene sentido seguir activando este método local, agregar notas, cuando hacemos clic en el botón Agregar nueva nota y luego activar nuestra acción desde aquí, para que aún podamos disparar estas dos líneas en el bottom, que van a despejar el área de texto y enfocar el área de texto. Así que vamos a cambiar ese manejador de clics en la bandeja de entrada de los nuevos cuadernos de arte y lo que estaba activando este método de notas locales comentará todo este código que estaba configurando el nuevo objeto node. Y luego al cambiarlo a las notas array ref, que teníamos aquí antes. Entonces activará la acción en nuestra tienda. En cambio, sólo podemos hacer notas de tienda. Nota, cuando estamos activando una acción desde nuestra sección de script, sí necesitamos agregar paréntesis. Así que ahorremos eso y veamos si esa acción en nuestra tienda todavía se está activando. Voy a recargar, teclear una nota y hacer clic en el botón. Y sin embargo podemos decir, yo sabría ser exhibida, bueno, esta acción necesita saber qué deberíamos realmente sumar a nuestras notas justo en el estado. Tenemos que pasar realmente el contenido de esta nota que se ha escrito en el área de texto a esta acción. Por lo que podemos configurar una nueva nota objetos basados en su contenido y luego agregarlo a nuestra matriz de notas que está en el estado. Podríamos hacer esto usando parámetros. 82. Acción (con parámetros Parámetros): añade una nota: Necesitamos pasar el nuevo contenido de notas desde view notes dot view to our new add notes action que está en nuestra tienda, antes de poder configurar una nueva nota objetos y agregarla a esta matriz de notas que está en nuestro estado. Podemos pasar parámetros a acciones tantos parámetros como nos gusten, igual que podemos con cualquier función en JavaScript. Así que vamos a saltar de nuevo a View note stop view. Y nuestro nuevo contenido de nota está en esta nueva nota href, que está vinculada a esta área de texto. Cuando activamos nuestra acción aquí, solo podemos hacer almacenar notas para agregar notas y luego pasar en nuevo valor de punto de nota, y guardarlo. Ahora si saltamos de nuevo a nuestra tienda notas dot js en esta nota oxígeno, podemos recibir este parámetro aquí. Podemos darle cualquier nombre que queramos, por lo que podríamos llamarlo nuevo contenido. Asegúrate de que esto esté pasando. Vamos a cerrar la sesión aquí. Así que cuando note contenido, guarde eso, recargue. Haga clic en el botón en. Sí, eso está funcionando. Podemos ver que nuestra acción está cerrando la nota que acabamos de escribir. Ahora solo necesitamos configurar un nuevo objeto de nota como este con un ID en una propiedad conceptual y luego agregarlo a estas notas ya en nuestro estado. Así que vamos a saltar de nuevo a ver las notas que no ven. Y llamemos a este código que comentamos . Ahorra eso. Y vamos a pegar eso en nuestra acción aquí. Quita los comentarios, arregla la sangría, y vamos a necesitar modificarlo un poco. Por lo que esta línea sigue bien. Eso todavía va a conseguir la fecha actual en esta línea está bien. Solo va a convertir esa marca de tiempo en una cadena y asignarla a esta variable ID. Permítanme ponerme en sus notas. Los objetos ya estaban configurando nuestro ID. Eso está bien. Pero cuando establecemos el concepto de propiedad, ya no queremos agarrar esto de las nuevas notas de valor de punto. Queremos agarrarlo de este parámetro que estamos pasando en contenido de notas nuevas. Copiemos eso, pegue eso aquí. Y luego cuando desmayamos estos nuevos objetos de notas a nuestra matriz de notas, ahora queremos empujarlo a matriz de notas que está en nuestro estado. Podemos acceder a las propiedades de los datos en nuestro estado por dentro y oxígeno usando la palabra clave this. Un poco como lo hicimos en la API de Opciones para acceder a nuestra matriz de notas, que se acaba de llamar notas. Podemos simplemente hacer estas notas de punto. Y luego queremos desdesplazar estos objetos de notas a esta matriz. Por lo que sólo podemos hacer estas notas puntuales sobre turno, paréntesis, nota, y ahora sólo podemos deshacernos de esta línea. Y ahorremos eso y veamos si esto está funcionando. Escriba una nota nueva. Haga clic en el botón en. Sí, está funcionando. Lo vemos agregado a la página en nuestras herramientas dev. Podemos decir que se ha agregado a nuestras notas o escribe aquí también en nuestro estado. 83. Acción : elimina la nota: Vamos a configurar una acción en nuestra tienda de opinión para eliminar un nodo. Y nuestro botón eliminar está en nuestro componente de nota. En componentes notas o nota punto vista. Digamos qué está sucediendo ahora mismo con esta funcionalidad de eliminación. En este botón eliminar aquí tenemos este manejador de clics que va a disparar este método local manejado eliminar clips. Ese método está aquí. Y luego dentro de eso estamos emitiendo un evento personalizado llamado delete clips. Estoy pasando el DNI de las notas que queremos eliminar. Luego, en el componente padre denota la vista de puntos, el desplazamiento hacia arriba hasta el componente de notas. Estamos escuchando este evento cuando lo recibimos, que están creciendo este método delete note. Con eso quitando la nota de la matriz basada en esta idea que estamos pasando en estas notas locales u ocho ya no existe aquí. Esto no va a funcionar de todos modos por el momento. Pero de todos modos, una vez que comenzamos usar la gestión estatal en nuestra app, ya sea a través de composable, UX o penique o como estamos usando. No necesitamos preocuparnos por emitir eventos personalizados desde componentes hijos a par de componentes y luego escuchar esos eventos antes de activar un método. Porque recuerda, todos los componentes de nuestra app, por muy profundamente anidados, tienen acceso a todo lo que hay en nuestra tienda, incluyendo todo en nuestro estado y todas nuestras acciones. Vamos a configurar una nueva acción de borrar notas en nuestra tienda y activarla directamente en vista de puntos de nodo sin necesidad de emitir ningún evento personalizado o escuchar esos eventos. De acuerdo, así que vamos a saltar a la tienda Node.js. Y simplemente colapsaré esta subasta de notas en una coma y agregaré una nueva acción llamada eliminar notas. Para eliminar la nota de notas o escribir en nuestro estado, vamos a necesitar el ID. Por lo que configuraremos esto para recibir ese ID con una variable llamada ID para eliminar. Simplemente cerraremos la sesión ID para eliminar también. Id para eliminar y guardar eso. Ahora, nota punto vista. En lugar de activar este método local manejado realmente se hace clic cuando hay botón de eliminar se hace clic, vamos a importar nuestra puerta de Penny aquí. Activa esta nueva Acción, Borrar Nota directamente. En cambio, voy a saltar a ver notas dot Vue. Copia esta línea donde estamos importando nuestra tienda. Pega eso en la parte superior de la vista de punto de nota que necesitamos para obtener acceso a nuestra tienda, como lo hicimos en las notas dot view asignando nuestra tienda a una constante. Por lo que voy a copiar este comentario en el código también desde las notas de vista vista dot view. Y vamos a pegar que después de nuestras indicaciones sobre los mitos, ahora tenemos acceso a nuestra tienda en esta notas dot componente Vue, ahora podemos saltar a este botón Eliminar, activar esta acción Eliminar nota directamente. Nos libraremos de este identificador delete clicked method call, y en su lugar simplemente haremos notas de tienda, Dot Delete, Note. Tenemos que pasar en la nota ID. Recuerda que estamos pasando por abajo el objeto de notas con un prop aquí. Por lo que nuestro ID de nota está disponible en puntales dot, dot ID. Acabo de anotar ID de punto si estamos en la plantilla para que sólo podamos pasar en nota HIZO ahorrado eso. Y ojalá nuestra Action Delete Note deba estar recibiendo el ID y cerrar la sesión está fuera. Entonces veamos si eso está funcionando. Haga clic en el botón Eliminar. Déjame ver que el ID1 está bloqueado. Haga clic en el otro. ¿ Qué es enemigo? Ver id2 siendo bloqueado. Ahora vamos a saltar de nuevo para anotar vista de puntos y hacer algunos ordenando. Porque ya no necesitamos este método manejado delete clips. Ya no lo estamos usando. Tampoco necesitamos definir delete clicked como un emite porque ya no estamos emitiendo eso, solo podemos eliminar nuestro código emite en el comentario por completo. Ahorra eso. Y si saltamos a ver notas vista de punto, desplázate hacia arriba hasta el componente de nota. Ya no necesitamos escuchar este evento de retraso clicado. Ya no lo estamos emitiendo desde la vista de punto de nota. Para que podamos quitárselos también. Ahorra eso. Y si nos desplazamos hacia abajo aquí, ahora ya no disparamos este método delete note. Así que solo voy a copiar el código desde dentro de este método y luego simplemente eliminar este método en el comentario también. Ahorra eso. Ahora vamos a saltar a almacenar Node.js y pegaremos este código en este método delete note. Sólo tenemos que ajustar esto un poco. Ya no va a filtrar nope, detener valor y luego asignar esa matriz filtrada de nuevo al valor de parada de notas. Ahora queremos hacer eso con estas notas ya que está en nuestro estado. Nuevamente, podemos simplemente reemplazar este valor de puntos Snopes. Seleccionaré ambos presionando Alt. En cambio, sólo podemos hacer estas notas de punto. Esto va a agarrar las notas enteras están justo en filtrarla en base a los criterios aquí. Y va a devolver todas las notas donde el ID de la nota no es igual al ID que estamos pasando aquí. Estos nombres de variables siguen siendo los mismos, así que no creo que necesitemos hacer más cambios. Vamos a ahorrar eso y veremos si esto está funcionando. Voy a recargar, haga clic en el botón eliminar y podemos ver que se elimina la nota, y también vemos el objeto eliminado en nuestras herramientas dev también. Si elimino éste, ahora vemos una matriz vacía y nuestras herramientas dev. 84. Edita la página de la nota y ruta: Ahora podemos crear, leer y eliminar nuestras notas. Actualmente no podemos actualizar nuestras notas. Completemos nuestra bruta configuración. Crear, leer actualizar, eliminar creando una nueva página de edición de notas que nos permitirá editar una nota y guardarla. Para esto, vamos a estar agregando una nueva acción a nuestro penique una tienda y también nuestro primer captador. Pero por ahora acabemos de configurar una nueva ruta en la página para editar una nota. Voy a saltar a nuestro explorador. En la carpeta vistas. Voy a crear un nuevo archivo llamado View Edit note, no ver. Agregaremos nuestras etiquetas de plantilla. Para empezar. Solo voy a agregar un div con una clase de edición, un guión notas dentro de esa mucha etiqueta H1 que solo dice editar notas. Ahorra eso. Y ahora necesitamos configurar nuestras rutas. Así que vamos a saltar al router fuente, index.js. Lote de nueva ruta aquí después de la ruta de las pocas notas, voy a seleccionar todo lote de prensa Alt Shift y atajo hacia abajo podría ser diferente para que duplique eso. Y vamos a establecer la ruta para editar nota con el fin de seguir esta ruta, para saber qué notas que realmente vamos a editar carga en la página, entonces vamos a necesitar pasar una ruta parámetro a esta parte. Entonces para hacer eso solo podemos puntear slash y luego dos puntos, y luego el nombre de un parámetro, o simplemente podríamos llamarlo ID. Entonces en otras palabras, podríamos visitar editar notas slash id uno, y luego podemos agarrar el ID, ID uno en esta vista y luego utilizarlo para agarrar la nota apropiada en nuestras notas o escribir en nuestro estado en nuestra tienda, y luego mostrar los conceptos de estas notas en un área de texto en esta página para que luego podamos editarla y guardarla. Y vamos a cambiar el nombre de esta ruta para editar notas, necesitamos importar nuevo componente. Por lo que voy a duplicar esta importación pocas notas línea y reemplazar ver notas con vista editar nota. Y luego copiaré este nombre, veré editar nota y pegarla aquí. Yo lo guardaré. Ahora deberíamos poder visitar un camino como lo hice anoté slash ID uno y obtener dos nueva página de edición de nota. Ahora tenemos que poder llegar a esta página sin tener que escribir en la barra de direcciones. Enganchemos estos botones Editar. Sólo voy a cerrar todo aquí excepto, no, no veas. Y encontremos nuestro botón de edición. Y eso va a romper esto en nuevas líneas y luego dividir los atributos en la etiqueta de apertura. En realidad podemos simplemente cambiar esto en un componente de vista de enrutador en lugar de una etiqueta. Así que cambiemos el nombre de la etiqueta al enlace del router. Asegúrese de que la etiqueta de cierre sea renombrada también. Y ahora sólo podemos empezar un prop a esto para decirle a dónde ir. Voy a usar una cadena de plantilla para hacer esto usando alrededor de seis para que podamos sacar el ID. Queremos ir a la ruta slash edit note, que configuramos en nuestro archivo router, y luego slash. Y luego usaremos llaves rizadas de dólar para emitir el ID. Y de nuevo, estamos pasando los objetos de notas a este nodo componentes de vista de punto. Utilizando estas notas prop, podemos obtener acceso a la ID out prompts dot note, DID, o en la plantilla solo nota dot ID. Aquí adentro. Podemos simplemente poner notas, puntos ID, y vamos a guardar eso. Vea si estos botones Editar están funcionando. Haga clic en el primer botón de edición y aún así escribió la ruta editar notas slash ID. Saltar hacia atrás, haga clic en el segundo botón de edición. Ahora en la ruta editar nota slash id2, podemos acceder a este parámetro de ruta que hemos nombrado en nuestro archivo router aquí en nuestra plantilla mediante el uso de los objetos de ruta dólar, que también podríamos usar las opciones API. Así que vamos a escupir este ID de parámetro de ruta en la página y ver si eso está funcionando. Por lo que queremos abrir nuestro nuevo componente de edición de notas de vista. Así que las vistas de origen, ver editar notas. Y cambiemos este rubro para editar notas con un ID de llaves dobles rizadas normales. Accede a la información de nuestra ruta. Podemos agregar ruta dólar y luego para acceder a nuestros parámetros de rutas, podemos hacer puntos params y luego acceder al parámetro ID el cual configuramos aquí, solo podemos hacer dot ID. Entonces ojalá esto esté escupiendo en el ID de la nota en la página. Ahora, vamos a salvar eso. Recargar. Y sin embargo, si estamos en la ruta edit nope slash id2, vemos id2 en la página. Si hacemos clic en el primer botón editar, déjame ir a la ruta editar notas slash ID uno. Ahora vemos ID1 en la página. 85. Componente reutilizable: AddEditNote de la nota: De acuerdo, lo que realmente vamos a necesitar en esta nueva vista de nota de edición que hemos creado para editar una nota y guardarla. Bueno, básicamente lo que necesitamos es un área de texto en la que podamos cargar la nota y permitir que el usuario la edite. Y necesitamos un botón de guardar para que el usuario pueda guardarlo. Entonces básicamente lo que necesitamos es si retrocedemos exactamente lo que tenemos en la parte superior de nuestras notas ver aquí, solo necesitamos un área de texto y un botón. Ahora sólo podíamos saltar a nuestra vista de notas. En las vistas de origen, ver notas. Podríamos simplemente copiar este elemento de la tarjeta y todos los campos dentro de él. Pegue eso en la vista, edite la vista de punto de nota y, a continuación, vuelva a utilizarla. Bueno entonces estaríamos duplicando código. Siempre queremos evitar duplicar código tanto como sea posible. Por lo que tiene más sentido crear un componente reutilizable a partir de esta tarjeta, el área de texto y la manteca que podemos usar en cualquier lugar dentro de nuestra app. Saltemos a nuestro explorador en nuestra carpeta de notas. Vamos a crear un nuevo archivo llamado Editar vista de punto de nota. Porque vamos a poder tanto agregar como editar una nota usando este componente. Agreguemos nuestras etiquetas de plantilla. Ahora vamos a saltar a ver notas dot Vue copiará esta maqueta, este div con una clase de tarjeta. Todas las cosas dentro de ella copiarán eso, pegarlo en nuestra plantilla aquí en nuestro nuevo componente. Vamos a quitar todas las cosas dinámicas que se romperán aquí. Así que eliminemos este modelo V del área de texto y eliminemos este manejador de clics en el prop deshabilitado de las balas golpeadas. Ahorra eso. Ahora queremos poder controlar los botones que se muestran aquí. Porque en nuestra página de notas queremos que esto salga, nuevos cuadernos adentro, pero en la página de edición entonces probablemente queremos un botón que diga Guardar o Guardar nota o algo así. También podríamos querer poder agregar más de un botón también. Entonces vamos a crear aquí una ranura donde podamos insertar el botón de edición que deseemos. Sólo voy a por ableton. En cambio agregaremos una ranura, haremos de este un slots con nombre. Así que mucho nombre, atributo y establece eso en botones. Ahorra eso. Ahora usemos este nuevo componente en nuestra vista de notas y hagamos que todo funcione allí antes de que luego lo utilicemos en nuestra nueva página de edición. Vamos a saltar a ver notas vista de punto. Voy a importar este componente que acabamos de crear. Eso después de nuestras notas. Duplicaré esta línea. Y cuando vayas a importar, añadir, editar nota de componentes de slash slash notas slash add, edit notes, dot Vue. Ahorra eso. Ahora vamos a desplazarse hacia arriba. Voy a comentar todo este elemento de tarjeta. Entonces las salidas son nuevo componente. Editar, anotar, guardar eso. Vemos el área de texto, pero no vemos el botón. Tenemos que pasar el botón a nuestra ranura. Dentro de este componente Añadir Editar nota, podemos agregar una etiqueta de plantilla. Podemos agregar ranuras v dash, botones de dos puntos, que es el nombre de la ranura que configuramos en Agregar Editar nota punto vista aquí. Podemos mostrar esto solo haciendo botones hash y ahora podemos colocar objetos aquí. Entonces agarremos eso de la una maqueta que comentamos. Entonces el botón está aquí. Voy a copiar eso. Pega aquí. Ahorra eso. Todo se ve correctamente ahora. Pero no funciona porque esta área de texto, que ahora viene de nuestro nuevo componente reutilizable ya no es esta nueva nota ref en nuestra sección de scripts. Vamos a arreglar eso a continuación. 86. Hook con modelValue: Esta área de texto en el botón en ya no funciona. Y eso es porque esta área de texto, que está en nuestro nuevo componente hijo en edit note dot Vue ya no está enganchado a esta nueva nota ref que configuramos en este componente de notas de vista. Bueno, lo que podemos hacer es pasar esta nueva nota ref hacia abajo a Editar nota componente niño usando el modelo V. Entonces podemos engancharlo todo usando el valor modal y actualizar el valor modal. Así que primero vamos a establecer el modelo V, este componente Add Edit note a nueva nota, que originalmente estaba enlazado al área de texto. Podemos agregar una directiva modelo V y ponerla en notas nuevas y guardarla. Y ahora podemos recibir el valor de este modelo V en nuestro componente de edición de nota usando el prop de valor modal especial, y luego combinamos el prop a esta área de texto. ¿ Recuerdas cómo hacemos eso? Siéntase libre de pausar el video y darle una oportunidad. Lo que tenemos que hacer es agregar nuestras etiquetas de configuración de script. Necesitamos recibir el valor de este modelo V utilizando el valor del modelo prop. Por lo que necesitamos configurar nuestros apoyos. Hacemos eso agregando una constante llamada props set que igual al método define props. Y podemos pasar nuestras indicaciones aquí. Queremos recibir el tipo de prop valor del modelo va a ser cadena. Esto va a ser requerido. Por lo que vamos a establecer requerido a verdadero. Ahorra eso. Y ahora podemos vincular este prop de valor modal al área de texto. Podríamos hacerlo simplemente estableciendo el modelo V al volumen del modelo. Yo lo guardaré. Comprobar esto está funcionando. Vamos a saltar a anotar esa vista voy a cambiar el valor por defecto de esta nueva nota ref que está aquí. Entonces voy a meter algún texto ahí, salvo eso. Podemos decir que el texto está llegando al área de texto en nuestro nuevo componente reutilizable. No obstante, si hacemos salir estas nuevas notas en bruto en algún lugar de nuestra página. Entonces digamos que teníamos una etiqueta pre después de este componente add edit nope. Y acabamos de dar salida a una nueva nota. Ahorra eso, recarga. Y luego hacemos un cambio al área de texto. Podemos decir que el valor de esta nueva nota ref no se está actualizando. Y entonces lo que necesitamos para hacerlo en el nuevo componente hijo fuera editar la vista de punto de nota es explícitamente dejar saber al componente padre si nota stop view cuando el valor en el área de texto ha cambiado para que pueda actualizar el valor. Esta nueva nota href. Podemos hacer eso usando el valor del modelo de actualización. Así que vamos a saltar a agregar editar la vista de punto de nota. ¿ Recuerdas cómo hacemos eso? Nuevamente, siéntete libre de hacer una pausa e intentar hacerlo tú mismo. Pero lo que tenemos que hacer en esta configuración, nuestros manoplos crean una constante llamada emit, configurarla igual al método define emite. Y podemos pasar en nuestros eventos imitables a esta matriz de emite definida. Y queremos sumar los eventos actualiza valor del modelo de colon. Se trata de un evento especial que nos permitirá modificar directamente un valor que viene del componente padre por modelo V sin tener que emitir ningún evento del componente hijo y escuchar esos eventos y luego hacer el cambio. Por lo que actualizar el valor modal nos permite modificar esta nueva nota, href, que está en un su componente padre. Así que vamos a saltar de nuevo a ella. No vista de punto. Y lo que podemos hacer aquí es escuchar el evento inputs en esta área de texto, que se activará cada vez que hagamos un cambio a esta área de texto. Por lo que sólo podemos sumar insumos. Lo que queremos hacer es emitir. Con dólar emiten. Queremos emitir el evento de valor del modelo de colon de actualización. Y tenemos que pasar el valor que queremos establecer que, para, establecer el valor que se está pasando con el modelo V en el componente padre como segundo parámetro. Y así podemos simplemente establecer eso para modelar volumen. Ahorra eso. Veamos si eso está funcionando. Recarga esta página, cambie el valor del área de texto. Sí, podemos ver esta pre-charla sobre la vista notas dot componente Vue se está actualizando. Por lo que sabemos que esta nueva nota aproximada en el componente padre está siendo actualizada con éxito por el componente hijo en editar la vista de punto de nota escuchando el evento de entrada en el texto área y luego emitiendo el valor del modelo de actualización de pasar en el último valor, que luego actualizará directamente el valor del modelo V nuevas notas, que estamos pasando aquí. Antes de seguir adelante, eliminemos esta precharla que agregamos sobre todo este código que comentamos. Deshazte de eso. También necesitamos establecer el valor predeterminado de la nueva nota de nuevo a una cadena vacía. Ahorra eso, recarga. Vamos a asegurarnos de que todo esté funcionando. Por lo que puse una nueva nota, haga clic en el botón, y se agregó la nueva nota. No obstante, vemos un error en nuestra consola no puede leer propiedades de enfoque de lectura nulo. Y eso es porque en esta línea aquí, después de agregar una nueva notas enviando la nota constante a nuestra app note action en nuestra tienda, estamos tratando de enfocar un elemento que tenga una plantilla href de nueva nota ref. Este href ya no existe en este componente. Esta plantilla Req ahora está abajo en el componente hijo en editar la vista de punto de nota aquí. Por eso esta área de texto no se enfoca después de agregar una nueva nota, y por eso estamos viendo este error. Vamos a arreglar eso a continuación. 87. Arrestar el enfoque: Cuando escribimos una nota nueva, haga clic en el botón Agregar nueva nota. Podemos ver las notas se suma a nuestro listado y añadirlo a nuestra tienda de opiniones a las notas tienen razón en el estado. No obstante, el área de texto no se reenfoca y vemos este error en la consola no puede leer propiedades de ningún enfoque de lectura a menos que porque en las notas de vista vista punto después agregamos las notas a las notas están justo en la tienda. Estamos utilizando esta plantilla ref, nueva nota ref para agarrar el elemento área de texto y luego enfocarlo. Pues bien, esta plantilla ref, nueva nota href ya no existe en este componente de notas de vista. Entonces vamos a quitar esta constante aquí, que configuramos para la plantilla ref. Y también quitamos esta línea donde estábamos enfocando el área de texto y encontramos otra forma de hacerlo. Una cosa que podríamos hacer en su lugar es agregar una plantilla ref al componente Agregar Editar nota que estamos mostrando aquí. Y usa esa ref de plantilla para obtener acceso al componente secundario impar notas de edición, y luego disparar un método que se configura dentro del componente Add Edit No.2. Agreguemos un ref a este componente. Y lo llamaremos add, edit, note, ref, guardaremos eso y saltaremos abajo al fondo. Tenemos que liquidar un dato, registrar esto también con el mismo nombre. Por lo que vamos a crear una constante llamada Editar nota HREF, establecer eso igual a una ref de datos con un valor inicial de null. Ahora en nuestro método de nota aquí, después de borrar la nueva nota ref, los que borran el área de texto, podemos entonces acceder al componente hijo en editar nota mediante el uso de esta plantilla href, podemos hacer editar nota valor de punto ref para acceder a ese componente. Y entonces podemos desencadenar un método que está en ese componente. Entonces digamos que queremos activar un método llamado área de texto Focus. Podemos hacer esto así. Ahora aún no hemos configurado este método de área de texto de enfoque. Así que guardemos eso y saltemos para agregar editar la vista de punto de nota, configuramos este método. Empecemos aquí una nueva sección con un comentario que dice que área de texto de enfoque creará este método. Entonces const, el área de texto de enfoque es igual a una función de flecha. Por ahora, solo cerraré la sesión del área de texto de enfoque. Ahorra eso. Veamos si este método en el área de texto de enfoque de componente secundario se está activando con éxito por su componente padre vista notas vista punto aquí. Vamos a recargar. Este método debe ser disparado después de agregar una nueva nota. Entonces vamos a escribir algunos textos. Haga clic en el botón. Eso no funcionó y vemos este error. Agregar, editar nota ref valor de punto, área de texto enfocada en puntos no es una función. No es capaz de encontrar esta función que acabamos de configurar en el componente hijo. Y eso es porque cuando estamos usando el patrón de configuración de script, necesitamos realmente exponer cualquier método que queremos que estén disponibles para un componente principal de componentes. Hacemos esto mediante el uso del método define exponer y pasamos a eso un objeto. Solo queremos agregar aquí cualquier método que quisiéramos que se pusiera a disposición de este componente padre componentes, queremos hacer que el método de área de texto de enfoque esté disponible para que solo podamos agregar área de texto de enfoque aquí. Así que ahorremos eso y veamos si eso está funcionando. Escribiendo una nota, pulsa el botón. Sin embargo eso está funcionando ahora podemos ver el área de texto de enfoque está bloqueado. Entonces nuestro componente padre, ¿nota que la vista de puntos está activando con éxito este método de área de texto de enfoque en su componente hijo para editar la vista de punto de nota. Por lo que ahora todo lo que tenemos que hacer para enfocar esta área de texto es agregar otra plantilla ref a esta área de texto y luego usar eso para enfocarlo aquí, enfocar esta área de texto es agregar otra plantilla ref a esta área de texto y luego usar eso para enfocarlo aquí,desplácese hasta el elemento área de texto. En esta área de texto todavía tiene un techo en él desde antes de esta nueva nota ref bien, esta área de texto ya no es sólo para notas nuevas. También va a ser útil editar notas. Vamos a cambiar el nombre de esto a área de texto href, que es un poco más genérico, y usaremos este href para enfocar el área de texto. Saltemos a nuestro método de área de texto de enfoque. También necesitamos configurar un ref de datos para esta plantilla en bruto con el mismo nombre. Por lo que queremos hacer const área de texto HREF, establecer que igual a un bruto con un valor inicial de null. Vamos a comprobar si estamos importando el método ref desde la vista y no lo estamos. Apenas agreguemos una sección de entrada en la parte superior. Voy a importar desde la vista, saltar de nuevo a nuestro método. Ahora para obtener acceso al elemento área de texto, sólo podemos hacer el área de texto ref valor de punto. Y luego para enfocarlo, solo podemos disparar el método de enfoque. Entonces enfoca, di que y ojalá esto debería estar funcionando ahora, escribe y notas, pulsa el botón encendido. Sí, ha funcionado. Hemos agregado la nueva nota. Lo podemos ver en la página y también hemos despejado el área de texto, desenfocarla también. 88. Color personalizado, marcadores de sitio y accesorios de etiqueta: Agreguemos nuevo componente reutilizable en edit nope dot view a nuestra nueva página de edición de notas. Voy a saltar a ver notas donde actualmente estamos utilizando el componente Agregar Editar nota. Y sólo voy a copiar este cierre que saltó a la nueva vista, ver editar nope dot view. Y vamos a pegar eso dentro de este div. Y simplemente eliminemos todo el contenido dinámico por ahora. Así que eliminaré el modelo V, eliminaré el controlador de clics o el atributo disabled, guarde eso. Ahora necesitamos importar este componente antes de poder usarlo. Agreguemos nuestras etiquetas de configuración de script. Agrega nuestra sección de entradas, e ingresaremos edit, note from slash components, slash notes slash add, edit, note, dot Vue, guarde eso. Ahora podemos ver ese componente en la página. Estoy viendo una advertencia en la consola aquí. Me falta valor de modelo de prop requerido. Y eso se debe a que este componente para editar la vista de punto de nota está esperando el prop de valor modal o el prop del modelo V, y esto se establece en un prop requerido. Vamos a configurar un áspero en Q edit note dot view que podemos enlazar a este componente de nota de edición en nuestra sección de scripts, un montón de nuevo comentario que dice Nota. Configuraremos un ref llamado contenido de nota. Establezca eso igual a un href con un valor inicial de una cadena vacía, porque estamos utilizando el método ref, necesitamos importar esto. Entonces vamos a importar ref desde la vista. Y ahora podemos vincular esta balsa a nuestro componente Agregar Editar nota. Ahora podemos sumar V-modelo. Recuerda que todo lo que tenemos que hacer es agregar el modelo V porque ya hemos configurado este componente de nota de edición de anuncios para extraer automáticamente cualquier modelo V que pasemos a este componente usando el valor modal prop, y actualizar automáticamente el modelo V, que está en el par de componentes mediante el uso de los eventos de valor del modelo de actualización. Por lo que todo lo que tenemos que hacer ahora para ojalá jabón es sólo vincular este concepto de nota ref a este componente. Por lo que vamos a configurar este modelo V para anotar contenido y guardar eso. Y vamos a asegurarnos de que eso esté enganchado. Pondré algo de texto aquí. Podemos ver la actualización sobre el área de texto. Vamos a ajustar eso de nuevo a una cadena vacía y guardarla. Vamos a cambiar el texto de este botón aquí va a cambiar este texto para decir nota, salvo eso. Ahora me gustaría que esta tarjeta que rodea nuestra área de texto en botón tenga un color diferente cuando estamos en la página de edición. Por lo que se ve un poco diferente al área de texto de la tarjeta y botón que se encuentra en la página de notas. Si abrimos nuestro componente reutilizable a cabo editar nota punto vista, podemos ver esta clase en la tarjeta tiene éxito de fondo. Podemos cambiar esta palabra éxito para crear diferentes colores. Por ejemplo, podemos cambiar esto para que tenga enlace de fondo oscuro para darle este color azul, vamos a configurar un prop en este Agregar Editar nota dot view componentes para que podamos cambiar dinámicamente esta palabra aquí, los que cambian el color. Volveré esto al éxito por ahora y lo guardaré. Ahora vamos a saltar a nuestros apoyos y vamos a configurar un nuevo prop llamado color BG. Estableceremos el tipo a string. Voy a conseguir esto un valor predeterminado también. Para que si no proporcionamos este prop en un componente padre, todavía podemos tener un color de fondo en esta tarjeta establecerá el valor predeterminado para el éxito. Yo lo guardaré. Y ahora vamos a saltar a este div con la clase de tarjeta. Voy a dividir los atributos en eso y voy a cortar esta casa fondo éxito, vidrio oscuro. Voy a enlazar al atributo de clase. Voy a usar una cadena de plantilla aquí usando backticks para que podamos sacar el concepto de este prop o pegar en esa clase que copiamos tiene éxito de fondo, oscuro. Vamos a deshacernos de la palabra éxito y nuestros tirantes rizados de dólar y salida de nuestra prop en lugar de color BG. Podemos o bien hacer puntales dot color BG, o simplemente podemos hacer color VG. Guardaré esa recarga. Y podemos ver que si no proporcionamos este prop de color BG a este Agregar Editar ningún componente cuando lo usamos en un par de componente, entonces vemos el color de fondo predeterminado porque es va a usar este valor predeterminado en el prop que establecemos aquí. Pero deberíamos poder anular esta palabra éxito proporcionando este prop al componente Agregar edición de nota cuando lo usamos en un componente padre. Así que vamos a saltar a ver editar la vista de punto de nota. Soy mucho este prop a nuestra Agregar Editar. Ningún componente aquí establecerá el color BG, y lo configuraremos para enlazar, guarde eso. Y ahora vemos este 11 azul. Y si lo inspeccionamos, podemos ver que la tarjeta, cómo está esta clase tiene enlace de antecedentes doc. Pero si vamos a la página de notas e inspeccionamos esa tarjeta, podemos ver que la clase tiene éxito de fondo, oscuro, el color de fondo está funcionando. Ahora, también hagamos que guardemos notas, pero también está en el mismo tipo de color. El cuaderno guardado y él está aquí. Así que vamos a cambiar esa clase también, tiene enlace de fondo en lugar de éxito. Ahorra eso. Y ahora tenemos un botón azul mientras estamos en ello. Desactivemos este botón cuando este campo esté vacío. Nuevamente sin el atributo disabled condicionalmente solo cuando no hay contenido vacío. Por lo que vamos a establecer esto para no anotar contenido. Ahorra eso. Ese botón está deshabilitado por defecto, pero si escribimos algo y se vuelve a activar, ahora también necesitamos hacer que este texto marcador de posición en el área de texto sea personalizable también porque el texto agregar una nueva nota no tiene sentido en esta página. Porque esta área de texto va a ser para editar una nota o no agregar una nueva nota. Vamos a agregar otro prop, agregar editar la vista de punto de nota para este texto de marcador de posición, que actualmente está apenas codificado en el área de texto, configurará un nuevo prop llamado marcador de posición. Acomódese con un tipo de cadena. daremos a esto un valor predeterminado de digamos tipo algo, punto, punto, punto, guarde eso. Ahora vamos a usar este prop en nuestra área de texto. Simplemente podemos enlazar al atributo marcador y luego generar este prop, ya sea con puntales punto marcador de posición o simplemente marcador de posición. Guardaré esa recarga. Ahora podemos ver el valor predeterminado de los tipos de cosa en el placeholder, pero ahora deberíamos poder anular esto pasando en este puntal de placeholder a nuestro componente de nota de edición de arte cuando lo usamos en una de nuestras páginas, vamos a saltar a ver, editar nope, vista de punto. Y agregaremos este prop de placeholder, placeholder. Podríamos establecer esto para editar, anotar, guardar eso, y decimos eso en el área de texto. Ahora si saltamos de nuevo a nuestra página de notas sigue diciendo tipo algunas cosas. Vamos a anular eso también. Por lo que abriremos View notes dot Vue tendrá este marcador de posición aquí también a nuestro componente de nota de edición de arte. Entonces marcador de posición, casi al menos para agregar una nueva nota, guarde eso y vemos esa actualización. También me gustaría poder mostrar una etiqueta en la parte superior de nuestra área de texto para que la función de esta área de texto sea un poco más clara. Primero, acabemos de configurar el marcado para esto. Así que saltaré a añadir edit app.vue. Y en la parte superior de nuestro elemento de tarjeta por encima de este campo, voy a añadir una etiqueta con una clase de etiqueta. Por ahora, eliminaré esto para atributo. Apenas pondré el texto a textos etiquetados por ahora. Ahorra eso. Hagamos esto blanco. Entonces mucha clase de textos blancos para que sea blanco. Y de nuevo, estas clases son sólo de Bohmer y quiero que esta etiqueta sea opcional. Así que conformemos un, otro apoyo para esto. Vamos a configurar un prop llamado inicio de la etiqueta no a un tipo de cadena. Y salva eso. Y solo quiero mostrar este elemento de etiqueta en la página si se ha proporcionado este prop. Entonces voy a dividir los atributos en esto, o podemos simplemente agregar una directiva v-if, y solo queremos mostrar esto si se ha proporcionado el prop de etiqueta, ya sea puede hacer v si solicita punto etiquetada o simplemente etiqueta vf. Entonces lo guardaré y vemos que la etiqueta desaparece ya que en realidad no estamos proporcionando este prop etiquetado a este Agregar Editar ningún componente cuando lo usamos en nuestra página de edición aquí, si agregamos esto etiquetado prop aquí, ¿etiqueta? Podríamos configurar esto para editar notas, guardar eso, y volver a cargar. Ya podemos volver a ver la etiqueta, ya que estamos brindando este prop, aunque no está mostrando el valor que estamos pasando aquí, vamos a saltar de nuevo a Agregar Editar nota punto vista, y podemos acaba de emitir el contenido de este prop aquí. Podemos simplemente reemplazar textos etiquetados con llaves dobles rizadas y etiquetadas salvo eso. Y ahora vemos editar notas. Y si saltamos de nuevo a la vista de notas y no vemos esa etiqueta, ya que no estamos proporcionando ese prop etiquetado en la página de notas de vista aquí. El motivo por el que creo que necesitamos un etiquetado aquí es porque cuando el usuario hace clic en editar notas, no van a ver aquí un área de texto vacía. Van a ver esta área de texto poblada con la nota. Y así no verán ese placeholder. Por lo que esto solo le dará al usuario un poco más de aclaración antes de seguir adelante y empezar agregar y se llega a nuestra tienda de opinión por conseguir el contenido de la nota que el usuario es tratando de editar. Añadir una acción para actualizar la nota. Apenas agreguemos aquí un botón de cancelar, que nos lleva de vuelta a la página de notas. Ya que en este momento no hay forma de que el usuario vuelva a un lado de hacer clic en la pizarra. Entonces, lo que quieres ver editar la vista de punto de nota en el interior de nuestra ranura de botones aquí, solo agregaremos otro botón. Entonces duplicaré esta nota guardada. Quitar a los discapacitados, prop cambió el texto a abogado. Ahorra eso. Voy a cambiar esta clase tiene fondo vinculado a es dash le gusta darle este color gris claro. Ahora hay un par de formas en que podríamos enviar al usuario vuelta a la página de notas cuando haga click en esto, una cosa que podríamos hacer es convertir este botón en un componente de link router, establecer los dos prop en slash, guardar eso y ver si eso funciona. Eso funciona. Lo otro que podríamos hacer es dejar esto como un botón y agregar un manejador de clics a este click. Y podríamos usar el método del router dólar, porque todavía podemos usar el método del router dólar en nuestras plantillas usando la API de composición. Por lo que ya sea podemos hacer un router de dólar dot, push, forward slash, save, eso funciona. Sí, eso funciona. O si nuestra app era más complicada y tuviera muchas formas diferentes en que pudiéramos llegar a esta página de edición desde diferentes páginas a las que podríamos querer simplemente enviar al usuario directamente de vuelta a de donde venían. Entonces para hacer eso, podríamos simplemente hacer paréntesis de punto de enrutador dólar, guardar esa recarga. Eso funciona también. 89. Getter : consigue contenido de nota (useRoute): Cuando el usuario hace clic en este botón de edición que se lleva a esta nueva página de edición de notas. Y van a esperar el texto de la nota que acaban de hacer clic en este texto aquí se cargue en esta área de texto. Y podemos hacer esto usando un getter en nuestra tienda de opiniones. Lo que vamos a necesitar hacer, agarrar el ID de la nota actual de nuestros parámetros de ruta, que podemos ver en nuestra barra de direcciones aquí, ID uno, y luego enviar el ID a un getter en nuestra tienda, que luego recuperar la nota correcta de mis notas están justo en nuestra tienda basado en el ID. Devolverlo a esta vista editar componente de nota, donde entonces podemos asignarlo a este contenido de notas href, que está enlazado al área de texto, las que poblan el área de texto con los textos de la nota correcta. Para empezar, vamos a simplemente configurar un getter realmente simple, que acaba de obtener el contenido de la primera nota en nuestra matriz. Saltemos a nuestra tienda de archivos de tienda Node.js. En la carpeta de tiendas. Nos desplazaremos hacia abajo para sumar algunas conjeturas. Sólo tenemos que añadir un getters objetos. Después del objeto de esta acción. Podemos colocar a todos nuestros captadores aquí. Se sale. Acabamos de empezar una propiedad con el nombre del gueto w1, o podríamos llamarlo obtener nota de contenido. Y luego asignamos esta propiedad a un método como este para que esto llegue, pueda obtener acceso al estado estadounidense, necesitamos pasar el estado a este gueto así. Los getters siempre necesitan devolver algo al igual que las propiedades computadas. Así que por ahora solo devolvamos el contenido de la primera nota en la matriz de notas en nuestro estado. Por lo que podemos agarrar esto de las notas de puntos estatales y luego corchetes 0 para agarrar el contenido de punto de la primera nota, vamos a conseguir el contenido de ese primer nodo. En nuestras tripas. Todo lo que tenemos que hacer es devolver notas de puntos de estado, corchetes 0 para agarrar el primero, dot contenido y guardar eso. Ahora deberíamos poder usar este getter en cualquier parte de nuestra app. Así que vamos a usarlo en Ver, Editar vista de punto de nota. Necesitamos importar nuestra tienda. Por lo que tenemos que hacer importar notas de tienda de Estados Unidos desde tiendas de slash slash notas de tienda. Que necesitamos asignar estas dos constantes para que podamos acceder a ella. Mucho nuevo comentario que dice tienda. Configuraré una constante llamada notas de tienda. Establezca eso igual a usar notas de tienda paréntesis. Y en realidad vamos a mover esto un poco. Voy a cortar eso, pegarlo después de nuestras importaciones. Ahora podemos utilizar el getter en nuestra tienda para agarrar ese concepto desde la primera nota y asignarlo a esta nota contenido ref, que mostró que actualizar el área de texto. Para acceder a nuestro gueto. Podemos simplemente hacer almacenar notas dot y luego el nombre de nuestro getter es obtener contenido de nota. Solo queremos asignar esto a esta nota contenido ref, por lo que sólo podemos hacer nota de contenido valor de punto igual a ese. Así que ahorremos eso ahora, recargue y eso no parece estar funcionando. Echemos un vistazo en nuestra consola, no viendo ningún error. Echemos un vistazo a nuestro archivo de tienda. Solo asegúrate de que la aplicación se esté ejecutando. Es ejecutarlo de ayuda si realmente estuviéramos en la página de edición. Así que vamos a hacer clic en un botón Editar. Podemos ver los textos de la primera nota se está cargando en esta área de texto. obstante, no solo queremos agarrar el texto de la primera matriz de notas. Tenemos que poder agarrar el contenido de las notas base en el ID de la nota en la que acaban de hacer clic. Si hacemos click en Editar en el segundo nodo, entonces esperamos ver este contenido de notas que se está cargando aquí. Podemos agarrar el ID que se está pasando a esta página usando nuestros parámetros de ruta que vimos anteriormente en que podemos dividir esto en nuestra plantilla usando el objeto de ruta dólar. Después de esto, agrega notas de edición, solo agregaré una etiqueta pre, dobles llaves rizadas y luego params de punto de ruta de dólar. Y luego el nombre de nuestro parámetro ID. Tenemos que pasar este ID a nuestro captador para que eso llegue, pueda obtener el contenido para la nota correcta. No obstante, tenemos que hacer esto en nuestra sección de guiones. Y podemos acceder a nuestra información de ruta en la sección de guiones utilizando los objetos de rutas de dólar. Cuando estamos utilizando la API de composición, necesitamos usar rutas Vue como nuevas rutas de Estados Unidos componibles. Así que vamos a quitar esta pre-charla. Después de esta importación aquí vamos a importar ruta de Estados Unidos desde view dash router. Y luego un montón de comentarios aquí que acaba de decir router. Tenemos que asignar a este usuario fuera composable a constante o variable. Por lo que vamos a configurar una constante llamada rutas. Establezca eso igual a usar rutas paréntesis. Y ahora podemos acceder a la misma información de rutas que acabamos de dividir antes de usar esta constante de ruta. Veamos sólo si podemos cerrar la sesión este parámetro de ruta, este parámetro de ID f. ¿ configuramos este concepto de nota href. Simplemente cerraremos la sesión console.log, enrutaremos dot params dot ID, guardaremos eso. Y sin embargo podemos ver que id2 está siendo bloqueado. Y si volvemos a la página de notas, haré click en Editar en la primera nota y vemos que ID1 está bloqueado. ¿ Cómo podemos pasar el valor de este ID a getter? 90. Getter (con parámetros Parámetros): consigue contenido de nota: ¿ Cómo podemos pasar esta identificación a nuestro captador? Se podría pensar que sólo podríamos empezar paréntesis a r consigue un aquí y pasarlo así, rutas dot params dot ID, guardar eso, luego saltar a nuestro archivo de tienda, abajo a r, se levanta y tal vez más allá de esto en como segundo parámetro. Podemos ver que esto no funciona. Vemos un error en la consola. Robar notas no obtienen ningún contenido no es una función. Eso se debe a que este getter no es una función, es solo una propiedad objeto así asignada a una función. Lo que podemos conseguir alrededor de esto haciendo salir obtiene un retorno, una función con el parámetro por el que estamos pasando. Deshaznos de este parámetro ID y deshámonos de esta línea de retorno. Lo que podemos hacer es simplemente devolver una función de flecha como esta. Pasa el parámetro aquí. Entonces veamos si podemos bloquear esto ahora. Consola dot log lote de ID de cadena de puntos Geta y luego dividirá este parámetro ID. Entonces guardaré esa recarga. Podemos ver que es ID de trabajo de getter ID1. Vemos una advertencia aquí, pero no te preocupes por eso. Eso es solo porque getter está devolviendo una función en este momento o no una cadena. Estamos asignando eso a esta nota contenido href, que se está pasando para agregar nota de edición en el modelo V, el prop de valor del modelo en este componente está esperando una cadena. Entonces veremos que esto desaparezca cuando lleguemos a trabajar aquí. Vamos a saltar de nuevo a la tienda Node.js. Y ahora podemos usar este ID para tomar la nota correcta en esta propiedad de contenido de la matriz de notas que está en nuestro estado. Por lo que podemos usar filtro para hacer esto. Dentro de este método aquí, vamos a devolver las notas están en lo correcto, así que señale notas de punto. Pero entonces lo vamos a filtrar con el método de filtro. Vamos a estirar esto un poco. Esto va a recorrer cada elemento de nuestra matriz. Vamos a necesitar un placeholder para cada elemento a medida que está pasando. Entonces usaremos nota para eso. Después añadimos otra flecha. La gente debe especificar nuestros criterios para las notas que queremos agarrar. Y queremos recortar las notas donde la propiedad ID sea igual a la propiedad ID que estamos pasando aquí desde nuestra página de edición de nota, queremos devolver notas donde el ID sea igual a ID. Dado que todos nuestros ID van a ser únicos, entonces esto devolverá una matriz que contiene solo denota objeto que estamos buscando. Dado que esto va a ser una matriz, necesitamos agarrar el primer y único elemento de la matriz agregando corchetes 0. Y luego de eso queremos dejar caer el concepto de propiedad para que solo podamos hacer el contenido de puntos. Salvemos eso y veamos si esto está funcionando. Recarga la página. No noté slash id uno. Y estamos viendo el concepto a partir de las notas con un ID de ID uno. Y si saltamos de nuevo a la página de notas, click en Editar en la segunda nota, entonces vemos el contenido de la segunda nota con id2 siendo cargado en el área de texto. 91. Acción : nota de actualización: Cuando el usuario realiza un cambio a esta nota y hacen click en Guardar, queremos actualizar la propiedad conceptual de la nota correcta en nuestro estado con el nuevo contenido en el que ha escrito. En primer lugar, solo activemos un método local. Cuando hacemos click en el botón Guardar, voy a saltar a ver editar nota dot Vue, voy a quitar esta consola iniciar sesión aquí. Saltemos a nuestros cuadernos guardados en celda animal. Ir a añadir un poco de margen entre estos botones está en realidad en el botón de consola permitido. Tres, digamos tal vez dos. Y se ve un poco mejor. Ahora agreguemos un manejador de clics a estos cuadernos guardados en. Así que haga clic en iguales activará un método llamado handle save clicked. Y vamos a crear ese método. Lote de nuevo comentario aquí que dice Guardar clicado, configura nuestro método handle save clicked sub igual a una función de flecha. Solo cierra la sesión. Manejar guardar, haga clic por ahora, guarde eso, haga clic en el botón. Podemos ver que eso está siendo bloqueado. Vamos a desencadenar una acción en nuestra tienda en este punto para actualizar las notas y notas están justo en el estado. ¿ Qué información va a necesitar esa acción para hacer eso? Bueno, va a necesitar el ID de la nota para que podamos averiguar qué notas en la matriz para actualizar realmente. Y también va a necesitar la nueva cadena de contenido también. Entonces hay un par de formas en que podríamos pasar esta información a una acción en nuestra tienda. Para que pudiéramos configurar un objeto. Podríamos llamarlo carga útil o algo así. Podríamos añadir un par de propiedades a este ID, que podemos volver a obtener de nuestras promesas de ruta. Así rutas dot params dot ID, y luego una propiedad conceptual que sólo podemos agarrar de esta nota contenido href, que está enlazado al área de texto. Así nota el valor de punto de contenido. Y luego podríamos simplemente pasar toda esta carga útil como un solo parámetro a una acción repleta de UX. Esta fue la única forma en que pudimos hacer esto porque las acciones en UX solo pueden aceptar un parámetro. No obstante, las elecciones en Kenia pueden realmente aceptar múltiples parámetros. Entonces la otra forma de hacerlo es solo enviar el ID en el contenido como dos parámetros separados. En este caso, creo que deberíamos hacerlo de esa manera porque hará que nuestra acción quede un poco más clara porque podremos decir exactamente lo que se está pasando aquí. Así que vamos a configurar esta opción va a crear una nueva acción llamada Fecha de libro. Nota, esto va a recibir un parámetro ID, el parámetro de contenido r. Vamos a bloquear estos hacia fuera. Voy a cerrar sesión ID. Entonces cerraremos la sesión del parámetro conceptual también. Ahorra eso. Ahora vamos a activar el oxígeno aquí y nuestra acción va a ser en robó notas, puntos, actualización, nota, porque este es el nombre que dimos nuestra acción aquí. Y esto va a esperar un parámetro ID en el parámetro concept. Entonces el ID que vamos a soltar de nuestros parámetros de ruta, las rutas detienen el ID de punto de Ram. Y entonces el concepto que sólo vamos a agarrar de esta nota contenido href, que está vinculado al área de texto. Para que podamos obtener eso del valor de punto de contenido de nota. Ahora vamos a guardar eso y ver si estos dos parámetros están llegando a través de esta acción. Recargar, cambiar el contenido, haga clic en Guardar. Y sin embargo podemos ver a los que están siendo bloqueados por nuestra acción. Se puede ver que el id está bloqueado en el contenido actualizado siendo bloqueado también. Ahora solo necesitamos actualizar las notas correctas en nuestro estado. Y una forma en que podríamos hacer eso es averiguar primero el índice o la posición de las notas en nuestra matriz utilizando el método find index. Y luego podemos simplemente actualizar las notas de nuestro derecho en esa posición y actualizar la propiedad de contenido. En primer lugar, solo agarremos el índice de las notas que queremos actualizar. Entonces configuraré una variable llamada index. Y luego vamos a disparar el método de índice bind en nuestras notas son correctas. Y podemos llegar a nuestra matriz de notas en este punto notas. Para que podamos hacer este punto apuntes, dot find, index. Y de nuevo, usaremos notas como nuestro placeholder ya que está haciendo un looping a través de nuestra matriz. Establezca eso igual a una función de flecha. Y queremos devolver el índice de la nota donde el ID de la nota sea igual a esta idea de que estamos pasando a esta acción igual a Id. Y en realidad creo que sólo podemos dispararle esto quitando estos tirantes rizados y la palabra volver. Veamos sólo si eso funciona. Además, voy a hacer lo mismo a este filtro de aquí abajo, puedo mostrar esto quitando los paréntesis, volver en estos paréntesis de cierre, ya que sólo estamos disparando una línea aquí. Así que vamos a cerrar la sesión de este índice y ver si eso está funcionando. Índice. Guarda eso, recarga la página y cámbiala y haz clic en Guardar. Podemos ver que el índice es, se establece a uno aquí, lo cual es correcto porque esa es nuestra segunda nota. Si saltamos de nuevo a la primera nota, haga un cambio y haga clic en Guardar. Déjame ver el índice 0 que se cierra la sesión. De acuerdo, entonces ahora que tenemos el índice de las notas que queremos actualizar y nuestra matriz de notas, ahora podemos actualizar la nota. Así que desplácese hacia abajo a nuestra acción de actualización. Voy a deshacerme de estos console.logs, notas de acceso, array. Podemos simplemente hacer estas notas de punto. Y luego para acceder a las notas en la posición de índice, sólo podemos hacer corchetes índice. Entonces queremos acceder al concepto de propiedad y configurarlo a este contenido que estamos pasando a esta acción. Entonces establece eso igual al contenido y quita este registro de consola. Veamos si eso está funcionando. Entonces voy a recargar, hacer un cambio nuevo concepto. Haga clic en Guardar. Ahora si hacemos clic en cancelar, podemos ver que la primera nota se ha actualizado con el nuevo contenido. Vamos a asegurarnos de que funcione también en la segunda nota, haga clic en editar algún contenido nuevo, haga clic en Guardar, haga clic en cancelar. Este nodo también ha sido actualizado. No obstante, cuando el usuario hace clic en Guardar en este botón, no queremos dejarlos en esta página. Realmente queremos redirigirlos de nuevo a la página de notas. Hagámoslo a continuación. Pero antes de seguir adelante, acabo de darme cuenta que aquí hay otra declaración de retorno que podemos taquigrafía. Voy a quitar este corsé rizado en nuestra acción de borrar nota al regreso. Y no me quito el corsé rizado de cierre también. Echemos un vistazo a la nota impar. Ese está bien tal como está. Vamos a salvar eso. 92. useRouter : Redirigir a la página de notas: Vamos a redirigir al usuario de nuevo a la vista de notas. Después de esta nota se ha guardado. Vamos a saltar a ver editar la vista de punto de nota. Tenemos que hacer esto en nuestra sección de guiones. Después de esta línea. En la API de Opciones, podríamos simplemente hacer este router dot dollar. Entonces no los empujes y los empujes a la raya del camino. Mientras que en la API de composición, esto no va a funcionar. Así que vamos a deshacernos de eso. Y necesitamos importar el router composable estadounidense desde Vue Router. Vamos a saltar hasta la cima aquí donde estamos importando ruta de uso. Podemos simplemente empezar a usar router que necesitamos asignarle a esto una constante antes de poder usarlo. Para que podamos hacer eso después de que hayamos instalado, usaré la constante de ruta. Podemos simplemente hacer un const, usar. Const rutas iguala uso router. Ahora podemos acceder a toda la ruta habitual. Entonces métodos como Porsche y reemplazan de nuevo usando esta constante. Así que ahora abajo para manejar guardado método clicked. Después de actualizar la nota, solo podemos hacer router dot push, los empujaremos de nuevo a la página de notas, que está en la ruta de la slash. Salvemos eso y veamos si eso está funcionando. Recargar la página, cambiado, el contenido, puede ahorrar en sin embargo estamos de vuelta en la lista de notas. Podemos decir que se ha actualizado un nodo. 93. Más página página de Getters y estadísticas: Para demostrar aún más que nuestra tienda de opiniones, tienda Node.js se puede utilizar en cualquier lugar dentro de nuestra app. Vamos a crear una nueva página, una página de Estadísticas, que en realidad ya hemos configurado una página en una ruta para eso. En esta página, vamos a mostrar una tabla en la que se muestra cierta información sobre nuestras notas. Vamos a mostrar el número total de nodos que tenemos y también el número total de caracteres de todas nuestras notas combinadas. Pero antes de configurar esta página de Estadísticas, he notado que este menú móvil no está desapareciendo cuando hacemos clic para ir a una nueva página. Vamos a arreglar rápidamente primero Barra suficiente es un diseño de componentes fuente y Navbar? Desplazemos hacia abajo hasta la sección de guiones. Este show mobile suficiente ref es lo que está determinando si se muestra o no el menú móvil. Si cambio esto a true, podemos decir que el menú móvil se muestra por defecto. Volveré a poner eso a falso. Y así lo que podríamos hacer es solo asegurarnos de que volvamos a configurar esto a false cada vez que se haga clic en uno de nuestros enlaces en el menú móvil. Así que saltemos a los enlaces del router A2 aquí, notas, y estadísticas. Y sólo podemos agregar un manejador de clics a ambos. Voy a hacer una selección múltiple aquí. Pon mi cursor aquí al lado de la palabra rutas enlace. Mantenga pulsada la tecla Alt y luego coloque otro cursor al lado de esta etiqueta de apertura de enlace de enrutador, presione Enter. Se me permite hacer click handler y sólo vamos a volver a configurar este show mobile nav a false. Por lo que sólo podemos hacer mostrar móvil ahora es igual a false, guardar esa recarga y ojalá este menú móvil desaparezca cuando cambiemos de páginas, y lo hace. Así que utilicemos el componente de tabla de Ballmer para mostrar algunos datos sobre nuestras notas. Acabo de configurar el marcado para eso primero, cerraré estos módulos de archivos para preguntar puntos, vistas de página, vista, estadísticas, vista de puntos. Para agregar una mesa con algunos estilos bonitos, solo necesitamos agregar una mesa normal con una clase de mesa. Vamos a crear una tabla con una clase de tabla dentro de eso sin elemento de cabeza T en nuestro elemento cuerpo. Y luego en nuestro elemento cabeza T sin fila. Entonces TR, fila de mesa. Estoy dentro de eso. Agregaremos un par de celdas Th, celdas de encabezado de tabla. En el primero, acabo de poner el rubro parado, duplicar eso. Y luego en el encabezado de la segunda tabla, solo voy a tirar de valor, guardar eso. Y ahora podemos ver nuestra fila de cabecera de mesa que. Entonces en nuestro cuerpo agregaremos una fila de tabla en el interior que agregará un par de celdas de datos de tabla TDS. En el primero queremos poner el nombre de nuestras estadísticas. Entonces voy a poner número de notas. Y luego en la segunda celda vamos a mostrar el número real de notas, pero por ahora solo pondremos XXX y duplicaré esta fila de tabla y luego seguiré el nombre. Pondré número de caracteres, paréntesis de todas las notas. Decir que para hacer de esta tabla de ancho completo, sólo podemos agregar una clase a la tabla de está discontinuado ancho de guión completo. Esta es sólo otra clase anterior, digamos, pero en realidad creo que el ancho completo es una palabra. Así que vamos a deshacernos de ese guión, salvo eso. Y ahora tenemos una mesa de aspecto bastante decente donde podemos mostrar estas estadísticas. Entonces primero vamos a configurar un getter para mostrar el número de notas aquí. Así que vamos a saltar a nuestras tiendas fuente de archivos de tienda robaron notas dot js, saltamos a nuestros getters en una coma y agregue un nuevo Get up. Entonces podríamos llamar a esta cuenta total de notas que igual a una función de flecha, pasar en el estado. Queremos devolver el número total de notas en nuestras notas justo en nuestro estado. Entonces para acceder a la matriz de notas podemos hacer notas de puntos estatales. Por lo que sólo podemos devolver notas de puntos estatales. Y luego para obtener el número de elementos en la matriz o la longitud de la matriz, solo podemos hacer la longitud del punto. Ahorra eso. Vamos a saltar de nuevo a View Stats vista de puntos. Ahora necesitamos importar nuestra tienda. Así que vamos a establecer nuestras etiquetas de configuración de script en un comentario que dice entradas. Y vamos a importar notas de tienda de Estados Unidos desde slash store slash store notas que necesitamos asignar esto a una constante. Genial, otro comentario aquí bajo inicio const, notas de tienda es igual a usar notas de tienda. Ahora deberíamos poder usar nuestro getter. Entonces vamos a reemplazar este primer XXX después de número de notas con llaves dobles rizadas y notas de tienda. ¿ Cómo lo llamamos? Cuenta total de notas. Por lo que aún Notas puntan las notas totales cuentan. Guarda eso, y ahora vemos esa actualización a dos. Y sí tenemos dos notas. Si agregamos otra nota, tal vez un par más. Regresa a la página de estadísticas. Esto ahora dice For, puedes ver que podemos usar fácilmente todo lo que hay en nuestra tienda, cualquier lugar dentro de nuestra app y todos los datos en nuestra tienda y todos los resultados de nuestros captadores siempre se mantienen al día en tiempo real independientemente de donde vayamos dentro de nuestra app. Ahora eso configura un getter más para agarrar el número de caracteres de todas las notas. No estoy seguro si el número de caracteres simplemente cambia eso. Saltemos de nuevo a nuestra tienda, añadamos un nuevo getter, y llamaremos a esta cuenta total de caracteres en una función de flecha. Pase en el estado. Ahora vamos a tener que recorrer cada nota que está en nuestra matriz de notas para averiguar el número total de caracteres de todas las notas. Podríamos simplemente configurar una variable para contar esto. Crearé una variable llamada count set que sea igual a 0 por defecto. Y luego simplemente pasaremos por nuestras notas, a la derecha, la longitud del contenido de cada una, y luego añadimos esa longitud a esta variable de recuento y luego solo devolveremos esta variable de recuento al final. Por lo que podríamos usar un para cada uno para hacer esto. Para agarrar nuestra matriz de notas, solo podemos hacer notas de punto de estado que podemos usar un para cada método para recorrer cada nota en esta matriz ya que está haciendo un bucle esta matriz ya que está y está mirando a cada uno, vamos a necesitar un placeholder. Entonces solo usaremos note para eso, luego agregaremos una función de flecha. Esto va a mirar el primer nodo y asignarlo a este titular del lugar de nota. Por lo que sólo podemos dejar caer el contenido, no contenido de puntos, concepto de punto. Y luego para obtener la longitud de esa cuerda, solo podemos hacer longitud de punto. Podemos entonces solo agregar el resultado de esto a esta variable de conteo. Simplemente podemos hacer contar más iguala así. Y luego cuando esté hecho, mirando el primer elemento, saltará al segundo elemento y luego agarrar la longitud de la siguiente propiedad conceptual y simplemente seguir agregando a esta variable de recuento hasta que sea pasó por completo a través de la matriz. Entonces al final solo podemos devolver esta variable de conteo. Así que vamos a devolver conteos, guardar eso, recargar la página. O necesitamos realmente usar este getter, que hemos llamado recuento total de caracteres. Sólo voy a copiar ese nombre. Saltar a la vista, vista de inicio-inicio, selecciona este XXX llaves dobles rizadas. Y luego para usar nuestro gueto, solo podemos hacer cargas de tienda, puntos, recuento total de personajes, guardar eso. Ahora vemos esa actualización. Si saltamos a la página de notas, edita una de nuestras notas. Salta hacia atrás. Podríamos decir que este valor ahora se incrementa. Si eliminamos todas nuestras notas, salta a la página de Estadísticas. Ahora vemos que tenemos 0 nodos en 0 caracteres totales. 94. Directiva: Autofocus [Módulo 17]: Agreguemos una directiva personalizada a esto. Una cosa que podríamos hacer es crear una directiva personalizada la cual enfoca automáticamente esta área de texto cuando se carga la página, que el usuario pueda empezar a escribir de inmediato y notas sin tener que hacer click en ella. En primer lugar, vamos a resolver una directiva personalizada local dentro este componente Agregar edición de nota. No estoy diciendo que los componentes de origen, las notas y las notas de edición salten hacia abajo a la sección de script. Saltaré al fondo. Agreguemos aquí un nuevo comentario de bloque que dice directivas. ¿ Recuerdas cómo agregamos una directiva Costera Local? Siéntete libre de pausar el video, mira si puedes recordar cómo hacerlo. Pero lo que hacemos es crear una constante y necesitamos asegurarnos de que el nombre de esta constante empiece con una v minúscula y esté en CamelCase. Entonces podríamos llamar a esta vena autofocus. Establecemos esto igual a un objeto y podríamos añadir cualquier ganchos que queramos aquí como creado, vamos a usar montado y lo configuramos igual a un método como este, y podemos pasar el parámetro L aquí . Este parámetro l nos dará acceso al elemento una vez que esté montado como un en el elemento al que añadimos esta directiva V autofocus. Podemos entonces simplemente enfocarlo con enfoque de puntos L. Ahora solo podemos agregar esta directiva a cualquier elemento enfocado que esté en este componente. Entonces vamos a añadirlo a nuestra área de texto que está aquí. Recuerda que necesitamos cambiar el nombre que hemos usado aquí de CamelCase por el caso del guión. No podemos esto como este v dash autofocus. Ahorra eso. Y si recargamos esta página, podemos ver que el área de texto se enfoca automáticamente sin que necesitemos hacer click en ella. Dado que este componente de notas de edición de arte es un componente compartido que también se utiliza en la página de edición. También debe funcionar aquí también, lo que hace. Podemos ver el área de texto auto enfocada aquí también. 95. Directiva global: Autofocus: Ahora digamos que tenemos una entrada en nosotros Página de Estadísticas. Vamos a saltar a las estadísticas Página, Fuente, Vistas, vista, estadísticas punto vista. Y colapsaré nuestra mesa y agregaremos una entrada después de esto. Y pondré el tipo a textos y le daremos a este un placeholder. ¿ Te encanta? No bolas. Guarda eso, y salta a nuestra página de estadísticas para que esto se vea un poco más bonito. Mucha clase de insumos, que es de Bohmer. Eso es mejor. Digamos que también queremos autoenfocar este impulso cuando esta página se haya cargado. Bueno eso no va a funcionar actualmente. Si añadimos esta directiva sea autofocus aquí, guarde eso y recargue. Si miramos nuestra consola, podemos ver un error. No se pueden leer propiedades de lectura indefinida en profundidad. Eso se debe a que este enfoque automático V no existe dentro del contexto de este componente vista estadísticas punto vista solo existe en el arte editar notas dot componente Vue, donde lo hemos configurado aquí. Vamos a saltar de nuevo para ver estadísticas vista de puntos. Quita esta directiva de enfoque automático V, guárdelo, y salta de nuevo a nuestra página de notas y agrega editar nope dot view. Y hagamos de esta directiva una directiva global que podemos usar en cualquier lugar. Entonces, antes que nada, vamos a crear una nueva carpeta en nuestra carpeta fuente donde puedan vivir todas nuestras directivas. Así que voy a hacer clic derecho en la carpeta fuente, hacer clic en Nueva carpeta, y crear una carpeta llamada directivas. Dentro de eso vamos a crear un nuevo archivo llamado autofocus dot js. También podríamos darle el mismo nombre que nuestro nombre constante. Ahora vamos a saltar a añadir editar nope dot view, seleccionamos esta constante y córtala. Y también eliminemos este comentario y guardemos eso. Ahora vamos a saltar a un nuevo archivo V autofocus y pegar directiva en todo lo que necesitamos hacer es exportar esto, que se pueda importar desde nuestros componentes. Por lo que sólo podemos empezar las exportaciones por eso, salvo eso. Y ahora si saltamos a agregar edit self.view, sólo podemos importar esta directiva. Así que vamos a saltar a nuestras entradas y simplemente podemos hacer importar llaves rizadas V autofocus de las directivas slash slash el enfoque automático. Ahorra eso. Ahora sólo tenemos que añadir la directiva al área de texto, cosa que ya hemos hecho. Por lo que esto ojalá esté funcionando ahora y podamos ver cuando recargamos la página sigue siendo autofocus es el área de texto excepto ahora está usando esta directiva global que hemos creado. Así que utilicemos la misma directiva global en nuestra página de estadísticas. Vamos a saltar a ver estadísticas punto vista. Tenemos que importar la directiva. Por lo que sólo voy a saltar de nuevo a Agregar Editar nota dot Vue. Copia la instrucción import, salta a ver stats dot view, pega eso aquí, guarde eso, y ahora podemos usar eso aquí también. Entonces vamos a añadirlo a esta entrada que acabamos de crear. Entonces V dash también se enfoca, guardar eso, recargar y podemos ver esta entrada en la página de inicio es ahora autofocus también. 96. Mira el número de personajes (Watch): Agreguemos a esto un vigilante. Digamos que en nuestra vista de página de notas, notas vista de punto, queremos ver el número de caracteres que se están ingresando en esta área de texto. O en otras palabras, el número de caracteres en esta nueva nota ref que está en la vista notas vista punto. Y si eso llega a unos 100 personajes, queremos mostrar una elipse. Vamos a añadir un reloj ella para hacer esto en las notas de vista vista vista punto. Entonces, ¿recuerdas cómo agregamos un vigilante? Eso es correcto. Primero necesitamos importar el método de reloj desde la vista, y luego usamos este método de reloj. En la parte inferior aquí, voy a añadir un nuevo comentario que dice reloj. Los personajes utilizarán este método de reloj. El primer parámetro son los datos que queremos ver, y queremos ver esta nueva nota, href, solo podemos pasar en notas nuevas como primer parámetro. El segundo parámetro es un método método callback que se disparará en cualquier momento esta propiedad de datos que se especifica aquí cambia, si nos gusta, podemos pasar el nuevo valor en el valor antiguo aquí. Vamos a cerrar estos fuera. Entonces un cierre de sesión un nuevo valor y luego coma nuevo valor. Entonces duplicaré eso y cerraremos la sesión de valor antiguo. Ahorra eso, recarga. Si cambiamos los textos, podemos ver el valor antiguo y el nuevo valor siempre siendo bloqueado. Ahora en realidad no vamos a necesitar el viejo valor aquí. Me deshago de eso y me deshago de estos troncos. Si la longitud del personaje de esta nueva nota ref llega a 100, vamos a mostrar una elipse. Podemos simplemente agregar una declaración if para hacer esto. Entonces podemos hacer si valoras la longitud del punto para obtener la longitud del nuevo valor es igual a 100, entonces podemos alertar a alguien, iluminado solo 100 caracteres permitidos. Caray, maldad. Si recargo. Y sólo para que sea más fácil probar esto, voy a saltar al área de texto subyacente, que está en las notas de componentes de origen en impares editar la vista de punto de nota. Solo voy a agregar un atributo de longitud máxima a este conjunto que a 100. Vamos a probar esto. Simplemente podemos empezar a escribir en esta área de texto. Cuando llegamos a 100 caracteres, vemos las alertas. Podemos decir que nuestro vigilante está trabajando. 97. Composición - useWatchCharacters: Ahora digamos que queremos tener la misma funcionalidad de caracteres de reloj en nuestra página de estadísticas en esta entrada. Bueno, podríamos simplemente copiar este código de reloj, pegarlo en la vista de página de Estadísticas, estadísticas punto vista, y luego simplemente ajustar la propiedad de datos que estamos viendo aquí. Bueno entonces estaríamos duplicando código. Sería malo poner a este vigilante en su propio archivo composable, que podemos usar en todas partes. Entonces hagamos eso. Saltemos a nuestro explorador. Y queremos poner nuestra composable en una carpeta llamada use dentro de la carpeta fuente. Vamos a hacer clic derecho fuente y elegir Nueva carpeta. Crea una carpeta llamada usar esa dentro que creará un nuevo archivo llamado US watch characters ab.js. Para configurar una composable, solo necesitamos exportar una función con el mismo nombre que nuestro archivo. Usa personajes de reloj. Así. Vamos a saltar de nuevo a ver notas dot Vue. Acabo de atrapar a este vigilante. Salta a nuestra composable y pega eso aquí. En realidad soy backhaul Snopes punto view. Ahora podemos quitar el método de reloj que estamos importando. Guarda eso, salta de nuevo para usar personajes de reloj. Y sí necesitamos importar este método de reloj aquí. Apenas agreguemos entradas, miren desde la vista. Ahora para que este composable genérico, necesitamos poder pasar en la propiedad de datos que queremos ver como parámetro. Así que aceptemos eso aquí. Entonces podríamos simplemente llamar a este valor para ver o algo así. Lo que sea que estemos pasando aquí es lo que queremos ver aquí, vamos a cambiar nuevas notas a valor para ver y guardar eso. Y ahora deberíamos poder utilizar esto imposible para ver el número de caracteres de cualquier propiedad de datos dentro de nuestra app. Y luego mostrar esta alerta si golpea 100 caracteres. Entonces vamos a saltar a ver notas punto view, y necesitamos importar esta composable. Entonces las entradas usan caracteres de reloj. De slash users slash, USE watch characters. Di eso, saltemos a nuestra página de notas. Saltar hacia abajo al fondo. No deberíamos poder utilizar esta composable para ver esta nueva nota href, que está vinculada al área de texto. Simplemente podemos hacer uso de personajes de reloj y luego pasar en el rack que queremos ver. Nueva nota, tenga en cuenta, guarde eso. Veamos si eso sigue funcionando. Sigue trabajando. Y ahora también deberíamos poder utilizar la misma funcionalidad en nuestra página de estadísticas. Así que vamos a saltar a nuestra página de estadísticas. Vistas, vista, Stop, Stop view. Nuevamente, necesitamos importar esta composable. Simplemente copiaré la línea de entrada desde la vista. Nota parada Ver. Pega eso aquí. Y ahora deberíamos poder usarlo también en la página de estadísticas. obstante, no tenemos una configuración de propiedad de datos para esta entrada aquí. Así que vamos a configurar eso. Mucho comentario aquí, que dice bolas de nota de amor casi pone un href. Entonces const, love note balls equivale a un href con un valor inicial de una cadena vacía, y necesitamos importar ref desde la vista. Vamos a agregar eso a la entrada superior ref desde la vista. Ahora vamos a unir esta balsa a la entrada. Aquí está la entrada. Modelo V. Ponerlo demasiado bajo de bolas de nota. Ahorra eso. Vamos a cambiar este valor predeterminado para ver si está conectado. Aún así. Eso es todo lo que tomó. Ahora deberíamos poder ver a los personajes en esta entrada. Así que de nuevo, solo podemos hacer uso de personajes de reloj pasando el naufragio que queremos ver, que es amor, nope, bolas, amor, bolas de nota. Santo que. Ojalá debamos ver aquí la misma funcionalidad. Sí, está funcionando. 98. Composición - Varios parámetros: Hagamos que nuestro uso ver personajes componibles un poco más flexible. Por lo que en este momento la alerta siempre será disparada cuando la longitud de los personajes alcance un 100. Pero digamos que queremos poder ajustar el número de caracteres en los que se encuentra esta phi. Digamos que en la página de notas queremos averiguar esto 100 caracteres. Pero en la página de estadísticas de esta entrada, queremos encontrar esto hasta 50 caracteres. Bueno, podríamos hacer esto agregando otro parámetro para usar la función root de caracteres de reloj aquí. Agreguemos aquí un segundo parámetro llamado tarros max. Podemos pasar lo mismo cuando usamos esta composable en nuestros componentes en nuestra declaración if aquí, lugar de si NewValue like es igual a un 100 hará si nuevo valor dot length es igual a max chars, voy reemplace un 100 caracteres máximo de ancho, y también emitiremos este número en nuestra alerta también. Cambiaré esto a una cadena de plantilla. Voy a reemplazar las llaves rizadas de $100 me permiten poner este max chars. Vamos a conseguir que tanto los parámetros de frascos establezcan un valor predeterminado en caso de que no se haya proporcionado. Podríamos hacer eso simplemente estableciendo caracteres max es igual a 100. Ahorra eso. Dado que actualmente no estamos proporcionando el parámetro de este hijo max en la página de notas, entonces esto debería funcionar como lo hacía antes. Al disparar las alertas son unos 100 caracteres. Vamos a probar eso. Sin embargo, aún no se trabaja en un 100 personajes. Digamos que en nuestra página de notas, solo queremos usar la funcionalidad predeterminada con unos 100 caracteres. Pero en nuestra página de estadísticas queremos que los caracteres max sean 50 caracteres. No veamos la página de estadísticas en jolt para ver estadísticas vista de puntos. Desplazemos hacia abajo hasta donde estamos activando nuestra composable, pasando el segundo parámetro de 50. Ahora vamos a salvar eso. Recargar. Esto debería estar disparando un poco antes ahora a 50 caracteres, dice que sólo se permiten 50 caracteres. Caray, maldita sea. Y así nuestra composable ahora es mucho más flexible y útil. Y por supuesto podríamos hacerlo más flexible con parámetros adicionales, etcétera Ahora para una simple composable como esta, que sólo contiene un vigilante, entonces tiene sentido simplemente importar el composable y acaba disparar la función composable raíz como lo estamos haciendo aquí. Pero para más complicados, componibles, que contienen un montón de cosas diferentes como datos, métodos, propiedades computadas, etcétera Entonces tiene más sentido extraer sólo las cosas que necesitamos del composable utilizando la estructuración. Y para un recordatorio de cómo lo hacemos con composable más complejo, salta de nuevo al Módulo 11. El módulo composable. 99. Haz clic en Composable (VueUse, Template Refs): Hemos creado una composable personalizada, pero también agreguemos una composable desde la biblioteca de vistas. Y si miramos aquí nuestro menú móvil, actualmente la única forma en que podemos cerrar esto es haciendo clic en la x No podemos cerrarlo haciendo clic fuera de él, como solíamos esperar. Entonces vamos a utilizar uno de los componibles desde la vista use biblioteca para resolver este bosque. Vamos a saltar para ver use.org. Empieza. Tenemos que instalar esto primero. Hablemos con nuestra terminal. Mata. El proceso de muerte ejecutará este comando para instalar Vue use. No he terminado, así que vamos a relanzar nuestra app con npm run dev. Por el lado de la vista, vamos a ir a funciones de menú, sentidos. Vamos a usar este onclick fuera composable. Entonces vamos a hacer clic en eso. Podemos ver un ejemplo aquí. Podemos abrir un modal. Podemos cerrarlo con el botón X, pero también podemos cerrarlo haciendo clic en cualquier parte fuera del modal. Entonces escondamos aquí la terminal. Cierre todos nuestros componentes. Abre el diseño de componentes de fuente de barra de navegación, Napa. Veamos el código de ejemplo aquí. Necesitamos importar el onclick fuera composable desde el uso de la vista. Entonces vamos a copiar esa línea eso a nuestra sección de reporte aquí. Podemos ver en este ejemplo aquí necesitamos configurar una plantilla REF que destruya al elemento antes de poder usar esto. Así que descubramos suficiente elemento de menú, que está aquí, este div con una clase de menú de guión navbar. Agreguemos un ref a esto. Podríamos llamar a este menú navbar ref o algo así. Saltemos a la sección de guiones. Mucho comentario aquí que dice click afuera para cerrar. Necesitamos configurar nuestra plantilla href. Podemos ver en este ejemplo aquí. Crearemos una constante con el mismo nombre que nuestro ref, cuál es dónde ha ido? Suficiente, menú bomba ref. Entonces const navbar, menu ref dt es igual a ref con un valor predeterminado de null. Ahora podemos usar esta composable. Así que vamos a copiar esta línea aquí. Pega eso aquí, cambia el objetivo a este href aquí. Entonces copiaré eso, pegaré eso ahí, guarde eso. Y vamos a mostrar el menú móvil. Despeja la consola y haga clic afuera en algún lugar. Y pudimos ver los objetos de los eventos siendo encerrados aquí. Entonces eso parece estar funcionando. Pero no queremos simplemente cerrar la sesión del objeto de evento. Así que voy a seleccionar todo eso y agregaré llaves rizadas y agregaré una nueva línea en el medio. Esta referencia de Show Mobile Nav determina si se muestra o no el menú móvil. Por lo que sólo podemos volver a poner esto en falso. Una vez que hemos hecho clic afuera. En este método onclick externo, solo podemos hacer Show Mobile Nav valor es igual a false. Simplemente quitaré el objeto del evento de aquí porque no vamos a necesitar eso. Guarda eso, y veamos si está funcionando. Muestra el menú. Haga clic afuera. Vemos que desaparece. No obstante, ahora no está cerrando el menú móvil cuando hacemos click en la X. Veamos si podemos arreglar eso. Vamos a saltar hasta ese botón, que está aquí. Creo que veo lo que está pasando aquí. Actualmente el menú móvil está mostrando lo que hicimos clic en el botón de hamburguesa. Porque esto está fuera del menú móvil. Está activando el evento onclick externo al configurar Mostrar Mobile Nav de nuevo a false al ocultar el menú móvil. Lo que llamamos. También tenemos este manejador de clics en el botón de hamburguesa. Esto es entonces disparando este código, que va a establecer show mobile nav a lo contrario de sí mismo. Este punto lo va a volver a hacer realidad. Si saltamos de nuevo a la documentación onclick fuera y desplazamos un poco hacia abajo, en realidad podemos agregar un objeto options como un tercer parámetro después del objetivo, el manejador, donde podemos tener este ignore opción para decirle a la composable qué elementos ignorar la funcionalidad exterior onclick. Podríamos simplemente hacer que ignorara todos los clics en esta hamburguesa navbar. Ahora necesitamos configurar primero una plantilla ref para este agar bob. Agreguemos un ref a este colono T2 nav bar, hamburguesa ref. Ahorra eso abajo. Necesitamos configurar datos ref para eso aquí, voy a duplicar éste. Cambia esto a costar navbar burger ref. Entonces en esta función onclick exterior, después de nuestra función de manejador, podemos agregar coma y luego un objeto que dentro que no podemos ignorar opción. Establezca eso igual a una matriz, pase en la plantilla ref resolver cualquier elemento que queremos que esta composable ignore. Así que pasemos en este mendigo navbar F, pega eso ahí, guarde eso. Veamos si eso está arreglado. Haga clic en el botón. Aún podríamos cerrarla haciendo click sobre la X. Veamos si aún podemos dar click afuera para cerrarla. Y sí, podemos. 100. Eliminar el diseño modal (objetos reactivos): De acuerdo, por lo que nuestra aplicación está básicamente completa. En esta salida hemos cubierto casi todo lo que cubrimos en los módulos anteriores. Solo hay una cosa más que quiero agregar, es un modal que se muestra cuando hacemos clic en el botón Eliminar para pedirle confirmación al usuario antes de que se elimine la nota. Las razones por las que quiero añadir esto son el número uno, nos permitirá añadir unos objetos reactivos a nuestra app, que aún no hemos utilizado. Número dos, nos permitirá usar algunos ganchos de ciclo de vida que aún no hemos utilizado. Número tres, nos ayudará a solidificar nuestro conocimiento de datos sobre eventos a través de componentes padre e hijo utilizando apoyos, emite, valor del modelo y actualizar el valor modal. Y creo que es una buena idea volver a repasar estas cosas padre-hijo, porque estos conceptos pueden ser bastante confusos, sin embargo son realmente K para crear aplicaciones API de composición sólida. En primer lugar, vamos a crear un nuevo componente para nuestro modal. Voy a saltar a componentes fuente, notas. Y no quiero crear un nuevo archivo en esta carpeta llamada modal Eliminar Nota punto vista. Por ahora, solo voy a sacar etiquetas de plantilla ahí dentro. Dave. Sólo pondré los textos. Se trata de un modal. Guarde eso ahora en nuestras notas componente nota punto vista. Vamos a saltar a eso. Notas de componentes. No, vista de punto. Agreguemos un objeto reactivo donde se muestre la propiedad para determinar si se muestra o no este modal. Voy a importar ref review, así que agregaré eso aquí. Entonces me desplazaré hacia abajo hasta el fondo. Voy a añadir un comentario de bloque que diga modales. Voy a configurar un nuevo objeto reactivo llamados modales. Modals es igual a reactivo, reactivo que necesitamos importar desde la vista, no href. Vamos a reemplazar eso por reactivo. Pasando el objeto. Y voy a agregar una propiedad llamada Eliminar Nota Establecer punto igual a false. Esta propiedad determinará si se muestra o no el modal. Si es falso, no lo mostramos. Y si es cierto, entonces sí lo mostramos. El motivo por el que he usado aquí un objeto reactivo es porque en muchas aplicaciones como esta, podríamos tener un montón de modelos diferentes. Por ejemplo, ahora mismo cuando editamos una nota, saltamos a una nueva página, pero podríamos decidir reemplazar esta funcionalidad por un modal para editar las notas. Este objeto reactivo nos da un lugar donde podemos gestionar todos nuestros modelos juntos. Es posible que tenga otra propiedad aquí, edite notas, y luego use esta para administrar editar notas modales. Pero por ahora solo vamos a agregar este eliminar notas modales, así que me deshago de eso. Ahorra eso. Vamos a importar nuestro nuevo componente modal y solo mostrarlo cuando esta propiedad delete notes es verdadera. Entonces saltaremos a nuestros insumos. Vamos a importar modal borrar nota de slush components slash notes, slash modal delete, notas vista de punto. Yo lo guardaré. Y ahora vamos a colocar esto después de nuestro elemento de pie de página modal. Suprímase nota. Ahorra eso. Y ahora podemos ver eso en ambas notas. Pero solo mostremos esto cuando los modales Dot Dot Dot Dot Note sea true. Por lo que mucho v-if dirigido a este modal v dash, si modales, puntos, eliminar, nota, guardar eso. Y vemos desaparecer el modal. Si cambiamos modales dot delete node a true, entonces lo vemos reaparecer. Vamos a volver a poner eso en falso y guardar eso. Ahora vamos a usar las balas para crear un modal de aspecto agradable. Así que vamos a saltar de nuevo al sitio de molino de bolas en el.io docs a componentes y modal. Vamos a desplazar un poco hacia abajo aquí. Vamos a usar este ejemplo de tarjeta modal, que se ve bastante bien. Voy a copiar todo el código para esto. Saltar a modal, Eliminar, Nota punto Vue. Sólo pega todo eso aquí. Deshazte del div que agregamos antes. En densa todo un poco y guardar esa recarga para que en realidad podamos ver este modal cuando hacemos click en Eliminar. Vamos a saltar a nuestro botón Eliminar en la vista de puntos Nope , que está aquí. En lugar de activar nuestras notas de eliminación, acción en nuestra tienda, en cambio solo mostrará este modal. Para ello, solo podemos hacer modales, Dot, Dot, Date , notas igual a true. Ahorra eso. Haga clic en Eliminar. Todavía no estamos viendo el modal. Veamos si se está agregando a nuestra maqueta aquí. Por lo que inspeccionaré esta nota. Podemos decir que el modal se ha agregado a la página, pero no lo estamos viendo. Creo que eso es porque necesitamos sumar una clase de activa al modal. Ahora lo podemos ver. Así que vamos a saltar de nuevo a nuestro componente modal y agregar esta clase a la raíz está activa. Ahorra eso. Ahora vamos a hacer clic en el botón Eliminar. Ahora podemos ver el modal. Ahora vamos a modificar esto un poco. Vamos a cambiar este título aquí, título modal para eliminar notas, interrogación, guardar eso. Y agreguemos algo de contenido al vello corporal. Por lo que dentro de esta clase de cuerpo de tarjeta modal, acabamos de añadir, tú. Seguro. Desea eliminar esta nota, guarde eso. Y ahora podemos ver ese mensaje. Ahora quiero alinear estos botones hacia la derecha. Si nos dirigimos a este elemento de pie con una clase de flashcard modal dash four. Podemos hacer esto agregando una de las clases de Flexbox de Ballmer, que es sólo para phi dash, dash, dash y decir, en realidad creo que es justificar flex de contenido y vamos a probar eso. Ahorra eso. Nuevamente, se pueden encontrar todas estas clases documentadas en el antiguo sitio. Vale, ahora voy a intercambiar estos botones por ahí. Pon primero el botón cancelar dentro de este pie de página. No quiero cambiar el texto en este botón Guardar cambios para eliminar. Creo que tiene sentido hacer rojo este botón para que podamos simplemente cambiar. Esto es el éxito. La clase dos es peligro. Para que sea leída. Este modal se ve bastante bien ahora. Ahora sólo tenemos que conseguir que se comporte correctamente. Para que ese número uno, podemos ocultarlo cuando hacemos click en esta X o en el botón Cancelar. Si pinchamos fuera del modal. Para ello, vamos a utilizar nuestro click fuera composable desde el uso de la vista nuevamente. También necesitamos conseguir esto para realmente eliminar la nota cuando hacemos clic en el botón Eliminar. También vamos a agregar algo de control de teclado a esto para que el usuario pueda golpear Escape para cerrar el modal. Para ello, vamos a hacer uso de algunos ganchos para el ciclo de vida. 101. OIDA el modal Eliminar (modelValue y Modal: Si el usuario hace clic en este botón de consejo o esto explota en ellos, queremos ocultar este modal. Ahora estos botones están en nuestro componente hijo. Modal Eliminar Nota vista de puntos. Pero si el usuario hace clic en estos botones, entonces queremos modificar los modales Dot, Delete Note propiedad que está en el componente padre. Una forma en que podríamos hacer esto es emitiendo un evento de cliente cuando hacemos clic en estos botones. Y luego en el componente padre, anote la vista de punto, escuchando ese evento. Y cuando se reciba. Establecer modales Dot, Delete, Note, box o false. No obstante, como aprendimos anteriormente en el curso, realidad no necesitamos hacer esto. No podemos obtener un componente hijo modificar directamente una propiedad de datos que está en su componente padre. Al pasar esta propiedad de datos reactivos hacia abajo al componente hijo usando V-model, luego recibiendo el valor del modelo V usando el prop de valor del modelo especial, y luego actualizando la fuente de ese valor modal en el componente padre mediante el uso del valor del modelo de actualización. Bueno, antes que nada, pasemos los modales Dot Dot Delete Note al componente hijo usando V-model. Vamos a saltar a modal eliminar ningún componente aquí. Se me permite av, modelo de directiva y set.seed lo mismo que los modales Dot Borrar notas, pegue eso ahí, guarde eso. Y ahora podemos recibir este modelo V usando el prop de valor modal especial, los componentes child. Así que vamos a saltar a modal eliminar nope dot view. El apartado script sobre el atributo configura nuestros apoyos. Por lo que hay mucho comentario aquí que dice apoyos. Soy un let que una constante llamada props y set que igual al método define props pase en un objeto y definiremos nuestros apoyos aquí. Para recibir esta propiedad de datos que estamos pasando con el modelo V, necesitamos usar el prop de valor del modelo, establecer eso igual a un objeto. El tipo va a ser mil millones porque los modales, Dr. Lee No, son mil millones únicamente van a ser verdaderos o falsos y casi fijan el default a falso. Para asegurarse de que esto se está pasando correctamente y recibido correctamente. Vamos a hacer salir este prop de valor modal en nuestra plantilla. Entonces después de los textos que agregamos al cuerpo, voy a añadir una etiqueta pre y solo salida dobles llaves rizadas y valor modal. Guarda eso, vuelve a cargar la aplicación, haz clic en Eliminar. Y sí, podemos ver que eso está pasando porque podemos ver verdad aquí. Ahora solo quitemos esta etiqueta pre. Ahorra eso. Ahora vamos a crear un método que se puede disparar cuando hacemos clic en el botón X o en el botón Cancelar. Así que vamos a saltar a la sección de script en modal Eliminar Nota punto Vue. Va a agregar una sección llamada close modal. Crearé una constante llamada colono modal cercano igual a una función de flecha. Por ahora solo cerraremos la sesión cerca modal. Ahorra eso. Ahora activemos este método en nuestros botones. Entonces el botón de cancelar, sólo va a romper esto en múltiples líneas. Dividir los atributos. Manejador de clics melódico, haga clic igual a cerrar modal. Entonces voy a copiar este manejador de clics, encontrar este pequeño lo exporta. ¿Dónde está esa cosa? Aquí está, voy a dividir eso en múltiples líneas. Dividir los atributos, solo pega en ese clic en, Guardar eso. A menos que asegúrate de que este método modal cercano esté disparando. Haga click en el botón Cancelar, vemos el log. Haga click en el botón X, vemos el log. Ahora solo tenemos que emitir el evento de valor del modelo de esperanza DAG en este método. En primer lugar, necesitamos definir nuestros mitos. Deje que sod nuestra sección mitones, cree una constante llamada emit. Establecer que igual a la definición emite método pase en una matriz. Simplemente agregaremos las actualizaciones volumen del modelo de colon. Decir que ahora podemos emitir este evento especial en nuestro método modal de ropa. Simplemente podemos hacer emitir y luego esperar día valor modal. Entonces esto va a cambiar la propiedad de datos fuente en el componente paralelo que estamos pasando con V-model y recibiendo con valor modal. Se va a actualizar esta propiedad Delete Note en el par de vista de punto de nota de componente, necesitamos decirle a qué valores establecerla. Y queremos ocultar el modal, por lo que queremos volver a poner esto a falso. Saltemos a este emite. Simplemente podemos empezar false como segundo parámetro. Digamos que el pensamiento. A ver si está funcionando. Muestre el modal de eliminación, haga clic en la X, y eso está funcionando. Haga clic en consejo. Y eso también funciona. 102. Eliminar modal: haz clic en en Exterior para cerrar: Sería mejor que este modal se cerrara si pulsáramos en cualquier parte fuera del auto. Esa es la funcionalidad que esperaríamos de un modal como este. Recuerda que usamos ese click fuera composable anteriormente desde vista uso para hacer este Menú de Nav Móvil desaparecer este Menú de Nav Móvilcuando hacemos clic fuera de él. Podríamos usar eso otra vez. Bueno, antes de que hagamos eso, no me gusta el hecho de que no haya relleno alrededor de este modal. Cuando estamos en un ticket de pantalla más pequeña, se ve mejor con un poco trazando este div con la clase de modal y solo tipo de agregar una clase de H2 para darle a eso un poco de relleno. Eso se ve un poco mejor. Yo creo. Vamos a utilizar ese click fuera composable aquí para que podamos cerrar este modal. Permítanme hacer click fuera de la tarjeta. Voy a saltar al Explorador. Solo voy a hacer clic con el botón derecho en la carpeta fuente y elegir Buscar en carpeta y buscar click afuera. Hay un sin oposición. Así que vamos a saltar a eso. Voy a copiar esta entrada. Entonces salta a modal eliminar nodo punto vista. En esto también, está arriba. Importar, Pegar ese salto. Pero a no ver Bardot. Ahora vamos a copiar todo este código. También podríamos copiar el comentario también. Saltar hacia atrás para eliminar modal. Voy a pegar esto en la parte inferior. Recuerda que necesitamos una plantilla ref para decirle a esta composable qué elemento vamos a estar haciendo clic fuera de dos, luego haz algo. Vamos a reemplazar este menú navbar ref aquí y aquí con lo que vamos a estar haciendo click fuera de esta tarjeta discontinua modal div. Podríamos llamar a esta tarjetas modales ref. Agreguemos esto a la tarjeta modal. Los atributos. Este href, cod modal ref, salvo eso. No creo que vayamos a necesitar esta opción de ignorar. Sólo voy a eliminar este tercer parámetro, este objetos en esta coma así como eso. Y podemos deshacernos de esta ref de datos, que estábamos agregando a esa opción de ignorar. Ahora cuando hacemos click afuera, solo queremos ocultar el modal activando este método close modal. En realidad podemos simplemente seleccionar todo este manejador aquí desde la corsé rizada de cierre hasta estos paréntesis. Acabo de poner el nombre de nuestro método cerca modal. Vamos a ahorrar eso, a ver si eso está funcionando. Recargar, mostrar el modal. Aquí tenemos un error. Href no está definido. Supongo que necesitamos importar el método ref desde la vista. Importaciones desde la vista, salvo eso. Recargar. Mostrar el clic modal afuera. Sí, está funcionando. Vamos a asegurarnos de que no se esté disparando erróneamente, como antes estaba en la barra de navegación. Sólo son despedidos si hacemos clic justo fuera de la tarjeta. Y el consejo y los expertos siguen trabajando. 103. Eliminar modal: control del teclado (ganchas de ciclo de vida): Normalmente esperamos poder cerrar un modal como este pulsando la tecla Escape en nuestro teclado. Vamos a configurar algún teclado no había enlazado en el gancho montado de este modal Delete Note dot componente Vue. Voy a saltar a modal Eliminar Nota hablar contigo, y abajo al fondo. Voy a crear un comentario llamado control de teclado. Se me permite un passe de gancho desmontado y un manejador a eso así. Y acabamos de cerrar la sesión montada por ahora, digamos que tenemos un error aquí en montado no está definido. Eso es porque tenemos que importar este gancho de ciclo de vida desde la vista, listones fuera que golpean en derretido, guardar esa recarga, mostrar el modal y podemos decir desmontado que se cierra la sesión. Si lo ocultamos y lo volvemos a mostrar, podemos decir que desmontado se cierra de nuevo. Ahora dentro de una multiherramienta, vamos a configurar un oyente de eventos para el evento clave, que se disparará después de presionar una tecla y luego soltarlo. Deshaznos de este registro. Y podemos simplemente hacer documentar puntos, agregar evento, oyente, paréntesis, y luego seguir el primer parámetro. Este es el soporte que va a escuchar, y vamos a escuchar el evento. Y el segundo parámetro es nuestro manejador. Así que agreguemos aquí una función de flecha. Pasemos también en el objeto de evento. Voy a reemplazar estos paréntesis con una a, y luego simplemente cerraremos eso por ahora. Console.log. Guarda eso y recarga, muestra modal y pulsa la tecla de escape. Y podemos ver que el evento del teclado está bloqueado. Dentro de este evento objetos. Podemos ver que cuando pulsamos la llave Escape, esta propiedad clave está configurada para escapar. Esta propiedad clave es generalmente la propiedad que queremos comprobar en nuestro JavaScript para determinar qué clave se presionó. Comprobemos si se presionó la tecla de escape. Y si es así, entonces sólo podemos disparar método modal cercano, ocultando así el modal. Entonces vamos a eliminar este console.log. Y sólo podemos hacer si un punto k es igual para escapar de ellos, sólo se podría disparar el modal cercano. Un método. Ahorra eso. Recargar, mostrar el modal, golpear la tecla de escape. Y eso está funcionando. Vemos desaparecer el modal. No obstante, sí tenemos un tema aquí. Si miramos algo dentro de este oyente de eventos, podemos simplemente cerrar la sesión, cerrarlo. Ahorra eso. Ahora si recargo, click en Eliminar para mostrar el modal y pulsa Escape. Vemos cerrarlo siendo bloqueado una vez. Pero si muestro otro hit modal Escape, ahora ha sido bloqueado dos veces esta vez. Y si volvemos a mostrar un modal, golpeó escape. Esta vez ha sido bloqueado tres veces. Esto se debe a que incluso después de que se cierre el modal, este oyente de eventos sigue existiendo. Este oyente de eventos no se está eliminando cuando cerramos el modal. Cuando mostramos por primera vez un modal, se configura este oyente de eventos. Permítanme cerrar el modal. Esto todavía está configurado. Después abrimos otro modal. Luego configuramos un segundo oyente de eventos. Esta parte, ahora tenemos dos de estos oyentes de eventos disparando. Lo tengo. Seguiremos agregando un nuevo oyente de eventos cada tau mostramos un nuevo modal. Entonces lo que tenemos que hacer es eliminar este oyente de eventos cuando el modal esté cerrado. Y podríamos hacer esto en el gancho desmontado, que será phi había ido en modal se retira del dom. Ahora primero, para que un oyente de eventos sea removible, necesitamos poner su función de devolución en su propia función con nombre. Ambas charla multi. Voy a crear una constante llamada mango. Teclado. Establezca eso igual a una función de flecha. Pasar en el parámetro, el objeto de evento. Ahora voy a cortar estas dos líneas y pegarlas en esta nueva función. Ahora sólo podemos seleccionar todo este manejador desde la llave de cierre rizado hasta la a. sólo pasa en el nombre de esta función, mango, teclado. Vamos a salvar eso. Me aseguraré de que eso siga funcionando. Golpea la tecla Escape. Eso sigue funcionando. Ahora solo tenemos que quitar a este oyente de eventos en la charla desmontada. Después de la charla desmontada con Loudon en gancho desmontado, pase en un manejador de funciones de flecha. Ahora para eliminar este oyente de eventos, solo podemos usar el método remove event listener. Solo voy a copiar toda esta línea, pegar línea aquí y cambiar el oyente de eventos para eliminar el oyente de eventos. Ahorra eso. Y sí necesitamos sumar la esperanza montada desconocida a nuestras importaciones. Vamos a añadir que aquí en montado. Ahorra eso. Ahora veamos si esto está funcionando. Haga clic en el botón Eliminar, mostrar el hit modal Escape. Vemos nuestro tronco siendo despedido sólo una vez. Haga clic en Eliminar de nuevo, mostrar el hit modal Escape. Ahora vemos cerrarlo solo se cierra una vez más. Entonces esto no está funcionando. El oyente de eventos se está eliminando cuando se cierra el modal. Y si seguimos golpeando a Escape aquí, no vemos nada bloqueado. Ahora podemos simplemente quitar el registro de la consola de la función de teclado handle. Ahorra eso. Ahora todo lo que tenemos que hacer es eliminar este futbol. Cuando el usuario hace clic en ON eliminar en el modal. 104. Eliminar modal: elimina la nota: Lo final que tenemos que hacer es en realidad eliminar las notas que el usuario está tratando de eliminar al hacer click en este botón rojo eliminar. Ahora ya tenemos una acción Delete Note en nuestra tienda. Estantes, tiendas, y tienda Node.js a las opciones. Ya tenemos esta Delete Note acciones configuradas las cuales podemos utilizar para eliminar las notas. En todo este oxígeno se espera es el ID del nodo que queremos eliminar. Por lo que sólo podemos desencadenar este oxígeno directamente en nuestro modal Delete Note dot componente Vue. Vamos a saltar a eso. En el botón eliminar, que está aquí. Solo queremos desencadenar esa acción en nuestra tienda. Eliminar nota que está esperando un ID, pero en realidad no tenemos acceso al ID de notas dentro de este componente. No obstante, si saltamos a su componente padre note dot view, entonces sí tenemos acceso a toda la información de notas aquí en esta nota prop. Podríamos usar esto para pasar el ID de la nota hacia abajo al componente secundario modal delete node dot view usando un prop. Vamos a saltar a un componente modal delete nope, que está aquí. Podríamos pasar los objetos enteros de la nota. Podemos llamar a este conjunto de notas que igual a las notas. Esto pasaría por todos los objetos con tanto el ID como el contenido. No obstante, en realidad sólo necesitamos el ID. Por lo que también podríamos pasar sólo la identificación hacia abajo. Para ello, podríamos pasar notas abajo y tal vez simplemente cambiar el nombre del prop a anotar ID, CamelCase. Ahorra eso. Ahora necesitamos recibir el apoyo ID de esta nota, el modal Delete Note dot Vue componente. Así que vamos a saltar a eso. Saltar a nuestros apoyos. Se me permite que este tipo de prop va a ser cadena. Haré que esto sea necesario también. Voy a establecer requerido a verdadero. Vamos a guardar eso y asegurarnos de que estas propiedades de ID de nodo pasen. Después de nuestro contenido aquí. El modal, sólo vamos a salir pre-charla con llaves dobles rizadas y anotar ID, guardar eso, recargar y mostrar el modal. Y sí, podemos ver que ID1 escupe hacia fuera para la primera nota, un ID para ser escupir para la segunda nota. Deshaznos de esta pre etiqueta. Ahora sólo tenemos que importar nuestra tienda, opiniones se almacenan en este componente modal, ajustar, activar esta subasta de borrar Nota y pasar en el ID. En primer lugar tenemos que importarlo. Podemos simplemente hacer la importación. Usa notas de tienda de slash stores slash store. En realidad no, agreguemos tiendas slash slash las notas de la tienda. Ahorra eso. Tenemos que asignar esta tienda a una constante. Entonces después de nuestros apoyos y límites dentro de un comando de tienda, y simplemente hacer const store notes iguala usar notas de tienda, paréntesis. Ahorra eso. Y ahora deberíamos tener acceso a una tienda aquí. Esta acción Eliminar nota dentro de la tienda. Saltemos al botón Eliminar, que está aquí. Dividiré esto en varias líneas, dividiré los atributos en varias líneas, agregaré un manejador de clics. Solo queremos despedir la subasta Delete Note que está en nuestra tienda. Por lo que sólo podemos hacer robó notas, Dot Delete, anotar, pasar en el ID. Y de nuevo, estamos pasando el ID, apoyo de identificación de esta nota. Podemos simplemente hacer robó notas Dot Borrar notas, notas, ID. Vamos a guardar eso y ver si está funcionando. Recargar, haga clic en Eliminar. Haga clic en Eliminar de nuevo. Podemos ver que la nota fue borrada. También podemos ver que el modal se está ocultando automáticamente también. Permítanme hacer clic en Eliminar. Y eso se debe a que el modal es un componente hijo de la vista de punto de nota. Nota vista de punto es el componente que estamos utilizando para mostrar una nota. Cuando eliminamos una nota, esa nota dot componente Vue se elimina del volcado junto con todos sus componentes hijo, incluyendo modal Delete, Note dot componente Vue. 105. Ronda del curso: Enhorabuena, lo lograste hasta el final. Espero que ahora se sientan listos para empezar a construir sus propios ups con V3 y la increíble API de composición. También espero que este curso te haya ayudado a comprender los beneficios masivos que vienen con la API de composición sobre la API de opciones. Asegúrate de conservar los conocimientos de este curso mediante la creación de aplicaciones con la API de composición. En cuanto cuentes, podrías intentar reconstruir las bolas de Nope desde cero por tu cuenta. O podrías intentar construir un clon de uno de tus ups favoritos. Si quieres aprender más de mí y saltar a Danny's dot link slash YouTube, donde puedes encontrar mis maquillajes de canal de YouTube con Danny, donde comparto toneladas de contenido gratis en Vue.js, quasar framework, embellecer y código VS en mucho más. También echa un vistazo a mis otros cursos de freemium se hacen iz dot link slash cursos. Todos los enlaces a mis cursos premium en esta página aplicarán automáticamente mi descuento especial. Entonces cada curso, tengo un curso sobre embellecer, que es el framework de componentes más popular para Vue.js. Desafortunadamente, en su momento estoy grabando este embellecido no soporta unos tres, pero ojalá lo hará pronto. Entonces tengo tres cursos en quasar framework, que es un framework absolutamente increíble que te permite crear un Vue.js arriba con una sola base de código, desplegarlo en muchas plataformas diferentes. Puedes implementarlo en una aplicación real que se puede implementar en las tiendas de aplicaciones para iOS, Android, Mac y Windows. Puedes implementarlo en una aplicación de una sola página y en el lado progresivo del servidor de aplicaciones web renderzadas incluso hasta una extensión del navegador para Chrome o Firefox. La última versión de quasar, esos soportan V3 y la API de composición. No obstante, en el momento que estoy grabando esto, estos cursos son para U2 y la API de opciones. No obstante, con todas las habilidades que has aprendido en este curso, deberías poder seguir junto con estos cursos usando v3. Soy la API de composición. Por último, tengo un curso corto donde te enseño los conceptos básicos de HTML, CSS y JavaScript. Adjuntaré enlaces a mi canal de YouTube en la página Cursos a esta conferencia. Gracias por ver, y espero que disfruten construyendo cosas con la API de composición.