Manejo de Eventos

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.

Como amo el modo 2x!

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

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"
>

les comparto una extension para el VScode
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

 <span v-on:click="toggleShowPrices">{{ showPrices ? '🤑' : '😟' }}</span>

tambien sirve usar el @click=“nombre 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

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 “Ver 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 “v-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