No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Watchers

11/23
Recursos

Aportes 14

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Excelente la forma como Diana explica los conceptos en la clase. 👌Felicitaciones!!!

Mi codigo del ejercicio de puerta abierta/cerrada

const vm = Vue.createApp({
            data(){
                return{
                    estado: 'Puerta Cerrada',
                    open: false
                };
            },
            watch:{
                open(now, old){
                    this.estado = now ? 'Puerta Abierta' : 'Puerta Cerrada';
                }
            },
            template: `
            <p> {{estado}} </p>
            <button @click="open = !open">click</button>
            
            `
        }).mount('#app');
<div id="app">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div>{{ text }}</div>
                    <button @click="abrir">{{ accion }}</button>
                </div>
            </div>
        </div>
    </div> 
    

    <script>

        // Vue.CretaeApp : Instancia de Vue , el cual contiene a los demas componentes que se van a utilizar

        const vm = Vue.createApp({
            data() {
                return {
                    accion: 'Abrir Puerta',
                    text: 'Puerta Cerrada',
                    open: false
                }

            },

            methods: {
                abrir(){
                    this.open = !this.open;
                }
            },

            computed: {

                
            }, 
            watch: {
                open(newValue){
                    if(newValue){
                        this.text = 'Puerta Abierta';
                        this.accion ='Cerrar Puerta';

                    }
                    else {
                        this.text = 'Puerta Cerrada';
                        this.accion ='Abrir Puerta';
                    }      
                }
            }
        }).mount('#app')

        console.log(vm)

    </script> 

Hasta el momento Vue.js me ha parecido muy bueno y más fácil para usar. Lo tendré en cuenta para futuros proyectos!!!

<!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>
    </div>
    
    <script src="https://unpkg.com/[email protected]"></script>

    <script>
        const vm = Vue.createApp( {
            data() {
                return {
                    text: "Puerta cerrada",
                    open: false,
                }
            },
            computed: {
                label() {
                    return this.open ? "Cerrar" : "Abrir";
                } 
            },
            watch: {
                open(value) {
                    value ? this.text="Puerta abierta" : this.text="Puerta cerrada";
                }
            }

        }).mount("#app");
    </script>

</body>
</html>

Hola, comparto mi código de Watchers

const app = Vue.createApp({
    data() {
        return {
            open: false,
            styles: {
                backgroundColor: '#c3c3c3'
            }
        }
    },
    computed: {
        btn_text() {
            return this.open ? 'Cerrar puerta' : 'Abrir puerta';
        },
        text() {
            return this.open ? 'Puerta abierta' : 'Puerta cerrada';
        }

    },
    watch: {
        open(value, old) {
            console.log("Watcher de open activado, Valor previo: " + old + ", Valor nuevo: " + value);
        }
    },
    template: `
    <div class="container">
        <h2>{{ text }}</h2>
        <div>
            <input type='checkbox' v-model="open" id="switch">
            <label for='switch'>{{ btn_text }}</label>
        </div>
    </div>
    `
}).mount("#app");

Excelente explicacion, me queda muy claro

Llevo unos meses usando Vue, pero wow la manera en lo que lo explica la profe!!

Usando ternario en el watch

<!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>Curso de fundamentos de VUE JS</title>

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

    <script src="https://unpkg.com/[email protected]"></script>
    <script>
        const vm = Vue.createApp({
            data(){
                return{
                   
                    text : "Puerta cerrada",
                    open : false,
                   
                }
            },
            methods: {
                
            },
          
            watch:{
              
                open(value){
                    (value) ? this.text = "Puerta abierta" : this.text = "Puerta cerrada";
                }
            },
            template: `
        
                <div> {{text}}  </div>
                <button
                    type="button"
                    @click="open = !open"
                    v-text="(open) ? 'Cerrar puerta' : 'Abrir puerta'"
                >
                    
                </button>
            `
        }).mount("#app");
    </script>
</body>
</html>

Excelente forma de como explica la instructora Diana. Felicidades

Mi ejemplo realizado😁, cambia de tecnologia de forma aleatoria al dar click en el boton

Vue.createApp({
  data() {
    return {
      message: 'Hello from',
      tech: 'Vue',
      techs: ['Vue', 'React', 'Svelte', 'Preact', 'Angular'],
    };
  },
  template: `
      {{completeMessage}}
      <button @click="changeTech()">Change</button>
  `,
  methods: {
    changeTech() {
      this.tech = this.getRandomTech();
    },

    getRandomTech() {
      const randomTech =
        this.techs[Math.floor(Math.random() * this.techs.length)];
      if (randomTech === this.tech) return this.getRandomTech();
      return randomTech;
    },
  },

  computed: {
    completeMessage() {
      return this.message + ' ' + this.tech;
    },
  },

  watch: {
    tech(newValue, oldValue) {
      console.log(`The technology changed => ${oldValue} to ${newValue}`);
    },
  },
}).mount('#app');

