Обработка ввода пользователя. События

Последнее обновление: 31.10.2020

Для обработки ввода пользователя и событий элементов html в Vue 3 применяется директива v-on, после которой через двоеточие указывается тип обрабатываемого события:

v-on:click="действия"

В качестве типа события используется любое стандартное событие элементов html на веб-странице. Затем этой директиве в кавычках передаются те действия, которые должны выполняться при возникновении события. Например:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <button v-on:click="counter++">+</button>
    <span>{{counter}}</span>
    <button v-on:click="if(counter>0) counter--;">-</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {counter:0}
  }
}).mount('#app');
</script>
</body>
</html>

В качестве действия директиве v-on можно передать любые валидные операции JavaScript. В данном случае, так как у нас определено во Vue свойство counter, то мы можем манипулировать значением этого свойства:

<button v-on:click="counter++">+</button>
<span>{{counter}}</span>
<button v-on:click="if(counter>0) counter--;">-</button>

Фактически директивам v-on передается кусок кода JavaScript, где свойства из Vue доступны как обычные переменные.

Обработка ввода пользователя и событий в Vue 3

Также мы можем использовать сокращенный синтаксис для определения обработчиков событий:

<button @click="counter++">+</button>
<span>{{counter}}</span>
<button @click="if(counter>0) counter--;">-</button>

Однако если обработка событий предусматривает гораздо больше действий, то такой подход не является оптимальным. И в этом случае, как правило, все операции, которые необходимо вызывать при генерации события, выносятся в отдельные методы объекта Vue. Например, перепишем предыдущий пример следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <button @click="increase">+</button>
    <span>{{counter}}</span>
    <button @click="decrease">-</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {counter:0}
  },
  methods:{
	increase(){
		this.counter++;
	},
	decrease(){
		if(this.counter>0) this.counter--;
	}
  }
}).mount('#app');
</script>
</body>
</html>

При нажатии на одну кнопку срабатывает метод increase, который увеличивает значение переменной counter. При нажатии на вторую кнопку вызывается метод decrease, который уменьшает это значение.

Передача параметров в обработчик события

Также мы можем передать в методы для обработки событий какие-то дополнительные значения:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <button v-on:click="increase(4)">+</button>
    <span>{{counter}}</span>
    <button v-on:click="decrease(2)">-</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {counter:0}
  },
  methods:{
	increase(n){
		this.counter = this.counter + n;
	},
	decrease(n){
		if(this.counter>0) this.counter = this.counter - n;
	}
  }
}).mount('#app');
</script>
</body>
</html>

В данном случае увеличение переменной counter будет идти на 4, а уменьшение - на 2.

Получение объекта события

При генерации события в его обработчике в качестве параметра мы можем получить объект, который инкапсулирует всю информацию о событии:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <button v-on:click="increase($event)">+</button>
    <span>{{counter}}</span>
    <button v-on:click="decrease($event)">-</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {counter:0}
  },
  methods:{
	increase(event){
		console.log(event);
		this.counter++;
	},
	decrease(event){
		console.log(event);
		if(this.counter>0) this.counter--;
	}
  }
}).mount('#app');
</script>
</body>
</html>

В качестве параметра в методы-обработчики события передается объект события. Это стандартный объект, который используется при обработке событий в обычном JavaScript. В зависимости от типа события этот объект может нести разную информацию.

Объект события в Vue 3

Также можно совместить получение объекта $event и передачу других параметров в обработчике события:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <button v-on:click="increase(4, $event)">+</button>
    <span>{{counter}}</span>
    <button v-on:click="decrease(2, $event)">-</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {counter:0}
  },
  methods:{
	increase(n, event){
		console.log(event);
		this.counter = this.counter + n;
	},
	decrease(n, event){
		console.log(event);
		if(this.counter>0) this.counter = this.counter - n;
	}
  }
}).mount('#app');
</script>
</body>
</html>

Множественная обработка событий

В примерах выше событию нажатию кнопки сопоставлялся один обработчик - в данном случае метод increase или decrease. Но также можно прикрепить к событию сразу несколько обработчиков:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
<style>
button{margin:20px;}
</style>
</head>
<body>
<div id="app">
    <button v-on:click="increase(2), inform()">+</button>
    <span>{{ counter }}</span>
	<div>{{ status }}</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {counter:0, status:''}
  },
  methods:{
	increase(n){
		this.counter = this.counter + n;
	},
	inform(){
		this.status = "Время нажатия кнопки: " + new Date().toLocaleString();
	}
  }
}).mount('#app');
</script>
</body>
</html>

В данном случае к событию нажатия привязаны два обработчика - методы increase и inform. И при нажатии кнопки будут срабатывать сразу оба этих метода. Метод inform с помощью выражения new Date().toLocaleString() получает текущее время (фактически время нажатия кнопки) и изменяет свойство status, которое выводится на веб-страницу:

Несколько обработчиков слушателей событий в Vue 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850