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
21H
43M
5S

Manejo de Eventos

9/38
Recursos

Aportes 50

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Les dejo una cheatsheet bastante buena:
https://marozed.ma/vue-cheatsheet/
.

De igual forma podemos abreviar v-on con un simple @

<span v-on:click="toggleShowPrices">{{showPrices ? '馃檲' : '馃檴'}}</span>

Abreviado

<span @click="toggleShowPrices">{{showPrices ? '馃檲' : '馃檴'}}</span>

Dejo un enlace a la documentacion de vuejs donde podemos leer mas acerca de la sintaxis del template
docs

He llegado hasta esta lecci贸n de un s贸lo tir贸n desde el inicio dle curso. La verdad debo decirlo, es EXCELENTE la forma de explicar, de introducir los conceptos, que tiene Ignacio. Se que ser谩 un muy bien curso hasta el final.

methods.
Es una propiedad de la instancia de Vue. Es un objeto donde se pueden definir funciones que pueden ser disparados por acciones en la vista.
.
Para acceder a propiedades de otro scope se utiliza la keyword this seguido de un punto y el nombre de la propiedad.
.

methods:{
   toggleShowPrices(){
   	this.showPrices = !this.showPrices;
 	}
}

.
Por 煤ltimo agregar la directiva v-on ante determinado evento, en el HTML que permite disparar el m茅todo.

<span v-on:click="toggleShowPrices">Ver precios</span>

Otra directiva que se puede utilizar en v-on, es mouseover:

v-on:mouseover="toggleShowPrices"   
v-on:mouseout="toggleShowPrices"

Los eventos al ser utilizados con la nombreclatura v-on:, podemos omitir el uso del mismo utilizando @.
En ejemplo de la clase utilizamos v-on:click, haciendo uso del atajo nos quedar铆a @click, ambos son v谩lidos para asignar un evento.

methods: Objeto de la instancia de Vue donde se puede definir funciones, que se pueden utilizar en diferentes contexto, principalmente para atacharse a eventos que pueden ser disparados por la vista.

v-on directiva que sirve para escuchar eventos del DOM, tales como onclick, onmouseover, mouseout, entre otros, para ejecutar alguna funci贸n.

Dejo una web con la lista de eventos de JavaScript que puedes usar: https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=842:lista-de-eventos-javascript-on-click-dblclick-mouseover-mouseout-change-submit-keypress-cu01159e&catid=78&Itemid=206

Y el concepto de this me parece importante, dejo un v铆deo del canal de Leonidas Esteban donde explica 驴Qu茅 es this?: https://www.youtube.com/watch?v=PDiw-9NpyRQ

vue es hermoso, y como lo explica el profe es mas hermoso aun

Como amo el modo 2x!

Yo jamas hab铆a programado con Vue.js, pero la manera en la que explicar Nacho Anaya, la verdad es que es muy f谩cil de entender gracias

v-on permite agregar event listeners, es el equivalente a element.addEventListener de JavaScript, me est谩 gustando Vue, aunque a煤n se me hace un poco raro declarar todo esto dentro del HTML

As铆 se puede simplificar mouseover y mouseout:

v-on="{ mouseover: toggleShowPrices, mouseout: toggleShowPrices }" 

Qu茅 lindo es Vue! 馃惖

隆Prolijo!

Con la directiva v-on vamos a poder manejar todos los eventos, ya sean disparados por le usuario como click o mouse hover, o disparados por el navegador como la carga de una imagen.

Dentro de la instancia de Vue se puede definir la propiedad methods, que es un objeto donde se pueden definir funciones, y estas pueden ser usadas en la aplicaci贸n. Generalmente se usan para montar una funci贸n en un evento.

I love Vue 馃槏

Methods

Methods es un objeto que se tiene en la instancia de Vue donde puedo definir funciones, estas funciones se pueden utilizar en diversos contextos, principalmente se usan para agregarse a los eventos que puedan ser disparados por la vista.

Para acceder a una de las propiedades dentro de un m茅todo, solamente es necesario utilizar la palabra this seguido de un punto y el nombre de la propiedad:

methods: {
    toggleShowPrices () {
      this.showPrices = !this.showPrices
    }
  }

Lo que falta es agregar la directiva v-on para disparar el m茅todo en caso de que ocurra un evento, v-on nops permite decirle a Vue ante determinado evento ejecuta tal c贸digo, seguido de la directiva se escribe : seguido del nombre del evento igual谩ndolo al valor de la funci贸n que queremos ejecutar:

