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

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

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>

<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 :)