Control de eventos con Vue.js

Clase 6 de 17 • Curso Básico de Vue.js 2016

Resumen

Otra de las cosas que Vue.js nos permite hacer es el manejo de eventos, es decir, reaccionar ante la interacción de los usuarios con los elementos de un sitio web.
En este vídeo veremos algunos ejemplos.

Francisco Ivan Juan Aquino

student•

Hola! Querido Sacha las functions se escriben asi:

methods: {
	sumar () {
		this.contador++
	},
	restar () {
		this.contador--
	}
}

Y no solo ahí, también la data y es necesario especificar el return con esta sintaxis

data () {
	return {
		contador: 0
	}
}

Por cierto a pesar que puedes usar contador++ desde el evento @click=“contador++” es mala practica, lo recomendable es desde los methods.

Cualquier duda, por acá andamos, saludos!

Christian Armando Consuelo Mayén

student•

Técnicamente las dos son sintaxis correctas para definir funciones en un objecto Javascript. De todas formas es syntax sugar. A mi gusto queda más explícito que estás definiendo una función con la sintaxis que usó Sacha, pero también la tuya es correcta.

Y coincido que es mala práctica tratar de correr código in-line en la etiqueta HTML.

Nacho Anaya

teacher•

Ambas maneras de escribir metodos son correctas, el problema es que la sintaxis que propones (si bien a mi me gusta mas), es parte de ES6 por lo cual no podes garantizar soporte en todos los navegadores, a menos que uses alguna herramienta para transpilar lo cual no es el caso.

Puedes chequear el soporte aqui.

Victor Eduardo Aguilera Gomez

student•

Aquí pueden encontrar información extendida, como por que nos conviene usar v-on en vez de listeners

Daniel Raymundo

student•

También en vez de ocupar el “_this” pudimos haber llamado al objeto “app” de una vez para poder utilizar “Arrow Functions”

methods: {
          sumar: () => {
            app.contador++
          },
          restar: () => {
            app.contador--
          }
        }

Melina Jacqueline onoriaga

student•

Muchas gracias por tu comentario!! no me estaba dando cuenta a vista rápida porque no me funcionaba con this en las Arrow Functions !!!

Christian David Sánchez

student•

muy buen aporte

Daniel Sepulveda

student•

methods: {
        sumar: () => this.counter++,
        restar: () => this.counter--
      }```

Daniel Sepulveda

student•

en este instante vue lo maneja sin problema

CarlosHP

student•

v-on --> Añade listeners
Esta directiva añades escuchadores de eventos que invocan métodos.

v-model --> Establece enlace
Esta directiva establece un enlace de 2 vías entre un input y el estado de la app.

Cristopher Paniagua Sánchez

student•

Con ES6 las funciones en methods se pueden declarar así:

methods: {
	sumar () {
		...	
	},
	restar () {
		...	
	},
}

https://www.tutorialspoint.com/es6/es6_functions.htm

Nestor David Alvarado Rondon

student•

let app = new Vue({
    el: '#app',
    data: {
        contador: 0
    },
    methods: {
        sumar() {
            this.contador++
        },
        restar() {
            this.contador--
        }
    }
})

David Daniel Castillo Nava

student•

Mi código de la clase.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ titulo | uppercase }}</h1>
		<h2>{{ subtitulo | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="sumar" >sumar</button>
		<button @click="restar" >restar</button>
		<div>El contadore esta en {{contador}}</div>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
					titulo: 'Estas viendo Platzi',
					subtitulo: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					contador: 0
				}
			},
			methods: {
				sumar (event) {
					this.contador++
				},
				restar (event) {
					this.contador--
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>

Alan Lapierre

student•

En la declaración de methods no se puede usar ARROW FUNCTIONS, es necesario declarar los métodos como funciones js anónimas. Es decir, tenemos que usar:

methods: {
	sumar: function() { this.contador++ }
	restar: function() { this.contador-- }
}

en lugar de :

methods: {
	sumar: () => { this.contador++ }
	restar: () => { this.contador-- }
}

Esto es asi, porque la referencia a THIS en el segundo caso apunta al objeto WINDOW y no al propio objeto que estamos declarando.

fredic yohany rojas

student•

khemocion

sumar: function (){
                    if (this.contador < 10){
                        this.contador++
                    }
                },
                restar: function(){
                    if (this.contador > 0){
                        this.contador--
                    }
                }```

Pablo Notti

student•

Que diferencia hay en declarar una variable con var y con let?

José Gersain Osorio Morales

student•

cuando declaras una variable con let estas limitando el alcance de la variable al bloque en donde se encuentra, mientras que a var no le importa el ámbito del bloque, es más común utilizarlo cuando se desea una variable global

Pablo Notti

student•

gracias

Daniel Salazar Munoz

student•

Las 3 variantes para declarar el evento pueden ser:

<code> 
<button @click="sumar">Sumar +1</button>

 <button v-on:click="restar">Restar -1</button>

 <button @click="contador=0"> reiniciar contador</button>

David Vargas Domínguez

student•

