Научете как да повишите нивото на обработката на събития с директивата v-on на Vue.
Слушането на потребителски събития е неразделна част от всяко адаптивно уеб приложение и приложенията Vue не са изключение. Vue се предлага с прост и ефективен начин за обработка на събития със своята директива v-on.
Какво е обвързване на събития във Vue?
Свързването на събития е функция на Vue.js, която ви позволява да прикачите слушател на събития към a Обектен модел на документ (DOM) елемент. Когато възникне събитие, слушателят на събития задейства действие или отговор във вашето приложение Vue.
Можете да постигнете обвързване на събития във Vue с v-on директива. Тази директива позволява на приложението ви да слуша за потребителски събития като събития с щракване, въвеждане или натискане на ключ.
За да прикачите слушател на събитие към елемент, като използвате v-on, добавете името на събитието като параметър към директивата:
<html>
<глава>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">
<бутонv-on: щракване="брояч++">Щракни върху менбутон>
<стр>{{ counter}}стр>
див>
<сценарий>
конст приложение = Vue.createApp({
данни() {
връщане {
текст: „Vue е страхотен!“,
брояч: 0
}
}
})
app.mount('#приложение')
сценарий>
тяло>
html>
Кодовият блок по-горе показва пример за приложение Vue, което слуша a щракнете събитие. Кодовият блок използва a бутон за увеличаване на брояч стойност в свойството данни на екземпляра на Vue с единица.
Горният кодов блок свързва JavaScript израза брояч++ към бутона щракнете събитие с v-on директива. Vue използва @ символ като стенограма на мястото на v-on директива поради v-onчеста употреба на:
<бутон @щракнете="брояч++">Щракни върху менбутон>
Обвързването на събития във Vue не се ограничава до събития с кликване. Vue обработва други събития, като събития при натискане на клавиши, събития при преместване на мишката и други.
За да обвържете някое от тези събития с v-on директива, заменете щракнете събитие с името на желаното събитие:
<бутон @keydown.enter="брояч++">Щракни върху менбутон>
Кодът по-горе настройва слушател на събития на бутон който слуша за клавиш надолу събитие. Когато който и да е клавиш е натиснат, докато бутонът е във фокус, Vue оценява брояч++ изразяване.
В повечето приложения на Vue можете да управлявате по-сложна логика въз основа на случващи се конкретни събития. Събитията и методите работят ръка за ръка, за да изпълняват действия на приложението въз основа на събитие.
Свойството на методите в Обект с опции на Vue притежава важни функции, от които вашето приложение Vue се нуждае за подобрена реактивност. Със свойството методи във Vue можете да управлявате сложна логика, базирана на събития.
Ето пример за приложение Vue, което показва събития, обработени от свойството методи:
<html>
<глава>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">
<бутон @щракнете="увеличение">Добавете 1бутон>
<бутон @щракнете="намалявам">намали 1бутон>
<стр>{{ counter }}стр>
див>
<сценарий>
const app = Vue.createApp({
данни() {
връщане {
текст: 'Vue е страхотен!',
брояч: 0
}
},
методи: {
увеличение(){
този.брояч = този.брояч + 1
},
намали() {
this.counter = този.брояч - 1
}
}
})
app.mount('#app')
сценарий>
тяло>
html>
Приложението Vue по-горе описва как да свържете събития с методи. Приложението има два бутона, върху които потребителите могат да щракнат, за да увеличат или намалят стойността на брояча в свойството на данните.
Приложението постига това с @щракване директива. The @щракване директива сочи към функциите в свойството методи за манипулиране на стойността на брояча.
Когато свързвате аргумент към събитието за щракване, можете да персонализирате методите за увеличаване и намаляване, за да добавите или намалите стойността на брояча въз основа на аргумента, който предавате на метода.
Така:
<тяло>
<дивдокумент за самоличност="приложение">
<бутон @щракнете="увеличение (5)">Добавете 5бутон><бутон @щракнете="намали (3)">намали 3бутон>
<стр>{{ counter }}стр>
див><сценарий>
const app = Vue.createApp({
данни() {
връщане {
текст: 'Vue е страхотен!',
брояч: 0
}
},
методи: {
увеличение (брой){
този.брояч = този.брояч + бр
},
намали (брой) {
this.counter = този.брояч - бр
}
}
})
app.mount('#app')
сценарий>
тяло>
Този кодов блок се разширява върху предишното приложение Vue, за да позволи предаването на аргументи към методите, свързани с слушателя на събитие за щракване върху бутона.
Методите за увеличаване и намаляване в екземпляра на Vue приемат аргумент num, за да увеличат или намалят свойството на брояча.
Този пример показва как можете да работите с аргументи, когато свързвате методи със събития във Vue. Свързването на методи със събития може да помогне да направите приложенията на Vue по-интерактивни.
Проучване на модификаторите за предотвратяване и спиране във Vue
Модификаторите на събития във Vue ви позволяват да създавате по-добри слушатели на събития, които отговарят на специфичните нужди на вашето приложение. За да използвате тези модификатори на събития, вие свързвате модификаторите към събития във Vue.
Например:
<форма @подавам.предотвратявам="handleSubmit">
<входТип="текст"v-модел="текст">
<бутонТип="Изпращане">Изпращанебутон>
форма>
Кодовият блок по-горе свързва веригата предотвратявам модификатор на събитието за изпращане. The предотвратявам модификатор обикновено се използва при работа с формуляри във Vue.
The предотвратявам Целта на модификатора е да предотврати поведението по подразбиране при изпращане на формуляр, което е да презареди страницата. Използвайки предотвратявам, Vue може да продължи своите процеси, докато handleSubmit методът се грижи за изпращането на формуляра.
Друг пример за много полезен модификатор е Спри се модификатор на събитие. The Спри се модификатор на събитие спира разпространението на събитие по-нагоре в DOM дървото.
Обикновено събитието на дъщерен елемент на HTML се издига през дървото на DOM, активирайки всички слушатели на събития, прикачени към родителските елементи. Можете да предотвратите това разпространение на събитието с Спри се модификатор и предотвратяване на събитието да задейства допълнителни слушатели на събития.
За да разберете как Спри се модификатор спира разпространението на събития по-нагоре в DOM дърво, разгледайте кодовия блок по-долу:
<тяло>
<дивдокумент за самоличност="приложение">
<див @щракнете="outerClick"клас="външен">
<див @клик.стоп="innerClick"клас="атрешна">
<бутон @щракнете="buttonClick"клас="бутон">Щракни върху менбутон>
див>
див>
див>
<сценарий>
const app = Vue.createApp({
методи: {
outerClick() {
console.log('Външно кликване')
},
innerClick() {
console.log('Вътрешно щракване')
},
buttonClick() {
console.log('Щракване върху бутон')
}
}
});
app.mount("#app");
сценарий>
тяло>
Кодовият блок по-горе има три слушателя на събития, прикрепени към три различни елемента. The бутон елемент е вътре в div с атрешна клас, докато div с атрешна клас е вътре в div с външен клас.
Всеки от трите елемента слуша за a щракнете събитие и се записва в конзолата, името на HTML елемента е щракнато. По-долу е допълнителен клас CSS стил, за да направи горния кодов блок по-лесен за разбиране:
<глава>
<стил>
.outer {
подложка: 20px;
цвят на фона: черен;
}
.атрешна {
подложка: 20px;
цвят на фона: сив;
}
бутон {
подложка: 10px;
цвят на фона: бял;
рамка: 2px плътно черно;
размер на шрифта: 16px;
тегло на шрифта: удебелен;
курсор: показалец;
}
стил>
глава>При стартиране на програмата създаденото приложение Vue ще изглежда така:
Имайте предвид, че когато щракнете върху бутона, програмата извиква бутонЩракнете метод и записва съобщение в конзолата. Програмата също извиква innerClick метод.
Програмата обаче не извиква outerClick метод, защото кодовият блок добави a Спри се модификатор на innerClick слушател на събития. Това спира събитието да се разпространи по-нагоре в DOM дървото.
Без Спри се модификатор, програмата ще извика бутонЩракнете метод, когато щракнете върху бутона, и събитието ще продължи да се разпространява нагоре по дървото, достигайки до innerClick метод и след това outerClick метод.
Обработка на събития в уеб приложения
Научихте как да използвате обвързване на събития във Vue, за да прикачите слушатели на събития към елементи и как да извиквате методи, когато възникнат събития. Разбрахте също как да използвате модификатори на събития, за да персонализирате поведението на събитието.
Уеб приложенията разчитат на някаква форма на потребителски събития, за да изпълняват функции. JavaScript идва с вградени много методи за улавяне и обработка на различни от тези събития. Тези събития помагат при изграждането на интерактивни приложения.
