No tienes acceso a esta clase

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
5H
34M
44S

Estilos reactivos

12/23
Recursos

Aportes 25

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Los estilos utilizados:

<style>
        html, body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }
        .closed {
            background-color: #eca1a6;
        }
        .open {
            background-color: #b5e7a0;
        }
    </style>

As铆 aplique lo visto en la clase鈥

Al usar ReactJs se me esta haciendo mas f谩
cil entender el funcionamiento b谩sico de VueJs. El objeto data es parecido al hook useState, la propiedad watch a useEffect.

Adem谩s de la falicidad que da vue para manejar estilos entre otras cosas. sigo aprendiendo de esos errores de novatos!! que hayan m谩s errores para saber como resolverlos en el futuro.

Todo esto me recuerda al curso de WebComponents鈥 aunque aqui en vue es mucho mas facil, hasta ahora :3

Otra manera de hacerlo ser铆a crear un m茅todo dentro de methods obviamente, al cual podr铆amos llamar toggleDoor(), en el cual ponemos la l贸gica de 鈥渢his.open = !this.open鈥, y tras esto, escribir la l贸gica de los estilos css:

const vm = Vue.createApp({
            data(){
                return {
                    text: "Puerta cerrada",
                    open: false,
                    styles: {
                        backgroundColor: "#eca1a6",
                    },
                };

               
            },

            methods: {

                toggleDoor(){
                    this.open = !this.open;

                    this.open ? this.styles.backgroundColor = "#b5e7a0" : this.styles.backgroundColor = "#eca1a6"
                }

            },

            watch: {
                open(value){
                    if (value){
                        this.text = "Puerta abierta";
                    }
                    else{
                        this.text = "Puerta cerrada";
                        
                    }
                }
            },

            template: `
                <div class="container" :style="styles">
                    <h2>{{text}}</h2>
                    <button @click="toggleDoor">{{open ? "Cerrar" : "Abrir"}}</button> 
                </div>
                
            `
        }).mount("#app");

Creo que Vue es increible, yo he trabajado con React y la verdad me fue un poco dificil entender la reactividad al principio, pero con Vue es super facil de comprender.

Como creo que todos estan haciendo el reto de ponerle una imagen al codigo, quise intentarlo y este fue mi codigo (Aunque reutilice los estilos de la clase)

<!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>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <main id="app"></main>

    <script>
        const vue = Vue.createApp({
            data() {
                return {
                    text: "La puerta esta cerrada",
                    isOpen: false,
                }
            },
            watch: {
                isOpen(current) {
                    if(current) {
                        this.text = "La puerta esta abierta"
                    } else {
                        this.text = "La puerta esta cerrada"
                    }
                }
            },
            computed: {
                image() {
                    return this.isOpen ? "https://us.123rf.com/450wm/grebeshkovmaxim/grebeshkovmaxim1904/grebeshkovmaxim190400553/123026095-abrir-puerta-realista-aislada-en-sala-blanca.jpg?ver=6" : "https://previews.123rf.com/images/byzonda/byzonda1505/byzonda150500089/40505435-blanc-porte-ferm%C3%A9e-avec-cadre.jpg";
                },
                
                bgColor() {
                    return this.isOpen ? 'open' : 'closed';
                },
                
                label() {
                    return this.isOpen ? 'Close' : 'Open'
                }
            },
            methods: {
                changeOpen() {
                    return this.isOpen = !this.isOpen
                }
            },
            template: `
            <div class="container" :class="bgColor">
                <h2>{{text}}</h2>
                <img :src="image"/>
                <button type="button" @click="changeOpen">{{ label }}</button>
            </div>
            `
        }).mount('#app');
    </script>
    
    <style>
        html, body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }

        img {
            height: 400px;
            width: 400px;
            border-radius: 12px;
        }

        .open {
            background-color: rgb(100, 226, 100);
        }

        .closed {
            background-color: rgb(219, 102, 102);
        }
    </style>
</body>
</html>

Maravilloso.
Finalmente siento que me est谩n entrando los conceptos b谩sicos de Vue.

Gracias 馃槂

