Aflați cum să vă îmbunătățiți gestionarea evenimentelor cu directiva v-on a lui Vue.
Ascultarea evenimentelor utilizatorului este o parte integrantă a oricărei aplicații web receptive, iar aplicațiile Vue nu fac excepție. Vue este construit cu o modalitate simplă și eficientă de a gestiona evenimente cu directiva sa v-on.
Ce este Event Binding în Vue?
Legarea evenimentelor este o caracteristică Vue.js care vă permite să atașați un ascultător de evenimente la un Document Object Model (DOM) element. Când are loc un eveniment, ascultătorul evenimentului declanșează o acțiune sau un răspuns în aplicația ta Vue.
Puteți obține legarea de evenimente în Vue cu v-on directivă. Această directivă permite aplicației dvs. să asculte evenimentele utilizatorului, cum ar fi evenimente de clic, introducere sau tastare.
Pentru a atașa un ascultător de evenimente la un element folosind v-on, adăugați numele evenimentului ca parametru la directivă:
<html>
<cap>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js"> scenariu>
cap>
<corp>
<divid=„aplicație”>
<butonv-on: faceți clic="contra++">Click pe minebuton>
<p>{{ tejghea}}p>
div>
<scenariu>
const app = Vue.createApp({
date() {
întoarcere {
text: „Vue este minunat!”,
contor: 0
}
}
})
app.mount(„#aplicație”)
scenariu>
corp>
html>
Blocul de cod de mai sus arată un exemplu de aplicație Vue care ascultă un clic eveniment. Blocul de cod folosește a buton pentru a incrementa tejghea valoare în proprietatea de date a instanței Vue cu unul.
Blocul de cod de mai sus leagă expresia JavaScript contor++ la buton clic eveniment cu v-on directivă. Vue folosește @ caracter ca stenografie în locul lui v-on directivă din cauza v-onutilizarea frecventă a lui:
<buton @clic="contra++">Click pe minebuton>
Legarea evenimentelor în Vue nu se limitează la evenimentele de clic. Vue gestionează alte evenimente, cum ar fi evenimente de apăsare a tastelor, evenimente de trecere cu mouse-ul și multe altele.
Pentru a lega oricare dintre aceste evenimente de v-on directivă, înlocuiți clic eveniment cu numele evenimentului dorit:
<buton @keydown.enter="contra++">Click pe minebuton>
Codul de mai sus configurează un ascultător de evenimente pe buton care ascultă pentru Tasta în jos eveniment. Când orice tastă este apăsată în timp ce butonul este focalizat, Vue evaluează contor++ expresie.
În majoritatea aplicațiilor Vue, puteți gestiona o logică mai complexă bazată pe evenimente specifice care au loc. Evenimentele și metodele funcționează mână în mână pentru a efectua acțiuni ale aplicației bazate pe un eveniment.
Proprietatea metodelor în Obiectul Opțiuni al lui Vue deține funcții importante de care aplicația ta Vue are nevoie pentru o reactivitate îmbunătățită. Cu proprietatea methods din Vue, puteți gestiona logica complexă bazată pe evenimente.
Iată un exemplu de aplicație Vue care arată evenimente gestionate de proprietatea methods:
<html>
<cap>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>
<buton @clic="creştere">Adăugați 1buton>
<buton @clic="reduce">reduce 1buton>
<p>{{ tejghea }}p>
div>
<scenariu>
const app = Vue.createApp({
date() {
întoarcere {
text: „Vue este minunat!”,
contor: 0
}
},
metode: {
creştere(){
acest.contor = acest.contor + 1
},
reduce() {
acest.contor = acest.contor - 1
}
}
})
app.mount('#app')
scenariu>
corp>
html>
Aplicația Vue de mai sus arată cum să legați evenimentele cu metode. Aplicația are două butoane pe care utilizatorii le pot face clic pentru a crește sau reduce valoarea contorului din proprietatea datelor.
Aplicația realizează acest lucru cu @clic directivă. The @clic directiva indică funcțiile din proprietatea methods pentru a manipula valoarea contorului.
Când legați un argument la evenimentul clic, puteți personaliza metodele de creștere și reducere pentru a adăuga sau reduce valoarea contorului în funcție de argumentul pe care îl transmiteți metodei.
Ca astfel:
<corp>
<divid=„aplicație”>
<buton @clic=„increment (5)”>Adăugați 5buton><buton @clic="reduce (3)">reduce 3buton>
<p>{{ tejghea }}p>
div><scenariu>
const app = Vue.createApp({
date() {
întoarcere {
text: „Vue este minunat!”,
contor: 0
}
},
metode: {
increment (num){
acest.contor = acest.contor + num
},
reduce (num) {
acest.contor = acest.contor - num
}
}
})
app.mount('#app')
scenariu>
corp>
Acest bloc de cod se extinde pe aplicația Vue anterioară pentru a permite transmiterea de argumente la metodele legate de ascultatorul de evenimente de clic pe buton.
Metodele de increment și reducere în instanța Vue iau un argument num pentru a crește sau a reduce proprietatea counter.
Acest exemplu arată cum puteți lucra cu argumente atunci când legați metode cu evenimente în Vue. Conectarea metodelor cu evenimente poate ajuta la a face aplicațiile Vue mai interactive.
Explorarea modificatorilor de prevenire și oprire din Vue
Modificatorii de evenimente din Vue vă permit să creați ascultători de evenimente mai buni, care să răspundă nevoilor specifice ale aplicației dvs. Pentru a utiliza acești modificatori de evenimente, înlănțuiți modificatorii la evenimentele din Vue.
De exemplu:
<formă @depune.preveni="trateazăTrimite">
<intraretip="text"v-model="text">
<butontip="Trimite">Trimitebuton>
formă>
Blocul de cod de mai sus conectează împiedica modificator la evenimentul de trimitere. The împiedica modificatorul este folosit în mod obișnuit atunci când lucrați cu formulare în Vue.
The împiedica Scopul modificatorului este de a preveni comportamentul implicit al trimiterii formularelor, care este reîncărcarea paginii. Folosind împiedica, Vue își poate continua procesele în timp ce handleSubmit metoda se ocupă de transmiterea formularului.
Un alt exemplu de modificator foarte util este Stop modificator de eveniment. The Stop modificatorul de evenimente oprește propagarea unui eveniment mai sus în arborele DOM.
De obicei, un eveniment al unui element copil HTML apare prin arborele DOM, activând orice ascultători de evenimente atașați elementelor părinte. Puteți preveni acest lucru propagarea evenimentului cu Stop modificator și împiedică evenimentul să declanșeze mai mulți ascultători de evenimente.
Pentru a înțelege cum Stop modificatorul oprește propagarea evenimentelor mai sus într-un arbore DOM, luați în considerare blocul de cod de mai jos:
<corp>
<divid=„aplicație”>
<div @clic=„Click exterior”clasă="exterior">
<div @click.stop="innerClick"clasă="interior">
<buton @clic="buttonClick"clasă="buton">Click pe minebuton>
div>
div>
div>
<scenariu>
const app = Vue.createApp({
metode: {
outerClick() {
console.log('Clic exterior')
},
innerClick() {
console.log('Clic interior')
},
buttonClick() {
console.log('Clic pe buton')
}
}
});
app.mount("#aplicație");
scenariu>
corp>
Blocul de cod de mai sus are trei ascultători de evenimente atașați la trei elemente diferite. The buton elementul este în interiorul div-ului cu interior clasa, în timp ce div-ul cu interior clasa este în interiorul div-ului cu exterior clasă.
Fiecare dintre cele trei elemente ascultă a clic eveniment și se înregistrează în consolă, s-a făcut clic pe numele elementului HTML. Mai jos este o clasă suplimentară de stil CSS pentru a face mai ușor de înțeles blocul de cod de mai sus:
<cap>
<stil>
.exterior {
umplutură: 20px;
culoare de fundal: negru;
}
.interior {
umplutură: 20px;
culoare de fundal: gri;
}
butonul {
umplutură: 10px;
culoare de fundal: alb;
chenar: 2px negru solid;
dimensiunea fontului: 16px;
greutate font: bold;
cursor: pointer;
}
stil>
cap>La rularea programului, aplicația Vue creată va arăta astfel:
Rețineți că atunci când faceți clic pe butonul, programul apelează butonulClic metoda și înregistrează un mesaj pe consolă. Programul mai numește și innerClick metodă.
Cu toate acestea, programul nu apelează outerClick metoda deoarece blocul de cod a adăugat o Stop modificator la innerClick ascultător de evenimente. Acest lucru oprește propagarea evenimentului mai sus în arborele DOM.
Fara Stop modificator, programul va apela butonulClic când faceți clic pe butonul, iar evenimentul va continua să se propage în sus în arbore, ajungând la innerClick metoda și apoi cea outerClick metodă.
Gestionarea evenimentelor în aplicațiile web
Ați învățat cum să utilizați legarea de evenimente în Vue pentru a atașa ascultătorii de evenimente la elemente și cum să apelați metode atunci când apar evenimente. De asemenea, ați înțeles cum să utilizați modificatorii de evenimente pentru a personaliza comportamentul evenimentului.
Aplicațiile web se bazează pe o anumită formă de evenimente de utilizator pentru a îndeplini funcții. JavaScript vine încorporat cu o mulțime de metode pentru a captura și gestiona o varietate de aceste evenimente. Aceste evenimente ajută la construirea de aplicații interactive.