<span v-on:click="toggleShowPrices">Ver Precios</span>

Cualquier evento v谩lido es posible utilizarlo con la directiva v-on.

<img 
      v-on:mouseover="toggleShowPrices"
      v-on:mouseout="toggleShowPrices"
      v-bind:src="img"
      v-bind:alt="name"
>
 <span v-on:click="toggleShowPrices">{{ showPrices ? '馃' : '馃槦' }}</span>

tambien sirve usar el @click=鈥渘ombre funcion鈥

En este punto, si dejan:

v-bind:key = "p"

se generan varias advertencias en consola.

Pueden cambiar el estado de las propiedades de la instancia de Vue sin necesidad de estar cambiando el estado en el archivo de js y refrescando pantalla.

Utilizando la extension de vue.

vue devtoools

en la seccion de methods:{} es donde podemos declarar todos los metodos o funciones y con la direcitva v-on:event podemos asignar eventos con la funciones declaradas.

buena Clase

Explicaci贸n de "Methods"

Interesante forma de separar el projecto

jajajaj la perdi con los emojis de monitos, demasiado bueno

Muy buen curso

me vol贸 la cabeza lo simple que Vue es! vengo de python y solo s茅 algo b谩sico de javascript pero aun as铆 me esta pareciendo super intuitivo! GENIAL!!!

Buen dia companeros tengo una duda. Como se podria leer este codigo?

methods:{
toogleShowPrices(){
	this.toggleShowPrices = ! this.toggleShowPrices}
}

La parte que no entiendo es porque si la propiedad al inicio esta como false, porque volverla a pasar a false? ( ! this.toggleShowPrices)

Vue se est谩 poniendo cada vez m谩s divertido 馃槂

alguien que me pueda explicar porque uso un 鈥?鈥 en la linea 21 minuto 4:!9 por favor y tambien porque en el this para cambiarle su valor buleano usa !this


new Vue({
  el: '#app',
  data(){
    return {
      name : 'Bitcoin',
      img : 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent : 10,
      prices : [1550, 2033,1233,4222,1233,9991,09233,1233],
      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 },
      ]
    }
  }
})

s

驴Alguien sabe por que no se muestran los precios cuando le doy click en 鈥淰er Precios鈥

Este es mi c贸digo de app.js

new Vue({
  el: '#app',

  data (){
    return {
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.svg?v=007',
      changePercent: -10,
      prices: [8400, 7900, 8200, 9000, 10000, 10200],

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

Y este es mi index.html

<!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>Title</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div id="app">
    <h1>
      {{ name }}
      <span v-if="changePercent > 0">馃憤</span>
      <span v-else-if="changePercent < 0">馃憥</span>
      <span v-else>馃枙</span>
    </h1>
    <img v-bind:src="img" alt="name">

    <span v-on:click="toggleShowPrices">Ver Precios</span>

    <ul v-show=showPrices >
      <li v-for="(p, i) in pricesWithDays" v-bind:key="p.day">
        {{ i }} -  {{ p.day }} - {{ p.value }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>

excelente uso de el manejo de eventos es muy interesante y creo que te permite tener un mejor c贸digo, mas limpio ordenado y mantenible.

esta directiva v-on le indica a vue dependiendo de la condicion ejecuta una funcion

con !this.nombrepropiedad se le cambia a lo contrario como lo consiga

con keyword this accesos a propiedas en vue y manipularlo

en methods las funciones se puede utilizar en diferentes contexto

methods es una instancia de vue para definis funciones

el 鈥淍鈥 es para colocar un evento, es el diminutivo de 鈥渧-on鈥

<span @click="showPrices">
	show prices
</span>

Creo que estoy enojado con vue

THIS

-  A traves de esta Keyword pueden acceder a las propiedades o m茅todos que hay dentro de la instancia de Vue

explicas muy bien pero seria mas genial que muestres toda la pantalla del ide ya que hay que borrar v-bind:key para que funcione

Hay alguna lista de todos los metodos?

method es un objeto de la instancia de vue dentro de este podemos crear funciones que van a ser usadas, para usar los datos de data tenemos que usar el this.

no me lo van a creer pero es de los pocos cursos que he avanzado 9 videos de un solo tir贸n en un solo d铆a entendiendo todo gracias profe

Gracias por ese aporte