Hasta el momento me ha parecido muy bueno el curso, la explicaci贸n es excelente

Siendo honesto, las clases me han parecido una maravilla. Estoy entiendo super bien todos los conceptos, pero creo que tengo algo de ventaja por venir de React y de Angular. Vue.js con las directivas y el data binding es muy parecido a lo que tiene Angular. Aparte de tiene su parecido a los hooks de React con el data, funcionando con el useState, y el watch al useEffect, useMemo y as铆. Aunque creo que aun sin tener este contexto podr铆a entenderle a la maestra, ya que sus ejemplos son super claros y muestra las distintas formas de como hacer destinas cosas. Esto se aprecia mucho y se que ir茅 adquiriendo y adhiriendo estos conceptos y forma de desarrollar a medida que adquiera mas practica.

En mi caso use JQuery para a帽adir y remover las clases correspondientes, puse por defecto la clase closed y ya luego a帽ad铆a y remov铆a la correspondiente, el m茅todo container_styles_2 lo llamo luego del m茅todo que cambia el valor de open y me sirve correctamente

const vm = Vue.createApp({
            data: () => {
                return {

                    text: "Puerta Cerrada",
                    open: false,
                };
            },
            computed: {
                action: function () {

                    return this.open ? "Cerrar" : "Abrir";
                },
                container_styles: function() {
                    return this.open ? ['open'] : ['closed'];
                }
            },
            watch: {
                open: function(value) {

                    this.text = value ? "Puerta Abierta" : "Puerta Cerrada";
                }
            },
            methods: {
                door: function () {

                    this.open = !this.open;
                    this.container_styles_2();
                },
                container_styles_2: function() {

                    if (this.open) {
                        
                        $("#app .container").removeClass("closed");
                        $("#app .container").addClass("open");
                    } else {
                        
                        $("#app .container").removeClass("open");
                        $("#app .container").addClass("closed");
                    }
                }
            },
            template: 
            ` 
            <div class="container closed">
                <h2>{{ text }}</h2>
                <button v-on:click="door">{{ action }}</button>
            </div>
            `   
        }).mount("#app");

Una necesidad com煤n de data binding es manipular la lista de clases de un elemento y sus estilos en l铆nea. Como ambos son atributos, podemos usar v-bind para manejarlos: solo necesitamos crear una cadena de texto con nuestras expresiones. Sin embargo, concatenar cadenas de texto puede llegar a ser inc贸modo y propenso a errores. Por esta raz贸n, Vue proporciona mejoras cuando se utiliza v-bind conclass y style. Adem谩s de las cadenas de texto, las expresiones tambi茅n pueden evaluar objetos o matrices.

fuente:
https://es.vuejs.org/v2/guide/class-and-style.html

Es la documentacion de Vue en espa帽ol

muy buena clase

VAle con diana estoy entendiedo Vue bien facil

antes de seguir avanzando te recomiendo este articulo
https://codingpotions.com/atributos-clases-estilos-dinamicos-vuejs

les comparto el codigo con la hoja de estilos por separado

<!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">
    <link rel="stylesheet" href="open_close_door.css">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3"></script>

    <div id="app"></div>
    
    <script>
        const vm = Vue.createApp( {
            data() {
                return {
                    text: "Hey you!",
                    open: false,
                };
            },
            watch:{
                open(value){
                    if (value){
                        this.text= "La puerta est谩 abierta, Pasa!";
                    }else {
                        this.text= "La puerta est谩 cerrada, Lo siento!";
                    }
                }
            },
         
            computed:{
                label(){
                    return this.open ? "Cerrar" : "Abrir";
                },

                //con la funci贸n computada para los estilos usamos las clases
                styles(){
                    return this.open ? [`open`] : [`close`];
                }
                
            },
            
            template: `
                <div class="container" :class="styles">
                    <h1>{{ text }}</h1>
                    <button @click="open = !open">{{ label }}</button>
                </div>
            `
        }).mount("#app");
    </script>
</body>
</html>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#app .container{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 700px;
    padding: 2rem;
    
}

h1{
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 40px;

}

