Урок 6. Введение в обработку событий Vue.js

Vue.js предоставляет директиву v-on для прослушивания и обработки событий. Мы можем использовать директиву v-on для прослушивания DOM и выполнения необходимых задач. Vue также имеет множество обработчиков событий, но на данном уроке из серии уроков Vue 3 для начинающих, мы ограничимся знакомством с v-on:click.

Точно так же, как событие onClick в Javascript, Vue.js обеспечивает v-on:click для отслеживания событий. Если мы создадим кнопку и захотим открыть функцию, мы можем использовать v-on вот так:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue тест upread.ru</title>
	</head>
	<body>
		<div id="app">
		<h1>{{ title }}</h1>
		<button v-on:click="doSomething()">Кликни меня!</button>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="app.js"></script>
	</body>
</html>

Этот метод можно записать в раздел методы в объекте Vue:

const App = {
	data() {
		return {
			title: 'Заголовок',
			counter: 0,
			username: 'Yurii'
		}
	},
	methods: {
		toUpperCase() {
			return this.username.toUpperCase()
		},
		doSomething() {
			alert("Ура!");
		}
	},
	computed: {
		toUpperCase() {
			return this.username.toUpperCase()
		}
	}
}

Vue.createApp(App).mount('#app')

Если нам нужно больше одного параметра, мы должны написать его так:

<button v-on:click="doSomething(2, $event)">Click me</button>

Изменение события - с помощью Модификаторов событий (Event Modifiers)

Обработка событий - это еще не все, мы также можем их изменять. В качестве примера мы создаем поле ввода и хотим считывать входные данные, когда кто-то нажимает enter или пробел:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue тест upread.ru</title>
	</head>
	<body>
		<div id="app">
		<h1>{{ title }}</h1>
		<button v-on:click="doSomething()">Кликни меня!</button>
		<input type="text" v-on:keyup.enter.space="readInput" />
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="app.js"></script>
	</body>
</html>

И Vue объект:

const App = {
	data() {
		return {
			title: 'Заголовок',
			counter: 0,
			username: 'Yurii'
		}
	},
	methods: {
		toUpperCase() {
			return this.username.toUpperCase()
		},
		doSomething() {
			alert("Ура!")
		},
		readInput: function(event) {
			alert(event.target.value)
		}
	},

	computed: {
		toUpperCase() {
			return this.username.toUpperCase()
		}
	}
}

Vue.createApp(App).mount('#app')

Мы также можем использовать .tab, .esc и некоторые другие. Но это только вершина айсберга, потому что это всего лишь модификаторы для keyup.

Экономьте время с помощью сокращений

Вместо того, чтобы писать v-on, мы можем написать @. В качестве примера: v-on: click тоже можно написать @click.

Вместо того, чтобы писать v-bind, мы можем написать :. В качестве примера: v-bind:href также может быть записано как :href.

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, Уроки по Vue, Vue, обработка событий

Читайте также:

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

Программирование up

Мои услуги