Обработка событий в Vue.js: синтаксис и примеры

Обработка событий — важная часть взаимодействия с пользователями и изменения состояния приложения в Vue.js. Vue.js предоставляет различные способы обработки событий, включая встроенные обработчики событий, методы и модификаторы событий.

Вот некоторые распространенные события в Vue.js.

1. click событие

Это событие запускается при нажатии на элемент, на который можно щелкнуть, например на кнопку или ссылку. Он обычно используется для выполнения действий или запуска функций, когда пользователь взаимодействует с элементом.

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

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

2. input событие

Это событие запускается при изменении значения элемента input. Он обычно используется с v-model директивой для привязки input значения к свойству данных в компоненте Vue. Это позволяет оперативно обновлять и отслеживать изменения значения input.

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

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

3. change событие

Это событие запускается при изменении значения элемента формы, например раскрывающегося списка выбора или флажка. Он обычно используется для выполнения действий или обновления данных на основе выбранной опции или проверенного состояния элемента.

<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 событие

Это событие запускается при отправке формы либо нажатием кнопки, submit либо нажатием Enter внутри input поля. Он обычно используется для обработки отправки форм, проверки пользователя input и выполнения таких действий, как отправка запросов API или сохранение данных.

<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 событие

Это событие запускается, когда клавиша отпускается после нажатия. Он обычно используется для выполнения действий в ответ на клавиатуру input, таких как фильтрация списка элементов или запуск функции поиска.

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

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

6. keydown событие

Это событие срабатывает при нажатии клавиши. Он обычно используется для прослушивания определенных комбинаций клавиш или выполнения действий, пока клавиша удерживается нажатой, например для навигации по слайд-шоу или управления игрой.

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

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

7. mouseover событие

Это событие срабатывает при наведении указателя мыши на элемент. Он обычно используется для отображения дополнительной информации или обеспечения визуальной обратной связи при наведении курсора на элемент.

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

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

8. mouseout событие

Это событие запускается, когда указатель мыши перемещается за пределы элемента. Он обычно используется для скрытия или изменения элементов, когда указатель мыши больше не находится над ними.

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

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

9. scroll событие

Это событие срабатывает при прокрутке элемента. Он обычно используется для реализации таких функций, как бесконечная прокрутка, отложенная загрузка контента или обновление элементов пользовательского интерфейса в зависимости от их scroll положения.

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

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

10. focus событие

Это событие запускается, когда элемент получает focus, обычно при нажатии на него или когда пользователь переходит к нему с помощью клавиатуры. Он обычно используется для выполнения действий или обеспечения визуальной обратной связи, когда input элемент или получает focus.

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

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

Это лишь некоторые основные примеры событий в Vue.js. Вы можете настроить функции обработки событий в соответствии с конкретными потребностями вашего проекта.