button{
    width: 80px;
    height: 25px;
    border-radius: 1rem;
    color: white;
    font-weight: bold;
    background-color: black;
}

button:hover{
    background-color: rgb(255, 246, 146);
    color: black;
    font-weight: bold;
}

.close{
    background-color: rgb(156, 63, 63) ;
}

.open{
    background-color: rgb(90, 168, 90);
}

Mi aporte 2 ejemplos de la clase

<div class="container" :style="styles">
            <h2>{{message}}</h2>
            <button @click = 'open =! open'>{{label}}</button>
        </div>
        <div class="container" :class="openDoor">
            <h2>{{message}}</h2>
            <button @click = 'open =! open'>{{label}}</button>
        </div>
 data() {
                return {
                    open: false,
                    styles: {
                        backgroundColor: '#eca1a6'
                    }
                }
            },
watch: {
                open(value){
                    if(value){
                        this.message = 'Puerta  abierta';
                        this.styles.backgroundColor = '#b5e7a0'
                    }else{
                        this.message = 'Puerta  cerrada';
                        this.styles.backgroundColor='#eca1a6'
                    }
                }
            }

            computed: {
                label(){
                    return this.open ? 'cerrar' : 'Abrir'
                },
                openDoor(){
                    return this.open ? ['open'] : ['closed'];
                }

que espect谩culo estas clases de Diana Mart铆nez, un abrazo!

Si a la profe con su nivel le salen errores, imaginen lo que nos hace falta por recorrer a los que ni tenemos nivel jaja

Es grandioso. Gracias!

<script>
const vm = Vue.createApp({
data(){
return{
text: 鈥淐losed Door鈥,
open: false
};
},
watch: {
open(value){
if(value){
this.text = 鈥淥pened Door鈥;
}else{
this.text = 鈥淐losed Door鈥;
}
}
},
computed: {
status(){
return this.open ? 鈥淐errar鈥: 鈥淎brir鈥;
}
},
template: <div>{{ text }}</div> <button @click="open = !open">{{ status }}</button>
}).mount("#app");
</script>

<!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>Document</title>
</head>
<body>
<div id="app">
    <p>{{ text }}</p>
    <button @click="open=!open">{{ label }}</button>
    <p>{{otherLabel}}</p>
    <div>{{now.toLocaleDateString()}}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm = Vue.createApp( {
        data() {
            return {
                text: "Puerta cerrada",
                open: false,
                name: "Diego Lipa",
                now: new Date()
            }
        },
        computed: {
            // se puede crear funciones y manipular data
            label() {
                return this.open ? "Cerrar" : "Abrir";
            },
            otherLabel(){
                return this.open? "Ali Mercado":"Diego lipa"
            }
        },
        watch: {
            // watch recibe dos parametros (valor actual, valor anterios)
            open(value, old) {
                console.log(value, old)
                value ? this.text="Puerta abierta" : this.text="Puerta cerrada";
            },
            text(value, old){
                console.log(value, old)
            }
        }
    }).mount("#app");
</script>
</body>
</html>

Apuntes de la clase con todas las variantes vistas

<!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>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app"></div>
    <style>
      html,
      body {
        height: 100vh;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      #app,
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }
      button {
        margin-top: 24px;
        border: none;
        background-color: white;
        padding: 8px 24px;
        border-radius: 12px;
      }
      .closed {
        background-color: #eca1a6;
      }
      .open {
        background-color: #b5e7a0;
      }
    </style>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            text: "Puerta Cerrada",
            open: false,
          };
        },
        watch: {
          open(value) {
            if (value) {
              this.text = "Puerta Abierta";
            } else {
              this.text = "Puerta Cerrada";
            }
          },
        },
        computed: {
          label() {
            return this.open ? "Cerrar" : "Abrir";
          },
          styles() {
            return this.open ? ["open"] : ["closed"];
          },
        },
        //Cuando usamos directivas para pasar las clases vue nos permite pasarle un array con las clases que vayamos a utilizar
        /* template: `
        <div class="container" :class="['open']">
          <h2>{{ text }}</h2>
          <button @click="open= !open">{{ label }}</button>
        </div>
        `, */
        //Tambien nos permite pasar un objeto para poder usar condicionales para aplicar estilos
        /*  template: `
        <div class="container" :class="{'open': open, 'closed': !open}">
          <h2>{{ text }}</h2>
          <button @click="open= !open">{{ label }}</button>
        </div>
        `, */
        //tambien podemos utilizar funcniones computadas para cambiar los estilos
        template: `
        <div class="container" :class="styles">
          <h2>{{ text }}</h2>
          <button @click="open= !open">{{ label }}</button>
        </div>
        `,
      }).mount("#app");
      console.log(vm);
    </script>
  </body>
