Creación de aplicaciones reactivas con Vue.js y HTML

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:41

Creación de aplicaciones reactivas con Vue.js y HTML

Curso Básico de Vue.js 2

Clase 3 de 38

Clase 3 / 38

Recursos

¿Cómo crear una aplicación básica en Vue.js?

Construir una aplicación en Vue.js puede ser un proceso sencillo y gratificante. En esta guía, te acompañaremos en la creación de tu primera aplicación básica utilizando Vue.js, partiendo desde la conceptualización del problema hasta la implementación del código necesario para resolverlo. Como herramienta de soporte, utilizaremos CodeOpen, que facilita la creación de ejemplos básicos de HTML y JavaScript sin necesidad de instalaciones complejas.

¿Cuál es el problema que queremos resolver?

Antes de comenzar a programar, es esencial entender el problema que queremos resolver. Buscamos actualizar la vista (HTML) basándonos en los cambios en el JavaScript asociado. A través de Vue.js, lograremos un enlace entre datos y vista, permitiendo actualizaciones automáticas, algo que JavaScript por sí solo no ofrece de manera nativa.

¿Cómo interactuar con el DOM usando JavaScript?

Inicialmente, se puede cambiar el contenido de un elemento HTML utilizando JavaScript puro. Supongamos que tenemos un elemento <h1> y queremos que su texto refleje el valor de una propiedad JavaScript. Aquí un breve ejemplo:

<h1 id="title">Título</h1>
<script>
  let title = "Hola";
  document.getElementById("title").innerText = title;
</script>

En este ejemplo, al modificar la variable title, es necesario volver a ejecutar el script manualmente para que el cambio se refleje en la interfaz. Este enfoque no es eficiente para aplicaciones dinámicas y es allí donde Vue.js entra en juego.

¿Cómo solucionar la reactividad con Vue.js?

Vue.js nos permite crear aplicaciones reactivas conectando el DOM y los datos. A continuación, te mostramos cómo crear una aplicación Vue.js usando CodeOpen:

Configuración inicial de Vue.js: En CodeOpen, selecciona Vue.js como dependencia. Esto facilita la importación de bibliotecas, sin necesidad de instalaciones adicionales.
Instancia de Vue.js:

Primero, define una instancia de Vue usando su constructor, el cual necesita un objeto de configuración:
```
const app = new Vue({
  el: '#app',
  data() {
    return {
      title: 'Hola Vue'
    }
  }
});
```
- el: Es un selector pseudo CSS que determina el elemento del DOM donde se "montará" Vue.
- data: Es una función que devuelve un objeto con propiedades reactivas (en este caso, title).
Vinculación de datos en la vista:

Para mostrar la propiedad title en HTML, usa doble llaves {{ title }} en el HTML:
```
<div id="app">
  <h1>{{ title }}</h1>
</div>
```

¿Cómo probar y actualizar los datos de forma dinámica?

Vue.js simplifica la actualización y renderización automática de vistas. Puedes probarlo utilizando la consola de JavaScript en CodeOpen:

app.title = "Nuevo título";

Este comando muestra inmediatamente el nuevo valor en la página sin necesidad de intervención manual en el DOM.

En resumen, Vue.js establece un vínculo claro y eficiente entre datos y vista, permitiendo desarrollos dinámicos y reactivos. Este es solo el comienzo, y a lo largo del curso profundizaremos en expresiones y tipos de contenido que se pueden utilizar dentro de las aplicaciones Vue.js. Continúa explorando, que el mundo de la programación te espera con puertas abiertas.

David Behar

Hace 7 años

Mi primer app en Vue

Tenemos que envolver nuestro html en un selector que luego vamos a utilizar

<div id="app">
  <h2>{{ title }}</h2>
</div>

Para crear una app la inicalizamos creando una new Vue teniendo como argumento un objeto con el elemento el que es el elemento html al que hace referencia y la data que es la información que puede utilizar.

const app = new Vue({
  el:'#app',
  data () {
      return {title:'Hola Vue'}
  },
})

Para este caso nuestra aplicación regresará un:

Hola Vue

Pero resulta que creamos una variable con nuestra app, y le podemos cambiar el valor:

app.title = "Adios Vue"

Si hacemos ésto nos cambiaría el contenido html al valor Adios Vue

Adiós Vue

Ruth Lucy Campos Huamantica

Hace 6 años

Buen resumen, genial!!!

Comentarios (67)67 comentarios

hector vicencio reyes

Kevin Barreto

Jimmy Buriticá Londoño

David Daniel Castillo Nava

VERDUGO CHAVEZ DIANA ALEJANDRA

Ricardo Celis

Profesor

Diego Camino Reinoso

Usuario anónimo

User

jonathan sanchez

Ricardo Magaña

Wandy Rafael Santana Evangelista

Jose Luis Barboza Gonzales

Roberto Shirásago Domínguez

Alejandro Luján

Ricardo Arévalo

Enzo Ivan Valdez

Rodrigo Ramos Xochiteotzin

Hace 5 años

Juan Pablo Jimenez

Renato Reyes Fuentes

Hace 3 años

Yurley Solimer

Nacho Anaya

Armando Martínez

Esteban Molina Gomez

Miguel Angel Reyes Moreno

Luis Alejandro Vera Hernandez

José Luis Alva Chira

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Creación de aplicaciones reactivas con Vue.js y HTML