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

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:006:44

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

Curso Básico de Vue.js 2

Clase 6 de 38

Clase 6 / 38

Recursos

Los atributos HTML representan una herramienta fundamental en el desarrollo web, permitiendo definir propiedades específicas de los elementos en una página. Comprender cómo asignar dinámicamente estos atributos es crucial para una página interactiva y moderna. Hoy nos sumergiremos en el universo de Vue.js para explorar cómo esta librería de JavaScript enriquece nuestra capacidad de interactuar con los atributos HTML, y cómo trabajar en un entorno local mejora significativamente nuestro flujo de trabajo.

¿Qué ofrece vue.js para manipular atributos html?

Vue.js proporciona una forma efectiva de añadir interactividad a los atributos HTML a través de directivas que nos permiten insertar valores dinámicos. Un ejemplo es la directiva v-bind, que se utiliza para actualizar los atributos de un elemento HTML con datos reactivos.

¿Cómo se trabaja localmente con vue.js?

Modernizar el flujo de desarrollo es esencial y Vue.js no es la excepción. Al pasar a un entorno local, nos despedimos de las limitaciones en línea y damos la bienvenida a una mayor flexibilidad y control.

Configurando el entorno local:

Selecciona un editor de texto, como Visual Studio Code.
Descarga los archivos necesarios y ábrelos en tu editor de texto preferido.
Para conectar Vue.js, copia el script oficial desde la documentación e incorpóralo a tu archivo index.html.

Creación de una instancia vue.js:

Dirígete al archivo de JavaScript, por ejemplo app.js.
Crea una nueva instancia de Vue y pásale un objeto con las propiedades necesarias.

¿Cómo se asignan valores dinámicos a los atributos html en vue.js?

El proceso para asignar valores dinámicos es sencillo pero poderoso. Vue.js hace uso de directivas especiales que transforman la forma en que los datos y el DOM interactúan.

Pasos para asignar valores dinámicos:

Elimina cualquier valor estático que hayas definido en tus datos.
Define las propiedades reactivas que deseas utilizar, por ejemplo, el nombre de una criptomoneda y la URL de su imagen.
Utiliza v-bind o el atajo : para asignar valores dinámicos a los atributos como src y alt en una imagen.

¿Qué son las directivas en vue.js y cómo se utilizan?

Las directivas son una característica de Vue.js que permiten manipular el DOM de manera declarativa y reactiva. Las directivas como v-if, v-for y v-bind son fundamentales en Vue.js para controlar el flujo y el comportamiento de los elementos en la página.

Ejemplo de uso de directivas:

Usa v-bind:src para enlazar la URL de una imagen a la propiedad src del elemento <img>.
Usa v-bind:alt para que el texto alternativo de la imagen sea dinámico y dependiente de tus datos.

Vue.js nos brinda el poder de crear aplicaciones web interactivas y dinámicas con una curva de aprendizaje amigable. A medida que avances en el curso, descubrirás más sobre las diferentes directivas y cómo aplicarlas eficazmente. Además, recuerda que el aprendizaje continuo es clave, y trabajar con herramientas como Vue.js ampliará tus habilidades como desarrollador. Mantén la curiosidad activa y sigue explorando todo lo que Vue.js puede ofrecerte para llevar tus proyectos al siguiente nivel.

Carlos Roberto Villatoro Barrios

Hace 5 años

Atributos Dinámicos

Vamos a ver como hacer para que nuestro HTML tenga atributos dinámicos, los atributos se refiere las diferentes propiedades que pueden tomar los tag.

En este capitulo vamos a comenzar a trabajar en local con nuestro propio editor de texto, vamos a crear un ejemplo en el cual vamos a modificar estos atributos. Para esto descargamos los archivos base del capitulo:

HTML

https://static.platzi.com/media/tmp/class-files/git/curso-basico-vuejs/curso-basico-vuejs-master/index.html
CSS
JS
Bitcoin Logo

!

Por el momento vamos a centrarnos en el HTML, en donde crearemos la interfaz para el usuario, ahora debemos agregar el CDN de Vue.js para poder trabajar con el.

ahora vamos a dirigirnos al archivo app.js y creamos la instancia de Vue.js, con propiedad el apuntado al id app y creamos la propiedad data la cual retorna un objeto en el que tendremos a title con el valor "title 👽".

new Vue({
  el:'#app',
  data(){
    return{
      title: 'Title 👽'
    }
  }
})

Ahora vamos a nuestro HTML y definimos el div padre con el id "app":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Curso Basico de Vue.js | Platzi</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  
  <!-- Div donde vivira nuestra app -->
  <div id="app">
		{{ title }}
  </div>
  <!-- /Div donde vivira nuestra app -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>

En este caso estamos colocando la expresión title para poder hacer la prueba de que todo este funcionando correctamente.

Ahora nos enfocaremos en crear el ejemplo de este capitulo colocando atributos dinámicos:

para esto volvemos al archivo app.js y creamos las siguientes propiedades:

new Vue({
  el:'#app',
  data(){
    return{
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
    }
  }
})

Ahora vamos al index y estas propiedades las vamos a imprimir de la siguiente forma:

<div id="app">
    <img src="img" alt="name">
    <h2>{{ name }}</h2>
  </div>

Esto no funciona ya que no esta tomando el valor de la propiedad img, para poder imprimir el valor de la expresión img haremos uso de las directivas.

Directivas

Es la herramienta que nos ofrece vue.js para poder manipular el DOM, podemos utilizar diferentes tags dentro de nuestros elementos de HTML que nos van a permitir definir diferentes comportamientos (cambiar los valores de un elemento HTML de forma dinámica, ocultar un elemento HTML, eliminar del DOM un elemento HTML, etc.).

Las directivas siempre se escribe de la siguiente manera:

<aside> 🎃 v **-** {Nombre de la directiva} **:** {atributo de HTML} </aside>

<div id="app">
  <img v-bind:src="img" v-bind:alt="name">
  <h2>{{ name }}</h2>
</div>

!Untitled

<aside> 💡 Vue proporciona abreviaturas especiales para dos de las directivas más utilizadas `v-bind`y `v-on` las veremos más adelante. </aside>

fidel angel ochoa

Hace 5 años

creo que con Vue 3.0 cambio la manera de integrar vue en el proyecto, el codigo funciona pero la linea que escribio en el index no la encontre en la documentacion actual, segun veo cambio la manera oficial.

Comentarios (68)68 comentarios

Sandra Menendez Alonso

Hace 7 años

Nacho Anaya

Profesor

Miguel Jimenez

Ricardo Celis

Kevin Bueno

Hace 6 años

David Behar

VERDUGO CHAVEZ DIANA ALEJANDRA

César Ernesto Rivas Martínez

David Alejandro Abreu Abreu

Mauricio Costanzo

Daniel Isidro Duran

Kevin Barreto

Luis Caballero

Jimmy Buriticá Londoño

Carlos A. Mignone

Karla

Carlos Eduardo Gomez García

Roberto Shirásago Domínguez

Aarón González

Héctor Aguilar Mogollan

Mirton Flores

Juan Carlos Gutierrez

Juan Pablo Jimenez

David Campos

Jean Nuñez

Jhon Alexander Romero Gonzaga

Rafael de Jesús León Alfaro

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

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