Transcripciones
1. ¡Hola!: Bienvenido al curso Vue.js Academy. Me emociona tenerte conmigo. Mi nombre es Chris, y soy desarrollador web y también creador de cursos online con experiencia, dando clases a miles de estudiantes satisfechos. Vue.js es uno de los marcos JavaScript más arriba y venideros disponibles en la actualidad. También es uno de los más divertidos de aprender y está repleto de características increíbles
que te permiten construir ambos sitios web pequeños directamente a través de aplicaciones complejas de una sola página. Entonces, ¿por qué elegir este curso sobre otros cursos de Vue.js disponibles? Bueno, este curso toma un enfoque basado en proyectos. Veremos exactamente cómo cada concepto que aprenderás encaja de inmediato en proyectos reales. El curso es amigable para principiantes también. Empezamos por construir una aplicación de lista de invitados donde comenzaremos con lo básico. He proporcionado una plantilla de iniciación [inaudible] para el primer proyecto para que podamos sumergirnos directamente en aprender lo que Vue.js tiene para ofrecer. Durante este proyecto, te pones seguro de cómo funciona Vue, y también de los conceptos básicos como datos de enlace, métodos, propiedades de la computadora, y mucho más. También aprenderás sobre las etapas del ciclo de vida del Vue en las que podemos aprovechar. El Proyecto 2 se basa en lo que ya hemos aprendido hasta ahora. Te presentamos para construir herramientas y también mejorar nuestro flujo de trabajo mediante el uso de las últimas tecnologías como la CLI Vue, Webpack, y Bubble también. Este proyecto será una aplicación de tarjeta de felicitación donde el usuario podrá editar y crear su propia tarjeta de felicitación personalizada. par de que esto sea un proyecto divertido de construir, aprenderás tantas técnicas, como el uso de componentes y cómo pasar datos entre ellos junto con la integración de tu app con Firebase para el almacenamiento de imágenes. Además, cubriremos la adición de animaciones y transiciones a tus apps para asegurarnos de que realmente destaquen. Todo lo que aprendas se pondrá en práctica de inmediato en los proyectos para realmente darte una mejor comprensión de cómo encajan todos en aplicaciones reales. ¿ A qué esperas? Presiona el botón Regístrate ahora y aprende uno de los marcos de JavaScript más calientes disponibles hoy.
2. ¿Qué es Vue.js y por qué debería utilizarlo?: Si no estás familiarizado con las bibliotecas y frameworks de vue.js o JavaScript en general, algunas de las preguntas que puedes estar haciendo es, ¿qué es vue.js y por qué debería aprenderlo en primer lugar? Bueno, vue.js es un framework
JavaScript realmente divertido y fácil de usar para construir interfaces de usuario. El núcleo del framework es muy ligero y rápido, y se puede utilizar en proyectos de cualquier ciencia desde dejarlo caer fácilmente en un sitio web o aplicación existente hasta simplemente usarlo para controlar una parte pequeña, como agregar un nuevo componente, directamente a través de aplicaciones de una sola página medianas o grandes. Teniendo en cuenta el tamaño ligero del núcleo vue.js, todavía
está repleto de muchas características sobre las que aprenderás durante este curso. El núcleo también se puede extender para agregar más características, como enrutamiento frontend y administración del estado. Si ya has construido sitios web antes, ya
deberías estar familiarizado con HTML, CSS y JavaScript, que son los bloques de construcción de las aplicaciones vue.js. Esto significa que puedes hacer uso de tus habilidades existentes para [inaudible] subir y aprender aún más rápido. Vue.js maneja sólo la capa de vista, lo que significa que eres libre de integrarla con cualquiera de los back-ends de bibliotecas, por lo que es realmente fácil y flexible de adoptar. Si has utilizado otros frameworks o bibliotecas como React, muchos de los conceptos básicos serán familiares, como usar un DOM virtual y construir componentes reutilizables. React también es genial de usar también, pero a mi juicio, vue.js es mucho más fácil de empezar, y también se está viendo para superar a React en ciertas pruebas de rendimiento. Estas son solo algunas de las razones por las que vue.js ha visto un enorme aumento de
popularidad y también mira para convertirse en un jugador aún más grande en el futuro. Ahora, conocemos algunos de los beneficios de usar vue.js, ahora vamos a obtener la configuración del código de Visual Studio, para que podamos saltar directamente a construir nuestro primer proyecto.
3. Instalación de Visual Studio: Para este curso, necesitaremos algunas cosas para ponernos en marcha. En primer lugar, necesitamos un editor de texto. Es posible que ya tengas una preferencia o una que ya uses. Para este curso, estaré usando Visual Studio Code, que es ideal para la codificación JavaScript, y además tiene un terminal incorporado el cual necesitaremos más adelante en el curso. Puedes usar cualquier editor de texto que te guste pero aquí tienes algunas opciones populares de editor de textos, como Atom, Brackets, WebStorm, y por supuesto, Visual Studio Code. Si ya tienes uno de esos y tienes un navegador web, siéntete libre de pasar al siguiente video. De no ser así, te recomendaría que pases a code.visualstudio.com y sigas las instrucciones de descarga de tu plataforma. Una vez que hayas hecho esto, vuelve y añadiremos algunos plug-ins para ayudarles a trabajar con Vue.js. Una vez completada la instalación, voy a agregar un plug-in para agregar Vue.js a fragmentos de
código y también algo de resaltado de sintaxis. Si abres tu editor de texto y haces clic en el icono de extensiones en la parte inferior de las opciones, verás que ya tengo instalado Vue 2 Spppets. Para instalar esto, puedes hacer click en la barra de búsqueda y buscar Vue 2. Lo que voy a usar es Vue 2 Smppets, que es por [inaudible], luego da click en el botón de instalar y ya estás listo para ir. Por último, también necesitarás un navegador web. Te recomendaría Chrome de Google, pero puedes usar cualquier navegador web que te guste. Esto es todo para la configuración inicial. Ahora vamos a saltar a construir nuestra primera aplicación Vue.js.
4. Sección de introducción: Fundamentos de Vue: Al igual que con todos mis cursos, me gusta no perder tiempo en ensuciarnos las manos y en realidad construir proyectos reales. Este curso no es diferente y vamos a
empezar construyendo una aplicación de lista de invitados, donde el usuario pueda registrar sus intereses en un evento y tener el nombre agregado a la lista de invitados. El proyecto será relativamente sencillo, pero cubriremos todos los conceptos básicos. Tendrás que empezar a construir vue.js-ups. Adelante y empecemos.
5. Descarga tu proyecto de inicio: Adjunto este video es un proyecto de inicio que vamos a utilizar para saltar directamente a vue js. Deseo descargar el mío y colocarlo en el escritorio para un fácil acceso. Pero puedes colocar el tuyo en cualquier lugar. Tan sólo como sea conveniente para ti. Ahora ya deberías tener tu editor de texto todo configurado. Voy a abrir Visual Studio Code y luego una vez que se abra, voy a arrastrar el iniciador del proyecto hacia el editor de texto. Entonces echemos un vistazo a lo que está incluido. Si abrimos el index.html, solo son datos básicos de un HMO. En sección de cabeza solo tenemos algunas metaetiquetas básicas, el título. También tenemos algunos enlaces a bootstrap. Simplemente vamos a usar esto para algún estilo y diseño básico. El cuerpo del proyecto inicia con un div principal, cual tiene un id de app. Este va a ser el contenedor principal y vamos a echar un vistazo a esto con más detalle cuando veamos la instancia de vista. Bueno entonces, solo tienes algunas filas y
contenedores básicos y alguna información sobre la lista de invitados. Si abrimos la carpeta del proyecto y luego si hacemos doble clic en index.html. Se puede ver entonces la estructura básica de lo que tenemos. Tenemos una fila la cual tiene alguna información sobre los eventos, como la fecha del evento, el título del evento y una descripción. También tenemos una entrada de texto donde el usuario puede agregar su nombre y luego presentarlo para agregarlo a la lista de invitados. Entonces por debajo de eso tenemos otra fila y luego una general por debajo de ésta, que va a ser el lugar donde se agregan todos los nombres. Por el momento dice que aún no se agregan nombres. Pero añadiremos la funcionalidad a lo largo de esta sección para que esto funcione. Encima en el app.css solo tenemos poco de estilo básico solo para que se vea un poco más bonito. El app.js está vacío por ahora. Pero este es el lugar donde vamos a añadir la funcionalidad view JS a medida que pasamos por esta sección. Esto es sólo un resumen básico de lo que se incluye con el proyecto como paquete de puesta en marcha. Esto se volverá mucho más familiar a medida que pases por este apartado. A continuación veremos cómo instalar vue js y cómo agregarlo a
los proyectos de inicio y luego comenzaremos a trabajar dentro de este app.js echando un vistazo a la instancia de vista.
6. Instalación de Vue.js: En el último video, deberíamos haber descargado el iniciador del proyecto, que he colocado en mi escritorio para un fácil acceso. También debes tener un editor de texto listo para usar. En mi caso, estoy usando Visual Studio Code. En este video te vamos a mostrar algunos ejemplos de cómo podemos empezar a instalar Vue.js. Voy a ir a mi navegador web y voy a estar usando Chrome para el resto de este curso. Entonces vamos a ir a Vue.js.org, que es la página oficial de Vue.js. Si haces clic en la guía en la esquina superior derecha, y luego una vez que se carga, deberías ver un menú de navegación a la izquierda. Para empezar, tenemos que ir al menú de instalación, y él te brindará algunas opciones de cómo empezar. El primero es cómo incluir Vue.js Dentro de las etiquetas de script, por lo que podemos hacer clic ya sea en la versión de desarrollo o en la versión de producción. La versión de desarrollo tiene el modo de depuración y también las advertencias. La versión de producción no tiene estos y está minificada. Todo lo que necesitamos hacer es hacer clic en uno de estos botones y luego obtenemos la descarga, luego podemos guardar estos archivos dentro de nuestra aplicación y enlazarlos usando etiquetas de script. Esta técnica es igual que incluir cualquiera de tus scripts como j-query. Otra opción es utilizar el enlace CDN, estaremos utilizando para este proyecto. Este es un enlace donde la biblioteca Vue.js se aloja externamente. Si hacemos clic en el enlace recomendado allí, no llevaría a una versión alojada de Vue.js, y esta es la última versión. Volverá a esto sólo en unos momentos. La siguiente opción es usar NPM o el Administrador de paquetes de nodos. Estaremos usando NPM En el próximo proyecto, pero por ahora solo quiero mantener las cosas simples, nos centraremos en Vue. js y luego en lo básico. También está el VUE.CLI, que es una manera fácil de andamiar proyectos Vue.js. De nuevo, usaremos esto más adelante, pero por ahora solo voy a subir al enlace CDN y luego dar clic en el enlace, y luego necesitamos que copie este enlace URL. Entonces si volvemos a tu editor de textos y luego abrimos los proyectos. Si pasamos al index.html, cuando vaya a la sección de cabecera justo debajo del título, y luego agregamos en las etiquetas de script, y luego podemos agregar los atributos de origen y luego pegar en el enlace al Vue. js biblioteca, y luego guarde eso. Así de rápido y fácil es agregar Vue.js como enlace CDN. Con Vue.js ahora agregado a nuestra aplicación, pasaremos ahora al siguiente video donde echaremos un vistazo a agregar el VUE.Instance.
7. La instancia Vue y el objeto de datos: Ahora tenemos acceso a la biblioteca Vue.js mediante el uso de ECD y link. Ya podemos empezar a trabajar con dentro de nuestro archivo app.js. App.js se incluye en proyecto de inicio. Ya debiste haberlo descárguelo. Este archivo puedes nombrar lo que quieras. Por lo que eres libre de elegir si lo prefieres. Empezaremos por acceder al objeto de vista, y esto nos permite crear una nueva instancia de vista escribiendo New View, seguido del paréntesis y un punto y coma. Esta nueva instancia de vista va a controlar básicamente nuestra aplicación y los datos HTML que se renderizarán a la pantalla. Después necesitamos pasar en unos objetos de opciones, que contiene diversas opciones, que exploraremos a lo largo de este curso, como la vista HTML, qué elemento HTML queríamos montar. También contiene todos nuestros métodos y datos. En primer lugar, echemos un vistazo a el. Esta palabra clave te dice qué elemento HTML controlar. En nuestro caso, queremos controlar la página index.html. Entonces voy a usar el contenedor div principal circundante, que daría una AID de hasta. Por lo que podemos establecer el valor de cadena de el para que sea igual a arriba con el prefijo hash porque es AID. Esto es igual que un selector CSS. Entonces si queríamos controlar un div con una clase en lugar de un ID, simplemente
reemplazaremos el hash por un punto. Ahora hemos seleccionado nuestros elementos. Queremos estar trabajando con la propiedad de datos. Esto contiene un objeto el cual almacena todos
los datos que queremos utilizar dentro de esta instancia de vista. Por el momento, todos los datos dentro de nuestra aplicación son simplemente HTML simple, que Vue.js Clooney no tiene control alguno. Por ejemplo, todos los datos sobre los eventos enumerados, como las fechas del evento, el título del evento y la descripción del evento están codificados a mano. Podemos cambiar esto agregándolo al objeto de datos dentro de nuestra instancia de vista. Entonces voy a empezar a transferir esta información codificada a mano a nuestra propiedad de fecha. Entonces, empecemos por incluir fechas. Entonces selecciona la fecha a partir de
ahí, sácala HTML. Entonces si pasamos a nuestra propiedad de fechas, podemos establecer un nombre para estas fechas. Por lo que quiero llamar a la mía EventDate seguido de la columna, y luego dentro de una cadena, podemos agregar la fecha dentro de ahí. Podemos entonces hacer lo mismo con el título del evento. Entonces de vuelta en la página de índice, si pones el nombre de Summer Festival, y luego dentro de nuestros datos, nuevo en nuestro app.js, y luego siguiente llamaremos a esto el EventTitle. Entonces igual que antes con nuestros días como cuerda. Entonces pegando esto entre las cotizaciones. Entonces, por último, también haremos lo mismo para la descripción del evento. Así que vaya a la página de índice, ponga la descripción del evento, y luego justo debajo del eventTitle, crearemos el nombre de datos EventDescription, y luego peguemos esto como valor. Por lo que ahora necesitamos una forma de volver a agregar estos datos a nuestro HTML. Para insertar estos datos en nuestro código, lo
hacemos con una sintaxis de plantilla especial de llaves dobles. También verás esto referido como sintaxis de bigote o interpolación de texto. Es así como vinculamos nuestros datos con el DOM. Esto también significa que los datos son reactivos y se
actualizarán cuando haya un cambio con los datos. Dentro de estas llaves, podemos agregar el nombre de la propiedad de fecha que acabamos de crear. Entonces empecemos con los eventDates en el lugar de donde sacamos la fecha justo antes. Entonces guardemos eso y actualicemos el navegador, y ahora podemos ver la fecha está apareciendo de nuevo en la pantalla. Por lo que esta fecha ahora está funcionando porque está dentro de las llaves dobles. Así que Vue.js sabe buscar este nombre de propiedad dentro del objeto de fecha que acabamos de crear. También se actualizará cada vez que se cambie el valor de EventDate. Entonces lo que me gustaría que hicieran ahora es hacer exactamente lo mismo para el eventTitle y también el eventDescription. Así que pausa y dale una oportunidad a eso. Si es algo con lo que no te sientes cómodo, momento, no te preocupes. Seguiré ahora agregando el EventTitle. Entonces haz lo mismo igual que antes. En lugar del título, añadiremos las llaves dobles y luego agregaremos el EventTitle. Por último, en un lugar donde ponemos el eventDescription también agregará el eventDescription ahí dentro. Entonces guarde eso y haremos una actualización final solo para comprobar que todo está funcionando bien. Entonces no se ve genial. Tenemos las fechas, el título, y también la descripción, si [inaudible] de vuelta a la página. Pero esta vez tenemos Vue.js controlando los datos. Entonces, por fin, solo quiero terminar con una última cosa. Debido a que estas propiedades de datos libres están relacionadas, voy a agruparlas dentro de su propio objeto de eventos. Esto es totalmente opcional, pero tiene sentido sobre todo si nos extendemos creando más de un evento. Por lo que de nuevo dentro de la propiedad de datos, queremos crear el objeto de eventos. Entonces voy a cortar el EventDate, el EventTitle y EventDescription, y luego asegurarme de que estos pegados dentro del nuevo objeto de evento. Ahora de nuevo en el navegador, si hacemos una actualización, vemos que los datos desaparecen. Esto se debe a que necesitamos decirle a Vue que estas propiedades y ahora dentro de un objeto llamado eventos. Por lo que sólo significa hacer un cambio más dentro de la página de índice. Entonces todo lo que necesitamos hacer es nuestros eventos frente a EventDates, mismo con EventTitle, y luego finalmente lo mismo con EventDescription. Por lo que pega guardar. Ahora si volvemos al navegador y da una actualización, deberíamos ver que todos nuestros datos están de vuelta en la pantalla. Por lo que ahora hemos creado nuestra instancia de Vue y hemos mirado cómo utilizar el objeto de datos para controlar un texto dentro de nuestra aplicación. A continuación, echaremos un vistazo a cómo Vue JS maneja las plantillas y utiliza el DOM virtual. Te veré ahí.
8. Plantillas y el DOM virtual: En el último video, miramos cómo crear una instancia de Vue y también cómo agregar datos reactivos a nuestra aplicación. ¿ Cómo gestiona Vue js los datos para hacerlos reactivos y actualizar nuestra página cuando hay un cambio? Pero echemos un vistazo a lo que pasa en segundo plano. Si vamos a las herramientas de desarrollador del navegador dentro de Chrome, podemos acceder a éstas con un clic derecho y luego seleccionar “Inspeccionar”. Si luego seleccionará el Div con la clase de bloque de tarjeta, podemos echar un vistazo al contenido y podemos ver que el título del evento, las fechas
del evento, y la descripción del evento se agrega entre etiquetas P o encabezamientos. Por lo que la salida HTML es diferente a lo que hemos escrito dentro del Editor. No tenemos ninguna de la sintaxis de doble rizado
y no podemos ver los nombres de nuestras propiedades de datos, como título de evento. Esto se debe a que Vue.js toma nuestro código HTML y crea una plantilla basada en él detrás de bambalinas. Estas plantillas, que se crea no se utilizan para renderizar al DOM con código HTML válido. Usar una plantilla en lugar de actualizar directamente el DOM con nuestro código también proporciona beneficios adicionales. Cuando nuestros datos, por ejemplo, se actualizan dentro de la aplicación, Vue entonces resuelve qué partes de la plantilla se cambian. Dado que Vue sabe exactamente qué parte se cambia, sólo
volverá a renderizar esta parte de cambio de la plantilla. Por lo que al sólo volver a renderizar la cantidad mínima de código al DOM real. Esto tiene el efecto de hacer que nuestras aplicaciones Vue.js sean realmente rápidas ya que manipular el DOM es típicamente una de las operaciones más caras de realizar. Si no estás familiarizado con el DOM, significa Document Object Model. Se trata de una representación estructurada de un documento. En nuestro caso, siendo el documento la página web. En la mayoría de los casos simples, el DOM, que se crea, se parece a nuestro código HTML, que tenían razón y aquí vemos una típica representación visual del DOM, que es como un árbol de objetos empezando por los elementos HTML en la parte superior y después tenemos la sección de cabeza y la sección de cuerpo, y luego todos nuestros elementos anidados contenidos
dentro de la sección de cabeza de la sección de cuerpo. Por lo que esto te debería parecer familiar si has tenido alguna experiencia en HTML. Debido a que la necesidad obtenida elementos DOM lleva tiempo, Vue.js también utiliza lo que se llama el DOM virtual. Estas plantillas que Vue. js crea un compilado en funciones de render DOM virtuales. El DOM virtual es como una copia del DOM real y esto permite ver detrás de bambalinas para comparar el DOM real con el DOM virtual y solo actualizaciones donde y cuando sea necesario. Entonces, no te preocupes demasiado si no entiendes del todo lo que todo esto significa por ahora. Obtenemos mucha práctica con cómo funciona Vue y cómo renderiza plantillas a medida que vas por el curso. Entonces así funciona Vue.js con plantillas y también el DOM virtual. Solo quería darte un pequeño trasfondo de lo que está pasando entre bastidores cuando estamos escribiendo nuestro código. A continuación, veremos la minería de datos bidireccional utilizando una directiva modelo V.
9. Vinculación bidireccional de datos con v-model: Hemos mirado la creación de nuestra instancia de Vue y hemos agregado los objetos de datos. Quiero establecer una nueva propiedad de datos, pero esta vez la voy a utilizar con una directiva de vista llamada v-model. Las directivas tienen un prefijo -v, y las verás mucho a lo largo de este curso. Los atributos especiales proporcionados por Vue.JS, que agregan un comportamiento reactivo especial
al DOM usando v-model configura el enlace de datos bidireccional. Si no está familiarizado con el enlace de datos bidireccional, solo
significa que los datos se pueden pasar en ambos sentidos. En los ejemplos que hemos mirado hasta ahora, podemos actualizar las propiedades dentro de los objetos de datos, luego pasar estos cambios al Vue. Con el enlace de datos bidireccional, todavía
podemos hacer esto, pero también podemos actualizar los elementos Vue como los campos de
entrada y esto luego actualiza el valor de nuestros datos. Vue.JS hace que este flujo de datos bidireccional sea realmente simple, al proporcionarnos esta directiva llamada v-model. Comencemos configurando v-model en nuestros campos de entrada de texto. Si vas a nuestra página index.html, y luego localiza nuestras entradas de texto, podemos agregar v-model y luego establecer el nombre de la propiedad de datos a la que se quiere enlazar. Entonces en nuestro caso, “NuevaMetext”. A continuación necesitamos establecer NewNameText como una propiedad en los objetos de datos. De esta forma, podemos establecer el valor inicial si queremos,
y debido a que es minería de datos bidireccional también podemos actualizar el valor con el campo de entrada. Por lo tanto, en app.js fuera del objeto de eventos agregue nuestra propiedad de NewNameText: Así que voy a establecer el valor inicial de NewNameText para que sea igual a una cadena vacía. Podemos agregar un valor inicial dentro de eso si queremos. Entonces para ver el valor de NewnaMEText solo necesitamos ir a la página index.html, y luego usar la sintaxis de doble rizado para generar el NewnameText. Ahora si escribimos algo dentro del campo de entrada, vemos el valor de NewnaMetext actualizado de inmediato. Es así como podemos usar el enlace de datos bidireccional con Vue.JS. Una cosa importante a recordar es que Vue.JS no se
preocupa por el Marcador de posición o el valor inicial de los campos de entrada. El dato dentro de la instancia de Vue siempre será una prioridad y se considerará correcto sobre el valor inicial de los campos de entrada. Cubriremos utilizando modelo v pesado sobre tipos
de entrada y áreas de texto más adelante en el curso. Por ahora, sin embargo, sigamos adelante y echemos un vistazo a los manejadores de eventos y cómo
podemos tomar los nombres agregados a este campo de entrada y empujarlos a una matriz.
10. Manejo de eventos y métodos: Ahora hemos mirado el enlace de datos bidireccional. Ahora quiero pasar a capturar
el valor ingresado en los campos de entrada y luego empujarlo a una matriz. Esta matriz mantendrá todos los nombres introducidos en el campo de entrada y luego podremos enumerar todos estos nombres dentro de la sección de asistencia a continuación. Queremos ir al app.js y crear nuestra matriz vacía. Voy a agregar una nueva propiedad de datos llamada
nombre de invitado e inicialmente vamos a establecer esto en una matriz vacía. Ahora esto se crea más en index.html. Ahora necesitamos crear un manejador de eventos para empujar los nombres a esta matriz. Una vez presionado el botón de enviar, en vue.js, utilizamos la V sobre Directiva para escuchar eventos DOM. Estos eventos DOM y no específicos de view.js. Podemos utilizar cualquiera de los eventos DOM normalmente disponibles para nosotros, como OnClick, keyup, keydown, y muchos, muchos más. Nuevamente, al igual que en el último video donde usamos V-model, esta directiva también tiene el prefijo v dash. A continuación localizamos nuestros elementos de forma y luego como atributo, podemos agregar nuestro V sobre Directiva. Primero agregamos V encendido, y luego después de los dos puntos agregamos el nombre del manejador de eventos que queremos activar. En nuestro caso, vamos a escuchar el evento de envío y luego agregamos el nombre del método que queremos ejecutar una vez que se haya enviado el formulario. Después del nombre de los eventos, en nuestro caso de mitos, también
podemos agregar modificadores de eventos. Un modificador de eventos común es evitar los valores predeterminados. Si utilizas JavaScript para trabajar con entradas y formas de todos, es posible que ya hayas usado event dot prevent default. Esto detiene el comportamiento predeterminado, que para el botón enviar es refrescar la página. Pocos simplemente hace que esto sea realmente fácil para nosotros abordar el comportamiento a nuestros
manejadores de eventos simplemente agregándolo después del nombre del manejador de eventos así como este. Evitar que el valor predeterminado evitaremos que nuestros datos se pierdan cuando se actualice la página. Esto también sobre modificadores de eventos también, que cubriremos más adelante en este curso. Por ahora hemos agregado el formulario enviado como el nombre de nuestro método, pero aún no lo hemos creado dentro de nuestra instancia de vista. Hagámoslo ahora más en la app dot js. Al igual que cuando agregamos los objetos de propiedad de datos dentro de la instancia de vista, también
podemos usar la palabra clave de métodos reservados. Métodos también toma un objeto, por lo que abriremos un conjunto de llaves. Dentro de aquí podemos agregar nuestro primer método de formularios presentados. Este método se activa cada vez que se envía el formulario. formulario enviado es una función y dentro esta función podemos comenzar agregando un registro de consola, solo para comprobar esto está funcionando bien. Queremos iniciar sesión en la consola el valor del nuevo texto de nombre, cual está vinculado al campo de entrada. Esta palabra clave nos permite acceder a todas las propiedades dentro de la instancia de vista. Para acceder a la nueva propiedad de texto de nombre, utilizamos este texto de nombre nuevo de punto. Esto lo hemos visto mucho a lo largo del curso. Ahora volveremos a la aplicación y luego entraremos dentro de la consola. Podemos escribir un nombre dentro del campo de entrada, y deberíamos ver el valor que aparece dentro de la consola. Ahora sabemos que este método se está activando bien. Ahora podemos terminar nuestro método empujando el nuevo valor de nombre a la matriz de nombres de invitado. Primero eliminemos el registro de la consola, y en el lugar de esto podemos seleccionar este nombre de invitado punto, que es el nombre de nuestra matriz. Debido a que se trata de una matriz, podemos usar el método push. Entonces dentro de los corchetes, le
diremos a vue.js, Lo que queremos empujar a la matriz. En nuestro caso, queremos empujar el valor de los campos de entrada, para que podamos seleccionar nuestra palabra en este, dot new name text. Entonces para terminar este método, lo último que quiero hacer es una vez que se esté agregando un nombre a la matriz, queremos simplemente borrar el campo de entrada configurando este nuevo texto de nombre de punto para volver a establecer en una cadena vacía. Para ver los valores que están dentro de la matriz, podemos usar de nuevo la interpolación de textos, o la sintaxis de llaves dobles para generar esto dentro del index.html. Si buscamos el encabezado de nivel cuatro, que tiene el texto de ningún nombre agregado aún, podemos usar la sintaxis de la llave rizada para generar la matriz de nombres de invitado. Ahora vamos a guardar eso y nos dirigimos a Chrome y refrescamos el navegador. Ahora podemos agregar nombres al campo de entrada y ahora hemos pegado enviar. Esto ahora debería ser empujado a la matriz y luego enviado a la pantalla. Tenemos los nuevos nombres ahora agregados a la matriz, lo cual es genial. Los nombres solo se están mostrando ya que están dentro de la matriz, por lo que por el momento no se ve muy bien. Pero no te preocupes, lo arreglaremos en el próximo video. Echaremos un vistazo al renderizado de listas con For loops.
11. Procesamiento de la lista: Ahora tomamos las entradas de nombre de los usuarios y lo
presionamos a una matriz cuando se presiona el botón de enviar. Esto lo hicimos agregando un oyente de eventos
al formulario y luego llamando a un método cuando se envía el formulario. Este método dentro de la instancia Vue es algún código JavaScript que toma el contenido
del campo de entrada almacenado dentro de los nuevos textos de nombre y luego lo empuja a esta matriz GuestName. Ahora tenemos la matriz GuestName que queremos
recorrer estos nombres y luego renderizarlos a la pantalla. Vue.js, al igual que JavaScript normal puede hacer esto con un bucle for. No obstante, Vue hace que crear un bucle for sea mucho más simple y más limpio que usar Vanilla JavaScript. Todo lo que necesitamos hacer es crear una directiva v-for como esta. Si pasamos a la Página Index.html y luego nos desplazamos hacia abajo hacia la Bomba. Si buscamos el div con una clase de tarjetas-éxito redondeado y name-box, vamos a agregar nuestro for loop a este div. Por lo que agregar esto for loop es tan simple como agregar atributos, igual que antes cuando usamos v-model pero esta vez usamos v-for, y luego lo que se establece es ser igual a nombre en GuestName. Por lo que este nombre de pila depende totalmente de
ti, puedes nombrarlo lo que quieras. Es solo un alias para cada elemento de matriz que va a recorrer, guestName es nombre de la matriz de origen por lo que es el que acabamos crear antes y es salida el contenido de este for loop, usamos nuevamente la interpolación. Entonces ves llaves dobles y luego escribimos en nombre, que hemos usado en el bucle for. Entonces ahora podemos guardar esto, refrescar el navegador y ahora si subimos a las entradas, podemos empezar a agregar nombres y ahora los vemos salidos a
la pantalla pero esta vez usando un for loop v-for también se puede agregar a los elementos sobre. No nos limitamos a admitir a un div. Se puede agregar a un span, etiquetas de
párrafo o cualquier cosa que te guste. Entonces ahora vemos el contenido de la pantalla de matriz dos veces, una vez usando el bucle for y luego una del último video, donde salimos el GuestName/ con el GuestName dentro de las llaves y guardamos eso y ahora nos quedamos con el contenido del bucle for. Entonces así es lo fácil que es crear un bucle for usando Vue.js. Ahora pasemos al renderizado
condicional donde veremos si else sentencias usando Vue.
12. Procesamiento condicional en Vue: Nuestra aplicación ahora viene bien. Cuando agregamos un nombre al cuadro de entrada y presionamos “Enviar”, el nombre se agrega al div asistente abajo en la parte inferior. Como se puede ver ahí todavía tenemos el texto diciendo que aún no se han agregado nombres. Ahora queremos ver el renderizado condicional. El renderizado condicional no es tan complicado como puede sonar. Simplemente renderizará algún contenido dependiendo las circunstancias al igual que un JavaScript if-else declaraciones normales, si estás familiarizado con estas. En nuestro caso, si hay nombres dentro de la matriz de nombres de invitado, queremos mostrarlos en la parte inferior. Si no hay nombres dentro de la matriz, sólo
queremos mostrar el texto diciendo que aún no hay nombres añadidos. Podemos agregar esto dentro de la página index.html. Si localizamos el div con la clase de bloque de tarjetas, dentro de nuestro div con la clase de bloque de tarjetas, tenemos dos divs dentro de ahí. El primero es donde queremos recorrer los nombres y mostrarlos dentro de las etiquetas div. Voy a agregar un if-statement a este div. Vue simplemente nos hace realmente fácil hacer con la directiva v-if. Una vez que agregue esto como un atributo, entonces
queremos comprobar si la longitud de la matriz de nombres de invitado es mayor que cero. Si hay algún nombre dentro de la matriz, la condición se vuelve verdadera y el div se renderiza a la pantalla. De lo contrario, si la matriz está vacía entonces la condición es falsa. renderizará el siguiente div si agregamos una declaración v-else. Entonces agreguemos v-else al siguiente div. Para que el v-else funcione debe seguir inmediatamente los elementos con la directiva v-if. Si por ejemplo, hubiera otro div entre estos dos, la declaración else no funcionaría. Dale a eso un guardado y dirígete al navegador y dale una actualización a eso. Ahora veremos la declaración diciendo que aún no se agregaron nombres. Entonces si subimos a nuestro cuadro de entrada y agregamos un nombre, vemos que se agrega el nombre y también se quita el texto. Tales están funcionando bien y quiero agregar una declaración JavaScript if normal a nuestro método de formulario enviado y la razón de esto es si pasamos a nuestro formulario, y entramos un nombre, podemos ver agregado a la lista. Entonces eso está bien. No obstante, si simplemente vamos a la entrada y presionamos enter sin nombre todavía podemos ver que algo se agrega a la matriz. Aparte de esto, if-statement se asegurará de que nombre se debe ingresar antes de que se empuje a la matriz. Podemos hacer esto más en el método de formulario enviado en el archivo app.js. Dentro del cuerpo de la función construiremos el código existente con un if-statement y la condición que queremos comprobar es si esto.NEWNAMEText. La longitud es mayor que cero o si se han ingresado algunos caracteres, entonces queremos seguir adelante y empujar esto a la matriz. Vamos a darle a eso un guardado y probarlo en el navegador. Si presionamos “Enter” en la entrada del formulario, vemos que no se ha agregado ningún nombre nuevo a la matriz. Solo agreguemos un nuevo nombre y probemos que está funcionando bien. Ahí vamos así todo el p está bien. Lo último que quiero hacer en este video es mostrar cuántos invitados están atendiendo o cuántos nombres tenemos dentro de la matriz. Puedes ver si solo miras arriba los nombres, podemos ver que hay un div con la clase de cabecera de tarjeta con una sección de asistencia. Dentro de los corchetes voy a agregar las llaves dobles, luego averiguar cuántos nombres hay dentro de la matriz de nombres de invitado. Simplemente escribimos Guestname.Length y esto dará como resultado cuántos elementos hay dentro de la matriz. Guardemos eso y agreguemos algunos nombres a la matriz y veamos si esto funciona. Genial. Entonces vemos que aumentando en uno con cada nombre. Ahora esto funciona porque la longitud de punto es solo una propiedad de JavaScript y podemos agregar cualquier JavaScript que queramos dentro de estas llaves dobles. No nos limitamos a generar datos de nuestra instancia de Vue. Por ejemplo, si agregamos 8 más 10 también dentro de las llaves dobles, y luego pasamos a nuestra app podemos ver que se agrega 10 a cada número. Por lo que solo eliminaremos eso porque no es necesaria para nuestra app. Esperemos que ahora puedas ver que ahora podemos mezclar datos Vue y también Vanilla JavaScript y veremos esto más adelante en el curso pero por ahora así
funciona la renderización condicional o las declaraciones if-else en Vue JS y ya puedes realmente ver lo sencillo que es trabajar con ellos.
13. Vinculación de elementos con atributos: Ahora quiero mostrarte cómo usar una directiva llamada v-bind. Utilizamos esta directiva para trabajar con atributos HTML normales como clase, fuente, y los atributos href. Todos estos son atributos HTML normales. No obstante, no podemos pasarles datos reactivos utilizando la sintaxis de doble rizado. Entonces en el index.html, si localizamos el evento date div con la clase de card-header, intentaría agregar una nueva clase con el nombre de [inaudible] y agregamos esto usando una sintaxis de doble rizado, esto en realidad no funcionará. Entonces para demostrar esto, agreguemos una nueva propiedad sobre en app.js dentro de los objetos de datos, justo debajo de la matriz GuestName. Entonces agreguemos 'FormSubmitClass'. Usaremos esto para agregar un nuevo nombre de clase cada vez que se envíe nuestro formulario. Para cambiar el color de fondo de la tarjeta div encabezada y también el botón azul a verde, inicialmente
estableceré esto para que sea una cadena vacía. Para empezar, porque solo queremos agregar una clase cuando realmente se envíe el formulario, por lo que abajo en el método de formulario enviado, justo en la parte inferior, voy a agregar el formSubmitClass, y luego podemos establecer que esto sea algo nuevo cada vez que se presente el formulario. Por lo que voy a establecer esto para que sea una cadena de texto de Enviado. Por lo que ahora cada vez que se envíe un formulario, formSubmitClass se establecerá en el valor de Enviado. Ahora abajo en el CSS, podemos configurar la SubmittedClass para que tenga un color de fondo de verde. Entonces vamos a guardar eso e ir al navegador. Para que veas si actualizamos y luego presionamos el botón Enviar, que el color de fondo no cambia. Por lo que este es un comportamiento esperado porque mencionamos antes que las tarjetas agregan datos dinámicos como atributo. Entonces para aplicar esta clase en HTML, necesitamos hacer dos cosas. En primer lugar, necesitamos eliminar las llaves de la clase y solo tener la propiedad de datos dentro de las causaciones. Después en segundo lugar, necesitamos agregar el prefijo v-bind al nombre del atributo. Entonces ahora vale la pena señalar como se puede ver dentro de este elemento sí tenemos dos atributos de clase. Una es la clase HTML estática que todavía puedes usar y también la que acabamos de agregar con v-bind, que es reactiva y bajo el control de view.js. También podemos enlazar este atributo en más de un elemento, también. Por lo tanto, vamos a agregar el formSubmitClass al SubmitButton, también. Esto también significa que si nuestros datos cambian, la actualización
también se reflejará en todas partes . Entonces ahora vamos a darle una oportunidad a esto. Si guardamos eso y luego actualizamos el navegador y agregamos un nombre, podemos ver una vez que se envíe el formulario que sí obtenemos el nuevo color de fondo. Entonces así como un resumen rápido de lo que hemos hecho ahí, entramos en la página HTML y luego agregamos una clase de FormSubmitClass. Entonces dentro de nuestros objetos de datos, establecemos esta FormSubmitClass para que esté vacía originalmente. Por lo que esto significa que inicialmente no se agregan nuevos estilos. Después cambiamos su cadena vacía para ser el texto de Submitted, justo debajo dentro del método FormSubmitted. Por lo que cada vez que se presenta
Chris Dixon, Web Developer & Online Teacher
