Vue JS - Fundamentos para principiantes con ejemplos

1. 01. Introducción del curso: Hola y bienvenidos al curso de fundamentos de View Jay para principiantes. Mi nombre es cálido. Ella y yo me alegra tenerte aquí. Entonces, ¿de qué se trata este curso? En este curso, aprendemos sobre los fundamentos de ti. Jay es de cero. Al final de esta cancha, tendrás un fuerte agarre en los fundamentos así como podrás empezar a desarrollar tus propios proyectos a la vista. Js prerrequisitos. Para poder entender plenamente y aprovechar al máximo las puntuaciones, es necesario conocer html, CSS y JavaScript. Por lo que estos son los temas que se tratan en el curso. Entonces primero miramos a la guerra diferentes y marcos, y entre estos amigos y marcos, ¿por qué necesitas elegir futuro? Sí en. Después agregaremos vista a un sitio web. Después nos fijamos en las otras propiedades. Entonces procederemos a mirar a la vista, ver Ally, que es una herramienta muy mano para crear proyectos de vista. Entonces nos fijamos en las propiedades mentales que en las propiedades computadas. También buscarán en el enlace de datos a un eventos de enlace de datos e incluso modificadores. Eventos de teclado, eventos de mouse, propiedades de reloj y conceptos básicos de componentes. Después procederemos a buscar condiciones, utilería de renderizado y eventos personalizados antes de las directivas. Ganchos de ciclo de vida vistos. Soy programático, enrutamiento, enrutamiento dinámico. Pero luego tendremos algunos ejemplos más sobre enrutamiento y enrutamiento dinámico. Entonces miramos en mix ins. Entonces veremos cómo encontrar empleos en futuros, aunque sea un trabajo de tiempo completo o freelance. Quizás busque en el agua, los sitios web y los recursos que pueda utilizar para obtener Broken View Jr's así como esto. En la próxima conferencia, te estaré dando dispuesto a tomar una positividad de tableta donde puedas encontrar toda la cancha para todas y cada una de las conferencias. Muy bien, empecemos. 2. 02. Marcos de la final: por lo que pocos días es un amigo y marco. Entonces, ¿qué es un amigo y marco? Tan frecuente Rainfall puede describirse como, ah, ah, colección de bibliotecas o cosa de blogueo, términos mucho más simples que se usan juntos para crear mucho más eficientes y más rápidos que la publicación o sitio web. Por lo que estos sitios Web fueron creados mediante el uso de libros de amigos y tren, una aplicaciones Web sin cuerda o recaída. ¿ No lo hace por estas obligaciones? Llámanos SPS reunión aplicación de un solo bit. Entonces a partir de conocer en la industria, hay varios marcos diferentes entre ellos, los más populares son y reaccionando vista, que es el que vamos a ver hoy. Entonces, ¿para entender mejor cuál es la mejor aplicación única? Yo era adorable. Página web. Empieza a buscar un pequeño ejemplo. SPF era placas, así que vamos a Amazon Norton. Entonces William hace dentro de ellos Amazon. Yo sólo quiero ir a alguna de la página, por ejemplo. Digamos que me voy del dedo del pie Amazon. Sea así siempre que haga clic en Amazon pay, se puede ver que toda la barra de navegación así como todo el país debajo de ella se pone real licitación o reconstruir desde cero. Pero el uso de impresión y marcos como el reactor de pescador ver sitios web como YouTube Verbal. Por otro lado, YouTube es una aplicación de un solo bit, lo que significa que esto funciona mucho para, como tu parte móvil del YouTube. Entonces el actualmente el mismo ejemplo en este caso cuando se ve la barra de navegación pero como el menú inferior, estas dos cosas, se vuelven atrayentes órbita una vez el único cambiante pero en YouTube, es un contenido aquí entre estas dos partes, generalmente en frameworks front end términos estas secciones individuales del sitio web como barra de navegación para su o el SaiPan, y estos se llaman sus componentes. Es así como dividimos el sitio web en diferentes partes diferentes al frente y tres meses medida que avanzamos, escucharás la palabra quejas con mucha más frecuencia. Y a medida que te familiarices mucho más, desalojas y tú, cuánta más práctica de diferentes y DreamWorks, no decides mucho mejor. Entonces, por ejemplo, es un navigato, la parte formativa de YouTube. Entonces lo que pasa es que mi vida poniéndose dedo del pie están ahí sección de presas en ser todo el sitio web se reconstruye, correcto, pero yo navego a formar parte del YouTube. Se puede ver que sólo una sección que tiene el cambio de contenido se vuelve trasera o se reconstruye, mientras que el panel lateral y las barras de visión nocturna se mantienen constantes. Entonces por qué la belleza es tan en términos de francés y marcos. Hablamos de debajo y reaccionamos y belleza, por lo que estos tres son los marcos más populares por ahí. Entonces, ¿por qué necesitas considerar a Buijs entre estos tres? Entonces una de las razones más importantes para elegir Huges o under reaccionar es que es increíble la luz que ha pasado. Es una comunidad flexible, fuerte y muy pocos ingresos. Por lo tanto, vamos de esos puntos uno por uno. Entonces, al igual que ¿por qué cargar cualquier framework o biblioteca o en tu sitio web? Es necesario asegurarse de que la biblioteca del mercado libre adorar sea muy ligera o de tamaño muy pequeño . Entonces eso es algo que es un Lord tiempos en un rendimiento mucho más rápido. Entonces en términos de esa opinión, Jace es extremadamente. Se conoce del 16 al 20 Gaby, dicho eso, los necesito tan rápido, ya que es muy ligero y extremadamente rápido. En cuanto a hechos, flexibilidad, bellísima es conocida por su flexibilidad. Puedes estar acostumbrado a estar menos predicando tu sitio web existente o como si ya tienes un sitio web tirado por ahí y quieres ser menos parte de ella usándote. se puede hacer. Se puede utilizar para indicar una pequeña parte de su solicitud o para llevar toda su aplicación alrededor. Entonces la vista es esa fuerte y al mismo tiempo que la comunidad flexible, fuerte. Entonces view Jace tiene una de las mejores comunidades. Ponerlo en curva de aprendizaje muy baja significa que no se nos pide lleno que aprendamos. La belleza es como es con enojo o reaccionar. Entonces para dejarte, solo necesitas conocer cada telescopio de la temporada de demonios, eso es todo en ti mismo. Muy bien, entonces, Así que eso es para este video. Por lo que en el siguiente video, vamos a ver cómo vas a meterte en tu aplicación existente. 3. 03. DOM virtual: todo yo justo antes de ir cualquier pie que sólo quiero hablar un poco de dorm virtual. Va a ser una conferencia muy pequeña. Por lo que la cúpula virtual es una especie de tecnología o un concepto que se utiliza con miras a manipular Dom real. Por lo que Dom significa el objeto actual mortal. ¿ Verdad? Entonces lo que esencialmente significa esta piedra es que lo que veas en tu pantalla, si la cúpula así todos los elementos que b deck html, todos estos entran en la cúpula, así que vista utiliza algo llamado domo virtual. Por lo que este concepto es muy común. Entonces otro marco que utiliza la cúpula virtual es reaccionar. Por lo que el pecador también tiene una especie de cúpula virtual. Pero no es exactamente para Niños. Tiene su propia implementación fuera de ella así Pero manteniéndolo a un lado, lo que esta cúpula buitre realmente hace es una especie de plano. Entonces, por ejemplo, imagina si tienes una caja grande justo dentro de esta caja. Tienes ladrillos pequeños y tragados y quieres arreglar todos los ladrillos en cierto orden. Entonces para hacer eso eficientemente, Uinson se rompe sólo cuando no están en orden. Entonces dejas los ladrillos, que están en orden, y solo mueves los ladrillos, que no están en orden. Entonces esto es algo muy parecido que ¿qué harían tus médicos? Sólo actualiza un dorm de la parte, lo cual se requiere para que no opere todo el dorm. Algo así como lo actualiza sólo cuando se requiere, es decir cuando estamos cambiando cosas en el dorm. El dorm virtual se puede editar muy, muy rápidamente. Entonces más tarde, durante la parte de renderizado, Virtual Dome descifra a los padres de WorldCom, o qué partes de los Dominic reales para ser adolescentes dentado sólo eso. Pero así esencialmente haciéndolo un enfoque mucho ligero y eficiente. Para que no tengas que preocuparte tanto de cuál sea tu trabajo. Esto es algo que pasa en segundo plano, y te tomas asustado la mayor parte de eso. Pero la cosa es que es bueno saber que nada como habitación virtual existe en ese tipo . Controlando tu basurero en él antes de que vayamos más allá. Estos son los enlaces, Así que para el subgrupo mundial, es re blind dot l y slash Soy Vicky Ward sub y para el gettable oponerse a que revisó toda la corte se hospedará para todas y cada una de las conferencias. Es consejo rebautizado slash y podríamos conseguir ayuda. Entonces en el subgrupo mundial, me pueden enviar mensajes de texto. Se pueden hacer preguntas. Entonces eso es todo lo que voy a ver en el siguiente. 4. 04. Propiedades de Instance y datos: Hola y bienvenidos a su primera conferencia sobre bellísima como lo discutimos en la última conferencia . Tú de Jay es muy flexible, ¿verdad? Por lo que podemos usar view Jay's para agregar una pequeña funcionalidad al sitio web existente. Todo lo que realmente podemos esperar sitio web completo alrededor de Beauty s así que antes de ir más allá y buscamos sitio web completo o por Bob a tu alrededor, Jess, buscaremos cómo establecer o integrar huges en el sitio web existente. Pero ejemplo, si ya tienes en su sitio web de demonios y quieres agregar enorme está en él, puedes hacerlo así. Entonces ahora abramos la carpeta. Voy a crear un nuevo directorio que diga ver proyecto. Voy a entrar a esa caridad en el interior de su territorio. Voy a abrir el cable de estudio visual. Entonces si no lo sabes, esto es al acuerdo es un coordinador para que pueda usar texto sublime o átomos. Por lo que estos son algunos otros co editores que puedes usar dedo del pie justo en él. Cortejó territorio soviético. Lo que puedo hacer es que puedo crear un nuevo archivo html index dot es antes de que vayamos más lejos, tal vez quieras instalar los enchufes caídos dentro con el estudio Court. Tienes este tipo de como una pequeña opción para extensiones dentro de extensiones. Yo quiero que instalen la vida sobre extensión. Este es por. Sería si puedes instalar esto, ¿qué hará? ¿ Es como un pequeño servidor local en su sistema? Entonces, cualquiera que sea la estanqueidad, lo estás haciendo en la corte, última instancia puedes verlos en tu sitio web sin tener que actualizar tu sitio web de vez en cuando. Muy bien, así que esa es una práctica extensión que no tienes que instalar. No lo es. No es algo complicidad, pero es una práctica debido a tenerlo en nuestra próxima hora. HTML. Vamos a tener la plantilla arriba para que podamos tener la plantilla diciendo el signo de exclamación en la pestaña. Por lo que esto obtendrá la plantilla pequeña. Entonces, antes de entrar unos días después, saca un pequeño ejemplo, ¿no? Digamos que tengo ah h una etiqueta puesta. No voy a decir nombre. Por lo que ahora podemos ejecutar este sitio web o podemos entender a nuestro sultán en esta vista metas Electoral Uno. Ahora lo que puedo hacer es que puedo ejecutar esto haciendo click derecho. Conseguiré una opción diciendo abierta con la vida se acabó. Y si hago clic en él, debería abrirse en novio. Sí. Entonces ahora podemos ver nombre aquí. ¿ Verdad? Sólo lo resumiré, Ali. Entonces ahora, por ejemplo, digamos, quieres cambiar el contenido del tipo H uno, ¿ verdad? No quiero tener nombre dentro. Entonces lo que haré es mucho script de archivo de script que dice que tenía una fuente fuera del extranjero. Sí, en como Y como no tenemos después de Jess, vamos a crear es promedio. Lo que puedo hacer es darle una a la escotilla y d no puedo ver nombre, y lo puedo ver por dentro Georgie s Lo que puedo hacer es decir documento dot get element by i d. puedo ver nombre puerta en el HTML y contiene el nombre mi realidad . Entonces si lo guardo y vuelvo, conseguiré aquí mi nombre real. ¿ Verdad? Entonces esto es algo como lo haces en javascript simple en javascript vainilla. Entonces ahora eso es un avión, Jascha o el mismo libro mayor se saltó muy lejos haciendo las cosas ahora mismo. Veamos cómo podemos implementar lo mismo con vista. Entonces lo primero que vamos a hacer es llevar View J a un sirio en tu aplicación o a un sitio web. Si no sabes lo que es el CBN, generalmente significa que la red de entrega de contenido, una red de entrega de contenido, suena compleja. Pero confía en mí, no lo es. Es muy, muy sencillo. Podemos ir a la página oficial de la bellísima hija en. Podemos copiar este enlace para que podamos tomar el enlace de guión en. Puedes volver y solo podemos colocar a continuación o sobre nuestro guión en. Con eso, hemos implementado vista en su página web. Dicho esto, Ahora necesitamos saber cómo usarlo. Entonces en lugar del enganche uno, vamos a crear ah def. Eso ahorra medio y dentro del trato, vamos a tener el H uno, y es dejarlo en blanco por ahora, pretendía me refiero a Internet AB precioso. De lo que necesitamos para hacer esto, necesitamos crear una nueva vista. Instancia que podemos hacer diciendo nueva vista y dentro de que acepta un objeto sobre ese objeto constan de múltiples propiedades, por lo que la primera propiedad importante principal, que debemos saber es G L. Estará en pie para elemento, ¿verdad? Entonces, básicamente, lo que estamos haciendo es que estamos vinculando esta instancia de vista hacia vivir. Entonces en nuestro caso, queremos atarlo aunque este dip con un vaso fuera principal. Por lo general para vidrio, vamos a decir dot mean, pero si tienes un yo d de mí y lo veremos Hashmi. Pero como tenemos vidrio, vamos a ir pero punto por lo que dot hell es la primera propiedad de esta vista instancia en la siguiente propiedad sería la propiedad de datos. Por lo que la propiedad de datos es algo así como la propiedad que sostiene en todas las variables. Entonces estas variables son reactivas en naturaleza, ¿verdad? Entonces lo que esencialmente significa es que así estas tablas de espera, al usar la plantilla, observan los cambios dentro de la plantilla. Entonces si hay algún cambio con respecto a estas variables, estas variables se actualizan por sí mismas. No tenemos que adjuntarles específicamente ningún oyente de eventos. Se actualizan ellos mismos. De ahí que la SAARC o variables menos reactivas en todas estas variables se declaren dentro de las propiedades de datos. Entonces el primero disponible que vamos a declarar dentro de la propiedad de datos es nombre y eso está convencido de que consistimos en mi nombre. Por lo que debes entender en vista de que la mayoría de las cosas están en formato de objeto, por lo que necesitas acostumbrarte a ello. Pero a medida que avanzas, automáticamente te acostumbras a ella. Entonces ve cómo se declaran así todas las verduras. Entonces si lo guardo ahora, puedo usar este nombre de variable o la fecha un nombre de propiedad, HTML interno. Ahora bien, ten en cuenta que estas variables me refiero a todas las propiedades que críticamente dentro su instancia funcionarán sólo bajo esto viven lo que sea que el elemento de ustedes esté apegado. Entonces si entro, no te dije que significa que puedo ver nombre. Por lo que esto se llama sintaxis de interpolación. Entonces, cuando haces esto, lo que pasa es que de ti esencialmente busca un nombre de propiedad posterior. Yo en lugar de ustedes instancia, hemos acordado un apellido núcleo de propiedad y de ahí es valor absoluto fuera de este nombre en esto . Entonces si lo veo y vuelvo, deberíamos ver mi nombre encendido y podemos cambiarlo solo Así entendemos que viene de la instancia de vista. Está bien, Así que ahora veamos qué pasa si traté de usar la propiedad líder fuera del Dev ¿ verdad? Tendremos otro Hitch uno. Diremos lo mismo en Haz el nombre. Si lo guardo, voy a conseguir los tirantes rizados también. Debido a que la vista no está ligada con este elemento, sólo está ligada con los elementos bajo este dip. Esa es la razón por la que View necesita tener un arraigado en las próximas conferencias. Verás que necesitas tener un específico lo haría si eso se puede atar dedo del pie debajo de la carretera. Ahí están elementos de agua. Funcionará en esos. Entonces solo para recapitular lo que hicimos, vamos a conseguir otra en vista instancia. Entonces en este caso, lo que haremos es crear arriba a David y yo d fuera de New Main y dentro del i D. Veamos cuál. A ver, mi nombre es sé lo que realmente Louis. En cambio, es Abdur Jess, creamos una nueva instancia de vista de nuevo, por lo que notamos que podemos crear múltiples instancias de vista para múltiples Dave's. Podemos decir que se fue de nuevo, y esta vez vamos a usar hash porque no he d id dentro. Esta muy buena declarada a propiedades de datos. Nos han salvado. Nombre encendido con el apellido. Está bien, así que si lo guardo y vuelvo, puedo usar los nombres do. Puedo ver el nombre de pila. Podría dar un pequeño espacio y concedió apellido. Entonces si digo que no regresamos, mi nombre es cuando ella Krishna para que sea más instancia de vista de electrones sobre cómo funcionan las propiedades de datos . Por lo que en la próxima conferencia, vamos a mirar a la vista. Ver? Ally, te veré en el próximo. 5. 05. Vue CLI: por lo que lo primero que hay que hacer es abrir la terminal. Entonces si estás en Mac OS son inmediatamente siguiente máquina, puedes abrir el dominante, pero te sientes en windows, abres el comando desde así antes de que incluso saltemos en la terminal. Entonces lo primero ni J arrancan más o menos. Si vas al Norte, solo adora aquí encontrarás dólar para Mac OS. Pero si estás en Windows, te dan dólar por mí. No. Entonces si no haces alguna de la distribución de enlaces, obtendrás tu versión de distribuciones de cosas particularmente. Por lo que necesitas donar esto e instalar aquello. Ya lo tengo instala. No lo voy a volver a instalar. Y luego podemos instalar beauty lie usando norte. Por lo que para instalar la vista CLR, es necesario escribir el siguiente comando. Así npm instalar tipo en G por lo que en pago robó guión JIA temer jugosa igual. Por lo que guion gee indica que es global. Por lo que instalar para toda la máquina en una gran vistas Última Eli significa que una vista muerta es el paquete principal no se cortan Realice un subconjunto del paquete. Ya tenía esta instalación por lo que no me debería llevar mucho más tiempo. Muy bien, así que una vez que esté instalado. Entonces no, aquí tenemos los puntos de vista, como al iniciar ese sistema. Por lo que ahora podemos usar vista, Ver, aliado para crear proyectos de vista también a creativo u barco que necesitamos entrar en entrada específica hecha. Queremos crear una vista proyectos para mí Está aquí. Entonces aquí voy a crear un nuevo proyecto de vista. Entonces para crear el punto de vista que necesitas para obtener la caída en comando, es vista crear en el nombre del proyecto. Entonces para mí, el nombre del proyecto sería el siguiente proyecto. Algo a tener en cuenta aquí es que beause Eli no acepta, Capitán, está a nombre de su proyecto. Entonces si sigo adelante y le doy una D mayúscula, me voy a meter en ella. El nombre ya no puede contener camadas de Capitán. Anteriormente responsable induce una luz, pero desde imbécil usar una luz tres, no ha sido posible. Entonces tan pronto como calentamos y no obtenemos la opción de caída para seleccionar el preset, así precepto no es más que una colección de paquetes que vienen junto con un proyecto de vista. Entonces solo para ver cuáles son todas las características los enchufes que tenemos disponibles. Podemos ir a las características de selección manual, así que lo primero que tenemos disponible es Babel. Por lo que Babel se utiliza para habilidades de combate de JavaScript. Entonces, si estás ejecutando un nuevo navegador antiguo de JavaScript asiático en el navegador no es compatible las características más nuevas sobre JavaScript, Baby convertirá. Las versiones más nuevas del jazz entran en la versión anterior. Por ejemplo, si puedes trabajar aquí seis sintaxis en dos años. Cinco salidas mecanografiado Ya sabes, tipos, teclado o es batible. Apoya progresivamente, Babes. Por lo que si quieres crear el progreso de un bache, quizá quieras tener un cheque. Dudo que sea un visto fuera de estos utilizados para la navegación dentro de tu aplicación. Entonces a partir de Noé, mucho como eso. Lo que comenzó seleccionado en el futuro Biblioteca de Administración Estate de U Ex para vista ve sus pre procesadores no son más que sass y menos así. Si no estás familiarizado con SAS o menos, estos tres procesos CSS que nos ayudan a escribir mejor CSS. Por lo que esto no es absolutamente necesario porque también se puede escribir CSS normal a la vista. Pero si quieres bien, si quieres tener talla o menos soporte. Si consideras eso voy a decir eso. Linder Sí, Tierra en agosto de ese análisis de orina y repetición de pruebas. Por lo que se trata de un par de características de prueba de las que se habla mucho en el futuro. Entonces una vez que lo hemos visto, todas las características requeridas porque Llorente encendido y desde que salió de la SAS o desde s y yo vamos a docs es gente. Desde que dije entrar a los pre procesadores CSS, me está preguntando cuál quiero usar en su asno o esto O ¿dices que puedes tener algo Archivos de conflicto para cada una de las criaturas que instaló, o podemos tenerlos todos en un solo paquete. Encuentra Voy a tener unos pantalones de paquete geniales. Muy bien, Entonces lo que la CLI ha hecho por nosotros es que es creativo. Proyectas aquí instrumento bm divertido yon. Entonces estoy obteniendo tu respuesta. Entonces si estás usando NBN, obtendrás cantidades de NPM de So vamos al proyecto de artista. Yo soy joven. Entonces si te estás preguntando cuál es tu sindicato es muy lo parecido a en B M. Así que es como una versión mucho más eficiente de NPM. Está bien si no lo tienes. Entonces la diferencia es que el NPM programa cosas y completa a alguien tras otro. Pero como John los hace o bateador Lee haciendo mucho más rápido. Entonces escribiendo tu on serve on, lanzamos un local sobrio como el que lanzamos en las conferencias anteriores. Por lo que nuestro local Severus todo recto anfitrión local 80 80. Entonces esto es lo que ves cuando configuras tu primera aplicación bellísima. Hay más agradable bajar aquí y decir que es completamente solo ab en enlaces a documentación Documentación Babel cli, enlaces esenciales para la comunidad. Chad para devolver ecosistema de noticias en las constantes, podemos ver que estás fuera de nosotros, que discutimos solo de ustedes tortugas, que discutimos en el anterior como Trump. De acuerdo, entonces veamos qué tipo de archivo dentro de tu proyecto. Entonces para eso, puedo hacer punto espacial cancha Es una extensión para la escolta, así que escoltamos. Si no conoces visual studio cord. Es Es un pequeño cuarto aseado. Estoy usando la escort puedes usar Sublime o Adam o cualquier cosa está bien, así que pero si estás usando la escort, necesitas ir a extensiones en instalar una de las enchufándome para anotar menos. Beaudo. Entonces si lo hiciste es algo así como un apoyo de vista para la Corte de los Estados Unidos. Estados Unidos Es por eso que compra vista por el enviado Ghous Cuando se llega a los archivos, se puede ver que tenemos muchos menos archivos y lo que normalmente tenemos el Señor más enfermedad se dan en público. Tenemos el índice dot html y en lugar del siguiente HTML, tenemos el abdomen. Entonces, como discutimos en el anterior como trabajo, no tenemos abdomen. Por lo que este es un día con el que estaría trabajando en la exportación con excitación. Desisten. La mayoría de las peleas importantes existen, así que tenemos a nuestros principales Dodgers. Entonces en lugar de tu instancia, es un poco diferente, ¿ verdad? Render una cantidad en los videos anteriores lo que discutimos. Waas, en la instancia de vista, vamos a dar un elemento derecho en elemento. Vamos a especificar si es de primera clase o si no estaba listo. Pero aquí tenemos a Riendeau y tenemos alrededor. El motivo por el cual es que está renderizando un instructor de componentes y capacitador Dave. Es enviando render competente. Si puedes ver aquí importando vista como un plug in, me refiero a los espectadores una biblioteca, y también estamos importando view app como componente. Por lo que estas puertas ven ventiladores se llaman sus componentes. Entonces en cuanto a ti tan mayormente al frente y DreamWorks, cómo los desarrolladores manejan las cosas es que tratamos con ellos la incompetencia. Entonces, por ejemplo, un sitio web tiene un jefe de cuerpo y el encabezado fotográfico es un organismo competente, un competente y el pie es un componente. Entonces lo que pasa es que cuando se tiene este encabezado y pie de página como conferencia separada, en lugar de tener que leer ampliamente el tribunal de ideas, sólo se puede decir que utilice la conferencia ya existente. Entonces aquí el inter componente en realidad está montando el componente en el siguiente HTML para que competente sea la raíz competente para toda la actividad era pasaría su aplicación. Por lo que dentro de este competente, se puede ver que tenemos otros componentes, estábamos importando conferencia, y los estamos dictando. Entonces vamos con esta puerta. Pocos archivo, hecho Un tan adulto que archivas consta de tres partes. Se puede autoplantilla. Puede servir un guión que pueda sostener. Entonces esto es lo que hace que la puerta pocos archivos sea mucho más fácil de trabajar. Por lo que tenemos toda la plantilla ing scripting y styling en un solo lugar para un solo componente. Generalmente, cuando trabajas, conoce la ira. Cada comodidad tiene múltiples peleas, ¿verdad? Por lo que cada ángulo competente tiene cuatro viales html tipos CSS Revenge Oscar. Pero aquí tenemos los tres meses. Esto podría no ver mucha de una ventaja que ahora mismo, así que estaban escalando tu proyecto se está haciendo más grande y tu conferencia que aumentar el número, va a ser mucho más fácil de mantener. Entonces lo primero, la plantilla Así que la plantilla que tenemos el diablo disparar la app dentro del día Tenemos una imagen. Pueden solo el logo que se puede ver aquí bajo que tenemos este componente personalizado Hola, Word con el mensaje. Bienvenido a ver Just happen Así sólo puedo cambiar el mensaje y puedo ver genio instantáneo. Por lo que este hola mundo es un componente personalizado en este mensaje se llama es un problema. Discutiremos más de lo que eran líder de utilería. Por lo que para usar una personalizada competente, tienes dos pasos. primer paso es importante Personalizado importación competente Hola mundo de slash competente. Hola mundo socom parent slash l a word run so dentro de la sección por defecto de exportación en unos componentes secos en Hola palabra. Entonces una cosa, como discutimos con vista más algo va a ser estructuralmente ahora formato de objeto. Por lo que incluso cuando tienes una fecha de propiedad, necesitas tenerla en formato de objeto. De igual manera, si tienes los componentes, necesitas tener su conferencia como objeto y dentro de la confianza vas a declarar agua la conferencia que quieres usar. Entonces en nuestro caso, hola eran entonces se puede utilizar el confiado. Entonces si acabo de comentar, se puede ver cuánto de los datos eran en realidad de ese componente para que podamos ir al infierno overlord pocos, y podemos ver eso. Entonces todo lo que está aquí se está renderizando en una revisión rhabdo. Por lo que cualquier cambio en hacer competente al Hollywood se refleja automáticamente en la aplicación que usted competente y automáticamente se ve afectado. El estilo de playa principal es el CSS. No hay nada especial en eso, así que puedes usar con tu lenguaje un cómodo, pero yo ni siquiera estoy en guión. Puedes usar guión con Charles Company. ¿ Se puede guiar con mecanografía? Por lo que estos son algo así como el hallazgo principal que te cambia a conocer antes de comenzar tu Proyecto. Conozco este paquete de año o Jason. Consiste en todos los scripts y todas las dependencias que estás usando. En nuestro caso, estamos usando view. Entonces eso es todo para este video. En el siguiente video, discutiremos, como se prometió, a bordo de conferencia y métodos dentro de nuestro nuevo proyecto de vista. Y también vamos a ver casos de uso como cómo usar conferencia y cómo usar métodos . Entonces la mayoría de los próximos desarrolladores tienen, ah, poco de confusión cuándo usar las propiedades de la computadora y se fueron a usar métodos. Entonces vamos a ver eso con algunos ejemplos más, puedas entender que yo contextualizaría para usar este tipo de propiedades similares. 6. 06. Métodos y propiedades computas: Por lo que hoy aprendemos acerca de los métodos y las propiedades de la computadora. Por lo que antes de saltar a mi circunferencia de la cabeza, sólo quiero instalar una pequeña biblioteca. Esqueleto de Corliss. Tan hábil en es una biblioteca CSS similar a bootstrap, pero hábil. Es muy, muy ligero y generalmente hace que un proyecto se vea mucho más bonito. Entonces aquí tenemos nuestro proyecto de prueba sobre esto es como se ve. Por lo que todavía podemos ver esqueleto copiando la versión unificada. Entonces al instalar asustado, no me aseguré de que los estés instalando versión unificada de la misma porque no vamos a estar usando experta en una escala enorme y usar un esqueleto es muy, muy bajo. Entonces no necesitamos el CSS esqueleto completo para que podamos tomar el CSS en Gordon extorsionar html en el proyecto de vista, que fue configurado en el último video. Por lo que dentro del siguiente HTML, puedo crear un nuevo enlace que vería evaluar, estoy dentro de la cabeza Chef Aiken basado en el eslabón esqueleto. Por lo que en cuanto golpean save, se puede ver que mi proyecto se actualiza y por lo tanto se ha cambiado. Entonces con esa configuración, podemos ir de adentro hacia afuera buena vista on, Podemos comentar la imagen y los componentes hola mundo. Deberíamos tener una ventaja en blanco. Entonces aquí, las libertades de la medicina parece necesidad ¿Verdad? Entonces una cosa que podrías recordar es que al instalar view en los proyectos anteriores antes la vista, cli usaba datos como objeto. Justo cuando estás usando propiedades de datos dentro realmente ver proyecto. Lo que sucede es que la propiedad de datos es única para todos y cada uno de los componentes. Por lo que todos y cada uno de los competentes necesita tener su propia propiedad de datos. Entonces si usas la propiedad detonadora como objeto, se comparte entre todos los componentes. Entonces evitar que esa vista no nos permite usar datos como objeto. Entonces si puedes ver teníamos la carta de concierto que dice opción de fecha debería ser una función que devuelva aparte valor de instancia en las definiciones competentes Así podemos hacer eso. Pero cambiar el líder en la función que eres Dunn es un objeto, y dentro del sujeto podemos tener las propiedades del lector. Por lo que este caso no se aplica a propiedades como componentes o métodos, porque el problema estas propiedades sólo se llaman cuando el com imprime Kristen. Entonces hasta entonces, no tienen que ser únicos para todos y cada uno de los componentes. Entonces con eso dicho, podemos despejar propiedades dramáticas Los métodos de nuevo es un objeto. Y dentro de este material, podemos tener un JavaScript funciones tanto que no hay nada más que funciones javascript. Y si no sabes qué funciones javascript, corazón hace buenas funciones habían usado para exudar un conjunto de acciones. Entonces, por ejemplo, podemos ver nombre completo Así creamos una nueva función javascript o importado en nombre completo. No podemos regresar para que esto importara Nombre completo devuelve una cuerda con un traje de baño. Krishna. Entonces, ¿cómo accedemos a esto? Mentorizado para que puedas acceder Esto importó muy similar a los datos propiedades tienen puedes tener una bolsa grande. Y dentro de eso y dentro de la deuda P tenemos mi nombre es una interpolación e inserción interpolación. Al igual que accedemos a sus propiedades de datos. Podemos acceder a nombre completo. Y como es un asunto, necesitamos tener los corchetes. Si dices esto, mi nombre es uno tradicional. Hagámoslo mucho más grande. Y donde está ahora mismo, puedes usar una historia. Sé que es culpa. Yo para que mis hijos puedan hacer mucho por. Por ejemplo, en las propiedades de datos, podemos tener dos variables o dos propiedades de datos que diga disponibles A que tiene un valor descuento 20 donde estarán, que es un valor de 10. Y dentro de este asunto podemos devolver la parte de esto a las verduras. Entonces cuando estás trabajando con JavaScript y cuando tienes que tener objetos de valor y no vas a devolver la parte de esas dos variables, puedes tener este met. Su nombre es mi respuesta. Consideras que es hecho medios, pero a y no perdiques variable B, ¿ verdad? Entonces no, por desciende, se puede cambiar podría aplicar aquí también. Por lo que en caso de que lo veas, el producto se multiplica por lo que este multi play se multiplicará disponible en y donde estarán . Entonces veamos qué obtenemos. Si veo consigo uno nuevo. Es muy habilidad no está definida. Entonces, ¿por qué estamos consiguiendo el centro? Claramente tenemos muy billy aquí. El motivo es que la vista puede o distinguir entre variables locales. ¿ Fueron estas las propiedades de detalle? Permítanme dar un ejemplo. No desmantelado funcionará si tengo que hacerlo. Variables locales, no vacante la parte es de 200. El motivo es que cuando estás devolviendo variable en la forma en que serán está buscando estas variables dentro de este método dentro del metal se multiplican. Entonces cuando en el caso anterior cuando faltaban estas dos variables espolvoreadas con a través otra que no encuentra disponible ocho o la variable no está definida ahora para acceder a las propiedades de los datos en lugar de confiar, solo necesitas para decirle a vista que accedería a la propiedad de datos fuera de este componente para que pueda usar el descubierto. Pero dijiste que este inicio muy temprano en este tus pies será así que lo que este cuidador hace es referencias Esa vista necesita obtener el video de la propiedad con un desde la fecha de propiedad fuera de este componente mayordomo y de igual manera para el bebé será de la propiedad de datos fuera de este componente. Entonces guardamos esto los valores otra vez 200 cuando actualizo el valor de 200 Así que estos métodos también pueden aceptar argumentos. Por ejemplo, si quiero enviar entonces entonces lo que quiero hacer es que voy a recibir bajo disponible podría solicitarlo en Quiero multiplicar variablemente variable estar en esta nueva variable multiplicar con que se ha pasado a un argumento . Entonces lo que puedo hacer es cuando digo en remolque, una estrella, Mike Leavitt. Ya que mi dip Levitt es una variable local. No necesitamos usar esto cuando nosotros si lo usas para buscar la variable dentro de las propiedades de datos. Entonces cuando engaña, la parte es 400. Muy bien, Así que déjame mostrarte una vista increíble. Propiedad. Se llama su V inmortal. Digamos que tenemos nombre para propiedad. Bien. La propiedad de la entrada es y el número a multiplicar. Entonces lo que estoy haciendo es que quiero que esto sea variable, que sea dinámico. Por lo que creamos una nueva propiedad de datos que diga dinámica, legible. Está bien, entonces en el multi play, enviaremos la dinámica ¿De verdad? Entonces al igual que lo comentamos en las conferencias anteriores, que, si has involucrado los enlaces están abajo, la plantilla está ligada al guión. Entonces la diferencia de valor en las propiedades de datos son las propiedades intermedias dentro de la plantilla. No necesitas esto. Entonces dentro del mi despliegue, er estoy pasando en una variable dinámica dinámica. Esta variable dinámica se pasa a través del argumento on y aquí también podemos renombrarla como variable dinámica en aquí también medio dinámico o para una mejor comprensión. Apenas podemos ver que tiene variable dinámica local y esto es global y soy un derecho codicioso. De acuerdo, así que sé lo que quiero es que cuando When the So lo que quiero es que sea cual sea el valor o lo que sea el número que el usuario interese dentro de este impuesto de entrada quise ser asignado a la variable dinámica global Así que la vista es reactivo por naturaleza. Entonces lo que significa es que cada vez que cambia el valor de la variable dinámica global, la función de multiplicar se vuelve a ejecutar, que significa que todo esto es re calculadora. Yo soy el lugar donde las fiestas mostraban los valores mostrados también se actualiza de nuevo automáticamente. Entonces una forma en que podemos comprar en la entrada del usuario a esta variable llamada s global dynamic Variable es mediante el uso de la mañana en su lugar, su nosotros mortal podemos colocar doble global en el que hago variable. Y si quiero, sólo podemos cambiarlo a número. Muy bien, Entonces lo que he hecho es que qué tal lo ligado este componente de entrada variable dinámica global . Entonces esto nosotros mortales accedemos oyente de eventos. Por lo que siempre que el valor dentro del componente de entrada cambia o cambia dentro del elemento de entrada, asigna el valor a la dinámica predecible de datos. Variable on Siempre que se va a ejecutar la dinámica global, valor variable adolescentes esto podría desarrollar esta función de multiplicación . Yo este es Steve que hago va a levantarse más tarde, así que vamos a ver. Entonces aquí tengo una entrada que, y me está pidiendo que entre número. Entonces si entro por ustedes pueden ver que ni siquiera tenemos que refrescar la vista de página. Automatizado entre está los valores correspondientes a esa variable, y puedes divertirte con ella. Lo que sea que entres es instantáneo, se efectuó. Por lo que estos son métodos agua, computadora, propiedades. Entonces para entender las propiedades de la computadora, tomemos otro ejemplo. Digamos que quiero captar simplemente el interés. Estoy para calcular el interés simple. Necesitaría tres variables diferentes. Necesitaré al principal solo el interés, y necesitaría una redada. Vamos a crear esas tres propiedades de datos ahora mismo, me pregunto Galería por el simple interés. Entonces la forma en que garantizamos lo simplemente es que tenemos una fórmula, ¿no? Entonces usé la interpolación y dije en posición. También puedo realizar múltiples operaciones, así que instruir multiplicar aquí. También puedo que lleve. Pero a partir de esta operación variablemente realmente estará en remolque. El enema global, creíble sobre resultado seguirá siendo el mismo. Entonces en lugar de simplemente interés, lo que podemos hacer es que se pueda ver principal en interés en duplicado por 100. Entonces a partir de ahora, el simple interesado cero porque tasa de interés principal a cero. Por lo que podemos despejar tres variables de entrada más las cuales están vinculadas el interés del principio en las grandes propiedades de datos. Por lo que tuvimos tres variables de entrada diferentes las cuales están ligadas con interés principal. Efectivamente. Entonces cada vez que uno de estos bastante innovadores eran los cambios, el simple valor de interés también, Tina está tan enferma que no lo haces. Está bien, entonces ahora que esto está funcionando y por ejemplo, digamos que estos palos implantados no estaban muertos, ¿ verdad? Por lo que entra muy nuevo desarrollador y está tratando de entender tu cancha. No entenderá lo que significa esta fórmula. O si el primero es demasiado largo, será demasiado difícil para ellos. Será demasiado difícil para ti o para el nuevo libro de Della depurarlo, así que entra en las propiedades de la computadora, por lo que las propiedades de la computadora son muy similares a las propiedades posteriores. Entonces una cosa que debes entender es que las propiedades de la computadora también tienen este índice a menudo objeto parecen medidores y componentes. Entonces en cambio, las propiedades de la computadora podemos tener unas propiedades que ve, pero se hizo simple y vestida Así propiedades de la computadora me gusta llamarlas como propiedades de datos avanzadas . Por lo que estas son básicamente propiedades de datos con mucho más funciones. ¿ Estás haciendo 100 en Si queremos, podemos tener todo esto en la parte de atrás también, así podemos usar este retorno. Propiedad de empresa de interés simple igual que tú. Utilizaremos una propiedad de datos normal. No necesitamos cambiar por ningún corchetes para esto porque es una propiedad de computadora. Entonces hemos estado Volvemos atrás. Es lo mismo, ¿verdad? Por lo que al usar las propiedades de la computadora, tu plantilla se ve mucho más limpia en Si algún nuevo desarrolladores viene por ahí, él o ella puede entender lo que estás tratando de hacer mucho más fácilmente 7. 07: propiedades de métodos cómputos: Oigan, chicos, esta es una conferencia extra. Entonces la razón por la que estamos haciendo esto es para que la mayoría de ustedes tengan cierta confusión entre las propiedades metálicas y las propiedades de la computadora. Ya sabes, cuándo usar qué encendido y también una de las preguntas que han estado recibiendo es ¿por qué no podemos usar métodos para sus propiedades para computadora también? ¿ O por qué no puede usar la computadora desde en términos también hacia la diferencia exacta entre esta historia? Entonces veamos eso en esta conferencia. Entonces lo que hacemos es que tenemos este componente home lord view on you create mentored property que dice devuelto nombre completo en esos giros. De acuerdo, antes de que podamos haber hecho algo. También tiene nuestra propiedad de datos en el interior de la propiedad de datos. Vamos a salvarte nombre completo y tenemos un apellido desmantelado. Lo que hace es retornos distorsionar nombre, colocar el apellido de inicio, ¿ verdad? Por lo que también lo tiene computado Roberty. Entonces esta propiedad de la empresa, digamos, devuelve la edad, ¿no? Era una pulgada. También tiene que se comió una propiedad que dice la edad. Se me considera hecho para empezar la edad, así que lo que podemos hacer es que podemos tener yendo por propiedades tres s lugar hold up. Soy un combinado it a nombre y apellido. También tiene en su propiedad. Eso es hueso hacer la edad. Está bien, así que el agua quiere es Vamos a tener un dag odiador dentro de nosotros. Concebir, mi nombre está aquí. Vamos a usar un metal, ¿verdad? Nombre completo. Y también tiene una bolsa de rumbo. Y aquí te podemos ver haciendo las personas envejecer. Está bien, Así que puede salvarlo. Sé que puedo bucear mi nombre. También puedo entrar a mi edad. Cuán tarde así para esto de acuerdo también a esto y en este momento espacio justo para como la gente posee. Por lo que también consideraremos buscar para averiguar muchos cada mes se está llamando. Y cuando cada propiedad de la computadora se está llamando propiedad de la computadora tiene cancha de frijol. De acuerdo, entonces comienza cómo este concierto de estado lunas un barco. Se hizo así en un principio, Devolución y propiedad de la empresa se ha llamado. Ok, entonces ¿ahora qué? Estoy haciendo mi nombre. Estoy consiguiendo metal Propiedad ha sido atrapada. Suena justo, ¿verdad? Entonces estoy lidiando algo usando el método. Por lo que las propiedades dentro de los métodos están cambiando. Por lo que se está llamando a la propiedad metálica con aviso. Cómo, aunque no se está llamando a la propiedad de la computadora porque no estamos haciendo nada con la edad todavía, por lo que también entraremos a la mía preguntó apellido. Por lo que tenemos la propiedad metálica se ha llamado desde hace 13 tiempo. Ahora. El diferencia es notar que mientras se llama a propiedades admitidas, no estamos usando las propiedades de la computadora. Pero si me divido en, si estoy entrando en mi edad, se pueden ver las propiedades del método también siendo cortadas junto con la propiedad de la computadora. Entonces la razón por la que omití propiedades también siendo ejecutadas es tan como lo discutimos antes . Utiliza algo llamado Es Sobre Tu Perro, ¿verdad? Entonces lo que pasa es que cada vez que la sala virtual se actualiza, View también actualiza las propiedades metálicas. Entonces lo que pasa es que un lister permanecido requiere cualquier cambio. El competente Robert. No se llamará, sino para los métodos siempre y cuando el sistema mundial esté funcionando debilitado, emitido para ser llamado una y otra vez. Por lo que suele ser una buena práctica usar las propiedades de la computadora que las propiedades del método, así que haz que tu aplicación sea mucho más eficiente. Entonces ese es un ejemplo para aclarar la diferencia entre las propiedades mentales y las propiedades completadas sobre por qué necesitas usar en muy necesitas usar propiedades comprometidas y tal vez necesitas usar remedios computados, así que espero esa habilidad. Entonces eso es todo para este. Ya veré el siguiente. 8. 08. Binding de datos: por lo que tal vez mirar en la minería de datos. Entonces, ¿qué es la minería de datos y cómo usarlo a la vista? Y también ir a algunos ejemplos para obtener mucho más comprensión del concepto? lo primero que hablaremos de esto nos moraleja. Está bien. Por lo que la moral es también una especie de atributo de enlace de datos que utilizar en su conferencia anterior . Pero la moral se utiliza en su mayoría para a una minería de datos. Por lo que empezaremos una minería de datos y solo cubriendo todo. Todo lo que ha llegado a la corte anterior fuera. Pero sí manejo cada una de las conferencias en una rama separada para que puedas ir a una rama específica y puedas acceder al núcleo para esa conferencia. Todo lo veamos, tengo algún perro. Y esto apunta a mi sitio web en mi sitio web. Lingus lo hacen Gordon. Entonces si voy aquí y hago clic en él, voy a mi página web. Pero ¿y si advertí que esto viniera de una propiedad de datos? ¿ Y si quiero que esto sea dinámico, verdad? Entonces, ¿qué? ¿ Perdemos? Vamos a crear objeto de fecha. Ya sabes, los datos tienen que ser una función justo en el interior de los Dedeaux. Vamos a crear un objeto dentro de eso. Entonces, ¿y si quiero que esta propiedad de datos sea vinculante con este ataque? Ahora quiero este dato propiedad toe ser el enlace que este ataque apunta dedo del pie. Por lo que anteriormente mostrábamos las propiedades de datos dentro de sus plantillas de tabla utilizando el método de interpolación. ¿ Verdad? Entonces, ¿podemos hacer en preparación en este caso? A ver qué pasa si lo hago Esta vista le va a dar otra. Dice que cada intemperado combinado completo La razón es que esto no es ni se divide Syntex. No grande no comprar propiedades de datos Dos atributos así. Ahora bien, si quieres vincular nuestra propiedad dinámica propiedad autoritaria a un antídoto como jefe Chef, Lo que tenemos que hacer realmente es ver que nos atamos. PyME no pudo. Ahora esto se convierte en nuestra propiedad enemiga Ahora dentro de esta debilita atarlo. Hacer alguna de nuestras propiedades de datos por ejemplo Enlace del sitio web No recibir ID ahí se ha ido. Y si me quedé, va a mi página web. No, la parte increíble de esto es lo que es. Sí. No, la parte increíble de ello es que puedo escribir cualquier cosa aquí otra vez. Ve a Yeogu no se ha ido y me voy a pasar por google dot com Así que uno más necesita beber. Lo que podemos hacer es quitarle esto aquí arriba. Se puede tener cualquier entrada. Papá. lo puede ver en la página web matutina link dentro de este lugar e Internet al revés estás. Entonces lo que pasa es que tenía este impuesto de entrada y cualquiera que sea lo que sea que te guste tipear, va a estar automáticamente vinculando dedo del pie este ataque en particular. Entonces a partir de no, se puede ver el ataque está apuntando al anfitrión local 80 80 hora. Ahora, no vengas y muestra google dot com. Entonces ahora si quiero ir a ir Lord a casa, necesito pecho Be Yes on. De acuerdo, Este significado para ellos con el punto google dot com así de simple, eso se convierte en mi sitio web. Muy bien, así es como se puede enlazar datos, propiedades, propiedades, dedo del pie diferentes atributos. Ahora podemos hacer cosas mucho más interesantes que solo crear un vínculo dinámico. Lo que también podemos hacer es crear una clase dinámica, ¿ verdad? Vamos a sacarlo, por ejemplo, comenzaría a nosotros. Tenemos una etiqueta catch four que dice que soy un rumbo. ¿ Verdad? Entonces para esto tenemos una clase que sabor activo. Entonces en lugar de guión, podemos ver activo significa mala escorrentía como el azul. Entonces tenemos una bolsa de rumbo y sus malos préstamos como el azul. Entonces, ¿qué pasa si quiero hacer dinámico el fondo o quiero activar y apagar el fondo. Yo quería clase de artista activa siempre que quieran y quitarla de cuando quieran. Ahora quiero esta clase activa, Toby Dynamic, ¿verdad? Yo quería estar condicionalmente activo. ¿ Qué? Yo quería estar condicionalmente no activo. Entonces lo que voy a hacer es que hoy voy a comprar en esta clase el inmueble. Entonces lo que podemos hacer es una locura objetar. Podemos crear uno malo activo. Es decir decir que dirían a Así podemos hacer de esta clase dinámica colocando una vez más ser mente nos atamos . Bendice Ahora dentro de ella, vamos a crear objeto. En lo primero va a ser nombre del vaso que está activo. Yo soy la propiedad líder que debería ser un booleano con, digamos si las clases activas o no para nosotros. El lector propiedades, fondo activo Entonces, ¿qué significa esto? Entonces estamos haciendo dinámica la propiedad de clase para este rubro haciendo activa la clase, dicho dedo del pie verdadero o falso? Este acto sobre su incidente, una propiedad que es un lingote ¿verdad? Entonces a partir de ahora, eso es un fondo Acto es también. Entonces cuando golpee guardar no habrá diferencia alguna. Pero cuando un cambio es fondo activo a caídas, el fondo desaparece. Entonces una cosa más interesante lo que podemos hacer Una minería de datos es tener estilos dinámicos, ¿ verdad? Entonces por ejemplo digamos que tengo un encabezamiento que tiene mi nombre en él. Está bien, Soul, quiero quedarme para ser un poco azul. No he blabbed. Está bien, Entonces, ¿y si quiero que esta propiedad de color sea dinámica? Entonces, una vez más, lo que podemos hacer es que nos cegemos. ¿ Te importa esto? Por lo que uno tendría que tomar. Lo que podemos hacer es instruir. Tipear sería comprar cada vez. Podemos simplemente colocar al Golán que también es igual en el ser ciego. Esta cosa debe estar dentro de los aparatos ortopédicos. Entonces teníamos el color azul, ¿verdad? Por lo que instrumento directamente adjuntando lo sopló. De lo que podemos hacer esto podemos ver podemos crear una propiedad personalizada de datos de color. Entonces vamos a nuestro objeto de datos y dentro de eso creamos un nuevo núcleo de propiedad menos sistema voy a Y como si no, lo dejamos en blanco. Entonces en, abajo, concluimos otra bolsa de entrada y la cual nosotros los mortales podríamos. Entonces solo para entender lo que está pasando aquí, tenemos una calamidad personalizada. El inmueble, derecho así discutido, propiedad invalidada puede reordenarse o su valor puede cambiarse. El uso de esta entrada valiosa y una vez que una personalizada validar el valor de una propiedad cambia el color de la propiedad dentro de la bolsa de odio también cambia porque está ligada a la propiedad de color personalizada . Entonces cuando voy a mi página web, me meto en goteo de nombre. Puedo ver el blanco que lo hace desaparecer. Puedo ver azul. Puedo verlo muerto decir amarillo nuestro pueblo. Entonces, lo que está sucediendo es que cada vez que el valor cambia dentro de entrada bien, se está cambiando la propiedad de color personalizado en la propiedad de color personalizada. Se está asignando a la propiedad de estilo de color dentro. Adelante, retrocede. Está bien, así que eso es todo para este. En el siguiente poquito estar buscando a Toby moral y un pequeño ejemplo entre una manera minería de datos hacia realmente la quema para que puedas entender lo que está pasando, está bien. 9. 09. Enlace de datos dos vías: Por lo que hoy nos fijamos en un enlace de datos. Por lo que ya hemos mirado a remolque al mortal en el pasado. Por lo que en este electo sólo lo repasarán una vez más. Y entonces también estamos mirando hacia la diferencia entre yo atar y nosotros mortales. ¿ Y cuándo cuándo necesitas usar qué? Entonces supongo que la mayoría de ustedes por ahora se estarían preguntando palabras diferencia real entre estas dos propiedades, como las directivas de la tienda, nosotros más que ser bind. Entonces empecemos a ponerle algo de claridad para que pudieras saber que fui a usar el trabajo. Está bien, entonces en el lujo anterior se habló de enlace de datos, ¿ verdad? Por lo que hablamos de cómo se usa la compra de V para enlazar variables por lo que se podría pensar que se utiliza re border para comprar el valor de una propiedad de datos. Doble entrada. Bueno, entonces si tengo una entrada para ti y quiero el valor fuera de ella y si quiero y quiero que su valor sea hay una correspondiente a una variable o a una propiedad de datos. ¿ Por qué no solía ser vinculante y valor? A ver. Nombre derecho. Por qué no hicieron esto. Yo invité. Yo sí. ¿ Verdad? Por lo que se trata de dos directivas diferentes, casi teniendo el mismo propósito Obtener el nombre de la propiedad de datos para nacer con campo de entrada. Pero, ¿por qué usé tal vez más hasta ahora? Invitado y argumenta que podríamos. El punto es, compramos rodillas, una radio definiendo o simplemente aquí por mí. Pero como nosotros los mortales para listo la quema. Entonces ahora tenemos a unos honorarios diferentes. Uno está usando estar comprando y cuando está usando la mañana. Entonces en términos de e by y lo que sucede es que la propiedad de datos nace con un valor fuera del campo de entrada. Por lo que nunca cambian la propiedad de datos, el valor y cambian. Pero siempre que cambie, el valor que tendría operativo no cambiará. Por ejemplo, si intentaba salir, hice un video con o bajo los dictados de cuerda. Se puede ver que a pesar de que estos dos están vinculados a la misma propiedad de datos, este nombre que está usando el V mortal no se actualiza. El motivo es que sólo está deshuesado en una semana. Por lo que el nombre es solo campo de entrada bounder, pero el valor de los campos de entrada no está vinculado al nombre. Pero como en la mañana, si alguna de las dos propiedades cambia, ambas se actualizan. Entonces tratemos de cambiar el nombre en el V. Bine. A ver si a Knysna sea más así. Si añado guión, desarrollar sobre son los caracteres extra. Se puede ver que este valor no cambia. Pero si elimino este hallazgo si hago esto, el valor superior cambia en última instancia, ¿ verdad? Entonces la razón es que, cuando estás usando al mortal, el nombre es ser un hueso para esta infantería, decir si aunque el valor cambie, se levanta para ir al nombre, o incluso si el nombre cambia, se actualiza al valor. Por lo que la directiva moral se utiliza cuando se quiere leer el enlace de datos, mientras que una narrativa de compra de ser se utiliza cuando no sólo había una redefinición. Entonces espero que esa habilidad, uh, supongo que este ejemplo sería suficiente. Entonces eso es todo para esta conferencia. Entonces en el siguiente, miramos los eventos en duh. ¿ En qué están disponibles los diferentes tipos de eventos? Acabamos de ir a la interacción de los eventos. Entonces más tarde podríamos enfocarnos en eventos de teclado y en la mayoría de los eventos, excepto que va a ser muy divertido. Espero que veas en el siguiente 10. 10. Eventos - introducción: Por lo que hoy nos fijamos en los eventos, por lo que los eventos de agua y el agua, diferentes tipos de eventos sobre el agua, algunos de los eventos con los que podemos empezar. Por lo que antes de empezar como de costumbre, la cancha estará disponible en el repositorio git. Entonces con eso dicho, empecemos. Entonces un ejemplo principal que podemos usar para defender eventos es el derecho de Riverton. Entonces botones. Si tenemos oportunidades rápidamente y quieres ejecutar una función cuando se hace clic en el botón que sepas cómo y funciones en ti se discutieron al respecto para que podamos usar métodos que diga Collect have function I inside disfunción, empezando a ese Señor ahora mismo. ¿ Qué hago para asegurarme de que el clip de metal se ejecute siempre que se haga clic en la carga? Entonces para eso podemos usar algo llamado sus eventos. En Javascript llano, haces algo como en Click, pero en enorme es tu uso. Más allá de click, lo debo aparece justo arriba clicado. Entonces vamos. No es editor usado para eventos, así que en click une disfunción. click sobre esta carga, Daclick sobre esta carga, así que cada vez que se haga clic en el botón o cuando a pesar de que el evento haga clic en esta carga, este asunto es correcto, por lo que lo guardaremos y su boleto de salida. Click me click. Se hizo clic en el botón. Impresionante. Muy bien, ahora podemos hacer mucho más que solo la primavera Otro Supongamos que tenemos un condominio de mostrador. Sé lo que quiero es cada vez que haga clic la maldad, quiero que aumente el contador. Por lo que siempre que dis hizo clic en este contador de inicio más Andi, no me hagas clic. El contador aumenta cuando hago clic derecho en el botón. ¿ Verdad? Por lo que ahora, ya que este lugar no contador, lugar es sólo una sola línea. Pero como esta inclemencia es solo una línea, no necesita una función especial para ella ni un método específico para ello. Es bueno tener un método para todas estas propiedades porque cuando alguien más entra, saben que aparte está sucediendo una buena función o si quieres hacer mucho más que simplemente aumentar el contador, podrías agregarlo fácilmente. Pero así solo para mostrarte que también se puede hacer, podemos crear. Podemos quitar el método Clegg de aquí, y sólo podemos implementar el contador. Gracias tan muy fresco. Sigue siendo boxeo, así que si es una sola una operación, sólo podemos hacerlo desde aquí directamente o a través de importado ¿verdad? Se necesitaría algo. Lo que podemos hacer es que también podemos usar doble clic. Entonces en tarea de ¿tienes en click y en doble click derecho así de igual manera mu usar doble click, tenemos que decir más allá no me gusta Así que lo que pasa es que nunca nos gusta DoubleClick, entonces tú en los valientes líderes. De acuerdo, eso es todo para esta interacción fuera de los eventos. En la siguiente conferencia, nos fijamos en diferentes tipos, eventos fuera de entrada y lo que todo lo que podemos hacer. Y una vez más, toda esta cancha también estará disponible para obtener ayuda. Entonces eso es eso. Veamos en el siguiente. 11. 11. Eventos de teclado y modeladores de eventos: todo bien en esta conferencia conseguirá algunos eventos interesantes. Por lo que la imagen anterior en la que vivimos al click y o doble clic derecho en. También aprendimos qué eventos son por lo que en esta conferencia se buscará en eventos de entrada sobre cuáles son los diferentes tipos de eventos de entrada disponibles. Está bien, así que empecemos. Existen varios tipos de entrada. Saldrán eventos de ustedes, y nosotros vamos a nuestra edad con cierto ejemplo. Para que puedas entender cómo usarlo en términos de proyecto de reelección. ¿ O cómo lo sabes? Fue en mucho sentido práctico el primer año en el que vamos a cubrir su propia sangre. Entonces supongamos que tienes un evento de entrada, así que solo quiero que sepas que todo es exacto me gusta en qué evento tiene un placeholder en el nombre y lo que no van a hacer identificar de este evento es que cada vez que el usuario hace clic fuera de esta entrada campo, estar en sangre en, exudado con ella, así que iremos al método. Bueno, digamos sangre, y dejaré que el usuario haga clic para pasar por encima del campo de entrada. Muy bien, Entonces lo que pasa es cuando me enfoco libremente en esta entrada y escribo algo. Está bien, ¿verdad? Entonces cada vez que hago clic fuera, si y alerta aparece diciendo que me eché del campo. Por lo que nuestro Miller se usa para eso. Por lo que un truco de la mañana que necesitas entender es en lugar de escribir más allá, solo podemos ver agregado así de manera similar, sostén cómo usamos bolos para el bine B. Podemos usar esa fecha para más allá. El siguiente es sangre similar del dedo del pie que enfoque sin anotaciones. Podemos decirlo. Enfoque. Tienes enfoque. Por lo que algunos creen que descanso en esto como conseguir Millard. Te has enfocado. El deletreo va en adelante. Perdón por eso. Entonces de igual manera, Lo que también podemos hacer es despejar la forma podemos colocar esas dos variables de entrada dentro ella. Sé que podemos tener en cualquier lugar Evento tal que en Enviar derecho. Qué pasa cuando el usuario hace clic en enviar para que podamos verlo algún pecho grande así que dentro de esta madurez puede decir someterse. Por lo que para presentar, podemos tener un botón en se tipo enviar el. No haga clic en el botón. Se trata de un somete prensado. Yo soy así que una cosa comenzaría a darse cuenta. Aquí es cuando Siempre que se presiona el sujeto. Nos estamos haciendo sub hecho. Yo o lo que también sucede es que el pH se vuelve a cargar. Entonces, ¿y si no queremos que eso suceda? ¿ Y si quiero? Ya sabes, devolvimos el valor del nombre, por ejemplo. Podemos, al introducir la moral puedo decir Nombre en qué pasaría si, mientras presionaba someter. Yo quiero cáncer de dedo del pie. Nombre del registro. Muy bien, para que pueda terminar el nombre. Si isis presenta primero obtendrá la alerta para ti, entonces el oficioso básico no podrá ver el mensaje de registro de la consola porque es para mí . Es demasiado rápido. ¿ Y si no quieres esto? Entonces, ¿qué podemos hacer? ¿ Hay algo que se llama ni siquiera es más defensa? Por lo que estos son los eventos básicos disponibles para JavaScript, y se podría mortificar que lo muy commodified es mediante el uso de la puerta de punto posterior, pero evento. Entonces lo que pasa es que evita el comportamiento por defecto del sujeto alguna protección. Por lo que para la subproducción, el comportamiento predeterminado es recargar la página o enviar el formulario derecho a enviar el formulario. Y arrancó bien la página. Entonces aquí, si vuelvo a ver mi nombre. Yo digo Cumbre. Estoy recibiendo mi nombre en el consular. Ya no se recarga. Este auto menos aún más acusado. También hay otro efecto aún más que son los de Carla. Por lo que el anterior que discutimos su hija prevenir, lo que impide el comportamiento por defecto, mientras que los de inicio se aseguran de que el evento se haga sólo una sola vez. Por ejemplo, tenemos un botón que dice Flicked me on a click. Tenemos algo para las pruebas. Cargas click. Grande así puedo tener esto importado y en contra de un señor consular, pero completo. Por lo general si no menciono ni siquiera modificador, lo que va a pasar es el número de veces que hago clic en el botón el mismo número de veces que voy a conseguir el mensaje del consulado. Pero una vez añadí puntos aún más desafiantes. Y si lo refresco, quiero decir, no puedo participar en una segunda ocasión. Por lo que una vez afligido, corre. Y eso es todo. Tan malo. Buenos eventos de entrada. Otra, ¿verdad? No me imagino que quizá sepas qué hace esto. Entonces cuando voy a la entrada, Realmente quiero decir, presiono una tecla. Estoy en las llaves hacia abajo. Entiendo el mensaje. Por lo que de igual manera, tenemos otras propiedades que se fusionan. Key Up Way usará el mismo asunto, pero dirá llaves arriba. Y si dijera la diferencia entre la llave de la renta y el chico solo inquilinos, la llave no funciona cuando se presiona la tecla A, ¿ verdad? Pero mientras que la clave arriba funciona cuando se libera la clave, eso es todo. Las llaves no se levantan de G. Las llaves no se avisan, así que también hay una Más se necesitan significados que se acaba de presionar para que podamos entender cada vez que las teclas de mama nos mantenemos para que nunca escribamos nada. Se cancela automáticamente registrado. Entonces eso es todo para los eventos de entrada y aún más diversos. Entonces para el siguiente, literalmente buscando eventos del dedo del pie del ratón. Entonces cualquier amigo se capturó con Mo, y tendremos algunos ejemplos para eso, así que ya veré en el siguiente 12. 12. Eventos de ratón: Hola y bienvenidos de nuevo en esto. Al igual que estar buscando eventos de Tomas En el apartado anterior, nos fijamos en eventos de agua y agua, incluso modificadores y orden. Los diferentes tipos de eventos que tenemos disponibles. Y tampoco,ya sabes, ya sabes, a veces fuera en el bonito Vince. Correcto. Entonces en esto, en esta conferencia, nos fijamos en los eventos del ratón en orden, diferentes tipos de la mayoría de los eventos. Entonces va a haber uno realmente corto porque no están hechos, supongo. Eventos. Entonces simplemente iremos con ellos bastante rápido porque ya cubrimos los fundamentos de los eventos, por lo que no debería tardar mucho más. ¿ Verdad? Muy bien, empecemos. Por lo que para principiantes premio en interiores, el sonido de la misma están creando nuestra clase David up de la mayoría en su have. Y solo tenemos algunas escondidas, y lo hacemos Se le dará finalmente pixeles de altura y se ve disparado por ello. Solo estoy para entender que donde está, le podemos dar algo de color. Uh, le daremos luz. De acuerdo con eso, caso de que eso se imponga una multa. Entonces si lo guardo debería ver algo. Está bien. Está bien. Entonces, uh, no la noche de Mo. Arreglarlo. Entonces ahora tenemos a nuestro Dave con el que podemos trabajar. Por lo que ahora queremos ver algunos eventos más así como ya que siempre que se preguntaba, están poniendo a prueba un evento que puedes o bien ir conmigo o lo condenas a ir con lo agregó derecho para que puedas acceder a la mayoría de los eventos escribiendo en Mao's. Y estos son todos los eventos a los que se puede acceder. Entonces primero, cuando miramos a su más Monsanto, Entonces lo que pasa es esto Una mañana hace cuando más ha entrado esto lo hizo o es todos los pedidos dip para que el bebé pueda dispararlo es asociándolo con el método. La mayoría de ustedes saben que solo creamos la mayor materia de eventos por dentro. Yo no me lado del guión. Vamos a crear objeto metálico en liquidación de sujeto. Vamos a crear un mercado de consumo de materia más parejo. La mayoría entra a la derecha, Así que si lo guardo y si cavo el aditivo Mozilla, puede ver que fue ordenar Monsanto el registro cónsul. Por lo que otro evento similar del ratón es la mayoría dejar. Entonces no, los más australes y vamos a buscar en la mayoría se van. Hace exactamente lo contrario de las guerras terminan por tan muy rentado Emo's. No lo activa, pero nunca dejamos un Trickle dicho. Entonces entra y déjalo porque está bien para que el Mao's Leavis bajo el hacer sea más movimiento. Entonces lo que más se mueve, como es mientras la maldición que se mueve dentro de su particular Dave, seguirá imprimiendo el consulado. Entonces si entro, Pero yo sólo diría que la mayoría se mueve. Si entro y como mudanza más, se puede ver que mi registro de preocupaciones está siendo campo de la misma más. Por lo que esta consideración automovilista como la de mi mamá, se mueve por encima de cada iniciativa de píxel. Otro es más propiedad, por lo que un nombre za sugiere más, por lo que realmente se activó cada vez que el clic del ratón es conservador. Entonces si entro, hago clic en él más clicado ¿verdad? Eso se llama más abajo, así que se dispara cada vez que las casas bajan. Sé similar al tecladado, pone llave abajo y tecla arriba. También puedes hacer los movimientos hacia arriba, clic en él y vivir que se mueve hacia arriba, derecha, así que eso es todo. Eso es un pequeño electrón musulmanes. Entonces te veré siguiente foto 13. 13. mira las propiedades: bienvenido a otra conferencia en esta conferencia buscando propiedades del reloj del dedo del pie. Pero antes de que vayamos más allá en la conferencia más grande, mayoría de los eventos e hicimos algunos cambios en la cancha y tenerlos aptitude y conseguir ayuda. Entonces, ¿qué? Esencialmente lo que los equipos han hecho es absolutamente el mayor número de eventos en su propio vivo individual , y yo simplemente tipo de ellos individualmente y cada uno de ellos les ha dado sus propios métodos. Está bien, Entonces, por ejemplo, ahí están los movimientos hacia arriba. Esto es más abajo. Se trata de Muzenda. Andi debería ser la mayoría de la licencia. Anderson es la jugada más. Entonces en lugar de tenerlos todos en el unico dip para tu claridad y comprensión, solo me los dividen en diferentes métodos. Vive en cambio dispara estilizados, ¿verdad? Entonces está bien, tenemos una plantilla limpia. Por lo que básicamente propiedades de reloj de agua. Entonces para entender las palabras propiedades, puedes como imaginarlas como oyentes de imagen. Entonces digamos que tienes un derecho de propiedad de datos, y quieres escuchar o ver. Los cambios tienen que suceder a la propiedad de datos. Puedes usar premios. Propiedades de reloj de propiedad serían mucho más son útiles para las meditaciones cuando se puede evaluar la viabilidad de los datos en tiempo real. Entonces vamos a tener un ejemplo para que podamos entender mucho más mejor. Entonces lo que haremos es crear una forma pequeña. Dentro de esta forma, se pueden tener dos variables de entrada. Eso es un marcapasos, está bien. Supuestamente, la ciudad es un formulario de registro I para uso del estudiante Justo. El uso de los mismos debe ser de más de 10 caracteres en la contraseña debe ser de más de ocho . Guidant está bien. Entonces un día, lo que podríamos hacer es que podríamos tener que hacer una conjetura. Muy bien, Entonces estos mensajes, los puedo mostrar justo al lado de árboles moribundos. Entonces la razón por la que estoy poniendo estos mensajes justamente dichos campos de entrada es solo quiero saber cuántos caracteres quedan, verdad? Por lo general sería hasta contraseña. Quedan ocho horas. Entonces si lo guardo, podemos ver uso el nombre tiene 10 auto justo a la izquierda en pasado. ¿ De qué le queda esto? Lo siento. Necesitamos dos variables más para almacenar la entrada. Entonces digamos, usa el nombre. Muy bien, contraseña. Y rápidamente los compramos a estos campos de entrada usando la moral, y ésta es contraseña, ¿ verdad? Entonces cualquiera que sea el agua que se extendió en poner en estos campos se almacenará automáticamente al nombre de usuario y contraseña. Entonces ahora quiero más en estas dos propiedades de datos. O, sabes, ahora quiero ver estas dos propiedades de datos para entender la longitud de las mismas y para asegurarme de que lo son, por favor 10 caracteres de largo o si es contraseña. Tiene ocho caracteres de longitud. Entonces lo que puedo hacer es que puedo crear otra propiedad. Reloj de esquinas. También sigue la sintaxis de un objeto así pretenden premios propiedades Puedo utilizar directamente los datos Properties ha admitido. ¿ Verdad? Entonces digamos que los tengo usando bien. Yo digo Usa el nombre y di que es un asunto. Entonces lo que este índice hace esencialmente es que se está observando esta propiedad de datos. Es Es como adjuntar un evento no es hacer derecho disponible, Así que dentro use el nombre, por ejemplo. Lo que vamos a hacer es consolado o registrar esta historia usándola. Por lo que siempre que el uso de la propiedad de datos, se está cambiando el nombre. The watch property, ¿En qué es la propiedad de datos? Siempre que algo lo cambia, nuestras fuerzas o desencadena este método, ¿no? Entonces, por ejemplo, si abrimos el registro de la consola y si estoy escribiendo algo, puedes ver cualquiera que sea el tipo que esté siendo todo Ponlo en el concierto. Mira tan lejos, banco. De acuerdo, entonces lo que podemos hacer es con la ayuda de esto, ya que usar el nombre es una cadena, no podemos poner la longitud de la misma. Entonces voy a consola registrarlo. Entonces si lo guardo y empiezo a escribir, puedo ver que la longitud de esta cosa empieza a aparecer aquí. Entonces sabe lo que podemos hacer es lograr nuestro efecto deseado para la espuma. Podemos verlo esta tienda usando un mensaje igual, luego menos esta tienda para usar el nombre Bless izquierda. Por lo que todo es tierno usando en propiedad cambia esta camada de gato país. Por lo que van en el nombre de usuario se calcula y se resta de 10. Y agregué personajes desempolvados a la izquierda. Y este es en la propiedad de datos utilizada en un mensaje. Entonces si lo guardo y salen Así que mientras estoy escribiendo, se puede ver que el número de caracteres que quedan disminuye. Entonces puedo sólo un pequeño espacio aquí si puedo. Sí, así que ahora va a entrar en medios Ford negativos, lo que significa que la longitud del nombre de usuario es mucho más grande que 10. Entonces que si queremos que se restrinja sólo a ellos, así podemos tener un pequeño cheque que diga, si es un nombre, no prestar es mayor alerta Dunton. Entonces si lo veo esto y también lo que también podemos hacerlo. También tuvimos este mensaje encendido por Guardarlo y vuelvo Como estoy escribiendo, todavía me quedan cuatro garantías y si rebasé, hay una alerta, está bien, por lo que también puedes hacer lo mismo con contraseña. O también puedes asegurarte de que uno todavía use el nombre y la contraseña han coincidido con la cantidad correcta de términos. Puedes enviar el formulario automáticamente, o eso no sería que no sería realmente práctico, pero puedes hacer muchas cosas más geniales, ¿verdad? Y también se puede tratar de agregar en los eventos de entrada a esta forma como tipo de creación de experiencia mucho más intuitiva dedo del pie para hacer que el usuario entienda, como lo que sea que esté sucediendo. Por lo que a la mayoría de los sitios web les gusta usos, propiedades de reloj y marcas importadas a tipo de me gusta como un medio para la validación de forma de guante . Por lo que siempre que utilicen las salidas, sensación de entrada o, ya sabes en el evento de entrada de sangre se usa puede afectar a entender que el formato es correcto o violado mientras están escribiendo que pueden averiguar si la longitud es correcta. Todo eso, incluyendo cualquier personaje especial. Entonces eso es una especie de cosas. Entonces eso se infiere. Ver propiedades Voy a ver en la siguiente. 14. 14. componentes: Hola y bienvenidos a otra conferencia. Gran trabajo. Hazme, ¿quieres? Entonces solo para recapitular lo que aprendimos, aprendimos sobre lo que es la belleza s aprendimos sobre Bear para usarte, Jess. Aprendimos sobre cómo indicar que la belleza está en la página web. Aprendimos sobre las propiedades de los datos. Aprendimos sobre el enlace de datos. Aprendemos sobre métodos propiedades de computadora, propiedades reloj. Incluso aprendemos a listo el encuadernación. Incluso aprendemos sobre eventos, incluso modificadores, eventos de entrada, mayoría de eventos, etcétera. Entonces aprendes el Señor Así que ahora, con este fundamental establecido ahora, realmente podemos saltar a componentes. Por lo que los componentes de agua se iban a utilizar componentes. Realmente podemos entender en qué hace que los componentes sean tan geniales. ¿ Por qué cada amigo y marco prefiere usarlos? Entonces ni siquiera no sólo ver aunque vayas a enojo o si vas a reaccionar porque las quejas son muy útiles para uso trimestres. Si tienes una pieza de cancha y quieres reutilizarla, si quieres usar la funcionalidad, no has confiado en todo. El primer ejemplo off componente que vimos es hola componente mundo que vimos en la primera conferencia, ¿ verdad? A lo mejor conjunto de abusos aquí, ¿verdad? Por cierto, también aprendiste de ti Di, como, gran trabajo en eso. Entonces, empecemos con componentes. Por lo que componentes de agua a través de la mayoría de las quejas de agua, podemos desenterrar de lado. Es Deke Amazon, por ejemplo, como siempre lo hacemos por Amazon. Tenemos la barra de navegación, y teníamos el metraje para todas y cada una de las páginas. Estos tomaron visión nocturna, pero y pie de página será lo mismo. Por lo que estos dos tendrán la misma funcionalidad. Estos dos tendrán el mismo look. Entonces lo que podemos hacer es clasificarlos en componentes. La principal ventaja que alguna vez obtiene al convertirlos en componentes es que podemos hacer que esta fecha dinámica, así que veamos qué podemos hacer. Entonces primero, realmente, con un componente de alto nivel, lo eliminaremos. Muy bien, Así que para crear una nueva estructura de archivos insider componente, tenemos carpeta separada, llame a sus componentes. Puedes hacer click derecho en él nuevo archivo y podemos ver vista de punto encabezado. Por lo que la puerta que indica la pelea vista. Es un componente de vista, así que no lo hacemos. Ya hablamos de las ventajas de la extensión de la vista de la puerta, derecha. Tan oscuro para extensión tiene su propio script de plantilla en el estilo, lo que es mucho más fácil mantener el dedo del pie y mucho más fácil de entender. Por lo que creé un nuevo componente. Empieza con un templado básico. Yo podría hacer eso escribiendo SC y se puede ver andamio. Y si fue apuñalada No, este es un componente de cabecera, ¿ verdad? Entonces queremos tener lo que no se dirija. Entonces una cosa a tener en cuenta aquí es que todos y cada uno de los componentes necesita tener un dip principal o uno enraizado. Por ahora, esta instancia que hemos creado día que esa es su cabeza arriba insensible va a crear fuera, um, en una línea, derecha. Y si digo David, no vamos a ver nada porque no lo hemos importado para adaptar componente así a partir de ahora, son así A partir de ahora, son así A partir de ahora, nuestra página web se basa en ese componente, por lo que ab componente es lo que se está renderizando. Por lo que no hay rastro de componente Heather dentro de un componente Más tarde, dos, más tarde componente ab saben que aquí hay un encabezado. Lo que podemos hacer es dentro del guión. Podemos importarlo importante hola de y se barra componentes. Hola así Ed fecha indica la fuente sucia ¿verdad? Entonces si lo veo pero aun así no hay nada que se exhiba aquí. Eso es porque aún no nos hemos registrado. En lo que va de momento. Están usando un componente. Tenemos una tachuela de sujeto. Esos son sus componentes. Y en lugar de componente, se puede ver encabezado. Ahora se hace la parte de registro. Muy bien, ahora tenemos el componente registrado. Podemos usarlo en la plantilla. Podemos ir al templo. Se puede ver tuvo un con que tenemos por delante de ustedes. Entonces lo que pasa es que siempre que quiera tener este cabezal en cualquier página que quiera, solo puedo importar el componente y cargarlo. Es tan simple como eso. Por lo que en la próxima conferencia, habla mucho de apoyos que se centrarán en enviarlo fuera del componente. Entonces recuerda cómo hablamos de tener que te hago morir en lugar de componente. Entonces podemos hacer eso usando apoyos que esa será la próxima conferencia. Por lo que una cosa necesita de componente es que podemos ayudar al señor Components Así jefe componente de reserva y dentro de cabecera, podemos tener otro componente. Entonces lo que podemos hacer es dentro de los componentes, puedes crear un nuevo archivo que diga datos ni ver componente de datos. Correcto. Entonces en cambio, cabecera, podemos seguir el mismo procedimiento. En primer lugar, vamos a importar datos de los datos de barra inclinada de componentes On dentro de una etiqueta de script. Vas a tener una propiedad de componentes y sus componentes van a desacelerarse un componente sobre podemos usarlo. Utilízalo datos si lo guardo. Hola bajo debido a comported. Por lo que el componente de datos se está renderizando dentro de componente encabezado. Y este componente de cabecera se está renderizando dentro del componente de la aplicación. Por lo que nadie ha hecho componente encabezado. Y entonces, ¿cuál es el componente de cabecera? Y ese componente podría literalmente Todo bien, así que eso es todo. Está bien, así que está bien. Entonces la excepción de los componentes en dirección te veré la siguiente sección 15. 15. Renderización condicional: está bien, vamos a llegar a otro electrón belleza está en dirección. Por lo que en esta conferencia se estará buscando en la representación de condiciones. Por lo que estaremos buscando en OVI tras familiares, por ejemplo. Podrían ser situación muy querer renderizar cierto elemento sólo si un cierto misterio de valor o a través de unos ciertos valores. Fuertes. Correcto. Entonces no miramos cómo hacer eso Lo más es que lo que vamos a hacer es que vamos a crear dos formas. También lo hacen los componentes. Esencialmente, vamos a crear un registro en forma que debería estar registrando Northview Otro archivo que ve. Pero sólo es típico. Entonces es artificialmente esta forma señor. Va a ser muy con algunos muy sencillos. Recuerdo que deberías tener solo uno de los elementos principales, así que estoy teniendo la forma principal por dentro. Esto tendría bien, entrada, entrada, placeholder y uso el nombre así que de manera similar terminan contraseña. Deberían ser el fin del bastardo, ¿verdad? Entonces tuvimos que registrarnos para Mary y nos vamos complicando contratando a la antigua tradición y todo porque sólo vamos a buscar cómo cambiar de componentes. Entonces esa forma sugerida y la forma de bloqueo serán muy similares por cómo esta pareja realmente puedo tener esto, y no lo hago. Haces el dentro de la contraseña. Entonces sólo para identificar cuál es cuál vamos a tener una cabeza en ese registro en formulario y para el registro, vamos a tener yo solo por todo bien. Entonces ahora lo que vas a hacer es que vamos a quitar el componente encabezado hidra que importamos de la última conferencia. Y vamos a importar aunque un órgano. Además, solo lo hacen para mí, y lo va a declarar en su lugar la propiedad de componentes iniciando sesión en Justo. Sé que podemos ayudar a arrancar Logan, también puedes tener un sistema, ¿no? Si lo guardo, podemos ver que tenemos el log in former, sobre todo justo ahora. No queremos que estas dos formas sean desalentadas. Queremos que se muestren condicionalmente, así que queremos usarla para poder cambiar entre estas dos formas, ¿ verdad? Entonces vamos a tener una necesidad una propiedad. Entonces, locura, la propiedad tendrá un cable variable menos show log in, y eso debería ser cierto, ¿ verdad? Entonces sabe lo que empezar es para este componente o para cualquier elemento para ese asunto, se puede tener que tomó o seamos si está bien, entonces para B si dentro de esta manera, si podemos tener un valor de lingotes en nuestro caso, el lingote value es show Logan, digo Seguro, inicia sesión. Y como ese un componente de decisión es diferente a Logan, no queremos mostrar el componente médico para eso. Se puede ver si North Shore Logan así que si digo entonces volver atrás, veremos sólo ese órgano por la razón Aquí está. Es básicamente cierto, y esto cae para que pueda reemplazarlos. Cae y los reemplaza con verdad, y eso sería mucho lo mismo. Por lo que mostrar iniciar sesión. Nos hemos rendido la tala sólo si el valor es verdadero o registrado Logano vivo. El valor es falso, ¿verdad? Por lo que el trazo y también muy juega con show log in. Y va a ser porque el corto no seguro iniciar sesión. Podemos hacer esto. De lo contrario, también tenemos otro director Corliss, nosotros más, Y si tienes comidas, no necesitamos especificar el tala de North Shore, así que si lo guardo, vamos a ver el formulario de tala sí mismo. Nadie en transformarse claramente en esto. Podemos concluir un botón que es cambiar formas. Y podemos tener cualquier Brentford en Gran Bretaña cambiar formularios en este evento y tener un interior medido . Esto importó. Podemos ordenar el valor de la orilla, Logan. Entonces lo que voy a hacer es este show de tienda iniciar sesión es igual al norte esta puerta orilla Logan. Muy bien, así que básicamente estoy ordenando el valor de la propiedad de órgano de costa. Entonces si el show log in value es, do cambiará. Se cae. Si es falso, lo cambiará para que haga. Si lo guardo. No, tenemos un botón, ¿verdad? Entonces cada vez que hagan clic en un botón, el valor de shore Logan será dirigido, lo que significa que cuando vas a cae cuando es falso, tala desapareció, y yo sólo a base de hierbas aparecen para que pueda hacer esto cualquier número de veces Yo he querido. Ahora también tenemos otro Derek para llamar a su Nosotros más? Si es así, básicamente si Elsa Nelson tiene razón, Así que dentro de la que tenemos queriendo conocer a papá, no necesita estar exactamente disponible. También se puede tener algo así como un argumento Entonces, por ejemplo, si tengo disponible que dice valor y Alcance y B si valor mayor que luchar. Entonces si digo que cariñosamente se mostraban en para formularios de cambio, puedo ver valor de inicio llamado limón ¿verdad? Entonces cuando hago clic en los formularios de cambio, lo que pasa es el valor teeniest 11. En esto, ya no seremos válidos. Hansa cambia lentamente. Ellos sólo en él. Entonces lo que puedo hacer es ver el valor de inicio registrado antes, para que ahora el camino de condición ya no sea válido. De ahí que esto deje de renderizar e instruir. Esta conferencia registradora se exhibirá. Entonces si lo guardo en exceso, qué formas van al sistema? Alexa que se controla y bebe. Espero que tengas una idea para este renderizado de condición por ahora, así que es muy simple, Así que básicamente está usando ser si alguien más, también podemos usar V else. Si es muy similar a eso, puedes probarlo por tu cuenta. Y en el siguiente sector, miramos cómo pasar apoyos o cómo pasar datos pasados a componentes y hacer que estos componentes sean dinámicos. Ya veré en el siguiente 16. 16. accesorios y eventos personalizados: en esta sección, vamos a ver cómo escuchar datos dos componentes qué tan decentes datos a componentes y cómo recuperar datos de conferencia. Por lo que a menudo a estos datos se les conoce como apoyos. Por lo que ahora buscamos esperar pasar datos del componente hijo de la empresa matriz así como obtener de nuevo sangrado de niño componente competente, aparente. Por lo que ya tenemos una cita. Un componente que creamos en la última conferencia dentro de su componente. No hay nada mucho más datos. Odio tu día. Hola. Emitió un componente. Por lo que trataremos de enviar este dato esta cadena desde el componente de licitación. Por ejemplo, si estamos en abominación belleza, ¿no? Entonces en cambio en el extranjero. ¿ En serio? Para componente de datos, hemos registrado el componente bajo la propiedad de componentes. Ahora podemos usar el componente y puedes guardar datos. Este refresco de suministros Vale, no obtenemos nada porque no lo pensaron aquí. Entonces sólo tenemos ah rumbo. Esto es lo que necesitas para tener una ruta. Si es así, tendremos ojos grandes están arraigados en el interior. Esto habrá ileso en su único título dice Dado componente. Muy bien, para que podamos ver el otro componente que conozco. Entonces ahora lo que queremos hacer es que queremos enviar datos a este componente, ¿no? Entonces, por ejemplo, digamos que quiero tener una etiqueta de historial. Yo quiero tener un papá de historia aquí. Quiero mostrar mostrar un mensaje, ¿verdad? Entonces este mensaje, no descenderé del dolor y competente, que es vista aborrecida. Para enviar ese mensaje, usaremos algo llamado menos apoyos. Por lo que el componente de datos está esperando un problema con el mensaje de nombre para que podamos declararlo En lugar de bolsa de script, podemos decir props dentro de sondas. Podemos ver el nombre de la esperadora apropiada. En nuestro caso, es mensaje, y esta es opción, pero es mejor tenerlo. Es una buena práctica tener esto, por lo que generalmente solo fuiste mensaje limitado en. Eso sería todo. Pero en términos de buenas prácticas , suele ser bueno hacer esto. Podemos declarar el tipo en el que es una cadena, se requiere, y también lo es. Por lo que los significan propiedades regionales a ese pequeño problema que mencioné requería. Es cierto correcto para este problema, así que si lo guardo un componente insider, estéril, no estamos enviando ningún dato. No estamos enviando el mensaje traído, que espera, ¿ verdad? Entonces si voy a nuestro sitio web y si abro el registro de la consola, vamos a obtener una advertencia de vista faltante requerido mensaje roto porque declaramos que lo mejor a través y es una cadena tipo. Muy bien, entonces ahora para enviar este mensaje problemático, lo que podemos hacer es locura. El componente. Se puede ver mensaje de Gordon y dentro de su mensaje, puedo pasar Idiota de Robert E. Así se creó una la propiedad. Ese es su mensaje. Veamos hola del componente de datos y aquí vamos a ver mensaje. Entonces si lo guardo, podemos ver eso. Entonces si un refresco del otro lado desaparece porque estamos enviando el dodo por lo que también podemos enviar múltiples apoyos. Por ejemplo, si también está requiriendo edad, apuntalamiento contra el tipo de edad debe ser el número y permanecer callados los chicos. Entonces como la edad no es obligatoria, sólo podemos decir bastante es falso. Y si lo guardo, no obtenemos otro con respecto a la edad porque requirió es falso encendido. En lugar de construir componente, podemos tener otra propiedad llamada su edad. Estoy dentro de un segundo. Cendant. Nadie. Lo siento. Entonces solo para mostrar ese medidor aquí la edad conozco la edad. Entonces un Justin, es así que está enviando datos desde componente estéril de componente hijo. Pero, ¿cómo enviamos datos desde componente infantil? Espalda del dedo del pie Ser componente. Entonces usaremos algo que nos llama. Emmett. Está bien. Entonces realmente queriendo. Eliminaremos componente de datos de nuestro ab Broadview, e importaremos componente de registro. Voy a como registro dentro de la propiedad de componentes y puedo usarlo. Logan, lo guardo. Me estoy poniendo mejor. Tarjeta es antigua inicio de sesión. Está bien. Componentes, derecho. Sus componentes. Entonces si lo guardo, que la bitácora informe aquí. Dentro del formulario de inicio de sesión, puedo tener un botón puede decir enviar. Dado su tipo de presentación, podemos tener cualquier oyente de eventos enviar y comenzó Prevenir el comportamiento predeterminado diciendo prevenir y podemos ver sub it forma. Entonces en lugar de script ID, podemos tener una propiedad en lugar de minutos Propiedad se puede basar en el formulario de envío mentorado . Pero ahora sólo un registro de consola. Preocupado por log. Tom tiene frijol presentado. ¿ Verdad? Por lo que ahorré el 10% de lo que pude. ha enviado el formulario de mensajes de la consola. Entonces sabe lo que quiero hacer es de adentro hacia afuera. Broadview, quiero que lo respaldes. Lo que yo quiero. Pero sí tuve ah, bromeando. Bolsa diciendo mensaje en el interior de este mensaje. Elimino este mensaje y básicamente quiero saber si el formulario ha sido enviado o no. Por lo que en primer lugar forma tiene norte siendo presentado. ¿ Verdad? Por lo que incluso podemos tener un emoji aquí. Entonces si veo el formulario no se ha presentado. Entonces lo que queremos es así cuando vayas a iniciar sesión en forma y pulsa el botón enviar, quiero el mensaje aquí arriba en la vista de Abdur. No cambio electo Así comenzaría a es en lugar de cónsul registrándolo. Podemos decir este compañero de dólar puerta en presentar un retraso. Entonces básicamente lo que está pasando es que nos puede gustar enviar o desencadenar para secuestrar vista que el formulario ha sido enviado. ¿ Verdad? Por lo que aquí podemos recibir el gatillo yendo ed on presentar casa presentada. Por lo que al recibir este Tigger del componente de registro, podemos obtener nuestro propio método en lugar de componente arriba. Por lo que en presentar. Estoy activando los formularios del medidor presentados. Entonces si lo guardo Y si voy a metodos 25 c formas enviadas y dentro de esto traté de cambiar el mensaje dedo del pie distorsionar mensaje igual hacer formas enviadas Derecho, Atacemos si voy a nuestra página web Y si golpeo enviar que la señora se cambie Así que sólo a ir sobre lo que pasó aquí es en lugar de registro componente cuando se está enviando el formulario Estaban emitiendo un evento sobre el nombre sirio está en enviar Es un cliente Incluso que diseñamos que estamos recibiendo es en demanda de verano en lugar de rap que estabas registrando es defined on it on submit on this event happening Estamos tratando de ejecutar este formulario enviado método y dentro de este formulario sub lesionado Hemos cambiado el mensaje para formar remitentes tan frescos tenemos formulario no se ha enviado Click forms enviadas. Muy bien, así es como enviar datos desde el componente padre del componente secundario El uso de los apoyos en recuperar los datos de los componentes secundarios aparecen incompetentes mediante el uso de eventos correctos. En la siguiente conferencia, nos fijamos en las segundas miradas de vida de un componente. Eso debería ser interesante. Ya veré en el siguiente 17. 17. V-for con accesorios: en esto eléctricamente buscando antes hasta ahora se ve intemperancia, por lo que es tema realmente divertido y realmente fácil de entender. Entonces, ¿qué va a perder? Will Decatur Nuevo componente dummy Acabas de nombrarlo dummy Don't View y dijo que este componente fictizo tendrá un líder que diga, Hey, componente familiar bien, nada realmente creativo. Entonces en lugar de script, realmente importante componente, digamos, para dummy de slash on, vamos a registrarlo bajo la propiedad de componentes. Di ficticio. No, es un adormecimiento soy un componente, ¿ verdad? ¿ O de lo contrario? Un componente de hematoma. Y el así, por ejemplo, he querido que el componente Demi sea menor de 10 veces. Entonces lo que puedo hacer es que puedo llamar varias veces a la bestia ID y guardarla y cenar así o un asunto más. Lo que puedo hacer es crear un bucle for. Puedo verlo antes de componente y después. Entonces si lo veo, no acabaste los tiempos. Entonces básicamente lo que está pasando es que podemos tener este número dinámico también, Entonces, ¿qué perdemos? Nosotros lo creamos. Propiedad de datos que dice número que va a estar vacío por ahora y lamer bien. Eso dice orden de paz en el número en. Vamos a ser mortales. Es el número. Muy bien, Entonces lo que vamos a hacer es dentro del componente de sintaxis antes en número. Entonces, ¿qué está pasando? ¿ Se lee centeredness componente atómico tantas veces como la propiedad de datos fuera de número. Entonces, por ejemplo, si has estado aquí entre diferentes tipos de componentes, entonces si lo guardo, tenemos nuestra variable enter the number input. Ahora bien, si digo uno va a conseguir uno. Pero una cosa te das cuenta cuando digo cero cooperativo negativo. Y si veo otro cero, estamos consiguiendo tres. Entonces, básicamente, no estamos consiguiendo 100 100 componentes, pero estamos consiguiendo tres componentes diferentes. Por qué, uh, la razón por la que esto está sucediendo es que los valores traen almacenados como un hedor. ¿ Verdad? Por lo que el componente ficticio se está renderizando ya que muchas veces tiene su impío en la cuerda. ¿ Verdad? Entonces si tengo múltiples caracteres, obtendré múltiples componentes diferentes. Pero, ¿y si no quiero eso? ¿ Y si quisiera ser un número? Lo que podemos hacer es o podemos convertirlo en hacer, um pero mediante el uso de una propiedad de reloj usando una propiedad de reloj comienza en número en. No podemos reemplazar el número de inicio usando el número de este número de tienda. Entonces si digo esto lo puedo ver. Entonces conseguiré entonces 200. Vamos a conseguir 100 en cada descuento. Hacer esto es por creo que ese es un atributo a la B más de lo que podemos quitar el reloj encendido . Podemos ir al mortal y se puede ver número de punto. Entonces si digo número de puerta, aceptará solo números o si conviertes la propiedad de datos en un número, ¿ verdad? Entonces si veo, entonces ahora estoy recibiendo 10. Y si digo 100 obtenemos el 100. Y si yo 306,000 igual así se puede ver que debemos estudiar de acuerdo demostrándome que hay otra para esta línea en particular. Entonces la razón es que es como poner índice. Por lo general para un componentes apagado. Mira, necesitábamos índice, así que me gusta identificar de dónde son. Por lo que tienes un índice, podemos decir Components combo index. No voy a conseguir un índice clave pasado. Entonces digo este hombre, se ha ido. Soy un cumplimiento, uh, uh, luciendo pelea igual. Entonces está bien, como aprendimos en los seis aspirantes anteriores y en apoyos a conferencia diferente. ¿ Verdad? Entonces, por ejemplo, veamos a los competentes excepto los apoyos. Como número que compré, ¿Dejaste caer el número de pañales? ¿ Se requiere? Sí, se requiere. Entonces si lo guardo, sé que reemplazo ese Componente Hey MME. Y veo en mi dígito de índices. Muy bien, entonces si veo esto dentro de ella, puedo enviar el valor para componente ficticio usando índice absolución de dígitos. Entonces si hago esto y si lo guardo, también podemos manchar escondiendo un plus para índice. Y si digo cuatro, me dieron +1234 Así que eso es todo para este que veo en el siguiente. 18. 18. Los ganos de ciclo de vida: en esta conferencia, vamos a ver los ganchos del ciclo de vida. Por lo que el ciclo de vida del agua ve ciclo de vida mira un concepto muy interesante con la ayuda de ganchos del ciclo de vida. Podemos entender cuándo se está creando el compromiso, cuándo se está destruyendo, cuándo se está actualizando cuando se está montando en Lockport. Entonces vamos a tirar en su vida segundo diagrama de flujo gancho encendido. Podemos mirar en eso. Entonces este es el look del ciclo de vida, diagrama de flujo. Entonces si puedes ver lo primero, lo que estamos haciendo es que estamos creando una nueva vista. Instancia todo sobre la creación de la nueva instancia de vista, configura todos los eventos y métodos del ciclo de vida. Entonces inicializando eventos y ciclos de vida, entonces lo que pasa es que dispara un segundo gancho de vida mentor estos antes de crear, creado así y agua, los ganchos que tenemos fuera de gráfico bajo. Podemos usar estos para cancha de rescate o podemos usar esto para realizar una acción entre estos eventos del ciclo de vida . Por lo que el 1er 1 es antes de crear, por lo que podemos usar antes de crear antes de que el componente de vista tenga la actividad y se use en ella. Como se puede ver después de antes tenemos el en afeitar inyecciones y reactividad, ¿ verdad? Entonces después de eso, se está creando la conferencia. Entonces eso estas miradas de la vida son muy, muy importantes. Es decir, estas miradas del ciclo de vida pueden ser muy útiles. Entonces, por ejemplo, antes de crear crear cualquiera de estos se puede utilizar dedo del pie realizar una solicitud de red. Por lo que mientras se está montando y cargando el competente, podemos realizar en una solicitud de camión sobre podemos obtener los datos y una vez creada la conferencia, básicamente comprueba una opción de elemento. Por lo que si recuerdas desde la primera conferencia al ser ticketed vista en un sitio web existente , tenemos una opción de elemento. Entonces si tiene un elemento, componente tomará para opción templada. Pero si no tiene un componente de elemento, ¿ irá a montar? Por lo que tomará para la plantilla después de comprobar la plantilla. Entonces si tiene, una plantilla, compilará plantilla en función de render. Pero si no tiene plantilla, compilará los elementos corazón HTM como plantilla. Entonces podemos pasar a antes de Mountain Mountain Mountain, por lo que estos dos están relacionados con montar el elemento yendo al dorm o yendo en el componente a la cúpula encendido después de montarlo. Tenemos un par de ganchos de ciclo de vida de inversión antes de operar un Brigid. Por lo que estos dos looks de segundo ciclo de vida se pueden usar cuando se está actualizando el dorm virtual o antes de que se esté actualizando o publicando el domo. El domo ha sido operado por lo que podemos realizar algún tipo de acción o cualquiera de estos looks del ciclo de vida, por lo que también podemos más intervención. Se está destruyendo el competente. Entonces antes de destruir y destruir son los ganchos del ciclo de vida utilizados para eso. Por lo que en antes destruidos, podríamos realizar algún tipo de acción de ahorro para que podamos realizar algún tipo de acciones de navegación , etcétera sobre destruidos, post destruidos. Podrías enviar un evento o condenarlo un evento, cualquier cosa que quieras hacer cuando tu empresa sea destruida. Al igual que así. Estos son los looks del ciclo de vida. Entonces probémoslo en los componentes reales para que podamos entender cómo funciona realmente. Entonces lo que realmente, es que empezaremos con el componente APP, así que en lugar de tener componente, tendrá algunos datos. Esto es así de cómodo, ¿verdad? Entonces si lo guardo en, podemos usar los ganchos de vida segundos preocupados un Script AG similar a cualquier otra propiedad. Por lo que comenzaremos los secretos de vida desde el principio crearán el antes de crear métodos creativos antes de crear. Entonces, por cada ciclo de vida, Huguely está creando mensaje de alerta para que podamos entender cuándo se está llamando al gancho del ciclo de vida antes de crear, obtenemos al creador. Una vez que se hace la creación, conseguimos montar el antes de la montaña. Por lo que antes Montaña de Montaña que solía montar el competente en el dormitorio. Por lo que en lugar mantra, Se puede ver una carga montada y ojalá después de la montaña. Por lo que en este punto podemos ver la etiqueta de alto churn. Sea lo que sea aquí es ese componente. No lo será. No será visible para nosotros hasta que las funciones de montaña se ejecuten. Entonces una vez que el compuesto está montado en el dorm, entonces podemos ver el componente o lo siento. Podemos ver el elemento. Entonces tenemos dos ganchos de segunda vida más antes de destruir destruidos. Supongo que, por mirar antes de la historia y la historia, podríamos tener que crear otro componente. Entonces, por ahora, sólo iremos con él. ve el ciclo de vida dos más antes de que suba más tarde. ¿ Todo bien? Si lo guardo, lo tengo funcionando en el servidor local Y si digo servidor local, obtenemos la primera alerta. Por lo que inicialmente es una etapa de antes crear Así que una vez que se hace el antes de crear Así que escapamos una nueva instancia de vista sobre ella ha inicializado los eventos en la vida Segundo ganchos. Por lo que una vez que se hayan inicializado los eventos del ciclo de vida, podemos tener acceso a los ganchos del ciclo de vida. Entonces de ahí el método antes de crear en Si digo ok, lo siento. Entonces si lo refresco así si veo bien, me pongo el creado en este punto de tiempo, se necesita para la opción del elemento y tuvo que refrescarse de nuevo. Entonces después de creado, si digo OK, voy a conseguir el mes antes. Por lo que ahora se va dedo del pie monta el componente sobre el perro. Entonces si digo OK ahorita montada se hace tan a menudo localizada, deberíamos poder ver el odio papá. Entonces Ok, y eso es una tendencia. Entonces eso es lo que no hacemos bien. Entonces ahora, antes de que miremos antes de la historia y destruidos me gusta mirar dedo del pie antes operador operativo , ¿ verdad? Entonces para que eso funcione, salgamos de eso. Sabemos y tiramos eso ahí dentro. Sí, para que eso funcione, necesitamos crear una propiedad comentarista de componentes de datos dentro de la propiedad de datos. Vamos a tener ah, variable. Digamos su nombre. Sólo un ejemplo común. Y es tener un Marcador de posición de campo y el nombre y vamos a obligarte hacer nombre usando el mortal. Entonces ahora, si lo guardo Entonces qué del componente tiene que refrescarse, ¿ verdad? Entonces si tengo que pasar por cada cosa otra vez en antes de que Mountain antes de destruir, Sí, Sí, Así que ya que la conferencia está siendo reconstruida de nuevo, estamos llegando antes de que la tienda y destruida Lifecycle mire aquí, así montado en este es el componente Y aquí está el nombre. Entonces cada vez que entro algo en esto, así que cada vez en algo encendido para esto, el Dorm Tiny's o los cambios de propiedad de datos en el dorm tiene a una gran derecha. Por lo que cada vez que la cúpula tenga que actualizarse, disparará los ganchos segundo a la vida antes de operar la actualización. Digamos que entré. Nunca obtenemos las actualizaciones anteriores. Por lo que antes del descanso podríamos realizar algún tipo de acción antes de que se esté actualizando la cúpula . Podemos realizar cualquier acción si lo deseas. Oh, ya lo sé. Una vez apodado se hace, saldremos de esa vida. Segundo gancho que es su actualizado. Por lo que dentro del sujeto admitió semana otra íntima el usuario que algunos datos se han cambiado o se ha hecho algo. Si digo OK, ese eres tú. Entonces eso sucederá para cada instancia, porque no tengo alerta para cada antes de actualizar operado derecha. Entonces ahora veamos antes de destruir, destruidos. Para entender esto mucho mejor. Vamos a tirar en el componente de tala y, dijo Rajan, ¿lo hará? Es justo a través en el antes destruir y destruir. Por lo tanto, también elogiemos estos. Guárdalos. Entonces la razón por la que tengo formulario de registro aquí es que también salgamos estos ya que no va a estar necesitando estos todos. También es crear un botón que diga Destruir componente de registro y dentro de la propiedad de datos . Tengamos un valor booleano, lo sé, pero ¿registrando? Tomemos una carne de res. Seguro. Logan, por la botella. No tiene evento click, y solo podemos pedir el valor de shore Logan, ya que es una sola línea, debilita tu inicio aquí, así que si todo salió bien, si este componente se destruye, se debe encontrar a eventos que dice antes, antes de la industria de inicio. Entonces intentemos eso. Entonces si presiono destruir componente de registro me pongo antes destruido, y si digo bien, obtengo el destruido, entonces el componente de registro ya no es visible, Así que si vuelvo a hacer clic, aparece encendido, y puedo destruirlo otra vez, una luz. Entonces eso es bueno. Entonces estas son las miradas del ciclo de vida, y en la próxima conferencia vamos a buscar en enrutar qué se ve el orden y cómo Ryan o las cosas requeridas en eso es todo para este. Ya veré el siguiente. 19. 19. mezclas: todo terminando esta conferencia, nos fijamos en algo llamado como mix ins, por lo que las mezclas son muy útiles en cuanto a ti, Jess. Por lo que nos ayudan a evitar mucho fuera del cordón repetido. Hace que el elefante no sea más fácil. Entonces veamos cómo crear una mezcla y regar esto. Entonces cambié las cosas. Carpeta de pedidos de Internet. Pongo la empresa a casa en el interior del hogar. Está cambiando go requerido tipo caídas así que no lo pillamos, ¿lo consigues ? No es la consola, por ejemplo. A ver. Tomemos un, uh, ¿cuál? Onda tenemos. Tengamos una propiedad de computadora también. Esa es una buena cita. Y dentro de esta propiedad candidata, volvamos. String off. Nuevo hizo así que hemos creado un nuevo do objeto en. Añadamos, Infierno, lo guardo. Yo estoy consiguiendo los muertos. Entonces, ¿y si quiero sólo el sustrato fuera de él? Digamos que quería de cero, 2 11 o 15. Digamos que 15. Entonces si digo 15 obtenemos reloj del viernes durante el 2do 2019 ¿verdad? Entonces, ¿y si tengo otro componente? Digamos que tengo un componente como encabezado. Es importante por delante de componente. Vamos a registrarlo. Ahí hay temas en su interior. Hider slash guárdalo. Tenemos algunos detalles. Aquí tenemos Hola analista Agnes realmente mover eso aquí. También tenemos algo llamado Estatal. También es quitar eso en. Si lo tomo todo, lo guardo. Está en blanco, ¿verdad? Entonces, ¿y si estamos usando otro componente? Y también queremos que el día sea visible aquí, ¿no? Por lo que retrato Lewis. Por lo que tendremos que crear otra forma de propiedad de la computadora. Tenemos una fecha de cigarrillo otra vez. Sé que hemos hecho string State object y luego de nuevo, sub string. ¿ Esa puerta va de estar bien? Entonces esta es la repetición de corte soviético usando el mismo get ese asunto en múltiples lugares casa así como se dirigió a la derecha? Entonces lo que podemos hacer es en cosas como relacionar esta propiedad de la empresa en todos y cada uno de los componentes, podemos crear una mezcla. Entonces en la fuente, vamos a poner una nueva carpeta Nixon en, en lugar de mezclar. Entonces tenemos una cita mezclando RGs, ¿verdad? Entonces dentro de este archivo, qué ser Lewis y decir exportación. Por lo que nadie diga por defecto de exportación. Podemos usar la misma sintaxis lo que usamos dentro del script back para que podamos copiar las propiedades completas . A partir de aquí, puedes basarlo. Diablos, se vería igual. Entonces sabe lo que se podría hacer es por dentro. En casa, podemos quitar la propiedad de la computadora. En cambio, podemos importar la mezcla. Entonces ahora que tienes importante la mezcla de fecha, queremos usarla y usarla o tres, Lewis creará. Ayudamos a rincones inmobiliarios mix ins on iniciar una fecha de signo Lixian on si lo guardo, y si vuelvo atrás, no está funcionando. Por lo que la fecha de hoy es del componente de casa, y no está funcionando La razón por la que no está funcionando. ¿ Está diciendo que la buena fecha no está definida? ¿ Verdad? Por lo que la razón es mezclarse generalmente excepto en una propiedad. Entonces para eso, cómo crear, casarse y tener que incluir ocho mezclando, y si lo guardo, está funcionando bien. Entonces es lo mismo con la cabeza también. Por lo que ponemos un par de propiedades en realmente poner la mezcla en, y se puede ver mix ins dentro de la mezcla de fecha. Y si guardo, estaría trabajando pelea así que en su lugar la mezcla y se puede tener la propiedad de datos también. Si lo guardo. Y si vuelvo a encabezado encendido, si veo si lo guardo y vuelvo hola de mezcla aparece bien. Por lo que ahora quizá te estés preguntando. ¿ Qué pasa si hay un caso en el que la propiedad completada como Get Date también está disponible en la Propiedad de encabezado, por ejemplo, tengo una propiedad de computadora en ella también se llama Gideon, y en su lugar se convierte una pequeña cadena que dice Get Did Right. Entonces lo que pasa es cuando el inmueble dentro de un competente se nombra similar al inmueble en Santa Mixon. Generalmente, se da alta prioridad a la propiedad dentro del componente. Entonces si lo guardo, voy a conseguir fecha para el encabezado. A pesar de que estamos importando la mezcla en eso tiene una buena fecha terminada, Roberti que insistirías, Está bien, así que eso es todo para mezclar. Ya veré en el siguiente 20. 20. Introducción a la ruta: en esta salida vamos a buscar en olor visto Entonces ¿qué se ve orden y por qué lo necesitamos? Por lo visto organizar básicamente utilizado para la navegación dentro de la aplicación Así que en general la razón por la que necesitamos una biblioteca específica puede afectar para la navegación misma en este tipo de aplicaciones extinguir es la navegación dentro de nosotros SP es muy diferente a la navegación siete en nuestra página web. Entonces como ya vimos un ejemplo anterior sobre cómo sitio web es diferente de un SPD dentro de una aplicación de un solo bit no queremos solo queremos que se intercambie la competencia. Nosotros solo queremos que los componentes sean, ya sabes, cambiados a voluntad. Entonces para eso no lo hacemos por eso podemos usar si solo quieren hacer componentes Pero si hay muchos, muchos componentes no podemos usar VF. Y también si quieres mostrar a un compañero competente en particular, eres l No podemos usarnos para eso también. Entonces, medida que vas a, realmente no entiendes su importancia y por qué. Es algo así como usado de esa manera. Entonces empecemos con eso. Por lo que para instalar visto exterior, podemos ir a la terminal tengo un proyecto abierto aquí. Entonces, una cosa sólo para recordarles chicos, espero que su blanco de pollo un muy positivo. Por lo que cada conferencia está siendo hasta llegar con la nueva corte. Por lo que este también se actualizará con la nueva cancha para la hermosa conferencia. Para que puedas seguir junto con papá. Pero te aconsejo encarecidamente que sigas conmigo ya que estoy haciendo las cosas. Muy bien, para que podamos agregar el orden del espectador usando joven. Estoy usando joven, pero si quieres usar NPM, es NPM Install view hyphen rotor, mitad en el cielo. Bostezo seguro visto olor. Por lo que eso está instalado. Entonces una vez que esté instalado, podemos ir dentro de mí y Georgie s y declararlo dentro de él para que te podamos hacer saber eso. Ya sabes, no estábamos en la instancia de vista para estar asociados a tu pedido. Entonces podemos hacer eso diciendo importación. No hay duda de ellos, ya sabes. Entonces después de esto, lo que tenemos que hacer es esperar para decirte que necesita dedo asociado con esta biblioteca para que podamos ahorrarte No uses y en eso Es un índice de comentarios. Cuando te gusta importar temprano una nueva mano de obra a los pocos proyectos, así que guárdala. Por lo que ahora hemos indicado Vieux Port Ver hija en esto. Por lo que ahora podemos crear un nuevo archivo que diga Notre Togs. Dentro de este archivo, podemos crear una nueva instancia de pedido exportándola y automáticamente importante de tu biblioteca de pedidos para mí. Entonces yo en vez de usted, Doctor, podemos tener otro sobre rutas. Yo no dije eso Ciudad Vieja. Ahí va eso aquí. Y en lugar de la vieja Ciudad, podemos tener un nuevo objeto para el picado lo tenemos la parte que podemos tener puesta antes de que incluso estemos creando, crear algunas partes. Necesitamos importar componentes a esto. Por ejemplo. Es importante que los componentes registren e inscriban o registren el registro de importación. Entonces ahora que tenemos importada la conferencia, lo que podemos hacer es que podemos crear piezas para estos componentes. Por ejemplo, la parte de carretera sería nuestro componente de aplicación en. Podemos usar el componente de registro como slash log in, y cada objeto necesita tener un tipo de como quiero decir, no usa para ayudar, pero especie de like tiene un cierto conjunto de propiedades como nombre. Se puede dar los nombres de las conferencias también, o dar los nombres de las partes también, como yo puedo dar un eslogan también vamos a ver por qué solicitar la parte A menor? Uh, así que también veremos por qué necesita y a los hombres aparte mientras vamos porque Norden se puede hacer de dos maneras. Está en la parte nombre artesanal también. Entonces una cosa más. Lo siguiente que requiere es éste es obligatorio, por lo que necesita un componente qué componente se asociará a eso. Pero así es iniciar sesión. A mí me gusta discutimos en las conferencias anteriores como Begin boss, Pobre apoyos el componente ¿verdad? Por lo que también necesita un tipo de como tener un utilería por lo que con este componente estaría lidiando con utilería. Entonces eso es algo que necesitamos, dijo Drew. Porque si estamos tratando con apoyos en el componente, no, no, podemos seguir las mismas pautas para crear una parte para el componente de registro. Se puede ver parte. Yo no slash realmente sólo arriba se puede decir nombre es que yo simplemente no. Nuestro componente aquí es registrar otro Dax de Rob's, pero esto digamos falso. ¿ Verdad? Entonces ahora eso lo ha salvado. Está bien, entonces ahora tenemos nuestra opinión. Instancia de enrutador. Por lo que necesitamos asociar este punto de vista hija Instancia, con energía del brazo s en mayo Energía ya que tenemos esta biblioteca de órdenes, que está vinculada a ver instancia. Pero también necesita conocer el tipo de rutas que el arte requiere. Entonces para eso, qué podemos hacerlo, podemos importar este archivo. Se puede importar como las dudas desde derecho. Entonces una vez que tuvimos eso fuera de notado, lo que podemos hacer es dentro de su punto de vista, instancia solo podemos ver notas. Por lo que ahora la instancia de vista lo tiene incrustado en ella. Entonces si lo guardo ahora, la vista externa está vinculada con el proyecto, por lo que podemos ver orden visto en todo el proyecto. Cualquier bebé nacido. Entonces digamos, hasta un rab, queremos saber qué tipo de navegación pero correcto, Y así, Y así, en cuanto a mostrar su contenido exterior ahí a partes específicas para ser recordadas, el 1er 1 es ese eslabón externo que es enlace. Esto es para navegar al usuario de una de una empresa a otro componente. Pero también necesitamos tener otro tipo que diga escribió de ti Esto se utiliza para mostrar los componentes que estaban navegando dedo del pie Estás inocentemente pronto. Por lo que cada total tiene la propiedad Llamar s a en esto indica la parte que definimos dentro del router. Por lo que aquí tenemos slash log in derecho. Entonces podemos entrar aquí también en vamos a tener algo de texto iniciar sesión por lo que inicialmente arriba componente cargamos, vamos a tener alguna indicación que se levanta componente lo sé Así que no. Lo que pasa es que si solo entro a nuestra página web no puedo ver nada que facilidad. No vemos nada, pero tenemos otra que es escolta lee propiedad igualada de indefinido. Entonces la razón por la que nos están diciendo que es si vas por la puerta principal jazz en lugar de tu instancia sea estamos agregando rutas aquí, pero no lo reconoces. Entonces esto así es así. Este es uno de los errores muy comunes que los desarrolladores lo hacen instruye especificar rutas Aquí. Lo que puedes hacer es si consideras la foto y outs para que solo sepas aceptar fuera de propiedad. Entonces cuando lo regalas, no lo concuerda con eso. Entonces si lo guardo y vuelvo, mi Ariza vendió. Entonces si hago clic en él, lo que pasa es que el componente de registro se renderizará en esta entrevista. Entonces en cambio este tipo de ti verás el componente de registro. Ahora la bitácora. Ahora hay entrevistas vacías, pero si hago clic en él, aparece el formulario de registro y también se puede ver en la u. R L que ha aparecido el registro de slash. Ahora bien, si vuelvo, podemos ver sólo slash. Pero tal vez te estés preguntando, sabio, ¿ Hay un pequeño hasher? ¿ Verdad? Entonces eso tiene que ver con algo llamado menos más fuera del router para que podamos ir a la puerta exterior . revisan el jazz y el interior. Orden. Instancia. Podemos ver más historia. Entonces aquí en 10 más Si digo hash, obtenemos el hash. Y si digo historia, ya no conseguimos Dub Hashem con encuesta. Sólo tienes que ir aquí. Y si hago click en Logan, me dieron el listón Logan. Está bien, así que hagamos una cosa. Vamos a crear nuestro ese eslabón exterior. Y para el 2do 1 vamos a vincularlo para que sea un componente. Segundo lo dije solo yo solo, um Está bien, así que hagamos este enlace un poco más grande, así que lo guardo. Tenemos do componentes grandes, y yo sólo puedo decir que lo somos. Sí. Entonces esto es sólo para que esto realmente envió un enlace se vinculará al padrón, pero en lugar de notas sobre este log in bill building a la maderera. Entonces a partir de ahora, tengo el componente de registro. Yo sólo puedo ir a la página principal. Yo quiero puedo decir iniciar sesión y conseguir Logan? Y si yo dijera yo sólo realmente sólo una forma. Entonces, ¿cuáles son los competentes? Yo me voy. Yo quiero exhibir que se mete en eso lo mete que se mete en el camino a la orden de ustedes. Etiqueta. Entonces eso es todo para esta conferencia. En esta conferencia, nos enteramos de un enlace en nuestra entrevista. Sé que suena confuso en un proceso muy largo para sólo navegación, pero confía en mí, vale la pena. Está bien, ya veré en el próximo 21. 21. la Routing programáticamente: Entonces esta es una continuación de ti, hija. Por lo que te permite hacer lo que más de tu hija puede hacer y de qué otra manera podemos usar la vista. Hija. Por lo que esta es una forma en que podemos navegar dedo del pie diferentes componentes. Esa aplicación, correcto. Entonces, ¿qué podemos hacer? Entonces lo primero que podemos hacer es que también podemos hablar con otras quejas de otra manera. Por ejemplo, tenemos dos, derecha, Así que también podemos tener esta dinámica para que eso sea al usarme bind y se puede ver ir. Entonces pero ahora es Instancia, si quieres ir a un componente, necesitamos usar una sintaxis separada. Necesitamos crear un objeto. Y dentro de este objeto, necesitamos decir nombre en el interior del nombre Benito Express para el nombre. Por lo que este nombre se da en las dudas pelean por líquido en la parte de componentes. Entonces por eso este nombre era importante antes por que tipo de queríamos incluir. Por lo que este índice también se utilizará en el script back. ¿ Entiendes? Cuando lo miramos, si guardo esto en, digamos, Logan, funciona igual. Para que puedas volver al registro de la página principal. Funciona igual, ¿verdad? Entonces esta es solo otra forma de usarla. Ahora vamos a buscarlo, un escenario en el que advertimos que pasara un apuntalamiento a este componente. Entonces, por ejemplo, en el inicio de sesión, queremos posible, dice Upton. Entonces vamos a crear la propiedad de Rob. Yo quería los apoyos para datos de birdie, ningún objeto sobre el tipo de problemas en los que queremos recibir su mensaje. Una cosa más que quiero mencionar. En las conferencias anteriores, cuando hablamos de utilería, discutimos que esta rotación generalmente adecuada para la sonda, diciendo requerida bajo su tipo es en general buena práctica, ¿no? Caso tan lejano que hoy no conoces todas estas cosas, entonces los problemas no serían un objeto. Entonces para eso, necesitas descomponerte. Props no es amigo, y en lugar de eso, puedes mencionar caídas bajo marcas de tradición para que puedas ver un mensaje. Por lo que esto declara automáticamente la propiedad del mensaje como una sonda, que el log in comfort está esperando. Entonces es lo mismo que crear nuestro objeto. Yo estoy haciendo todo esto, pero solo si quieres tener mucho más control en la sonda. Al igual que si se requiere. O puedes mencionar así, ¿verdad? Entonces para nosotros, vayamos con la mejor práctica dentro de ellos, esencialmente de, digamos, qué tipo es. Es un tipo de cuerda en. ¿ Se requiere? En realidad no, pero así que digamos falso. Entonces si lo guardo, sé que nuestro objetivo es enviar una sonda o un mensaje al componente de registro, ¿ verdad? Entonces para eso, vamos a crear propiedad de datos. Digamos que es el mensaje Morgan. Este es el mensaje que, que se desea enviar la masa el componente de registro para que el bebé pueda enviarte al componente de registro está usando el enlace externo. Podemos ver después del nombre de nuevo para Tacoma, y luego podemos Podemos tener el núcleo de propiedad menos fondos, por lo que los problemas generalmente se usan para ello apoyos. Entonces en cambio, problemas. Lo que podemos hacer es que podemos dar el nombre de la gota que la conferencia, esperando en su valor es mensaje para iniciar sesión. Ahora mismo, estamos enviando la sonda. Entonces en lugar de talar Northview, lo que haremos es bajo el registro, informar creará hasta pequeño seto cuatro dag dentro de este Vamos a tener el mensaje. Entonces desde una visión amplia, esto a recapitular. Tenemos una fecha de LA rincones bonitos, señora Logan, y dentro está tenemos una cuerda. Voy a mandar una cuerda. Necesitamos tener una propiedad nueva. Corliss Bottoms en lugar de yo soy seis y objeto. Tenemos el nombre del nombre de los problemas que el componente está esperando en Devalue. ¿ Verdad? Entonces si lo guardo y vuelvo, sé si navego para iniciar sesión, podemos ver la contraseña es 12345 Muy bien, así que ese es el mensaje que estoy recibiendo del componente APP. No. ¿ Y si tenemos una situación ahora mismo? Es sólo más este tipo de cultivos. Es difícil enviar cualquiera que soy ya que no se requiere la prop. Digamos que tenemos otro derecho competente. Este componente es hogar. Yo estoy dentro de su componente. Tenemos una grande cual que dice Bienvenido a casa. Ten una sonriente también. Tan solo tíralo ahí dentro. Entonces si digo David ahora, lo que quiero es ese registro tan incidente incompetente. Lo que quiero es que alguien argumenta ese proceso. Esa es una gran parte en quiero que sean navegados a casa. Entonces, ¿cómo podemos hacer eso? Por lo que aquí en el componente Argon, nos tenemos un poco importado hasta ahora. Esto un poco. Tenemos acción de Lincoln que es un poco de forma así que al hacer click, enviar formulario lo que podemos hacer esto. Podemos usar esa propiedad exterior para que podamos usar al ver esta puerta dólar Notre, no arbusto slash home on. Antes de que podamos hacer eso, necesitamos volver a un router encendido. Tenemos que registrar el componente. Mi dicho importar casa de él slash componentes slash home. Creé otro, pero dármelo más componente de casa fuera de casa Onda Ya que podría aceptar apoyos en el futuro, digamos simplemente droop. Entonces en lugar de registro componente Y si lo guardo lo siento si lo guardo y vuelvo, lo que podemos hacer es ir a iniciar sesión y podemos decir un chií musulmán Y mi contraseña es algo . Y si me divido, envíe bienvenido a casa. Por lo que esta es una forma en la que podemos navegar usando el pedido dentro de una bolsa de script. Entonces esto es de acuerdo programáticamente en él. Entonces una forma más lo que podemos hacer es instruir dándole un Realmente estás aquí. Se puede crear un objeto, y podemos navegar usando el nombre del nombre también. Entonces esto es algo así como lo que hicimos con el derecho total. Entonces el nombre es casa, y si lo guardo y vuelvo, y si golpeo Submit. Bienvenido a casa. Está bien. Entonces ahora veamos cómo pasar la fecha. Algo así como en el guión tan similar a haber ayudado en eso fuera de enlace. También podemos ayudar a Adams en. Podemos pasar un dato. Entonces, ¿qué pretendíamos Lewis Inicio playa? Bueno, tengo un problema. Usa el nombre y que se requiere en la cadena de diabetes. Correcto. Así que bienvenido a casa. ¿ Es él? Entonces lo que sea que usen el nombre que dijo el usuario Anderson Iniciar sesión página aquí, aquí en el nombre de usuario. Podemos pasar eso a la página principal sobre debilitar. Muestra eso aquí. Por lo que incidente página principal. Necesitamos también tener nuestra propiedad de datos en su lugar. Eso se pone tener ah, era el nombre y no pudimos ser más, ¿verdad? ¿ Qué? Lo limitamos a la propiedad de nuestros datos mediante el uso del mortal. Muy bien, Así que el fondo que hace que está esperando es usar el nombre y lo mismo con la misma gente que estamos usando. Entonces usándolo y el valor es esta puerta era el nombre. De acuerdo, entonces, 11 cosa a notar aquí es que esto para que este teclado pudiera tener el contexto correcto ya que está dentro de esa función externa. Entonces lo que suelo hacer es tener Ah, maniquí. Tengo una buena variable de maíz x, y la uso para eso. Entonces le presentamos y lo guardo y vuelvo a entrar dentro de Logan Component. Puedo verla y solo puedo usar a mi pastor. Eso es otra cosa. Y así he hecho bienvenida a casa. ¿ Está bien? Entonces así es como lo pasaste un poco más fuerte. Y una cosa más solo para recordar es mientras el pasajero dyinto los componentes se va por ahí. Es necesario especificar los apoyos. El inmueble tiene tropa, ¿verdad? Eso es algo que no debes olvidar. Entonces está bien, eso es todo para esta conferencia. Te veré el próximo 22. 22. Enrutación con el ejemplo: hola y bienvenido de nuevo, Así que vamos a hacer algo interesante. Entonces en la última semana miramos en pudrirse ¿verdad? Entonces, veámoslo desde un punto de vista del ejemplo. Dado que agregar es un concepto más grande, es mucho más difícil de entender. ¿ Cómo podría un ejemplo aquí? Por lo que tenemos este molesto Inalámbrico generador Jason guiones adyacentes en dos puntos com. Cualquier genera algunos datos ficticio que podemos utilizar para un proyecto en nuestro caso. De qué manera corporativa son los datos sobre cómo se creó un nuevo coordinador de archivos, un Jason y por dentro, está fuera basado en todo. Entonces es básicamente son Jascha Cuerpo, que consiste en Job sí consigue objetos. Por lo que cada objeto consiste en algunas malas imágenes como I D. Balance de índice, nombre de edad, género, etcétera. Correcto, Así que vamos a ver cómo podemos usar esto. Entonces si voy a tener vista al aire libre, teníamos este lado total. Es él con ellos. Dejamos la vista exterior como es guardarla en un archivo enrutado o Js. Vamos también algunas otras rutas. Muy bien, entonces lo que hacemos es crear dos componentes más. Una es la gente tu vista y otra es escuchar o ver. Está bien. Por lo que la gente colectiva en persona, singular. Por lo que dentro de esto se puede ver a la gente en el guión. Puedo importar los datos Jason 100 C si eres capaz de conseguir eso. Entonces lo que vamos a hacer se ordena en su lugar. pondrá una revisión sobre grosero, pero como el componente de la gente así podemos quitar estas importaciones en Beacon misma gente de junta. También es importante componente de persona en una ruta. Pero es el componente de la gente tan componente gente estoy a favor de los toros y salida de componente, pero slash persona componente. Muy bien, así que componente gente incidente. Nosotros hemos importado los datos, así que, uh, sólo ten ah, pequeña cubierta de rumbo. Yo lo guardo en. Si vuelvo, Ruethling obtendrá la lista de personas. Entonces ese es el componente de personas que se está renderizando. Entonces vamos a ver si eres capaz de obtener los datos para que yo pueda crear mi propia vida. Segundo, mira en el interior montado. Entonces veamos el contenido de los datos justo en lo que va de este fin de semana se crean, pero esto lo podemos ver creado. Recuerda, es un gancho de ciclo de vida que aprendimos en las conferencias anteriores, en su lugar creado podemos pensar y vender o registrar, y quiero arriba datos de salida. Entonces si lo guardo y voy a consola, estoy obteniendo una matriz. Andre consta de seis objetos. Eso está bien. Muy bien, entonces ahora tenemos los datos de la gente por venir. Está bien, así que ahora tenemos a la gente que más tarde entra. Vamos a crear un div que diga persona. Entonces ahora tenemos a la gente que más tarde entra. Lo que haremos es, uh, crearemos otro componente que diga perfil de persona. Entiendes en un minuto por qué estoy creando estos tres componentes. Entonces por ahora, lo que Lewis componente persona interna, Digamos persona en por persona. Espere tres o cuatro pies. Entonces, ¿qué perdemos? Nosotros escogimos nombre de punto sí. No era tener nombre. Sí, tiene nombre. También se recogió la edad. Hagamos la empresa por correo electrónico. Cierto número de amigos. Muy bien, así que dentro de esto. Entonces digamos que este componente de persona está esperando un problema. Oh, escucha, es un tipo de objeto. ¿ Se requiere? Sí, se requiere para que tuviéramos que apuntalar como persona sabe lo que podemos hacer es ver que es una persona encabezada, no nombrar su edad, su empresa, un correo electrónico. Muy bien, entonces uno queriendo lo que podemos hacer es que podemos crear. Podemos conseguir el doble ya que los amigos cuentan. Entonces para esto lo que podemos hacer es considerar amigos encendidos para la persona que completé. Puedo crear una propiedad de computadora. Ese tipo juega la cuenta de un amigo para mí en puedo ver a Príncipe contar. Podría estar hecho. Esta persona no entrenó stotland. Está bien, así que ahora podemos usar este príncipe propiedad de la computadora se fue agosto. Nunca tener listo el componente de persona en lugar de componente de personas que puedo importar. Escucha, persona, puedo registrar el componente viendo componentes. Escucha. Está bien, Así que sepan lo que podemos hacer esto. Podemos Cómo el componente de la persona en podemos Podemos replicar el componente de la persona mediante antes persona y la gente no estaba efectivamente encendido. Sí, en este parto también puede tener índice. También se pone la llave hacia ella en el siguiente. Por lo que advirtió que los Oscars no nos pondrían encima. Dejémoslo también. Dale el valor de la prob. Escucha, esta persona está bien? Entonces si lo veo, esto debo ver. De acuerdo, entonces obtenemos una propiedad de edición o mejores datos no están definidos. Entonces, ¿qué? Rigondeaux is Continuamos nuestra propia propiedad de datos comenzó a girar camino puede crear una matriz que diga gente que conozco intelecto creado metal recon. ¿ Ves esta puerta? La gente iguala datos de puerta y debería estar bien aquí. Comienza. Escucha. Y la gente , ahora tiene mucho más sentido. Y si lo guardo Oh, conseguimos muchas más cenas. Eso el otro está en la propiedad de tierra oscura. Está bien, entonces estamos consiguiendo otro que diga persona drena Tierra no es una función en ella. Para que este tipo de funciones para que sólo podamos decir prestamos en deberíamos estar bien. Sí, está bien. Si no lo hice fresco, se ve bien. Entonces estas son todas las personas que tenemos. Entonces lo que quiero hacer es que nunca haga clic realmente en una persona. Quiero que estos datos entren en el componente de perfil de persona el. Podemos tener el componente de perfil de persona como página propia. ¿ Verdad? Por lo que queda claro el componente de perfil de persona. Sería muy similar a la persona, por lo que solo puedes copiar base el componente A person, pero también tendrá unas cuantas más sentidas extra. Por ejemplo, es la sección sobre Vamos a añadir la sección de tablero en la parte superior, así que solo hago un poco de genio y volveré enseguida. Entonces, ¿qué? Fue, agregué algunos campos más. Añadí sobre también agregué la lista de amigos. Entonces ese es un perfil de persona. Nada realmente elegante. Entonces, ¿qué es lo que quieres? ¿ Es que sabíamos que la persona está pinchada, verdad? Por lo que también tenemos un botón que dice Tu perfil. Sé lo que va a perder por la persona nombrada tendrá h uno. También es isla a centro para que podamos saber qué persona es y siempre tendrá algún margen encendido para la persona competente y ahora ver perfil. Gran Bretaña, decimos que hago clic. Es un oyente de eventos. Doy click tu perfil. Entonces tenemos un método, y dentro está importado. Lo que queremos saber es esta puerta. Pero orden. No Bush un objeto. Um , también ha tenido persona proporcionada sin notificar. Ya sabes, es fácil olvidarlo. ¿ A quién tienes confianza para salir? Um, así que asegúrate de recordar que qué? Podríamos hacer una cosa en lugar de tener una nueva nota para la persona slash que solo puedes ver publicada para encontrar la derecha para que también podamos quitar de aquí a la persona competente y puedes guardarla dentro de la persona cuando hicimos clic de ti. Perfil. También tiene que darle un nombre nosotros en. Yo nombro a esta persona y queremos pasar y datos es todo. Está esperando un prop que está fuera de tipo objeto. Su nombre es persona, por lo que a la persona de Madame se le otorga agua. Vamos descendientes de nuevo se están poniendo en el contexto y para la persona vamos a mandar bm persona puerta si lo guardo. Entonces, uh, distrito ha estado ¿qué está pasando? Entonces hay este componente de personas dentro del cual estamos entrando a la lista de personas en cada persona dentro del objeto de la gente es ojos teniendo su propio componente solo por el sake de renderizado en este componente mostrando una corta cantidad de datos simplemente como instancia, fuera de toda la lista que tenemos, como, ya sabes, tradiciones de Facebook. Ya sabes, estos podrían ser tus amigos, como, tan similares a eso tenemos algunas sugerencias sobre importante haciendo click en este componente. Estamos navegando por el dedo de la página del perfil de la persona, que tiene muchos más datos. Está bien, así que lo hemos guardado. Y si vuelvo, tenemos la lista también, podemos hacer una cosa en lugar de la lista de personas. De acuerdo, así que estas son las personas que tenemos apenas un poco de nuestro estilo y debilitamos como el perfil en que no estamos recibiendo efectivamente. Entonces veamos qué está pasando dentro. Conserve su perderse flop persona requerida, ¿verdad? Entonces, ¿cuál es la razón? Por lo que en 10 oponerse y componente estamos enviando en persona. De acuerdo, entonces la razón podría ser que no definimos apoyos para ser verdad. Entonces también hay algo que la gente olvida usualmente igual que yo hice en Si vuelves. Y si digo esto, sí, ahora está bien. Entonces aquí tenemos el nombre de la persona sobre su edad. Supongo que su nombre otra vez. Esta empresa. Supongo que Andi abordará también el número de una lista de amigos en nombres de diferencia. Entonces hay un perfil de persona para que un pequeño ejemplo y salida. Entonces una cosa que quiero tocar es que dentro del componente de gente, si ves en lugar de escribir esta cancha, el componente persona anotó como la persona de clase. ¿ Eso es correcto? Por lo que podría tener sólo discordia corporativa. Podría haberla devuelto también en cosas como tener dos componentes separados. Yo también podría haber regresado aquí y podría haber agregado el antes para este. Pero la razón por la que no lo hice es que ya sabes, este componente de persona está ahí, ¿ verdad? Por lo que esto podría ser utilizado en el futuro. En más páginas. O sea, no en nuestro proyecto, pero por si acaso estás dispuesto. Ah, sitio web más grande. Correcto. Entonces si estás creando un sitio web de redes sociales, hay varias páginas donde quieres mostrar algo así como el pequeño minuto de una persona para proporcionar. Entonces para eso, si tengo una radio componente y si espera cierto tipo de datos, puedo usarlo en cualquier lugar donde se requiera en una capacidad lo arriba y será lo mismo, ¿no? Entonces esa es la razón por la que creé un componente separado para persona en si guardo esto y todo debería ser tan grande como él. Entonces eso es lo que es un ejemplo en hija. Entonces sé que hija es un tema complejo, Así que por eso también pensé que eran ejemplos mucho más prácticos. Sería mucho más fácil aprender. Por lo que ahora tenemos a las personas competentes. Persona competente, ¿ lista? Entonces y si quiero mandar a alguien un link de una sola persona. Entonces digamos que quiero mandar a alguien repartir disfraces y casa encendida si te guardo perfil. Ten the have the page for Simpson house, Así que quiero compartir esto a un amigo. Entonces si copié esto y si lo abro de incógnito y lo basé, no obtengo nada. Y si voy a la consola, es una falta requerida persona traída. Entonces la razón es que estamos obteniendo los datos del componente de personas, que se está pasando al componente de persona en el que a su vez los pasa al componente de perfil de persona . Entonces, ¿cómo envío a alguien un enlace de una persona popular? Entonces eso es lo que estaremos buscando en la próxima conferencia como Eso es medicina y ver la siguiente . 23. 23. Enrutación dinámica con un ejemplo: bien en esta conferencia para buscar cómo crear el espacio recurre para personas específicas. ¿ Verdad? Por lo que el objetivo principal de esta conferencia es crear un Eres que se puede compartir en cuando estás vamos a hacer click, obtendré los datos de la casa de los Simpson. Vámonos. Entonces lo primero que tenemos que hacer para eso es en lugar de certificarse por la parte de persona que podemos latir el corazón y aquí estamos esperando otro perímetro, ¿ verdad? Entonces los paramilitares personan i d Entonces esto es lo que estamos esperando. Y cuando la personalidad es dinámica, es cuando le pones el colon delante. Entonces si vas a tener alguna parte dinámica en la u. R. L, vas a tener un colon delante, así que slash persona irá por la persona. Componente profundo y personalidad de Colin irá por la persona yo d. Muy bien, Así que si pudiera decir esto encendido y mientras en lugar de personas o dentro del componente de persona, lo que podemos hacer es por hacer click en dentro del componente de persona a la vista perfil. Ya no necesitamos el nombre y los perímetros. No vamos a enviarlos en su lugar lo que vamos a hacer es también podemos eliminar esta variable de contexto en su lugar. Nos vamos a navegar normalmente Te puede guardar perfil. Lo siento. Escucha, podemos ver persona slash Y además de este trabajo, también puedes enviarnos esta persona de puerta, no yo d Así que si vas a los datos Jason, por cada persona objeto, nosotros tener algo llamado su yo d o su subrayado 80 idea de subrayado. Por lo que se enviará esto. Andi puede guardarlo dentro de un componente de perfil de persona. Lo que podemos hacer es que ya no requiere una adecuada por lo que podemos quitar la sección de apoyos aquí en Serik habitó la propiedad de datos del componente. Uh, esto tendría una persona yo d Andi, esta idea se puede recuperar a través de este total permitido batallas de puntos persona i d. Así que los perímetros son los perímetros que vamos a enviar. En nuestro caso, es ah, personalidad en el router. Por lo que dentro de la persona competentemente en persona de ventas slash en lo que sea que estos días de país, esto automáticamente se convierte en la polis 90. Por lo que aquí podemos decir persona 80. Por lo que para la mayor parte, lo que podemos hacer es empezar comenter doll out. Entonces sólo para que no tengamos otros. También podemos ver comentario y podemos decir, montado en el registro de la consola de juegos. Se puede ir hacer, aunque tipo de clic en algo. Estoy consiguiendo a la persona que necesito luz. Y si puedes ver en la parte de los Ural, estamos consiguiendo lo específico que eres y para esa persona en particular. Entonces si voy a compartir esta tu opinión con alguien, voy a conseguir los mismos datos, ¿ verdad? Por lo que no va a tirar muchos editor. No va a decir eso. Quizás adquirido porque no hay uso de utilería. Entonces ahora es nuestro deber averiguar a qué persona pertenece esa sociedad. Superávit de entrada de puntera, datos. Entonces lo que podemos hacer es que podemos necesitar encontrar el índice de las personas que tiene su i d. Y entonces podemos terminar a la persona con ese índice, ¿ verdad? Por lo que iremos al perfil de persona. En realidad, eso no es demasiado complejo. Entonces lo que podemos hacer es dentro montado, uh, también podemos tener este índice. También podría tener a la persona porque eso es lo que se requiere. Conozco en cambio las propiedades terminadas. Lo que podemos hacer esto te pones simple está en el infierno. Datos hechos. Por lo que aquí también necesitamos importar el índice de datos identificados. De acuerdo, así que ahora ser para encontrar el índice para que así podamos hacerlo es podemos decir por cada día más, papi, y dentro de eso tenemos cada objeto tiene un elemento sobre el ADN. Podemos escribir en la gripe aquí que digan su objeto o valores, y en su lugar podemos pasar elemento dork en índice fuera de esta puerta persona yo d igual manera, según Zito, entonces podemos tener la corriente b m explicable sobre William George Persona I d valores iguales puerta puerta. Entonces, ¿qué pasa es que el día muere otro derecho? Por lo que dentro para decir tenemos seis objetos. Por lo que para cada objeto, tenemos valor clave de partícula. Beth. Entonces lo que estoy haciendo es un comedor destinado para cada objeto. Estoy extrayendo los valores del objeto de las claves. Entonces me voy. Yo sólo voy a conseguir estos valores en su lugar. Las claves sólo este valores. Por lo que para los valores estoy buscando 90 el cual fue enviado. Entonces si el valor consiste en la personalidad, entonces ese es el índice de la persona. Entonces ahora lo que podemos hacer es cuando tengamos el índice, esto debería ser el siguiente, ¿ verdad? Entonces Cuando tengamos el índice, el Robert completado, harán automáticamente esta persona La propiedad será operada por día volcado y el índice. Entonces si poco común todo esto y si guardo, invito a correr, todo debería funcionar Bien. Excepto que es editor se dice el nombre fuera indefinido Focus. El motivo por el que este viene es por amigos Cuenta manera correcta necesidad de tener nuestra propiedad informática que dicen se ha ido Y debería haber hecho esta puerta. Escucha, tu amigo sobresaliente Ahora nos vamos a refrescar. Yo sólo voy a vomitar Eso dice nombre de indefinido. Entonces, ¿por qué estamos consiguiendo eso? Entonces la razón por la que podrían estar consiguiendo eso es porque la plantilla se está cargando entonces que se está recuperando, ¿ verdad? Tan momento instantáneo que puedo ver creado en ojalá no debería conseguir eso nunca. Sí. Entonces, ¿qué está pasando? Triste. Si estás usando montado, se ejecutará después de que se haya montado la plantilla. ¿ Verdad? Entonces donde se ha montado la plantilla, busca ah propiedad persona cornisa en persona Y hasta este punto de tiempo durante el renderizado no es así. Ninguno de nombre va a hacer otro. Pero si dices Creador creado generalmente se hace antes de las montañas. Por lo que al correr creado antes de que las montañas estuvieran obteniendo los datos, lo estamos enviando a persona sobre mostrarlo, por lo que lleva a conocer a los demás. Por lo que ahora tenemos este enlace encendido otra vez. ¡ Hola! Apreciado. Hacer a cualquiera que quieran. Por lo general presentaría Toronto Sitio web de hosting gratis como bahías de bomberos o levantarme y podríamos dar forma al enlace en. Podemos volver atrás. Podemos hacer eso por 80%. Genial, ¿verdad? Entonces así es como se crea el enrutamiento dinámico en enorme es así que ahora se puede tener dinámico usted Wells. Entonces eso es todo para enrutar. Eso es todo para esta conferencia que veré en la siguiente. 24. 24. encontrar trabajos y conclusión: Está bien. Ahora, en los minutos finales de enorme es ahora busquemos lugares donde puedas encontrar empleos o trabajar por unos días. Pero así el primer lugar que tal vez quieras lucir como Ángel Lord Coe. Por lo que el antiguo Lord Coe es un sitio web que se centra principalmente en las startups. Entonces si quieres trabajar y ponerte en marcha, Ángel, Lord Coe podría ser tu mejor cama. Entonces antes de que vayas a solicitar empleos, te sugiero encarecidamente que construyas ese reporte para ti fuera de proyectos que tu libro no haga o exhiba tu cartera al empleador para que él o ella pueda obtener la confianza de que tienes un sonido conocimientos a la vista. Js Right Entonces puedes ir a Angel Lord Coe. Por lo que estas son todas las empresas en este momento que están buscando la belleza de Alepo. Por lo que si buscas startups para trabajar en Angel o CO podría ser tu mejor apuesta. Pero si quieres ir por algo como freelance, entonces puedes ir a trabajar arriba. Puedes crear un profesor up book como ah, freelancer. Entonces puedes navegar por los empleos que puedes en contra puedes pujar por estos trabajos y si te contratan, por lo que tener una cartera normalmente ayuda en cuanto al trabajo, pero también ayuda en cuanto a freelance, porque si alguien pregunta tú, como ¿qué tipo de experiencia tienes en años futuros? Por lo que definitivamente puedes darles el enlace de tu página web para que puedan conocer Los detalles son pocos y sobre los detalles del proyecto que caminaste en el escenario y cuánto más conferencia hacia ti Así que hasta el trabajo es que es un lugar fantástico con Brooke para proyectos de financiamiento. También puedes buscar proyectos de freelancing. Miradas de país punto com eso. El siguiente lugar que puedes buscar es en el desbordamiento de la pila. Puedes encontrar los empleos y oferta de pila también, por lo que pila desbordamiento dot com slash trabajos, y puedes encontrar los trabajos de Futuros donde puedes encontrar cualquier tipo de trabajos que pudieras estar buscando. Entonces lo que pasa con el desbordamiento de ángel y pila o todos estos trabajos es que también puedes encontrar más trabajos. Entonces si encuentras más empleos, puedes trabajar en la comodidad de tu hogar, por lo que un lugar más para buscar a Islington, Lincoln es casi el lugar más obvio para buscar. Entonces si tienes un buen perfil en LinkedIn, así puedes empezar por sacar contenido para que puedas construir credibilidad. O cuando los reclutadores van a tu perfil para entender que tienes algún conocimiento sólido sobre el tema en, pueden ir fácilmente por ti en uno lo haría. El último lugar que podrías buscar es la vista empleos dot com. Entonces este tipo de trabajos oficiales te tienen Js. Por lo que la mayoría de los trabajos aquí listados serían de las demás plataformas que vimos, como Angel List freelance up book Stack desbordamiento. Pero es bueno tenerlos todos en un solo lugar. Podría haber también empresas como las que se enfocan específicamente en ver empleos o usuario dot com. Entonces esto sería, supongo que vas a lugar a encontrar, ya sabes, si solo trabajas. Por lo que estos son algunos de los lugares que puedes buscar por conseguir algo de trabajo en Beauty s. así que ojalá esto te resulte útil. Entonces eso es todo para este. Adiós adiós. Está bien. Enhorabuena por hacer que sea la duración del curso. Entonces ahora sabes los fundamentos de ti Jay está en tu radio. Llaman a cualquier proyecto el primer presupuesto que recomiendo. Construir es tu propia página web. Puedes construir tu propia página web usando ti Js Me puedes avisar si tienes alguna duda sobre el curso me puedes escribir en CHS vacatur e incluso en gmail dot com, El correo no es grito. Siempre se puede acudir a la documentación oficial de la página web. Si no entendiste nada, ya me siento libre de contactarme. En caso de tener alguna duda respecto al curso. Si tienes alguna pregunta con respecto a la belleza s o si estás enfrentando problemas mientras obtienes algún proyecto, te voy a ayudar. Eso es todo para este. Muchas gracias por ver Bye bye.