El shorthand para v-bind es :
Podemos user el shorthand así:
<img :src="img" :alt="name">
Introducción
Qué aprenderás sobre Vue.js 2
El Framework Progresivo
¡Hola Vue!
Rendering Declarativo y Manipulación de DOM
Introducción al Rendering Declarativo
Expresiones y Propiedades
Atributos Dinámicos
Control de Flujo con Directivas
Renderizado de Listas
Manejo de Eventos
Clases en tiempo real
Estilos en tiempo real
Computed Properties y Watchers
Two-Way Data Binding
Ejercicios de práctica módulo 2
Sistema de Componentes
Sistema de Componentes
Crear Componentes Custom
Comunicación entre Componentes: propiedades
Comunicación entre Componentes: eventos
Slots
Ciclo de Vida y Hooks
Antes de continuar, ¡un repaso!
Ejercicios de práctica
Ambiente de Desarrollo
VS Code + Vetur / Chrome / Firefox + Dev Tools
Qué es, cómo usarlo y aplicaciones profesionales con el CLI
Single File Components
Funcionalidades, UI y comandos básicos
Platzi Exchange
Introducción y Setup de Tailwind CSS
Primeros Componentes
Introducción y Setup de Vue Router
Introducción a Fetch y API de Coincap
Mejorar la UI con filtros
Rutas dinámicas
Navegación Programática
Utilizar componentes de terceros
Problemas de Reactividad
Mejorar proyecto: filtros y ordenar
Mejorar proyecto: links y conversión
¡A producción!
Despliegue de la app a Netlify
Rendering Declarativo y Manipulacion de DOM
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
10 Días
21 Hrs
49 Min
49 Seg
Atributos Dinámicos
6/38Recursos
Aportes 57
Preguntas 11
Ordenar por:
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.
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=“img” 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í “image” en lugar de “img” 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:
-
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.
<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 “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">
<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 “v-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
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 …o 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.
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]=“propiedad 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?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?