Dejo el código donde combine la clase anterior con la actual

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Curso Vue.js</title>
  </head>
  <body>
    <div id="app">
      <button @click = 'sumar'> Sumar 1</button>
      <button @click = 'restar'> Restar 1</button>
      <button @click = 'aparece'> Mostrar</button>
      <button @click = 'ocultar'> Ocultar</button>
      <p v-show = 'mostrar'> el contador está en {{ contador }} </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          contador: 0,
          mostrar: true
        },
        methods: {
          sumar: function () {
            this.contador ++
          },
          restar: function () {
            this.contador == 0 ? false : this.contador --
          },
          aparece: function () {
            this.mostrar = true
          },
          ocultar: function () {
            this.mostrar = false
          }
        }
      })
    </script>
  </body>
</html>

Lina María Ocampo Cuartas

student•

¿Cómo escribir métodos correctamente?

Se debe usar la palabra "function" para no tener confusión con la variable "this"

Alexis Antonio Moraga Gallardo

student•

como explica sasha en el vídeo, si escribes arrow functions ()=>{} se pierde el scope, con lo cual en este caso this apunta al objeto windows. para evitar esto en los métodos usa la sintaxis con function.
Saludos

Iván Toro

student•

Importante tener en cuenta que las funciones de los methods no se pueden escribir con arrow functions.

Daniel Sepulveda

student•

Francisco Javier Rios Castillo

student•

Hola Sacha,

En relación al arrowfunction ¿Que quieres decir con antipatron?

Gracias

Edward Steven Ramos Palacios

teacher•

Es un antipatron segun el contexto en el que lo uses. Recuerda que los arrow functions heredan el contexto padre de donde definas el arrow function mientras que, definir una funcion explicitamente con el keyword function crea un nuevo contexto dentro de esa misma funcion.

JOSÉ REYES PALACIO

student•

¿Por qué cuando ingresa la variable directamenta al evento no le antesede la palabra this como en la función? <button v-on:click="contador++">Sumar 1</button>

Sebastian Gutierrez

student•

Hola @jrpalaciodev no se usa en una directiva de evento (v-on) porque ese valor es interpretado de forma diferente, por Vue. Sin embargo, podrías agregar this en un template o en una directiva v-bind, ya que se evaluaria la expresión como lo haría Javascript.

<div id="app">
  <button v-on:click="contador++">
    Agregar 1
  </button>
  <p>{{ this.contador }} === {{ contador }}</p>
  <input type="text" v-bind:value="this.contador">
</div>

var app = new Vue({
  el: "#app",
  data: {
    contador: 0
  }
})

Guillermo Ariel Puentes

student•

En mi caso yo no utilizo en el objeto Vue los métodos sumar o restar lo implemento en el mismo botón

<div id="app">
            <h1>Manejo de Eventos</h1>
            <br>
            <h3>El valor del contador es: {{ contador }}
                <button v-on:click="contador++">Sumar</button>
                <button v-on:click="contador--">Restar</button>
            </h3>
        </div>

Gerardo Ruiz

student•

Cómo se llama ese software que usas para ver los breakpoints? O está en todos los Browsers?

Gerardo Ruiz

student•

Min 5:36

Mario Alejandro Crespo Reyes

student•

Hola John, esto se llama el inspector de elementos y esta disponible en los navegadores, y la razón por la que en todos los cursos se use Chrome como navegador, es que el inspector de elementos de Google Chrome tiene muchas herramientas favorables para los desarrolladores que nos facilitan la tarea en comparación a los otros navegadores.

El inspector de elementos lo puedes encontrar dándole clic derecho sobre cualquier página en internet y en el menú desplegable que aparece una de las opciones es inspeccionar elemento.

let app = new Vue({
    el: '#app',
    data: {
        contador: 0
    },
    methods: {
        sumar() {
            this.contador++
        },
        restar() {
            this.contador--
        }
    }
})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ titulo | uppercase }}</h1>
		<h2>{{ subtitulo | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="sumar" >sumar</button>
		<button @click="restar" >restar</button>
		<div>El contadore esta en {{contador}}</div>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
					titulo: 'Estas viendo Platzi',
					subtitulo: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					contador: 0
				}
			},
			methods: {
				sumar (event) {
					this.contador++
				},
				restar (event) {
					this.contador--
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>

sumar: function (){
                    if (this.contador < 10){
                        this.contador++
                    }
                },
                restar: function(){
                    if (this.contador > 0){
                        this.contador--
                    }
                }```

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Curso Vue.js</title>
  </head>
  <body>
    <div id="app">
      <button @click = 'sumar'> Sumar 1</button>
      <button @click = 'restar'> Restar 1</button>
      <button @click = 'aparece'> Mostrar</button>
      <button @click = 'ocultar'> Ocultar</button>
      <p v-show = 'mostrar'> el contador está en {{ contador }} </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          contador: 0,
          mostrar: true
        },
        methods: {
          sumar: function () {
            this.contador ++
          },
          restar: function () {
            this.contador == 0 ? false : this.contador --
          },
          aparece: function () {
            this.mostrar = true
          },
          ocultar: function () {
            this.mostrar = false
          }
        }
      })
    </script>
  </body>
</html>

<div id="app">
            <h1>Manejo de Eventos</h1>
            <br>
            <h3>El valor del contador es: {{ contador }}
                <button v-on:click="contador++">Sumar</button>
                <button v-on:click="contador--">Restar</button>
            </h3>
        </div>

Control de eventos con Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?