Обработка событий

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <button v-on:click="counter++">+</button>
    <button v-on:click="if(counter>0) counter--;">-</button>
    <div>{{counter}}</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {counter:0},
    });
</script>
</body>
</html>

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

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

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

События в Vue.js

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

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

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

<div id="app">
    <button v-on:click="increase">+</button>
    <button v-on:click="decrease">-</button>
    <div>{{counter}}</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {counter:0},
        methods:{
            increase: function(){
                this.counter++;
            },
            decrease: function(){
                if(this.counter>0) 
                    this.counter--;
            }
        }
    });
</script>

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

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

<div id="app">
    <button v-on:click="increase">+</button>
    <button v-on:click="decrease">-</button>
    <div>{{counter}}</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {counter:0},
        methods:{
            increase: function(event){
                console.log(event);
                this.counter++;
            },
            decrease: function(event){
                console.log(event);
                this.counter--;
            }
        }
    });
</script>

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

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

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

<div id="app">
    <button v-on:click="increase(3)">+</button>
    <button v-on:click="decrease(2)">-</button>
    <div>{{counter}}</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {counter:0},
        methods:{
            increase: function(n){
                this.counter = this.counter + n;
            },
            decrease: function(n){
                this.counter = this.counter - n;
            }
        }
    });
</script>

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

И также мы можем совместить передачу значений и объекта события:

<div id="app">
    <button v-on:click="increase(3, $event)">+</button>
    <button v-on:click="decrease(2, $event)">-</button>
    <div>{{counter}}</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {counter:0},
        methods:{
            increase: function(n, event){
                console.log(event)
                this.counter = this.counter + n;
            },
            decrease: function(n, event){
                this.counter = this.counter - n;
            }
        }
    });
</script>

Для передачи объекта события в обработчик передается специальный объект $event.

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

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