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

Clase 6 de 38 • Curso Básico de Vue.js 2

Resumen

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.

Sandra Menendez Alonso

student•

El shorthand para v-bind es : Podemos user el shorthand así:

<img :src="img" :alt="name">

Nacho Anaya

teacher•

Spoiler :P

Miguel Jimenez

student•

Buen Spoiler hahaha yo si me pregunte por que no funcionaba y ley tu comentario antes de seguir.

Ricardo Celis

teacher•

https://cryptologos.cc/logos/bitcoin-btc-logo.png

Kevin Bueno

student•

héroe

David Behar

student•

Binding de Atributos html

Los atributos en html son las propiedades que puede tener una etiqueta, mismos que se pueden vincular (bind) a variables javascript con directivas.

Las directivas nos permiten vincular el dom con javascript de manera declarativa, para hacer un data binding podemos utilizar la directiva v-bind:atributo="valor" vinculando el atributo a nuestro objeto de vue, creando en data(), recordando que dentro del valor podemos poner código js.

VERDUGO CHAVEZ DIANA ALEJANDRA

student•

¡Buen resumen!

César Ernesto Rivas Martínez

student•

Solo como nota, no es obligatorio que data() retorne un objeto, también se puede hacer de la siguiente manera.

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

Nacho Anaya

teacher•

Hola, en realidad lo que decis es cierto pero es una muy mala practica ya que estarias creando componententes con estados compartidos. Data tiene que ser una funcion para que cuando vos reutilices tu componente, cada uno tenga su propio estado y no comparta informacion con otras instancias.

David Alejandro Abreu Abreu

student•

Exacto, no es buena practica, aquí tienes un ejemplo en la documentación oficial.

Mauricio Costanzo

student•

N o t a s :

Las directivas son las herramientos que nos da Vue para poder manipular el DOM.
Ejemplo: v-if, v-show, v-bind, v-for

Daniel Isidro Duran

student•

Podemos abreviar las directivas de VueJS de forma simple, en vez de escribir:

<img v-bind:src="img" v-bind:alt="name">

podemos simplemente escribiendo dos puntos : antes de la propiedad asi:

<img :src="img" :alt="name">

Kevin Barreto

student•

Alguien tiene problemas con este video? Se para el video al minuto 3 y ya no funciona. Probe en varios navegadores e incluso otra PC pero nada.

Luis Caballero

student•

Tambien tengo problemas para ver el video.

Jimmy Buriticá Londoño

student•

27-jul-2020 No funciona el video.

Carlos A. Mignone

student•

Muy buenas las clases Nacho! De lo mejor de Platzi, sin dudas !

Karla

student•

Las directivas es la herramienta que nos ofrece Vue para poder manipular el DOM y para poder manipularlo de forma declarativa. Es decir, que podemos utilizar diferentes tags dentro de nuestros elementos HTML.

Las directivas de Vue siempre se escriben con v corta, guión y el nombre de la directiva.0 Ejemplo: v-bind:src="img" v-bind:alt="name" Así podemos definir valores dinámicos para estos atributos.

Carlos Eduardo Gomez García

teacher•

Increíble, Vue es tan inteligente que si detecta que la variable que pusiste no existe, simplemente no pone el atributo, me di cuenta porque escribí "image" en lugar de "img" dentro de src xD

Roberto Shirásago Domínguez

student•

¿Que es la CDN?, se que es una url (o eso parece)

Aarón González

student•

¡Hola, Roberto! Una CDN son un conjunto de servidores ubicados en diferentes puntos de una red que contienen copias locales de ciertos contenidos que están almacenados en otros servidores, de forma que sea posible servir dichos contenidos de manera más eficiente.

En este caso, en vez de instalar la librería o framework en tu proyecto, cada que se cargue tu página esta consultará los datos del CDN y los traerá para ser usados.

fidel angel ochoa

student•

no encontre la pagina que el profesor muestra para 'copiar' la linea url del CDN, ahora con Vue 3 parece que esto cambio. sin embargo el codigo que esta en el archivo(que viene completo) funciona, me quedo con la duda de como hacer lo mismo pero con la nueva version de Vue.js. Si los archivos vinieran vacios realmente, no podria haber completado lo explicado en esta clase ya que no supe como 'instalar' Vue dentro del archivo.

Carlos Roberto Villatoro Barrios

student•

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

student•

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.

Héctor Aguilar Mogollan

student•

excelente, me esta gustando mucho hasta el momento el curso

Mirton Flores

student•

Los archivos para descargar están completo NO! vacios como los muestras.

fidel angel ochoa

student•

hacer la referencia a Vue en el archivo 'index.html' tal como lo hace el profesor no la pude encontrar en la pagina, parece que esto cambio con Vue 3,¿Por que funciona? el archivo viene ya con todo el codigo y si no fuera por eso no podria haber completado esta clase. ¿Como hacer lo mismo con Vue 3?

Juan Carlos Gutierrez

student•

Creo que ya no está disponible el CDN de vue desde vuejs .org

Juan Pablo Jimenez

student•

6.-Atributos Dinámicos

Para poder usar las imágenes tenemos que usar algo llamado directivas, que son la herramienta que nos ofrece Vue para poder manipular el DOM y para poder manipularlo de forma declarativa, es decir, podemos usar diferentes tags dentro de nuestros elementos HTML que nos van a permitir definir diferentes comportamientos, por ejemplo, cambiar los valores de forma dinámica, ocultar, eliminar elementos.

En vue siempre se escriben con "v-nombreDirectiva"

David Campos

student•

Los atributos son las diferentes propiedades que pueden tomar los tags, por el ejemplo, el href para las etiquetas a, el src para script, etc.

Para trabajar con Vue hay que instalarlo, existen diferentes maneras pero por ahora lo haremos con el script.

Para poder sacar valores desde el código JS al código HTML y usarlo en propiedades de etiquetas es necesario usar directivas.

Las directivas es la forma en la que Vue manipula el DOM de forma declarativa. Para hacer uso de estas, hay que usar ciertas propiedades dentro de las etiquetas HTML.

En este caso se usa la directiva v-bind, para que puedan usar los valores de el método data en los atributos HTML.

Jean Nuñez

student•

v-bind es una directiva de mension corta, con los dos puntos (:) es una forma para vue de usar los atributos

Jhon Alexander Romero Gonzaga

student•

Muy fácil Vuejs

Rafael de Jesús León Alfaro

student•

Es por eso que poco a poco va ganando más y más terreno sobre React y Angular :)

<!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>

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

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