</html>

Adem谩s de la falicidad que da vue para manejar estilos entre otras cosas. sigo aprendiendo de esos errores de novatos!! que hayan m谩s errores para saber como resolverlos en el futuro.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="Description" content="Extended Description">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Estilos reactivos</title>
    <link rel="stylesheet" href="">

    <style>
        body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }
        .closed {
            background-color: #eca1a6;
        }
        .open {
            background-color: #b5e7a0;
        }
    </style>

</head>

<body>
    <script src="https://unpkg.com/vue@3"></script>

    <div id="app"></div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    textDoor: 'Puerta est谩 cerrada',
                    open: false,
                    // Agregando variable para los estilos de atributo style, debe ser un objeto
                    // En el template debemos agregar el estilo reactivo de esta manera:
                    // v-bind:style="var-styles" o :style="var-styles"
                    // los estilos deben escribirse en camelCase, ejemplo: background-color --> backgroundColor
                    styles: {
                        backgroundColor: '#e5e5e5',
                    },
                };
            },
            watch: {
                open(value) {
                    if (value) {
                        this.textDoor = 'Puerta est谩 abierta';
                        // Color verde si est谩 abierta
                        // this.styles.backgroundColor = '#b5e7a0';
                    } else {
                        this.textDoor = 'Puerta est谩 cerrada';
                        // Color rojo si est谩 cerrada
                        // this.styles.backgroundColor = '#eca1a6';
                    }
                }
            },
            computed: {
                styleStatusBG() {
                    return this.open ? 'open': 'closed';
                },
            },
            /*
            Colocar los estilo con el atributo style
            template: `
                <div class="container" :style="styles">
                    <h2>{{ textDoor }}</h2>
                    <button @click="open = !open">{{ open ? 'cerrar' : 'abrir' }}</button>
                </div>
            `,
            */
            // Colocar los estilo con el atributo class
            // :class="p1" o ":class="['p1','p2','p3'...]"
            // Fromas de agregar la clse en este ejemplo:
            // 1. :class="[open ? 'open' : 'closed']"
            // 2. :class="{ 'open': open, 'closed': !open }"
            // 3. Una propiedad computada :class="styleStatusBG"
            template: `
                <div class="container" :class="styleStatusBG">
                    <h2>{{ textDoor }}</h2>
                    <button @click="open = !open">{{ open ? 'cerrar' : 'abrir' }}</button>
                </div>
            `,
        }).mount('#app');
    </script>

</body>

</html>

Este es mi c贸digo actual

<!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>Document</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }
        .closed {
            background-color: #eca1a6;
        }
        .open {
            background-color: #b5e7a0;
        }
    </style>

</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app">
        
    </div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: "Puerta cerrada",
                    opcion: "Abrir",
                    open: false,
                    styles: "open"
                }
            },
            methods: {
                abrir: function() {
                    this.open = !this.open
                }
            },
            watch: {
                open(value) {
                    if (value){
                        this.text = "Puerta abierta"
                        this.opcion = "Cerrar"
                        this.styles = "open"
                        
                    } else {
                        this.text = "Puerta cerrada"
                        this.opcion = "Abrir"
                        this.styles = "closed"
                    }

                }
            },
           
            template: `
            
            <div class="container" :class="styles">
                <h2>{{ text }}</h2>
                <button @click="abrir">{{ opcion }}</button>
            </div>    
            `
        }).mount("#app")
        console.log(vm)
    </script>
</body>
</html>