На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 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, обработка событий

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




Урок 2. Создание простого класса на C#
Лабиринты Java, часть 3: класс AstarState


© upread.ru 2013-2021
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.