От автора: v-on – это атрибут, добавляемый к элементам DOM для того, чтобы прослушивать во Vue JS события.
Событие Click
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click = "displaynumbers">Click ME</button> <h2> Add Number 100 + 200 = {{total}}</h2> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { num1: 100, num2 : 200, total : '' }, methods : { displaynumbers : function(event) { console.log(event); return this.total = this.num1+ this.num2; } }, }); </script> </body>
</html>
Следующий код используется для присвоения события click элементу DOM.
<button v-on:click = "displaynumbers">Click ME</button>
Существует сокращение для v-on, то есть мы можем также вызвать событие следующим образом:
<button @click = "displaynumbers">Click ME</button>
При нажатии на кнопку будет вызываться метод ‘displaynumbers’, который принимает событие, в браузере мы получили то же самое. Дальше мы рассмотрим ещё одно событие – mouseover mouseout.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { num1: 100, num2 : 200, total : '', styleobj : { width:"100px", height:"100px", backgroundColor:"red" } }, methods : { changebgcolor : function() { this.styleobj.backgroundColor = "green"; }, originalcolor : function() { this.styleobj.backgroundColor = "red"; } }, }); </script> </body>
</html>
В вышеприведённом примере мы создали div с шириной и высотой 100px, цвет фона – красный. Для mouseover мы изменяем цвет на зелёный, а для mouseout – обратно на красный.
Соответственно, при mouseover вызывается changebgcolor, а при mouseout вызывается originalcolor. Вот как это происходит:
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
Два события — mouseover и mouseout – присвяиваются к div, как мы увидели только что в примере выше. Мы создали переменную styleobj, указали, чтобы требуемый стиль был присвоен к div. Та же самая переменная привязывается к div, используя v-bind:style = ”styleobj”
Благодаря changebgcolor мы изменяем цвет на зелёный, используя следующий код.
changebgcolor : function() { this.styleobj.backgroundColor = "green";
}
Используя переменную stylobj, мы изменяем цвет на зелёный. Похожим образом следующий код используется для того, чтобы вернуть прежний цвет.
originalcolor : function() { this.styleobj.backgroundColor = "red";
}
Вот, что мы видим в браузере.
Когда мы выполняем mouseover, то цвет меняется на зелёный так, как это показано на следующем скриншоте.
Модификаторы событий
Vue содержит модификаторы событий в атрибуте v-on. Доступны следующие модификаторы:
.once
Позволяет выполнить событие только один раз.
Синтаксис
<button v-on:click.once = "buttonclicked">Click Once</button>
Нам нужно добавить оператор dot во время вызова модификаторов, как в вышеуказанном синтаксисе. Давайте используем его в качестве примера и рассмотрим, как работает модификатор once. Пример
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button> Output:{{clicknum}} <br/><br/> <button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button> Output:{{clicknum1}} </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { clicknum : 0, clicknum1 :0, styleobj: { backgroundColor: '#2196F3!important', cursor: 'pointer', padding: '8px 16px', verticalAlign: 'middle', } }, methods : { buttonclickedonce : function() { this.clicknum++; }, buttonclicked : function() { this.clicknum1++; } } }); </script> </body>
</html>
В этом примере мы создали две кнопки. Кнопка с меткой Click Once добавила модификатор once, а другая кнопка не имеет модификатора. Вот как определяются кнопки.
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button> <button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
Первая кнопка вызывает метод “buttonclickedonce”, а вторая – метод “buttonclicked”.
buttonclickedonce : function() { this.clicknum++;
},
buttonclicked : function() { this.clicknum1++;
}
В clicknum и clicknum1 определяются две переменные. Обе увеличиваются, когда нажимается кнопка. Обе переменные инициализируются с 0, в вышеприведённом результате можно увидеть отображение.
При нажатии на первую кнопку переменная clicknum увеличивается до 1. При втором нажатии, число не увеличивается, потому что модификатор не даёт ему выполняться или выполнять присвоение любого элемента действия клику кнопки.
При нажатии второй кнопки выполняется то же самое действие, то есть переменная увеличивается. При каждом нажатии, переменная увеличивается и отображается. В браузере получаем следующий результат.
.prevent
Синтаксис
<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { clicknum : 0, clicknum1 :0, styleobj: { color: '#4CAF50', marginLeft: '20px', fontSize: '30px' } }, methods : { clickme : function() { alert("Anchor tag is clicked"); } } }); </script> </body>
</html>
Если мы нажмём на ссылку clickme, будет выдано предупреждение: «Нажатие тэга привязки» и в новой вкладке откроется ссылка https://www.google.com, как мы можем увидеть на следующем скриншоте.
Теперь всё работает хорошо, ссылка открывается так, как мы этого и хотели. В том случае, если мы не хотим, чтобы ссылка открывалась, нам нужно добавить к событию модификатор ‘prevent’, как в следующем коде.
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
Если мы добавили модификатор, то после нажатия на кнопку нам выдастся предупреждение и ссылка больше не откроется. Модификатор prevent не позволяет ссылке открываться и выполняет метод, присвоенный тэгу.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { clicknum : 0, clicknum1 :0, styleobj: { color: '#4CAF50', marginLeft: '20px', fontSize: '30px' } }, methods : { clickme : function() { alert("Anchor tag is clicked"); } } }); </script> </body>
</html>
При нажатии на ссылку мы получим предупреждение и url больше не откроется.
События – Модификаторы клавиш
VueJS предлагает модификаторы клавиш, с помощью которых мы можем контролировать события. Представим, что у нас есть текстовое поле, и мы хотим, чтобы метод вызывался только при нажатии на Enter. Это возможно благодаря добавлению к событиям модификаторов клавиш, как в следующем примере.
Синтаксис
<input type = "text" v-on:keyup.enter = "showinputvalue"/>
Клавиша, которую мы хотим применить к событию – это V-on.eventname.keyname (как на примере выше). Мы можем использовать несколько клавиш. Например, V-on.keyup.ctrl.enter
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/> <h3> {{name}}</h3> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { name:'', styleobj: { width: "30%", padding: "12px 20px", margin: "8px 0", boxSizing: "border-box" } }, methods : { showinputvalue : function(event) { this.name=event.target.value; } } }); </script> </body>
</html>
Введите что-нибудь в текстовом поле и это отобразиться только после нажатия Enter.
Пользовательские события
Родительский компонент может передать данные дочерним компонентам, используя атрибут prop, однако, мы должны указать родителю, где происходят изменения в дочернем компоненте. Для этого мы используем пользовательские события. Родительный компонент может прослушивать дочерний компонент используя атрибут v-on.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div id = "counter-event-example"> <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p> <button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"></button-counter> </div> </div> <script type = "text/javascript"> Vue.component('button-counter', { template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>', data: function () { return { counter: 0 } }, props:['item'], methods: { displayLanguage: function (lng) { console.log(lng); this.$emit('showlanguage', lng); } }, }); var vm = new Vue({ el: '#databinding', data: { languageclicked: "", languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"] }, methods: { languagedisp: function (a) { this.languageclicked = a; } } }) </script> </body>
</html>
Вышеприведённый код демонстрирует передачу данных между родительским и дочерним компонентом. Компонент создаётся при помощи следующего кода.
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
Здесь присутствует атрибут v-for, который образует цикл с массивом languages. Массив содержит список языков. Нам нужно передать данные дочернему компоненту. Значения массивов хранятся в item и index.
v-bind:item = "item" v-bind:index = "index"
Чтобы сослаться на значения массива, нам нужно сначала привязать его к переменной, а ссылка на переменную добавляется с использованием свойства props, как в следующем примере.
Vue.component('button-counter', { template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>', data: function () { return { counter: 0 } }, props:['item'], methods: { displayLanguage: function (lng) { console.log(lng); this.$emit('showlanguage', lng); } },
});
Свойство props содержит item в форме массива. Мы можем также сослаться на index таким образом:
props:['item', 'index']
К компоненту также было добавлено событие:
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
Событие называется showlanguage, оно вызывает метод с именем languagedisp, который определяется в экземпляре Vue. В компоненте шаблон определяется таким образом:
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
Создаётся кнопка. Кнопка создаётся с таким же количеством счётчиков в массиве language. При нажатии на кнопку будет вызываться метод с именем displayLanguage, и item будет передаваться в качестве параметра функции. Теперь компонент должен отправить элемент, на который мы нажали, родительному компоненту для отображения таким образом:
Vue.component('button-counter', { template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>', data: function () { return { counter: 0 } }, props:['item'], methods: { displayLanguage: function (lng) { console.log(lng); this.$emit('showlanguage', lng); } },
});
Метод displayLanguage вызывает this.$emit(‘showlanguage’, lng);
$emit используется для вызова метода родительного компонента. Метод showlanguage – это имя события, преданного компоненту с v-on.
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
Мы передаём параметр, то есть названия выбранного языка, методу основного родителя экземпляра Vue, который определён следующим образом.
var vm = new Vue({ el: '#databinding', data: { languageclicked: "", languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"] }, methods: { languagedisp: function (a) { this.languageclicked = a; } }
})
В данном случае emit запускает showlanguage, который по очереди вызывает languagedisp из методов экземпляра Vue. Он присваивает значение выбранного языка переменной languageclicked, и то же самое отображается в браузере, как показано на скриншоте ниже.
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
Вот что мы получим в браузере.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.