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
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
Paga en 4 cuotas sin intereses
Termina en:
Aportes 34
Preguntas 7
en este video se habla de como podemos modificar el atributo class de una etiqueta usando la directiva v-bind: usando operador ternario, o validando con objetos.
<li
v-bind:class="{orange: p.price === price, red: p.price < price, green: p.price > price}"
v-for="(p, i) in pricesWithDay"
v-bind:key="p.day">
{{ i }} - {{ p.day }} - {{ p.price }}
</li>```
Clases en tiempo real:
Usando Alternary
<h1 v-bind:class=“changePercent > 0 ? ‘green’: ‘red’”>{{name}} </h1>
Usando Objetos
v-bind:class="{orange:p.value==price, red:p.value<price, green:p.value>price}"
El uso de v-bind:class es completamente combinable con class, por lo tanto puedes tener un v-bind:class junto con una clase y no genera error.
Para el uso de cualquier atributo que use v-bind, se le puede pasar un objeto y será interpretado como una serie de condicionales, de esa forma podemos tener varios if’s ordenados y Vue decidirá con cuál quedarse según la condición que pongamos
Me estoy sintiendo muy a gusto con Vue.
Se pueden generar condiciones para aplicar determinadas clases a los elementos de nuestro DOM. Para ello usamos la directiva v-bind.
v-bind:class="changePercent > 0 ? 'green' : 'red'"
También puede hacerse a través de objetos:
v-bind:class="{orange: p.value === price, red: p.value < price, green: p.value > price}"
El uso de v-bind:class es totalmente combinable con class sin v-bind, para definir comportamientos por default.
8500 el precio del bitcoin, quiero llorar!!
CLASS (atributo de los estilos) con VUEJS
- Se puede utilizar v-bind:class="variable_vue = 'clase'"
- o se puede utilizar con objetos v-bind:class="{'clase' : vue_variable}"
- Tambien se puede usa v-bind:class="" y class="" al mismo tiempo en un componente de htmlWuao por ahora esto luce muy sencillo!
Los atajos como: @click en vez de v-on:click, son una buena práctica??
Con la directiva v-bind es posible añadir y quitar clases en elementos HTML.
Para esto hay que añadirle a v-bind :class y dentro la clase que queramos añadir, se puede combinar con el operador ternario para definir una condición.
Otra forma de definir condiciones es mediante un objeto, donde la clave será la clase que se aplicará y el valor la condición:
Se pueden crear las condiciones necesarias dentro del objeto como una propiedad más.
Las clases que se añadan con Vue pueden convivir perfectamente con clases añadidas de la forma común en HTML o CSS.
Excellent!!!
Estoy demasiado sorprendida de lo sencillo que es Vue. ¡Excelente clase!
Número aleatorio para que cambie el changePercent
changePercent: Math.floor(Math.random() * (10 - -10) + -10)
Podemos usar condicionales para mostrar distintos estilos en la UI con las clases de CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primera Vue</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<img
v-on:mouseover="toggleShowPrices"
v-on:mouseout="toggleShowPrices"
v-bind:src="img"
v-bind:alt="Bitcoin"
>
<h1
v-bind:class="changePercent > 0 ? 'green' : 'red'">
{{ name }}
<span v-if="changePercent > 0">🤑</span>
<span v-else>🤯</span>
<button v-on:click="toggleShowPrices">
{{ showPrices? '🙈' : '🐵' }}
</button>
</h1>
<ul v-show="showPrices">
<li
class="uppercase"
v-bind:class="{
green: p.value > price,
orange: p.value === price,
red: p.value < price,
}"
v-for="(p, index) in pricesWithDays"
v-bind:key="p.day">
{{index}} - {{ p.day }} - {{ p.value }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
img {
width: 100px;
}
.red {
color: red;
}
.green {
color: green;
}
.orange {
color: orange;
}
.uppercase {
text-transform: uppercase;
}
new Vue({
el: '#app',
data() {
return {
name: 'Bitcoin',
img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
changePercent: 10,
price: 8400,
pricesWithDays: [
{ day: 'Lunes', value: 8400 },
{ day: 'Martes', value: 7900 },
{ day: 'Miercoles', value: 8200 },
{ day: 'Jueves', value: 9000 },
{ day: 'Viernes', value: 9400 },
{ day: 'Sabado', value: 10000 },
{ day: 'Domingo', value: 10200 },
],
showPrices: false,
}
},
methods: {
toggleShowPrices() {
this.showPrices = !this.showPrices;
}
}
});
con base*
En Vue.js, una directiva es el término usado para referirse a algunos atributos especiales, identificados con v-, que le indican a Vue.js que debe realizar ciertos cambios en un elemento del DOM, cada vez que la expresión asociada con dicha directiva cambie.
Clases en Tiempo Real
Usamos la directiva v.bind, pero lo que se hace es utilizar una ternary dentro del atributo class, para determinar con base a una decisión cual es la clase de CSS que se quiere aplicar, las clases lo único que hacen es cambiar el color del texto.
<h1
v-bind:class="changePercent > 0 ? 'green' : 'red'"
>
Cuando se utiliza v-bind con un objeto se determina es que una clase será aplicada si se da una condición
<li
v-bind:class="{
orange: p.value === price,
red: p.value < price,
green: p.value > price
}"
v-for="(p, i) in pricesWithDays"
v-bind:key="p.day"
>
{{ i }} - {{ p.day }}- {{ p.value }}
</li>
El uso de v-bind:class es perfectamente combinable con class sin v-bind, con ellas se pueden definir el comportamiento default para las clases de un elemento:
<li
class="uppercase"
v-bind:class="{
orange: p.value === price,
red: p.value < price,
green: p.value > price
}"
v-for="(p, i) in pricesWithDays"
v-bind:key="p.day"
>
{{ i }} - {{ p.day }}- {{ p.value }}
</li>
Se están aplicando el uppercase que es un text transform sobre el elemento HTML, y se aplican también los bindings en los atributos class hechos con Vue. Se pueden combinar las clases Default con las clases dinámicas que se vayan agregando.
La directiva v-bind es la misma que ya se había revisado, que sirve para modificar los elementos o atributos HTML, como un link, source o alt, se está haciendo de la misma manera, pero con las clases se tienen diferentes consideraciones, se puede utilizar una ternary, un string o un objeto.
alternari son validar en una linea
No sabía que al tener en v-for el mismo nombre de la variable en price en vez de solo p, entra en conflicto y no reconoce los estilos.
Forma incorrecta:
<li
v-bind:class="{ orange: price.value === price, red: price.value < price, green: price.value > price }"
v-for="(price, index) in pricesWithDays"
:key="price.day">
{{index}} - {{price.day}}: {{ price.value }}
</li>
Forma correcta:
<li
v-bind:class="{ orange: p.value === price, red: p.value < price, green: p.value > price }"
v-for="(p, index) in pricesWithDays"
:key="price.day">
{{index}} - {{p.day}}: {{ p.value }}
</li>
Sabes que el curso es viejo cuando bitcoin vale 8500
Vengo del futuro, espero que todos hayan podido holdear bitcoin 🤑
Por si cambiar el texto a naranja, verde o rojo no te funciona, en mi caso era porque las clases con mas de una palabra van entre comillas simples
:class="{'text-orange-500': p.value == price, 'text-red-500': p.value < price, 'text-green-500': p.value > price}"
Estoy haciendo esto en codepen con tailwind
Que emoción! Hasta ahora toda ha sido tan claro y fácil con Vue que quiero pasar todos mis proyectos de JS a este framework
En el ejemplo al hacer el binding a la clase no se le agrego comillas simples, si tira error agreguen las comillas a la clase.
Aqui mi ejemplo
<div v-bind:class="{‘link-success’:current_day === pd.day}" class=“fw-bold”>{{pd.day}}</div>
Sorprendido 😮
Hasta me dan ganas de modificar mis Proyectos y meterles Vue!!!
todo esta genial!!! pero por que usan ese tipo de tema… no se aprecia bien, y lastima los ojos!!!
Que interesante 😃 ❤️
Las clases que se mencionan en este video están definidas en el styles.css por si alguien se lo pregunta. (Lo clarifico por que en el video no se muestran estas clases)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?