Los eventos en JavaScript, se basan en las acciones que realiza un usuario, es decir la interacción que tiene con una aplicación. Por lo cual, Vue.js, tiene directivas para poder manejar eventos como por ejemplo: cuando un usuario presiona un botón, añade datos a un formulario, hace clic en un enlace, entre otros. Para la lección de hoy de nuestro Curso de Vue.js aprenderás cómo se manejan los eventos que ejecutan los usuarios.

Repositorio

Mira el código en GitHub

Notas

  • La directiva v-on acepta como argumento el tipo de evento como por ejemplo: v-on:click
  • Un método en Vue.js es una acción que realiza una tarea que se declara en la instancia de Vue.js usando un objeto llamado methods de esta manera:
    methods: {
        nombreMetodo: function(){
           //acciones a realizar
        }
    }
  • v-on:click="signUp" es equivalente a escribir @click="signUp"
  • Con event.preventDefault() la acción por defecto de un evento no se ejecutará. Sin embargo, Vue.js nos proporciona dos modificadores de eventos para v-on cuando queremos prevenir el comportamiento predeterminado del evento:
    • .prevent
    • .stop
  • Para acceder a los valores de las propiedades presentes en data dentro de los métodos de Vue.js se usa this
  • La directiva v-on acepta expresiones, pero sólo puedes colocar una expresión a la vez, si necesitas más de una expresión, puedes crear un método como aprendiste en esta lección.

Actividad

Ahora es tu turno de practicar lo aprendido, crea una forma de impedir que el usuario agregue números negativos a los años de experiencia.

Material relacionado

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Lección anterior Introducción a las directivas de Vue.js con v-if, v-show y v-else Lección siguiente Clases, estilos y otros atributos dinámicos usando la directiva v-bind de Vue.js