Event Handling in Vue.js: Syntax and Examples

Handling events is an important part of interacting with users and changing the state of an application in Vue.js. Vue.js provides various ways to handle events, including inline event handlers, methods, and event modifiers.

Here are some common events in Vue.js

1. click event

This event is triggered when a clickable element, such as a button or a link, is clicked. It is commonly used to perform actions or trigger functions when a user interacts with the element.

<button v-on:click="handleClick">Click me</button>

methods: {
  handleClick() {
    console.log('Button clicked!');
  }
}

2. input event

This event is triggered when the value of an input element changes. It is commonly used with the v-model directive to bind the input value to a data property in Vue's component. This allows you to reactively update and track changes to the input value.

<input v-model="message" v-on:input="handleInput" />

data() {
  return {
    message: ''
  };
},
methods: {
  handleInput() {
    console.log('Input value:', this.message);
  }
}

3. change event

This event is triggered when the value of a form element, such as a select dropdown or checkbox, is changed. It is commonly used to perform actions or update data based on the selected option or checked state of the element.

<select v-model="selectedOption" v-on:change="handleSelectChange">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

data() {
  return {
    selectedOption: ''
  };
},
methods: {
  handleSelectChange() {
    console.log('Selected option:', this.selectedOption);
  }
}

4. submit event

This event is triggered when a form is submitted, either by clicking a submit button or pressing Enter inside an input field. It is commonly used to handle form submissions, validate user input, and perform actions such as making API requests or saving data.

<form v-on:submit="handleSubmit">
  <input type="text" v-model="name" />
  <button type="submit">Submit</button>
</form>

data() {
  return {
    name: ''
  };
},
methods: {
  handleSubmit(event) {
    event.preventDefault();
    console.log('Form submitted! Name:', this.name);
  }
}

5. keyup event

This event is triggered when a key is released after being pressed down. It is commonly used to perform actions in response to keyboard input, such as filtering a list of items or triggering a search functionality.

<input v-model="message" v-on:keyup="handleKeyUp" />

data() {
  return {
    message: ''
  };
},
methods: {
  handleKeyUp() {
    console.log('Key up event triggered!');
  }
}

6. keydown event

This event is triggered when a key is pressed down. It is commonly used to listen for specific key combinations or perform actions while a key is held down, such as navigating through a slideshow or controlling a game.

<input v-model="message" v-on:keydown="handleKeyDown" />

data() {
  return {
    message: ''
  };
},
methods: {
  handleKeyDown() {
    console.log('Key down event triggered!');
  }
}

7. mouseover event

This event is triggered when the mouse pointer is moved over an element. It is commonly used to show additional information or provide visual feedback when hovering over an element.

<div v-on:mouseover="handleMouseOver">Hover over me</div>

methods: {
  handleMouseOver() {
    console.log('Mouse over event triggered!');
  }
}

8. mouseout event

This event is triggered when the mouse pointer is moved out of an element. It is commonly used to hide or modify elements when the mouse is no longer hovering over them.

<div v-on:mouseout="handleMouseOut">Move mouse out</div>

methods: {
  handleMouseOut() {
    console.log('Mouse out event triggered!');
  }
}

9. scroll event

This event is triggered when an element is scrolled. It is commonly used to implement features such as infinite scrolling, lazy loading of content, or updating UI elements based on the scroll position.

<div v-on:scroll="handleScroll">Scroll me</div>

methods: {
  handleScroll() {
    console.log('Scroll event triggered!');
  }
}

10. focus event

This event is triggered when an element receives focus, typically when it is clicked or when the user navigates to it using the keyboard. It is commonly used to perform actions or provide visual feedback when an input or element gains focus.

<input v-on:focus="handleFocus" />

methods: {
  handleFocus() {
    console.log('Input focused!');
  }
}

These are just some basic examples of events in Vue.js. You can customize the event handling functions to fit the specific needs of your project.