No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Atributos Din谩micos

6/38
Recursos

Aportes 57

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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

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=鈥渧alor鈥 vinculando el atributo a nuestro objeto de vue, creando en data(), recordando que dentro del valor podemos poner c贸digo js.

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'
    }
})

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

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

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.

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

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=鈥渋mg鈥 v-bind:alt="name"
As铆 podemos definir valores din谩micos para estos atributos.

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铆 鈥渋mage鈥 en lugar de 鈥渋mg鈥 dentro de src xD

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:

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.

<aside>
馃巸 <script src=鈥https://cdn.jsdelivr.net/npm/vue/dist/vue.js鈥></script>

</aside>

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 鈥渢itle 馃懡鈥.

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

Ahora vamos a nuestro HTML y definimos el div padre con el id 鈥渁pp鈥:

<!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">
    <h1>{{ name }}</h1>
  </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">
  <h1>{{ name }}</h1>
</div>

<aside>
馃挕 Vue proporciona abreviaturas especiales para dos de las directivas m谩s utilizadas聽
v-bindy聽v-on las veremos m谩s adelante.

</aside>

excelente, me esta gustando mucho hasta el momento el curso

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

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

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 鈥渧-nombreDirectiva鈥

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.

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

Muy f谩cil Vuejs

Si todo lo que est茅 por fuera del tag de App va a quedar fuera del scope, 驴Es buena idea poner a vue en la etiqueta body?

Estos atributos dinamicos de igualmanera aceptan expresiones JavaScript validas

excelente explicaci贸n 馃挌

excelente video

Las directivas es la herramienta que nos ofrece Vue para manipular el DOM, podemos utilizar diferentes tags en nuestros elementos HTML.

Las directivas de Vue siempre se escriben con v corta y gu铆on y el nombre de la directiva, por ejemplo:

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

Directivas:
Son las herramientas que nos brinda Vue para poder manipular el DOM, de manera DECLARATIVA

Es decir: podemos usar diferentes tags de HTML q nos van a permitir definir diferentes comportamientos (cambiar elementos, ocultar, habilitar o inhabilitar, todo de manera dinamica).

En esta clase vimos el v-bind

recordando!!!

Las directivas son las herramientas que nos ofrece Vue para manipular el DOM y manipularlo de forma declarativa, podemos utilizar varios tags dentro del HTML que nos permitir谩n definir diferentes comportamientos, como cambiar los valores de un elemento HTML, ocultar un elemento o eliminarlo del DOM.

Las directivas de Vue se escriben con:

v-NombreDeLaDirectiva

v-bind: Permite definir valores din谩micos para los atributos

v-bind:src="img"

jquery -> attr

Arreglen por favor los archivos, no estan para nada vacios

f

Hola, me gusta mucho la configuraci贸n del profesor para ver de manera clara la aventaci贸n y el inicio y final de las llaves, pero no encuentro en que parte se configura alguien sabe?

con la directivas podemos manipular los datos de forma declarativa

las directivas son la herramientas de vue.js para manipular el dump

los atributos son importante para el manejo de data

C贸digo

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

Directiva v-bind, que es usada para atar din谩micamente un atributo HTML a una expresi贸n de Vue, as铆 como a clases y estilos de CSS de los elementos de nuestra aplicaci贸n, lo que nos permitir谩 manipularlos din谩micamente.

ATRIBUTOS DINAMICOS / DIRECTIVAS

- Herramientas que nos da vue para que los atributos HTML tengan valores dinamicos
- v-bind y el atributo de html permiten que se les agregue una variable de VueJS!!!!!, ejemplo
    <img v-bind:src="img" v-bind:alt="name"/> (img y name son variables declaradas en data de vue)

En mi trabajo llevamos un proyecto con VueJS, cuando llegue ya lo hab铆an comenzado y pues hay muchos cosas que no conoc铆a, esta es una de ellas!!, esta genial

馃槈

Directivas v-bind: para los atributos de los Tags HTML

Mis primeros pasos en Vue y no se por qu茅 tengo la idea que es lo contrario a React, en React es: HTML en JavaScript (JSX) y en Vue es: JavaScript en HTML jajaja

El identificador App puede ir en un container, main 鈥 solo por convenci贸n se trabaja con el div?

v-bind:attributo para asignar valores din谩micos

Alguien mas tiene problemas al ver este video?

Veo a muchos compa帽eros indicando que les fallo el video, por mi parte me funcion sin problemas.

Cada ves esta mas interesante el curso la verdad

Compa帽eros, para los que tienen problema con el v铆deo, solo basta con cambiar el servidor para que funcione correctamente.

Hay una extension para chrome y firefox que nos muestra vue en la consola
bastante paractico

si quieren guardar la ruta de una imagen local.

data: () => ({
     img: require('../assets/logo.png')
})

Atributos Din谩micos

Nos permiten poner atributos din谩micos provenientes de propiedades del estado de Vue a los elementos html, esto lo hacer haciendo uso de algo llamado directivas, las directivas es la herramienta que nos da Vue para manipular el DOM, para manipular los atributos de un elemento HTML usamos la directiva (v-bind:) y tiene una sintaxis como la siguiente: v-bind:[propiedad del elemento]=鈥減ropiedad en el estado鈥. As铆 de la siguiente manera.

app.js

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

index.html

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

Tambien existe una forma abreviada para v-bind: y es solo los dos puntos (:img, :alt) antes del nombre del atributo.
Espero les sirva.

mediante las directivas podemos manipular el DOM
tenemos el simple para poner mensajes {{}} ->interpolaci贸n
-v.bind->para trabajar con las etiquetas y propiedades
-y otras que iremos viendo

Me encanta Vue.js 馃槢

v-bind

chicos, que extensi贸n recomiendan para VSC con el desarrollo de vue?

Se interesante el contenido hasta ac谩.

Donde puedo descargar los recursos?

Como haces para que el indicador parpadeante se vea acostado y no parado y para que aparezcan esos puntos en el c贸digo?