Asi experimente con vue 😃

Mi código:

<!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/[email protected]"></script>

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

    <script>
      const vm = Vue.createApp({
        data() {
          return {
            text: "Hola VueJS",
            doorOpen: false,
          };
        },

        // watch, obseva cada vez que cambian las variables en data(){}; se le pueden pasar los argumentos para
        // el valor actual, y elvalor anterior
        watch: {
          text(value, old) {
            console.log("Watcher!", value, old);
          },
          doorOpen(state) {
            if (state) {
              this.text = "Puerta abierta";
            } else {
              this.text = "Puerta cerrada";
            }
          },
        },

        template: `
        <div>{{ text }}</div>
        <button @click="doorOpen = !doorOpen"> {{ doorOpen ? "Cerrar" : "Abrir" }} </button>
        `,
      }).mount("#app");
    </script>
  </body>
</html>

<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">
        <h1>{{count}}</h1>
        <button @click="incrementar">Incrementar</button>
        <button @click="disminuir">Disminuir</button>
        <div>
            <h2>{{text}}</h2>
            <input v-model="text">
        </div>
        <div>
            <h3>{{ fullName }}</h3>
            <p>{{now}}</p>
            <p>{{today}}</p>
        </div>
        <div>
            <h2>{{message}}</h2>
            <button @click = 'open =! open'>{{label}}</button>
        </div>
    </div>
    
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    count: 0,
                    text: 'Hola vue!!',
                    firstName: 'Andrey',
                    lastName: 'Gómez',
                    now: new Date(),
                    message: 'Puerta esta cerrada',
                    open: false
                }
            },

            methods: {
                incrementar(){
                    this.count++;
                },

                disminuir(){
                    this.count--;
                },
                input(e){
                    this.text = e.target.value
                }
            },

            computed: {
                fullName(){
                    return this.firstName + " " + this.lastName
                },
                today(){
                    return this.now.toLocaleDateString()
                },
                label(){
                    return this.open ? 'cerrar' : 'Abrir'
                }
            },

            watch: {
                // message(value, old){
                //     console.log('watcher!!', value, old, this.message);
                // }
                open(value){
                    if(value){
                        this.message = 'Puerta esta abierta'
                    }else{
                        this.message = 'Puerta esta cerrada'
                    }
                }
            }

            
        }).mount('#app')
        //console.log(vm);
    </script>
</body>
<!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>Propiedades computadas</title>
    <link rel="stylesheet" href="">

    <style>
        button {
            display: block;
            width: 248px;
            height: 36px;
            font-size: 24px;
            margin: 12px;
        }
    </style>

</head>

<body>
    <script src="https://unpkg.com/[email protected]"></script>

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

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: 'Hola Vue',
                    text2: 'desde platzi',
                    textDoor: 'Puerta está cerrada',
                    open: false,
                };
            },
            // whatch son funciones observadoras, como regla la función debe
            // llamarse igual que la variable a observar, cada función puede
            // recibir dos parámetros, el valor actual y anterior de la variable
            // se recomienda no hacer muchas cosas comlejas dentrod e un watcher
            // siempre hacer cosas sencillas,si requerimos hacer algo complejo entonces
            // invocamos un método que lo haga
            watch: {
                text() {
                    console.log('El watcher se ha activado');
                },
                text2(currentValue, oldValue) {
                    console.log('El watcher se ha activado');
                    console.log('El valor actual es:', currentValue);
                    console.log('El valor anterior es:', oldValue);
                    // oldValue === this.text2
                },
                open(value) {
                    if (value) {
                        this.textDoor = 'Puerta está abierta';
                    } else {
                        this.textDoor = 'Puerta está cerrada';
                    }
                }
            },
            computed: {
                doorStatus() {
                    return this.open ? 'cerrar' : 'abrir';
                },
            },
            methods: {
                doorStatusBolean() {
                    this.open ? this.open = false : this.open = true;
                    // this.open = !this.open;
                },
            },
            template: `
                <p>{{ text }}, {{ text2 }}</p>
                <p>{{ textDoor }}</p>
                <button @click="open = !open">{{ open ? 'cerrar' : 'abrir' }}</button>
                <button @click="doorStatusBolean">{{ doorStatus }}</button>
            `,
        }).mount('#app');
    </script>

</body>

</html>