|
Урок 6. Введение в обработку событий Vue.jsVue.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, обработка событийЧитайте также:
|
|
| © upread.ru 2013-2023 При перепечатке активная ссылка на сайт обязательна. |
