Curso intensivo sobre Vue.js (2.0)

1. Introducción: todo el mundo. Y bienvenido a la vista Js curso crash. Soy Stephen, desarrollador web freelance. Y más importante para ti, soy profesora. Estoy tan emocionado de estar compartiendo este fantástico marco de JavaScript contigo ahora un poco en pocos Js vista es lo que se factura como un marco reactivo en su mismo núcleo. Eso significa una cosa cuando eres JavaScript, los datos cambian todo lo demás que se basa en que los datos también cambian, por ejemplo, otros datos JavaScript, o HTML, que se basa en los datos JavaScript. Pronto comprenderás por qué esto es tan, tan poderoso en breve. Y por supuesto, ahora permítanme darles un ejemplo del proyecto del curso. Se trata de una lámpara que ha sido modelada completamente en vistas. Sé que no es demasiado mirar, pero realmente nos estamos centrando en la funcionalidad y JavaScript, particularmente en este curso. Por lo que el HTML y el CSS no son tan importantes en este caso, por lo que se puede ver que la lámpara se enciende y apaga waken. Cambia el color de la luz con sólo escribir un color en una forma de caja de entrada. Condenarlo también, junto con un valor porcentual junto al deslizador dim. Ya que siento que es extremadamente importante no sólo aprender conceptos sino implementarlos bien a medida que los aprendes. Eso es exactamente lo que estaremos haciendo en este curso, estará construyendo este modelo de lámpara conforme vamos al final del curso, tendrás el conjunto de herramientas con la finalidad de modelar tu propio objeto del mundo real. Y eso es lo que el curso proyecta esto vas a estar eligiendo un objeto con estado, por ejemplo, un semáforo, que tiene tres estados. Tiene un estado verde Biello estado y deteniendo u otro, que tiene una tonelada de estados diferentes. Ah, un par de ejemplos lo serían. Tiene un maestro dentro y fuera del estado. Tiene una luz, que tiene su propia independiente en un estado apagado. Tiene un valor de temperatura o un estado de temperatura. Podría llamarlo que se puede controlar con botones o un perilla. Yo quiero que seas realmente creativo con esto, porque sé que se puede llegar a algo realmente increíble e interesante. lo que para este curso, sería beneficioso tener una comprensión básica de HTML CSS y lo más importante, JavaScript as view es un framework JavaScript. No dejes que eso te asuste, sin embargo. He hecho cada concepto lo más accesible posible. Dicho eso, estoy tan ansioso por ayudarte a captar los fundamentos de ti, mi marco JavaScript favorito. Esperando verte en el curso. 2. Instalación y la instancia de vue: bienvenidos a todos a la primera conferencia riel en la vista Curso de manualidades Js Estoy muy emocionado ponerme en marcha. Por lo que sólo vamos a saltar a la derecha con la instancia de vista. Esto es algo que cada aplicación de vista individual necesita. Tiene que estar ahí dentro. lo que la instancia misma se lleva a cabo en una variable regular de JavaScript antigua. No hay nada de fantasía al respecto. Um, app es la forma general en que la gente suele nombrar su instancia de vista, no tienes que hacerlo, pero es práctica estándar. Esta nueva sintaxis de vista aquí creará una nueva instancia de usted para nosotros para que realmente podamos usar el framework. Esto no es sintaxis específica de vista. Por si nunca lo habías visto antes. Esto es, creo que fue introducido en JavaScript es seis a. solo un número de versión de javascript. Entonces si nunca has visto esto antes, solo quiero que sepas que no es vista específica. Estaré señalando la sintaxis que es vista específica a lo largo del curso solo para que no te confundas. Lo único que necesita cada instancia de vista es la propiedad L. Um, esto en realidad apunta a la vista del elemento HTML en el que todo nuestro código de vista lateral HTML estará envuelto Normalmente va a ser un div. Entonces bueno, echemos un vistazo a eso. El HTML Esto es HTML muy básico para ver Si vas a notar la i d igual app en el diff Así que todo tiene que ir dentro de este rígido todo de nuestro código de vista. Por lo que corresponde dentosa l propiedad de nuestra vista. Instancia, si ves aquí te he mostrado l es la app de signo de número Eso es un selector CSS. Por lo que en realidad podrías hacer que tu sí tuviera una clase de app y hacer periodo AP como la L y el JavaScript. Pero de nuevo, esta es una práctica estándar. Esto es lo que se ve en la documentación de la vista. Entonces una vez que realmente los hayas vinculado de esta manera, el JavaScript en el HTML, debo decir que puedes empezar a escribir ver código específico dentro de tu HTML, al que llegaremos en la próxima conferencia. En esta conferencia, también quise hablar de código pen, la plataforma que voy a estar usando para este curso. Entonces es un sitio fantástico para crear demos rápidas, compartir tu código y, ah, ah, la razón por la que lo estoy usando. Es genial para enseñar. Por lo que la vista en realidad no está en la pluma de código automáticamente. Tenemos que tomarnos un momento para incluirlo. Y sólo quiero mencionar esa vista. ¿ No son algunas vistas mágicas de magia? En realidad, sólo un viejo archivo JavaScript regular. No quiero subestimar lo complejo que es y las personas realmente inteligentes que se han ido a crearlo. Pero ten en cuenta que es solo JavaScript que alguien podría ver bien. Si bien no a nadie, tienes que ser realmente inteligente para hacerlo. Pero es Es solo un archivo Js regular. Eso es lo que quiero atravesar. Podemos incluirlo como cualquier otro archivo JavaScript mediante el uso de un script etiquetado con atributos S R C. Entonces verás que aquí solo script, y lo he sacado de una red de entrega de contenido. También hay otra forma, segunda forma de pluma de código forma específica de incluir recursos JavaScript externos. Hace básicamente lo mismo, pero mantiene nuestro código un poco más organizado, así que ahora voy a saltar a la pluma de código. Así es como se ve Code pen, y vamos a incluir view, así que realmente voy a la primera forma en que en realidad solo puedes pegar en este, uh, esta etiqueta de script que tengo aquí y podemos ir a la consola y teclear vista y devolverá algo de lo que no tienes que preocuparte Lo que esto en realidad es Solo el hecho que devolvió Algo significa que la vista se ha incluido correctamente. Por ejemplo, si tomamos este guión, sacamos y luego escribimos en vista, vamos a obtener una vista no está definida. Por lo que si alguna vez quieres comprobar si el uso se incluye correctamente, siempre puedes simplemente ir a tu tipo de consola a la vista de las otras formas. Si vas a este poco causado al lado del script Java la cosa Js en la pluma de código, se abrirá esta ventana y podrás ver búsqueda, CD y Js. Entonces si solo escribimos a la vista, saldrá justo aquí. Haga click en ese Guardar Cerrar y bam! Se incluye Vista de retipado. Obtenemos lo mismo. Entonces de eso se trata para esta conferencia estoy deseando ver en la siguiente donde vemos cómo y por qué la vista es tan mágica 3. La magia del vue (datos): en esta conferencia, vamos a echar un vistazo rápido a por qué la vista es tan poderosa y es magia. Vamos a llegar a ella. Una de las razones es vistas propiedad de datos. De eso vamos a estar hablando en esta conferencia. Se puede ver que lo tengo resaltado en rojo. Aquí otra vez. Es solo una propiedad antigua regular en la instancia de vista, Así que puedes ver que hay una coma después de la L para asegurarse de que esa vista sepa que estas dos son entidades separadas. La propiedad de datos de vista toma un objeto como un valor que se puede ver en los dos puntos de datos y luego las llaves, que denotan un objeto JavaScript. Posee pares de valor de propiedad, que actúan como especie de las variables de ti. Se puede ver la propiedad de estos pares de valor de propiedad es el nombre de la variable de cotización unquote . En este caso, en la lectura resaltada, su mensaje es el nombre de la propiedad, y el valor es lo que desea que se mantenga dentro. En este caso, es Hello world, una cuerda que dice hola mundo. Entonces gracias a ver estos aires mucho, mucho más potentes que las variables regulares de JavaScript, bien, estábien, y todo tiene que ver con la actualización de HTML y la reactividad de datos, que hablaré un poco en un segundo. Una puja, ¿Hmm? Realmente nunca había sido tan fácil porque tienes el mismo javascript que la última diapositiva de esta diapositiva. Y aquí está el HTML que en realidad nos permite mostrar el valor de la propiedad de mensaje. En este caso, el valor de eso es hola mundo, ¿ verdad? Coinciden con las dos llaves llaves, nuestra sintaxis específica de nuestra vista. Está bien, esto es algo que la vista está buscando dentro de nuestro activo. Está buscando estas llaves para decir, OK, OK, el programa está haciendo referencia a una propiedad que A. Debería tomar eso y convertirlo en lo que sea el valor que tenga en nuestro caso otra vez, es hola mundo. Entonces aquí está la sintaxis, la sintaxis HTML para incluir los datos de vista dentro de nuestro HTML. Vamos a tomar el nombre de nuestra propiedad de datos y ponerlo dentro a llaves. Así que vamos a pasar a la pluma de código y probar esto. Voy a volver a poner una propiedad de datos. Toma un objeto como valor. Vamos a darle a ese objeto una propiedad está bien, mensaje y vamos a poner en Hola mundo. Vale la pena señalar. Ya he incluido vista en este bolígrafo de código. Se puede ver aquí mismo. Yo lo he incluido. Y es por eso que vistas trabajando para nosotros, podemos encabezar al HTML Vamos a hacer las dos llaves y vamos a mensajes apretados automáticamente vistas van a cuidar de ello por nosotros y mostrar hola mundo en el HTML. Como se puede ver ahí ahora, reactividad de los datos es lo que es tan emocionante de esto. Entonces si bajamos a nuestro cónsul debilitar tipo app dot message y eso en realidad va a mostrar lo que nuestra instancia de vista, que se llama APP, ha mantenido como propiedad de mensaje en su propiedad de datos, I No, soy diciendo mucho la propiedad. Esperemos que estés siguiendo ahora. Aquí es donde entra la verdadera magia. Si escribimos app dot mensaje igual y lo cambiamos para igualar a otra cosa. Digamos mundo Hola, Sólo invertirlo muy original. Ya lo sé, y entramos en eso de inmediato. El html cambia previo a los marcos reactivos como la vista. Tendríamos que escribir código extra para poder seleccionar el elemento html y actualizarlo con un nuevo valor. Pero la vista se encarga de eso para nosotros detrás de las escenas, una manera realmente, realmente elegante, podemos cambiarlo por lo que queramos. Podríamos cambiarlo por esa cosa rara a la que podríamos cambiarlo. Ya sabes, un número par. Y se mostrará, pesar de que ese es un tipo de datos diferente en JavaScript. Pocos se encarga de todo eso por nosotros. Entonces ojalá eso te muestre un poco sobre por qué la vista es tan, tan increíble y poderosa. Y vamos a estar metiendo en por qué es aún más poderoso en la próxima conferencia. O hablamos de algo llamado directivas de vista con ganas de verte entonces. 4. Direcciones, v-if y v-bind: Bienvenido de nuevo en esta conferencia, vamos a estar hablando de directivas de vista y V Bind, un ejemplo de una directiva de vista. ¿ En qué consiste exactamente una directiva de vista? Es poca sintaxis específica, no javascript vainilla, solo algo que saber. Van a donde van los atributos html, y ejemplos comunes de atributos HTML Air the A treff atributos en etiquetas de enlace o los atributos SRC en etiquetas de imagen. Pocas directivas siempre empiezan con V Dash como prefijo, y se evalúa el valor de una directiva ya que JavaScript todos entran en esto un poco más una vez que podamos ver algún código. Un ejemplo sencillo de una directiva de vista es V. Si miras la unidad un script en la parte inferior izquierda de la pantalla, no verás nada realmente nuevo para nosotros. Se trata de una instancia de vista con atributos de Anel y el objeto de datos. No obstante, esta vez tenemos una propiedad que muestra en nuestro objeto de datos Eso se establece en true el valor booleano . Es cierto en Javascript, eso no es una cadena. Es sólo cierto. Ahora este HTML, podríamos ver algo un poco nuevo, y es ah, en la segunda línea, se puede ver que tenemos RV dash. Si se muestra y al segundo punto en esta vista de diapositivas evaluando valores de directivas JavaScript View va a buscar mostrar dentro de su instancia. Diga bien, ¿dónde se muestra? Va a encontrar la propiedad que muestra en nuestro objeto de datos y decir ¿Qué evalúa demasiado bien, mostrándonos configurado para simplemente el valor booleano. Cierto. Entonces por supuesto, se va a evaluar a Troop, y lo que VF realmente hace es o va a mostrar u ocultar el div al que está apegado . Déjame mostrarte eso encima en la pluma de código. Entonces aquí está Ladrón. Si ejemplo puedes ver. Tengo exactamente el mismo código que teníamos en la diapositiva. Se pueden ver datos que muestran verdaderos. Entonces pasemos a la consola y tecleemos app dot mostrando y veamos qué evalúa a ella evalúa como verdadero. Ahora si tomamos app dot mostrando y lo dijimos igual a falso. Si miras la parte superior aquí, asegúrate de mirar aquí arriba con el Ahora que me ves, vamos a presionar enter y se ha ido, y eso es sin una página. Refresca vistas solo haciendo eso detrás de bambalinas. Entonces si actuamos mostrando set a true, hará que vuelva a aparecer. Es un ejemplo muy, muy sencillo de una directiva de vista. Pasemos a ver argumentos de directiva y desacreditar pocas directivas pueden tomar argumentos agregando dos puntos después de la directiva. Nombre y V Bind es uno de estos atributos. Lo que has estado hace es que nos permite enlazar dinámicamente datos dedo del pie un viejo atributos HTML regulares . Por ejemplo, un enlace etiqueta atributos de un viaje. Si le echan un vistazo a este JavaScript que tengo aquí, no es nada realmente nuevo. Lo único que ha cambiado es que en nuestro objeto de datos, tenemos una propiedad de su L con el valor del hipervínculo a google dot com. Yo html. No obstante, veremos algo que es nuevo. Si miras la segunda línea, podemos ver que tenemos una etiqueta A con una directiva V Bind que toma una discusión de un viaje . Por lo que v unen Colón y luego el argumento. En este caso es un treff, y se puede ver el valor de eso se establece para ti, Earl. Nuevamente, vas a mirar a través de su instancia y decir, OK, busco algo llamado U. R L encuentra que en el objeto de datos y ve su valor se establece en google dot com para que vuelva a el HTML y dice, ¿Qué soy V vinculando esto a Cuál es el argumento de mi directiva V Bind? Y es un viaje. Entonces se va a establecer que un tags un treff para ser google dot com. Y esto es realmente poderoso porque a medida que avanza tu aplicación, en realidad podemos cambiar alrededor de eso un tráfico huye si así lo elegimos. Tengo pluma de código abierta aquí con el mismo código exacto otra vez, y puedes ver que estás todo listo para google dot com. Solo confirmemos que en la aplicación de consola dot Earl y es google dot com. Veamos qué pasa cuando lo ponemos a otra cosa, digamos bing dot com. Entonces lo hemos dicho a ser dot com otra vez. No hemos refrescado la página. Si hacemos click en el enlace, nos va a enviar a bing dot com. Ahora eso es realmente, realmente poderoso otra vez. Si volvemos a configurar la URL de la app a google dot com, tienes que escribir ese https, claro, porque de lo contrario Theochties no lo cargarán correctamente. Se va a ir a Google y eso es tan, tan poderoso. Podría hacerlo con la propiedad de tesauro de una imagen y cargar en una imagen diferente basada en la preferencia de un usuario o incluso en el perfil de un usuario. Ahora eso es realmente, realmente poderoso, y estoy feliz de habértelo mostrado. Acompáñame en la próxima conferencia, donde vamos a hablar de algo llamado List render CNN. 5. Renderización y v-for la lista: Bienvenidos de nuevo en esta conferencia, vamos a estar hablando de la representación de listas y la directiva V cuatro. Otra directiva a la vista. Yo solo quería darle un refresco rápido en JavaScript un aumento en caso de que hayan escapado totalmente de tu mente o tu no los has usado para monitorizar o lo que sea. Se va a levantar una colección de datos que el Reagan tiene cualquier cosa número, cadenas, objetos, incluso otras matrices. Y podría ser una mezcla de cualquiera de los que normalmente se supone para contener datos que posteriormente se iterarán , por ejemplo, usando un bucle for. Todos han visto ese cuatro. I igual cero es menor que un rayo de punto longitud I plus plus. Y luego puedes mirar todos y cada uno de los elementos de esa matriz. Y esto es sólo un ejemplo de un montón de matrices. Tenemos nuestra matriz de sonidos. Nuestros números son una y, uh, una matriz de valores mixtos. Ahora, un aumento a la vista. Tener un re presente es realmente un simple como incluirlo como el valor de una propiedad dentro nuestro objeto de datos. Para que puedas volver a mirar el JavaScript aquí. Nada realmente nuevo, excepto que tenemos nuestros sonidos, propiedad y su valor establecido en una derecha, y en realidad es esa carrera de vista simple igual a esa Suficientemente fácil, ¿ verdad? Por lo que la representación de lista y la directiva V cuatro. Aquí es donde las listas se ponen realmente, realmente interesantes y súper poderosas a la vista. Usando la directiva V four, podemos fácilmente recorrer una matriz, y también funciona en objetos que no iban a ver eso. Pero solo tienes que saber que también funciona en objetos y podemos renderizar html para cada pieza de datos . Aquí está el JavaScript. Eso fue en la última diapositiva. Y aquí está el HTML. Ahora, esto podría parecer un poco abrumador confuso, así que vamos a ir un poco más en profundidad en él en la siguiente diapositiva. Este es el mismo JavaScript en HTML que tenía en la diapositiva anterior. Y echémosle un vistazo. Entonces tenemos nuestra directiva denotada por el guión V Dash D para el nombre de la Array en el objeto de datos va a ser después de eso en palabra clave, y esta es una variable temporal, o alias, que contiene el elemento de matriz actual. Es importante tener en cuenta que esta no necesita ser la versión singular de nuestro nombre de matriz esto es solo convención. Si alguna vez has trabajado en Python, esto te resultará muy, muy familiar si no lo has hecho. No obstante, esto en sintaxis es una especie de vista específica. Es una especie de en JavaScript en este momento. De todos modos, no voy a entrar en ello. Pero si lo miras, sí tiene sentido. Va a decir que va a renderizar un div para cada sonido que esté en la matriz de sonidos. Entonces va a renderizar cuatro en nuestro caso con boom bap clap y ca bam y se puede ver aquí abajo tenemos las llaves, las dos llaves que nos permiten escribir, ver código dentro de nuestro HTML. Vamos a pasar a la pluma de código y vamos a echarle un vistazo en acción. Tengo el mismo javascript que teníamos en las diapositivas, y tengo una plantilla HTML vacía y realmente vamos a escribir nuestra directiva antes. Entonces V cuatro equivale a sonido en sonidos, y luego vamos a hacer el sonido de los dos tirantes rizados. Y si miras el HTML, en realidad va a renderizar cada elemento de matriz que teníamos dentro del HTML. Y si en realidad abrimos a nuestro inspector y le echamos un vistazo. Se puede ver que cada uno de estos es un def boom individual BAP aplaude y ca bam! Y puedes entender por qué esto podría ser tan extremadamente poderoso en muchas situaciones. Ah, ejemplo muy clásico de estos frameworks reactivos es crear una lista de cosas que hacer para que puedas tener todo esto para hacer datos almacenados en tu javascript. Y luego puede renderizar esto usando solo esto aquí, solo tres líneas en lugar de tener que acceder a cada una individualmente o bucear sobre los datos dentro del JavaScript para renderizar, uh, cosas al dom. De todos modos, es muy, muy poderoso. No es algo que vamos a estar viendo en, uh, crear nuestra lámpara. Yo sólo quería presentarlo muy rápido porque es un concepto poderoso del que realmente vale la pena conocer. Y podrías usar totalmente en tu propio proyecto también. Todo bien para ti en la próxima conferencia 6. HTML y CSS para nuestra lámpara: Bienvenidos de nuevo, todos. Estoy tan emocionado por esto, Lecter, porque finalmente vamos a empezar a construir nuestro proyecto de muestra. Nuestra lámpara. Ahora, esta conferencia va a ser completamente HTML y CSS. Sin javascript, sin vista. Esto significa que si no te importa el CSS o no te preocupa la estructura del HTML, puedes saltarlo. Va a ser bastante sencillo. Entonces si ya estás familiarizado con estos conceptos, no es gran cosa. Ya verás lo que he hecho en próximas conferencias. Y sí, eso es todo. Ahora, te animo encarecidamente a dirigirte a Code Penda, Ohio, y crear a cuenta y código junto conmigo. Voy a mencionar esto en, ah, muchas conferencias para asegurarme de que estás codificando porque realmente encuentro que esa es la mejor manera para que los estudiantes aprendan a codificar junto con lo que estoy haciendo. Y luego incluso después de que los electores por meterse con los conceptos que has aprendido tipo de solidificarlos en tu cerebro. También voy a incluir un enlace a una colección de bolígrafos de código en el curso en algún lugar que contenga el código fuente para cada conferencia, solo para que pueda revisarlo. Por favor no entres y copie Paste, esto aunque realmente, realmente siento fuertemente que es importante codificar junto con lo que estoy haciendo. Muy bien, vamos a llegar a ella. Entonces vamos a dirigirnos a nuestro HTML y crear un div con una clase de lámpara. Ahora vamos a ir al C S s y seleccionar esa lámpara Div y darle una posición de absoluta . Vamos a darle un top de 50 pixeles y un izquierdo de 50 pixeles. No me voy a preocupar demasiado por el diseño responsive para esto, ya que es solo una demo de nuevo fueron realmente mawr enfocados en la funcionalidad más que en cómo se ve y lo bonito que es. Ahora voy a crear un div interior de lámpara con una clase de sombra, y vamos a seleccionar esa clase de sombra y darle una posición de absoluta. Entonces como esto es un niño de la lámpara, def, se va a posicionar de acuerdo a la tive de la lámpara, no todo el documento como la lámpara, Davis. Entonces vamos a darle a este oops lo siento con cada consigue un olor de 70 pixeles si puedo escribir y una altura de 50 pixeles y un color de fondo de galleta. Yo no lo hice. Eso lo busqué en Google. No me di cuenta de que era al color CSS antes de que realmente hiciera este curso. Está bien. Ahora vamos a crear un basado si un div con una clase de base, esto va a estar fuera de la clase de sombra. Va a ser un hermano, debería decir de la clase de sombra. Entonces vamos a seleccionar son clase basada o que se basan. Si debo decir en el CSS, también vamos a darle a esto una posición de absolutos. Vamos a darle un ancho de 10 píxeles. Vamos a darle una altura de 70 píxeles. No demasiado ancha, muy delgada y larga izquierda de 30 píxeles y una parte superior de 50 píxeles. No solo estoy tirando de estos del aire fino. Ya he hecho esto sólo para que podamos acelerar las cosas a lo largo va a darle un color marrón apagado . Ahora, ¿qué está pasando aquí? Algo malo. Oh, he puesto esto fuera de la punta de la lámpara. Esperemos que hayas cogido eso. Entonces lo vamos a poner un palo ahí dentro, y ahora parece una lámpara. Ya puedes ver en la vista previa todo ahora mismo, vamos a crear una clase ligera, en realidad, dentro de la sombra, una luz, desafiar, seguir diciendo como clase y que vamos a poner justo debajo aquí por el bien de mantener organizado nuestro CSS. Entonces eso va a vivir dentro de nuestra sombra, Diz. Y su posición va a ser absoluta. que de nuevo significa que se va a posicionar de acuerdo a su padre, que es la sombra Div. Ahora le vamos a dar un ancho del 100% no de píxeles por ciento y una altura del 100%. Y eso lo va a hacer exactamente los mismos tamaños son sombra. Entonces si cambiamos, nuestras son dentro de las dimensiones de altura aquí arriba, el mundo ancho y altura se adaptan a eso. Y ahora le vamos a dar un color de fondo de ti, y eso realmente lo va a iluminar. Y esas van a ser nuestras lámparas en estado, que en las próximas conferencias iban a manipular con JavaScript para que al hacer clic en él ,se pueda encender y apagar. , Entonces de eso se trata para el HTML y CSS Hope que fue parte iluminadora en el juego de palabras de la lámpara. Y te veré en la próxima conferencia 7. Métodos de Vue y v-on: bienvenido de nuevo. Una vez más, realmente vamos a meternos en la carne de ustedes con esta conferencia con métodos de vista y la V sobre directiva. ¿ Ahora qué? Nuestros métodos de vista, son muy importantes de ver. Entonces averigüemos métodos aire retenidos en un objeto como propiedad de nuestra vista Instancia Exactamente igual que nuestro objeto de datos y ya verás a qué me refiero. En un segundo, lugar de cosas como cadenas o matrices, que es lo que sostiene nuestro objeto de datos, nuestro objeto de métodos mantendrá funciones que puedes ver en este JavaScript. Tengo una instancia de vista bastante estándar, tenemos nuestros datos LR, y ahora tenemos una nueva propiedad llamada métodos. Vale la pena señalar esto. Así que recuerda nuestras instancias de vista, solo un gran objeto JavaScript. Por lo que necesitamos esa coma después de la tornapunta de cierre de datos porque es solo un montón de propiedades como en cualquier otro objeto JavaScript sin que la coma no se ejecutará. Entonces es algo que a veces olvido. Me imaginé que valía la pena mencionarlo. Si nos fijamos en la propiedad methods , contiene un objeto. Y en ese objeto vemos tenemos una propiedad que se llama hola mundo, y esa propiedad tiene un valor de solo una función, y en esa función se ejecuta una alerta llamada Hello World. Esto es un principio de script Java bastante estándar. Entonces me imaginé que me había adaptado a la vista. Ahora bien, ¿cómo vamos a interactuar con este método en nuestro HTML? Y ahí es donde entra la V sobre directiva. La directiva Viane toma un argumento exactamente como lo hace V bine con el colon. Nos permite establecer realmente oyentes de eventos en elementos HTML de una manera muy sencilla, y muy a menudo se hará clic en el argumento de la directiva Viane. No siempre, pero lo verás con bastante frecuencia, y el valor de la directiva es casi siempre un método que hemos declarado a nuestro juicio. Instancia, por ejemplo, el método hello world que vimos en la diapositiva anterior. Aquí te dejamos un poco de HTML. Bastante simple. Ya puedes ver tenemos R V en clics de colon. Entonces ah, refrescar Otra vez. El V on es la directiva Colón y después del colon está el argumento de directivas. En este caso, es click. Entonces lo que haría este código es cuando hacemos clic en el botón, realidad va a atropellar a este tipo por aquí. El hola mundo, uh, propiedad, que es una función. Va a ejecutar esta función, y va a alertar hola, mundo en el navegador. Ahora echemos un vistazo a la pluma de código y cómo podemos usar esto en nuestra lámpara. Entonces vamos a pasar a la lámpara y vamos a añadir una V sobre directiva y con un clic, y vamos a hacer referencia a algo que en realidad no existe todavía en el script Java. Y lo vamos a llamar “toggle”. Entonces esto tiene que ser que puedes ver aquí abajo, me va a gritar diciendo que el toggle no existe y se va a deshacer de esto. Pero eso está bien por ahora. No, uh, recuerda, vamos a añadir esto común. Vamos a bajar al JavaScript, y vamos a agregar una propiedad de métodos, y va a contener un objeto JavaScript, acuerdo? Y vamos a agregar toggle, que es lo que necesitamos agregar. Para que esto empiece a renderizar correctamente de nuevo, y el valor de toggle va a ser igual a una función. Y simplemente vamos a consolar el pensamiento log algo. Sólo vamos a poner, um, lámpara pinchada. Digamos con un signo de exclamación, porque estamos emocionados voy a despejar en este consejo, así que no tienes que mirar eso ahora antes de que siquiera pinchemos sobre la lámpara. Sólo probemos el método. Recuerde, podríamos acceder a las propiedades de datos de nuestra aplicación, nuestra aplicación de vista escribiendo app dot y el nombre de la propiedad de datos. A ver si eso funciona también con nuestros métodos. Entonces tecleemos solo ap dot tirón, y eso va a devolver una función. Y eso es lo que queremos que suceda. Queríamos devolver la función. Ahora veamos qué pasa si en realidad corremos. Apt up, toggle. Se va a concejo lámpara de diálogo encendida así que todo está funcionando fantásticamente muy bien. Y ahora intentemos hacer click en la lámpara. Recuerda, este es Ladrón en Directiva Click trabajando para nosotros, y boom! Va a ejecutar esa función. Ahora bien, esto es algo que es tan poderoso y emocionante ante estos frameworks reactivos, tendrías que entrar. Tienes que seleccionar el elemento HTML real. Tendrías que agregarle un oyente de eventos. Tendrías que agregar una función a eso y solo era mucho más complicado que esto con vista. Es tan sencillo hacer esto y tan fácil de mantener y solo una cosa realmente emocionante. Este es un hito genial. De verdad te animo a meterte con esto. Si quieres cambiar lo que dice, intenta, ya sabes, agregar algún código extra a nuestra función de toggle. Metiendo con eso, viendo lo que se puede llegar a ocurrir. No tengas miedo. No vas a romper nada, así que solo experimenta. Entonces de eso se trata para esta conferencia, te veré en la próxima. 8. Estado de la lámpara y v-if: Bienvenido de nuevo en esta conferencia, vamos a estar agregando estado básico a nuestra lámpara usando la propiedad de datos. Y vamos a estar usando ladrón si directiva de hace un par de conferencias si lo recuerdas , Si no lo haces, está bien. Lo recordarás a medida que vayamos. Muy bien, vamos a ir a nuestro script Java, y vamos a añadir una nueva propiedad a nuestros datos, que va a ser llamado. Por lo que esto va a controlar el estado de encendido apagado de nuestra lámpara lo iban a por defecto a falso para que el usuario pueda encender la lámpara una vez que inicie. De acuerdo, entonces ahora ¿cómo interactuamos con esto en la propiedad? Bueno, siempre podríamos hacer datos de punto de aplicación. Nuestro perdón al punto On es igual a través y cámbialo a eso. Pero, ¿cómo lo hacemos realmente dentro de un método? Entonces vamos a usar nuestra charla, lamentar que vamos a limpiar el registro de puntos cónsul, y vamos a hacer referencia con la palabra clave esto. Ahora bien, esto es algo muy confuso en javascript. Siempre lo ha sido. No voy a tratar de explicarlo aquí. Hay algunos artículos fantásticos que van sobre cómo lidiar con ello y lo que realmente significa. Básicamente, en diferentes contextos, significa cosas diferentes. No obstante, en este caso, vamos a simplificar y sólo decir que esto se refiere a la instancia de vista. De acuerdo, entonces si escribimos este punto en su va a acceder a esto en propiedad en los datos, si escribimos este punto toggle, va a hacer referencia al método. Entonces eso es otra cosa. No nombres lo mismo a tus métodos y datos. Te toparás con problemas, pero sin embargo así para nuestros propósitos, este punto on se refiere al on dentro de nuestra propiedad de datos. Este punto cualquier cosa simplemente se refiere a algo dentro de tu código de vista para que puedas llamar a otras funciones desde dentro de esta función escribiendo este punto el nombre de la función. De todos modos, pongamos este inicio en igual No lo siento, no esta acción en otra vez, Algo confuso si nunca lo habías visto antes, JavaScript en realidad evalúa el código desde el dedo del pie derecho izquierdo. Entonces básicamente lo que va a pasar es que va a decir OK, ¿qué es este punto sobre esto hecho en este falso? Este no este signo de exclamación va a invertir lo que sea que este perro sobre evalúe en este caso, este inicio en evalúa como falso, por lo que va a invertirlo a verdad. Y entonces en realidad va a poner este punto para que sea igual a verdadero. Ojalá eso tenga sentido. Es un básico Si no lo consigues, está bien. Esto es básicamente justo cómo alteras un verdadero valor falso y JavaScript eso es todo lo que necesitas saber. Entonces ahora echemos un vistazo en el consulado. ¿ Qué está pasando? Por lo que este punto app es igual a falso. Ahora corremos en punto toggle todo bien, y veamos a qué actuar en es igual ahora. Es malvado, las tropas. Entonces eso está funcionando perfectamente. Y ahora si hacemos clic en la lámpara, si hacemos apt on on click la lámpara y hacemos apt out on otra vez false, por lo que al hacer clic en la lámpara también se ejecuta nuestro método. Seguimos siendo buenos para eso. Ahora vamos a lograrlo para que nuestras linternas se enciendan y bajen. ¿ Qué tan emocionante es eso? Estoy tan emocionado con la razón por la que realmente hicimos una clase separada de Dave separado, debo decir, nuestra luz es para que podamos usar la directiva V if y simplemente vamos a poner V si bien. Es realmente, honestamente así de simple. Y se puede ver nuestra lámpara se ha apagado, por así decirlo, El Div amarillo el color amarillo hizo con la clase de luz ha desaparecido. Gracias a ver diciendo OK, no está en honesto se establece en falso. Y ahora cuando hacemos clic en él para activarlo, Momento de verdad Bam, se enciende Eso es tan genial. ¿ Qué tan guay es eso? Me estoy emocionando por ello. Y yo sabía lo que iba a pasar. Um, así que sólo pasemos por esa cadena de eventos una vez más. Estamos dando click en la lámpara y eso, gracias a RV al click, se va a hacer clic en ella, y va a buscar vista debo decir va a buscar el método de toggle. Va a ir por aquí y decir, OK, el método toggle está establecido en una función que básicamente invierte la propiedad on en nuestros datos, lo convierte de falso a verdadero o verdadero a falso. De acuerdo, eso pasa. Y luego vista dice: Oh, Oh, OK, esta directiva, esta V Si la directiva está diciendo bien si encendido es cierto, quiero mostrar esto. No obstante, si en su falso. Ya no quiero mostrar esto. Esto como Div, que se establece en un color de amarillo en nuestro CSS. Aquí se puede ver color de fondo, amarillo, y eso es básicamente lo que está pasando. Esa es la cadena de eventos ahí. Estoy emocionado de que tengamos esto funcionando de verdad, muy cool en. Y me emociona que en realidad estemos empezando a hacer cosas. Yo quería meterme en hacer cosas tan pronto como pudiera, así que te veré en la próxima conferencia. 9. La directiva de modelo v-: Bienvenidos de nuevo, todos. En esta conferencia, vamos a estar hablando de una nueva directiva llamada V Modelo. Realmente emocionante, realmente poderoso. Y va a ser divertido. Entonces, ¿cómo usamos el modelo? Bueno, se utiliza para el enlace de datos bidireccionales, que es lo que la vista Js docks lo llama. Entonces a un enlace de datos sobre elementos HTML que permiten la entrada del usuario, por ejemplo, entradas de texto. También se pueden utilizar en cualquier cosa que la etiqueta de entrada pueda manejar en HTML. Cajas de verificación , botones de radio , deslizadores de rango , bajadas, todo eso bueno. Entonces, cuando los datos cambian en un elemento HTML que tiene una directiva de modelo V, actualiza la propiedad de datos a la que está ligada dentro de la instancia de vista y viceversa. Si cambio los datos en el elemento HTML, actualizará automáticamente la propiedad asociada en la instancia de vista. Y si cambio la instancia de vista, propiedad dentro del JavaScript actualizará automáticamente el HTML. Es un concepto realmente poderoso, y simplemente estoy muy emocionado de mostrarles cómo funciona. Ahora verás algo de JavaScript aquí, vista bastante estándar. Instancia, tenemos una propiedad llamada Color dentro de nuestro objeto de datos y su valor es morado. Y si miramos nuestro HTML, se puede ver que tenemos algo Un pequeño modelo nuvi dash igual a color. Y quiero recordarles que vista ve cualquier cosa cualquier valor de una directiva y busca ese valor dentro del JavaScript. Entonces ese color no es la vista de color de cadena es ver que v Dash y decir, OK, esta es una directiva. Voy a evaluar lo que sea esto igual y tratar de encontrarlo dentro de mi punto de vista. Instancia, Sólo un rápido refresco sobre eso. De acuerdo, hemos saltado a la pluma de código, y ahora vamos a implementar una directiva modelo V en una caja de entrada de texto que nos permitirá cambiar el color de nuestra lámpara, lo cual es realmente genial. Ahora, en realidad no vamos a implementar el cambio de color todavía. Eso será en la próxima conferencia, donde hablo de algunos otros conceptos que nos permitirán hacer eso. No obstante, sólo vamos a poner en marcha el modelo en este. Entonces voy a agregar en entrada con un tipo de texto fuera de esta lámpara, def. No obstante todavía dentro de nuestro activo, eso es muy importante de lo contrario han usado no ir a verlo correctamente. Por lo que agregamos una directiva de modelo RV y llamaremos a este nuevo color de propiedad, como hicimos en las diapositivas. Ahora vas a ver un error de objeto aquí abajo. Eso está bien. Es solo que es porque view no es capaz de encontrar la propiedad del color porque aún no la hemos hecho. Entonces sigamos adelante y hagamos eso en nuestra coma. Recuerda, es un objeto que necesitamos esas comas de color y vamos a añadir en morado. Y ahora se puede ver aquí arriba. Tenemos el morado rellenado automáticamente. Se puede ver aquí arriba. Ni siquiera dice nada bien. No hay nada. No hay texto de marcador de posición, nada asociado a él. Mira esto. Esta es la parte realmente genial. Entonces si lo hacemos apt out colorados recordar, podemos acceder a cualquier propiedad dentro de nuestro objeto de datos haciendo app o el nombre de nuestra vista. Instancia. En este caso, es app, app dot cualquiera que sea el nombre de la propiedad. En este caso, es de color morado. Ahora si escribo naranja aquí y recuerdo, esto no se ha refrescado ni nada, todo esto está pasando en vivo en naranja en tiempo real. ¿ Qué tan guay es eso? De inmediato se toma el texto que los usuarios pusieron y lo cambiaron en el script Java. Ahora eso es increíblemente poderoso. Y se puede ver que funciona de la misma manera. Si yo en el JavaScript Si escribo rojo naranja aquí ap color punto arriba ahí automáticamente, cambia. Vuelve a ver. Vuelve a ver en la parte superior. Al hacer esto, lo voy a cambiar a azul. Ahora mira de nuevo en la parte superior aquí de inmediato. Cambia. Eso es tan, tan cool. Esta es una de las cosas más cool de la vista para mí. Personalmente, solo me encanta esto de ida y vuelta entre el HTML y Js. Es tan elegante y tan, tan fácil de usar. De acuerdo, en la próxima conferencia, realidad vamos a hacer que esto tenga un efecto ahora mismo donde nuestras lámparas todavía amarillas? Porque eso es lo que el CSS está dictando aquí abajo en la siguiente realmente iban a usar la compra de V. Y si recuerdas de una copa hace electores con el fin de cambiar el color de la lámpara te veo entonces 10. ¡Agrega color reactivo!: Bienvenidos de nuevo, todos en esta conferencia, vamos a estar tomando nuestra propiedad de color dentro de nuestra vista. Instancia que es V modelada a nuestra entrada de texto. Y lo vamos a hacer para que ese valor cambie realmente el color de nuestra longitud que tenemos aquí en la pantalla. Ahora vale la pena señalar que, uh, he agregado algún texto de sabor aquí desde la última conferencia que solo pide al usuario que ingrese un color CSS válido. Y tiene que ser un color CSS válido. Si tecleamos algo galimatías o números o lo que sea, no va a mostrar Teoh correctamente. Simplemente se ajustará a un amarillo, por lo que no va a romper nada. No obstante, si quieres una forma más propensa a los errores de hacer esto, buena manera sería una entrada selecta y, ya sabes, como un desplegable. Y no voy a entrar en eso aquí. Pero la documentación de vista ya que tienen muelles fantásticos. Es otra razón por la que es uno de mis frameworks favoritos en JavaScript. Su documentación es simplemente increíble. Pero si vas a la documentación del modelo V, tiene toda una sección sobre entradas selectas. Bajar los insumos. Vamos a incluirlo aquí, sin embargo, vamos a usar el modelo para cambiar el color. Ahora tomemos un minuto para pensar en ¿Cómo cambiaríamos el color de esto mientras podríamos entrar en el CSS y simplemente cambiarlo manualmente nosotros mismos, y eso funcionaría bien? Ahora es morado, pero JavaScript no tiene forma de tocar un archivo CSS. De todas formas no así. Entonces, ¿cómo hacemos eso? ¿ Cómo hacemos que el HTML cambie el estilo? Bueno, seguro que ya lo has visto antes. Son los atributos de estilo en el elemento HTML. Y para hacer eso, solo escribimos algún fondo de código CSS. El color es morado y se puede ver que ha cambiado. Lo hemos hecho para que sea morado. No obstante, queremos poder cambiar esto con vista, ¿no? Y no podemos simplemente teclear, ya sabes, doble de Curley y luego el color, porque la vista no puede mirar dentro de atributos, ¿ verdad? Esto es solo una fuerza que no podías saber que se suponía que mirara dentro de ahí para que Teoh discerniera cuál debería ser el color. Entonces, ¿qué hemos visto previamente que nos permita cambiar? Atributos HTML usando datos de vista. Eso es correcto. Es el enlace. De acuerdo, entonces en realidad vamos a deshacernos de esto y teclear en v bind. Recuerda, esos son nuestros atributos. Esa es nuestra, Ah, nuestra directiva, debo decir. Y después del colon, ese es nuestro argumento a favor de una directiva. estilo V bind es igual a bien, y lo que esto va a tomar, no podemos simplemente escribir en fondo. El color es morado porque eso es código CSS, ¿verdad? Hay muchas cosas mal con eso, pero ese código CSS. Entonces, ¿cómo trata la vista con, uh, el estilo V bind? Bueno, se necesita un objeto JavaScript. De acuerdo, y esas son las dos llaves. Ahora se necesita esto, y básicamente es solo una lista de propiedades CSS. Entonces, por ejemplo, color de fondo. Recuerda, no puedes usar guiones en JavaScript, por lo que es fondo con un color de fondo con un C mayúscula en el color. Y si alguna vez has editado estilo usando JavaScript nativo, solo JavaScript vainilla, debo decir que esto es muy similar. No debería haber nada nuevo para ti, Colon y por supuesto, porque es ah objeto que es nuestra propiedad o Kías, fondo, color y nuestro valor. Tenemos que usar comillas simples aquí porque si usamos comillas dobles en realidad nos escapará de esta secuencia. Pero tenemos que usar comillas simples porque recuerda, no podemos simplemente escribir morado porque entonces ese es el JavaScript va a buscar las instancias de vista , Más bien va a buscar la propiedad de púrpura, y eso sí no existen, ¿verdad? Entonces si ponemos una cuerda aquí como morado, vas a ver bam, cambia. Eso es increíble, ¿verdad? Eso es realmente, realmente genial. ¿ De acuerdo? Y realmente, realmente poderoso. Pero no queremos que esto sea sólo una fuerza estática. Y aquí es donde todo se une. Este es un momento tan emocionante en el curso. Nos vamos a deshacer de esto y simplemente íbamos a teclear color. Y recuerda, siempre que vista tenga una directiva, va a ver el valor de la directiva como JavaScript. ¿ Verdad? Y va a buscar esta propiedad de color dentro de sí misma y la va a encontrar en nuestro objeto de datos, que es igual al morado Ok. Y ahora le hacemos click y es morado. Y vigila esto. Esto es, como, tan asombroso. Estamos combinando cosas, y es emocionante. Por lo que nos deshacemos del morado y por defecto es amarillo, recuerda, porque en nuestro CSS. Tenemos los antecedentes. El color es amarillo. Escribimos en naranja. Mira eso. Automáticamente. Cambia. Eso es tan emocionante. Es tan emocionante. Rosa, uh, azul verde. Increíble. Y solo dedo del pie te muestran que sí funciona, debilitar tipo en app punto color igual a amarillo o no hagamos amarillo. Ese es el predeterminado, um, naranja otra vez y cambia. Wow. ¿ Qué tan increíble es eso? Eso es tan, tan cool. Y ves cada tipo de galimatías se quedará. Es naranja tipo de números que se quedarán es amarillo. Pero, ¿qué tan asombrosamente poderoso es eso? Estamos combinando sólo dos cosas simples y ni siquiera tenemos, ya sabes, tenemos menos de 30. A lo mejor le darías una lección de 25 líneas de código aquí, y todo esto funciona así. Es solo que sopla la mente. Cuán poderosa es la vista en un momento como este. Y estoy tan emocionado de llegar a este momento en el curso. De acuerdo, de eso se trata para esta conferencia. Te veré en el próximo 11. Dimming nuestra lámpara: Muy bien, bienvenido de nuevo. Por lo que estamos escuchando lápiz de código, y vamos a añadir un slider tenue a nuestra lámpara que nos permite atenuar e iluminar el color real de cualquier color que hayamos elegido para configurarlo. Ahora, esto va a ser usando conceptos que ya hemos explorado. Esto no es nada nuevo. 100% de ella es lo que ya hemos visto. Ahorra para un tipo diferente de entrada HTML. Ahora bien, si quieres probar esto tú mismo, te animo a hacerlo porque es algo así como un ejercicio de rompecabezas, ¿ verdad? Es realmente divertido tratar de resolver estas cosas de todos modos. Es divertido para mí. Obviamente, completamente opcional. Podrías simplemente seguir como yo lo estoy haciendo. Te daré una pista para aquellos de ustedes que sí quieran probarlo por su cuenta estará usando en input html input attribute con un tipo de rango. Va a ser un deslizador de rango. De acuerdo, saltemos a ello. Esta vez voy a empezar con el guión laboral. Vamos a agregar una propiedad totalmente nueva a nuestro objeto de datos llamado brillo. De acuerdo, vamos a igualar eso. El uno nota que este es el número uno, el entero uno nudo, el string uno como lo verías ahí. Está bien, Uno. Y es importante que éste sea uno. Porque esto es lo que va a controlar nuestra luz, dibs, opacidad como, renunciar aquí que, realidad, cuando pinchemos aparece, correcto, así que eso va a controlar el opacidad y opacidad. Uh, en CSS es un valor entre cero y uno, siendo 0.5 el punto medio. De acuerdo, entonces es importante que éste sea uno. Se inicia , ganó. Puede comenzar lo que quieras, pero tiene que ser un valor, pero entre cero y uno,al pero entre cero y uno, igual que el estilo de opacidad en CSS. De acuerdo, antes de esta entrada de texto, vamos a agregar otra entrada con el tipo de rango. Y aquí hay algunos atributos que son, uh, que normalmente incluirías en una entrada de rango. Vamos a tener un hombre, que va a ser el valor mínimo. Vamos a tener un máximo significaría el valor máximo. Al igual que hablamos tiene que estar entre cero y uno. Vamos a agregar estos atributos de paso o se establece en 0.1 Si nunca lo has visto antes, controla hasta dónde están los pasos en este deslizador. Déjenme mostrárselo a ustedes. Entonces si ponemos el paso a 0.5, que es nuestro punto medio, puede ver cuando arrastré esto, automáticamente salta dedo del pie a mitad de camino. Ahora queremos ser 0.1 porque nos va a permitir tener un buen movimiento suave y un bonito cambio de brillo suave a medida que avanzamos. Muy bien, vamos a añadir en alguna vista magia con modelo V. Ya hemos visto esto antes. Esto nos permite enlazar para pesar el enlace de datos entre una entrada y un JavaScript. Nuestra propiedad de nuestra vista, debo decir. Entonces lo vamos a modelar después del brillo. Si puedo deletrear Minamata, dejar después de brillo OK, Y si bajamos aquí y lo cambiamos a 0.5 y guardamos, verás que la vista automáticamente se encarga del valor predeterminado para nosotros. No tenemos que establecer eso y otra vez para sopesar el enlace de datos. Perdón, esto es de antes Podemos aclarar que si hacemos app dot rightness aquí abajo, se puede ver que está en uno. Si lo cambiamos en el html a algo bajo, vuelve al cónsul. Echa un vistazo. Es punto a dos, y podemos establecer apt vertical a algo así como 20.5 y ver el HTML aparecer el deslizador . Cambiará 2.5. Ahora bien, ¿cómo vamos a usar esto para controlar nuestra opacidad? La opacidad de esta luz? Si bien, vamos a usar lo mismo que usamos para espalda para el color de fondo, vamos a usar este objeto de estilo. Y recuerda, esto es solo javascript. Entonces es solo por comas separadas, coma derecha. Y luego escribimos nuestra nueva clave o propiedad, lo que quieras cancelarla opacidad. Correcto, Porque eso es un CSS uh, un estilo CSS que queremos cambiar. Entonces si hacemos un pase, e es igual a brillo. Eso es todo lo que tenemos que hacer se hicieron. Echa un vistazo. Mira esto, hacemos clic en él y movemos el deslizador y poco a poco se atenúa y se ilumina poco a poco. E incluso podemos cambiar el color. Todo esto está pasando, ¿verdad? Esto está a mitad de camino entre naranja. Se atenuó completamente en naranja. todo color. ¿ Qué tan loco es eso? Eso es tan guay. ¿ Verdad? Y esto es todo usando cosas que ya hemos aprendido. Podrías agregar tanto mawr usando solo los conceptos Nos hemos metido bajo los dedos hasta ahora en el curso otra vez, recomiendo que te metas con este experimento. Diviértete. De todos modos, ese es el final de esta conferencia, y te veré en la siguiente. 12. Propiedades computadas: Bienvenido de nuevo en esta conferencia, vamos a estar hablando de propiedades computadas y usarlas para limpiar y re factorizar parte de nuestro código que tenemos en nuestro proyecto de lámpara. ¿ Cuáles son las propiedades computadas allí? Otra faceta de vista muy poderosa, muy importante. Cuáles son son propiedades retenidas en un objeto computado, un objeto diferente a nuestro objeto de datos. Similar a los métodos propiedades dentro del objeto computado tienen valores de una función. Siempre tienen un valor de una función al igual que nuestros métodos. Por lo que la función estas funciones utilizan la palabra clave de retorno para determinar a qué es igual la propiedad cuando accedemos. Se meterá en eso en un minuto. Cuando te muestro el código para que puedas ver aquí, hay un poco, pero no lo seas. No te preocupe ni nada. Tenemos vista. Instancia un l y tenemos esta nueva propiedad, una nueva ahbd, una nueva propiedad en nuestra instancia vista llamada computed. Y es igual a un objeto al igual que nuestra propiedad de datos. Y al igual que nuestra propiedad de métodos, puedes ver que tenemos una propiedad dentro de nuestro objeto computado llamado producto y su valor es una función y la disfunción devuelve algo tan simple como dos veces dos. De acuerdo, este es el HTML que va junto con él. Muy sencillo, pero un par de cosas que tener en cuenta aquí. Entonces hablemos de este retorno Palabra clave. Si no sabes lo que es, está bien otra vez. NDN tiene alguna documentación realmente, realmente genial a la vuelta. Puedes buscarlo en google. Se le va a dar un montón de resultados. Básicamente, para nuestros propósitos, retorno es lo que es el valor al que va a ser igual el producto. Cuando termine la función computada, es que la va a devolver. Esto tiene que estar al final de la función. Si escribimos algún código después de la declaración de devolución, ese código no se ejecutará. ¿ De acuerdo? Y se puede ver a la derecha. Tengo algo de HTML con producto en nuestras razas rizadas. Al hacer cualquier cosa a la vista, tenemos que rizar llaves, el nombre de una propiedad view y para cerrar llaves. Y va a exhibir para porque dos veces dos son cuatro. Si tuviéramos que acceder al producto app dot desde la consola, eso también volvería para que pudiéramos acceder a estas propiedades computadas de la misma manera que accederíamos a las propiedades de los datos escribiendo app dot y luego el nombre fuera de la propiedad computada. Ahora saltemos a la pluma de código. Aquí estamos en pluma de código. Este es el código de la última conferencia. Todavía tenemos nuestra en nuestra funcionalidad. Agregamos este slider dim en el último. Por lo tanto, vamos a añadir un objeto computado dentro de nuestra vista. Instancia para la lámpara y te diré qué vamos a hacer en un minuto aquí, OK, así que vamos a hacer computado. Recuerda esta coma aquí porque nuestras instancias de vista, solo un gran objeto javascript necesita tener esa coma también necesita tener una coma al final. Ahora bien, el orden de estos no importa. Podrás tenerlos en cualquier orden. Simplemente me gusta tener mis computadoras justo debajo de mis datos porque veo las computadoras como un tipo de datos, sólo algo con lógica más compleja detrás de ella. Ahora vamos a agregar una propiedad a este objeto computado llamado estilo. ¿ De acuerdo? Y quizá puedas adivinar es lo que vamos a hacer. Recuerda, eso va a ser igual a una función Las propiedades computadas siempre son iguales a una función bien , una función que devuelve algo, y llegaremos a eso. Entonces lo que vamos a hacer aquí es que en realidad vamos a llevar este objeto aquí arriba. Recuerda, esto es solo script Java, y lo vamos a poner en el JavaScript porque se está poniendo un poco largo para mis gustos. Creo que cuando tienes algo como esto, eso es mucho JavaScript. Pertenece en el JavaScript. No pertenece en el HTML on. Si agregáramos cada vez más propiedades a esto, se llevaría mucho, mucho más tiempo, demasiado largo. Creo que en lo vamos a limpiarlo básicamente, agregando una propiedad computada. De acuerdo, entonces vamos a tener una variable una variable local llamada objeto de estilo. Esto existe en Lee. Dentro de esta función, no toca ninguna vista. Instancia. No se puede acceder aquí arriba. Nada de eso. Entonces vamos a establecer una variable. Vamos a ponerlo igual a un objeto, y este objeto va a tener propiedades uno llamado color de fondo. Al igual que aquí arriba. Recuerda, tenemos que hacer que diga exactamente el color de fondo. De lo contrario, html no entenderá a qué propiedad CSS estamos tratando de acceder, y vamos a poner este color de punto. Hablé de este punto hace un par de conferencias, más temprano en el curso. Si no entiendes de nuevo este stott MDMS y gran documentación, hay algunas cosas geniales en Google. Son grandes artículos honestamente escritos sobre este punto Sin embargo, para nuestros propósitos, este punto hace referencia a cualquier cosa en la instancia de vista, cualquier cosa a la que pudiéramos acceder escribiendo app dot cualquiera que sea la app dot color digamos dentro de nuestra vista, instancia dentro de cualquier propiedad o método computados o lo que tiene este punto accede a valores dentro de nuestra instancia de vista. Y puede acceder a este punto y digo instancia y no solo objeto de datos, porque en realidad podemos acceder a este estilo de la misma manera escribiendo, uh, uh, este estilo de punto en, digamos, un método o un diferente propiedad computada. De acuerdo, entonces este punto se refiere a cualquier dato que tengamos dentro de la app o cualquier método. También puedes hacer referencia a toggle con este punto toggle a la derecha. De acuerdo, entonces vamos a añadir un 2do 1 llamado capacidad. Asegúrate de que eso sea opacidad y haz este brillo de punto. Recuerda, necesitamos igualar lo que sea que sean los datos, no la capacidad de las estrellas, porque eso no existe. OK, ahora vamos a hacer un retorno de estilo. Las devoluciones de objetos no te gusta que hayas visto en las diapositivas devoluciones hicieron un did dos veces dos, lo que está devolviendo sólo un número antiguo llano. Los retornos también pueden devolver una variable local como objeto de estilo. Correcto. Entonces estamos devolviendo objeto de estilo. Esto es que podrías regresar. Podrías hacerlo así es Bueno, um que algunas personas podrían preferir. Simplemente creo que esto es un poco más explícito y y me gusta más, Pero puedes devolver justo el objeto en sí si quieres que eso se debilite de nuevo. Como dije, podemos acceder a las propiedades de la computadora con app dot Nombre de la propiedad de la computadora, Así app dot style Puedes ver que está devolviendo un objeto con el color de fondo de amarillo y opacidad de uno. Correcto, porque nuestro brillo está establecido dedo del pie uno. Cuando el Cuando las instancias crearon la instancia de vista debo decir que se crea y se puede ver este es el Este objeto aquí es exactamente lo mismo que este objeto aquí. Entonces lo que vamos a hacer es que sólo vamos a reemplazar este estilo v bine por estilo. ¿ Verdad? Y la vista automáticamente va a conocer ese estilo Bueno, es Ah, es una directiva de vista. Entonces el valor de la misma tiene que estar en algún lugar dentro de la instancia de vista, ¿ verdad? Y así se ve en los datos y dice: OK, OK, no está en los datos sobre color. Brillo conoce un estilo que miró a través de las computadoras y dice: OK, OK, encontré estilo. ¿ Qué es este retorno Ahora? Esta es una Lo siguiente de lo que quiero hablar es de una faceta muy, muy importante de propiedades computadas. De acuerdo, entonces si hacemos app dot color, digamos que actúa hasta el brillo. Está bien, si puedo deletrear, uh es igual a uno ¿verdad? Y si lo cambiamos por aquí, tengo brillo está ajustado a 0.54 ahora. OK, si miramos el estilo ap dot, también está ajustado a 0.54 Lo cambiamos de nuevo. Mira el brillo de punto ap 0.77 al estilo de puntos. El inmueble computado se actualiza automáticamente por el uso de la magia. Lo que está sucediendo en la vista de fondo sabe que mira hacia adelante autorreferencias, debo decir a otros datos dentro de esta vista. Instancia. Entonces dice Ok, este color oscuro y este brillo stop están ambos dentro de este computado. Entonces cada vez que este color oscuro o esta parada de brillo, Ya sabes, por aquí, el color y el brillo, siempre que esos cambian de vista automáticamente vuelve a computar esta propiedad. ¿ De acuerdo? Y por eso se llaman computadoras. Ellos calculan cuando cualquier cosa dentro de ellos cambia algo dentro de ellos. Eso es parte de los cambios de instancia de vista, ¿verdad? Entonces es una cosa realmente poderosa, una cosa realmente genial, y algo que puede ser realmente, realmente útil para nosotros, ¿ verdad? Porque ahora puedes ver que está haciendo exactamente lo mismo. Podemos cambiar el color. También cambiará el color. De acuerdo, eso es todo. Con computadoras. Esperemos que hayas disfrutado de eso. Los encontré divertidos. Como dije, experimentar lío alrededor. ver qué más puede hacer con, um, en la próxima conferencia, vamos a estar buscando, Maura calculó objetos para crear ah, valor porcentual de nuestro slider dim. Por lo tanto, mantente atentos para eso. Nos vemos la próxima vez 13. Muestra un valor duro: Oigan, todo el mundo. Y bienvenidos de nuevo a lo que en realidad es la conferencia práctica final en la vista Js craft Curso Estoy muy orgulloso de todos ustedes por llegar tan lejos en este, vamos a estar usando una propiedad computada para mostrar ah porcentaje de nuestro brillo. Vamos a mostrar, ya sabes, el 50%. Si nuestro brillo es igual a 0.5, vamos a empezar. Entonces solo voy a escribir brillo plain html. Sólo va a aparecer aquí es como texto y luego a llaves. ¿ Y qué pasa si solo escribimos brillo? Bueno, va a hacer referencia a nuestra propiedad de brillo aquí abajo en nuestro objeto de datos. Y si movemos el slider, va a mostrar, ya sabes, va a mostrar el porcentaje, pero queremos que esto se vea un poco más bonito. No queremos que muestre 0.27 Queríamos mostrar 27% ¿verdad? ¿ Cómo vamos a hacer eso? Bueno, vamos a usar una propiedad computada en realizar algunas matemáticas en nuestra propiedad de brillo dentro de nuestros datos. Entonces recuerda que llegamos a usar una coma porque se computan. Objeto es sólo que es un objeto, y vamos a crear una nueva propiedad de computadora llamada dim Porcentaje. De acuerdo, y recuerda todas las propiedades computadas. Sus valores son siempre una función, y siempre tienen que devolver algo. Entonces vamos a empezar con devolver este punto brillo veces 100. De acuerdo, entonces recuerda que este DOT hace referencia a la instancia de vista en sí, y va a buscar brillo. El brillo es uno, y va a multiplicar ese uno por 100. Entonces ahora mismo está diciendo que el brillo es igual a uno, y eso es porque me olvidé de cambiarlo aquí arriba. Recuerda, tenemos que cambiarlo en nuestra plantilla también. El brillo no es igual a eso. Queremos ser iguales a porcentaje dim. De acuerdo, y ahora es igual a 100 se puede ver cuando lo cambiamos, cambia el número. Bastante, bonita, bastante impresionante, ¿verdad? Es realmente así de fácil hacer eso de hacer, como algunas matemáticas. O incluso podrías hacer matemáticas más complejas. Te darás cuenta aquí que es que está parpadeando esos números realmente raros de vez en cuando, ¿ verdad? Por cosas internas con JavaScript, supongo que un HTML. Pero hay una manera de arreglar eso y lo que vamos a usar es, ah, función llamada unturn. Toda la función JavaScript llamada ronda de puntos matemáticos. Y eso solo lo va a redondear hacia abajo al valor entero más cercano para que sea lo tiene. No, no puede haber decimales, ¿verdad? Por lo que arreglamos ese tema. Ya no está mostrando esos raros entre números, y eso es todo. Para eso, también podemos agregar, ah, por ciento inscribirse aquí en el propio HTML, y se mostrará por ciento. Podríamos agregar eso también en el JavaScript, haciendo ah, más signo y un signo de por ciento. Ahora ves sus signos de 2%. Pero lo prefiero aquí arriba porque, ya sabes, esto es HTML. Está en el HTML donde pertenece. Se puede ver que realmente es así de fácil hacer algo así, solo usar una propiedad computada para mostrarlo. Está bien, únete a mí en la próxima conferencia para un envolver algunos recuerdos clave en mi felicitarte terminar este curso. Bien hecho. Ver que 14. ¡Para Wrapping y tu proyecto!: Bienvenidos de nuevo, todos a la conferencia final del curso de artesanía view Js. Enhorabuena. Tú lo lograste. Espero que salgas de este curso conociendo un poco más sobre el marco que antes. Y espero que puedan ver por qué. Creo que ahora es una herramienta tan fantástica en desarrollo Web. Esto fue sólo un curso vertiginoso, una rebanada de lo que creo que son los conceptos más cruciales dentro del marco de vista. Si disfrutabas el framework si pensaste que era genial, te recomiendo que revises la documentación de vista Js así como sígueme aquí en share de habilidad porque estoy buscando crear algunos o ver contenido relacionado. Si la demanda está ahí ahora, hablemos de algunas claves para llevar lo que ahora deberías poder hacer con vista. Pero al menos, espero que puedas crear una instancia de ti y hacer algunos datos reactivos y saber qué poner dentro del HTML. Para que esos datos aparezcan, se debe poder utilizar un raise a la vista y la directiva V cuatro para renderizar listas de datos en HTML. base a esos rayos a, realidad no usamos esto en nuestra aplicación de lámpara, pero lo aprendimos temprano en la lista de representación conferencia del curso. Es un concepto crucial, así que por eso quería cubrirlo. Debería poder crear y usar métodos de vista y más allá. Para hacer que HTML sea interactivo, debería poder usar directivas de vista como VF V Bind y el modelo para hacer que el HTML hable para ver y viceversa. Y debería poder usar vistas propiedades computadas para almacenar datos de datos más complejos que requieran cálculos y similares. Ahora quiero mostrarles algo que creé. Uh, eso es un poco más avanzado en la aplicación de la lámpara. Yo lo llamé view dot TV, y lo que hace es que no hace un montón de cosas. Es básicamente que quería modelar un televisor. Originalmente iba a mostrar imágenes en la pantalla y hacer que la instancia de vista mantenga cosas como datos de canal y datos de volumen. Cuando cambias el canal, cambiaría la imagen, y los datos de volumen realmente no harían mucho excepto mostrar ese control de volumen que tienes ahí Pero como me han sabido dio, lo di un paso más allá. En realidad usé YouTube I frame un P I con el fin de crear algo que realmente albergaría transmisiones en vivo dentro de la televisión. El canal cambia la transmisión en vivo que estás escuchando. Es todo esto. Ya sabes, The chill beats toe trabajo estudio a que están en YouTube, todas esas 24 7 transmisiones en vivo y el volumen mientras aparece en la pantalla. También en realidad controla el volumen del reproductor de YouTube. Entonces es una demo más sustancial de un proyecto que habría creado si hubiera tomado este curso. Utiliza algo o CSS avanzado de lo que vimos en la lámpara. No usé esta vista TV como ejemplo porque no quería enfocarme en el CSS. Había mucho CSS que tenía que hacer para hacer esta función muy bien. También usé recursos externos de script de trabajo como el YouTube I marco un P I, como dije antes, y no quería quedarme demasiado empantanada con esas cosas. Por eso creé algo tan desnudo huesos tan simple para que pudiéramos enfocar Onley en ver en sus datos. Algo que realmente quiero subrayar es que esta aplicación view dot TV utiliza conceptos Onley que aprendimos aquí en el curso. No usa nada más allá de esa visión sabia. Como dije, Advance CSS y jazz externo. Pero Onley conceptos que aprendimos aquí en el curso a la hora de ver y toda la aplicación es más o menos, ya sabes, como 85 90% de vista, por lo que van a ser un enlace a ella. Ya puedes checar Está en código Panic lo creó en Cope en será un enlace a él. En las notas de esta conferencia on, les animo a que lo revisen. Se puede mirar el código fuente. Un oleaje es simplemente jugar con él. En realidad me gusta mucho la aplicación. Yo estaba contento con ello, y ahora es tu turno. Quiero que te lleves todo ese conocimiento de vista recién encontrado y hagas algo tan creativo como puedas. Es solo sobre objeto con estado, ¿verdad? Entonces realmente, cualquier dispositivo electrónico que conozcas, podrías hacer altavoces que podrías hacer incluso como una consola de videojuegos de casa de datos de usuario. ¿ Qué juego se está ejecutando actualmente? Cualquier cosa. Ya sabes, Sky es el límite. Piensa en grande y crea algo realmente genial. Para hacer esto, vas a dirigirte al código pen dot io y crear una cuenta si aún no lo has hecho . Te dije que hicieras esto al inicio del curso, pero si decidiste no hacerlo, ahora es el momento de hacerlo. Es así como vamos a compartir nuestros proyectos dentro de los proyectos y recursos ficha fuera del curso. Simplemente vas a compartir un enlace así como una miniatura si así eliges de tu proyecto final . Ahora, quiero mencionar una cosa más antes de terminar el curso en la pestaña de proyectos y recursos de este curso, hay un enlace a un pdf fuera de la vista Js craft course tt que he hecho en su tiene todos los conceptos que hemos aprendido a lo largo del curso, así como ejemplos de cómo usarlos. Ahora quiero tomarme un momento para agradecerles por tomar este curso. Realmente significa mucho para mí que quisieras aprender más sobre este fantástico marco que tanto me encanta. Si dejaras una reseña, yo le daría vuelta. Sean eternamente agradecidos. De verdad lo agradecería Y cualquier cosa constructiva que tengas para mí. Yo quiero aprender a enseñar mejor porque te ayuda a aprender. Y ese es realmente mi objetivo en crear este curso y cualquier otro curso, me aseguro de seguirme también porque definitivamente estaré subiendo más cursos a compartir habilidades. Me divertí tanto haciendo esto. Gracias por unirte a mí en esta vista Curso crash de Js. Y espero verte pronto en un futuro curso. Gracias por acompañarme.