Μάθετε πώς να αναβαθμίζετε τον χειρισμό συμβάντων με την οδηγία v-on του Vue.
Η ακρόαση συμβάντων χρήστη αποτελεί αναπόσπαστο μέρος οποιασδήποτε αποκριτικής εφαρμογής ιστού και οι εφαρμογές Vue δεν αποτελούν εξαίρεση. Το Vue έχει κατασκευαστεί με έναν απλό και αποτελεσματικό τρόπο χειρισμού συμβάντων με την οδηγία v-on.
Τι είναι το Event Binding στο Vue;
Το Event Binding είναι μια δυνατότητα Vue.js που σας επιτρέπει να επισυνάψετε ένα πρόγραμμα ακρόασης συμβάντων σε ένα Μοντέλο αντικειμένου εγγράφου (DOM) στοιχείο. Όταν συμβαίνει ένα συμβάν, το πρόγραμμα ακρόασης συμβάντος ενεργοποιεί μια ενέργεια ή απόκριση στην εφαρμογή Vue.
Μπορείτε να επιτύχετε δέσμευση εκδηλώσεων στο Vue με το v-on διευθυντικός. Αυτή η οδηγία επιτρέπει στην εφαρμογή σας να ακούει συμβάντα χρήστη όπως συμβάντα κλικ, εισαγωγής ή πληκτρολόγησης.
Για να προσαρτήσετε ένα πρόγραμμα ακρόασης συμβάντων σε ένα στοιχείο χρησιμοποιώντας v-on, προσθέστε το όνομα συμβάντος ως παράμετρο στην οδηγία:
<html>
<κεφάλι>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js"> γραφή>
κεφάλι>
<σώμα>
<divταυτότητα="εφαρμογή">
<κουμπίv-on: κλικ="counter++">Κάντε κλικ σε εμένακουμπί>
<Π>{{ μετρητής}}Π>
div>
<γραφή>
συνθ app = Vue.createApp({
δεδομένα() {
ΕΠΙΣΤΡΟΦΗ {
κείμενο: "Το Vue είναι φοβερό!",
μετρητής: 0
}
}
})
app.mount('#εφαρμογή')
γραφή>
σώμα>
html>
Το μπλοκ κώδικα παραπάνω δείχνει ένα παράδειγμα εφαρμογής Vue που ακούει α Κάντε κλικ Εκδήλωση. Το μπλοκ κώδικα χρησιμοποιεί α κουμπί να αυξήσει το μετρητής τιμή στην ιδιότητα δεδομένων της παρουσίας Vue κατά ένα.
Το παραπάνω μπλοκ κώδικα δεσμεύει την έκφραση JavaScript μετρητής++ στο κουμπί Κάντε κλικ εκδήλωση με το v-on διευθυντικός. Το Vue χρησιμοποιεί το @ χαρακτήρας ως στενογραφία στη θέση του v-on οδηγία λόγω v-onσυχνή χρήση του:
<κουμπί @Κάντε κλικ="counter++">Κάντε κλικ σε εμένακουμπί>
Η δέσμευση συμβάντων στο Vue δεν περιορίζεται σε συμβάντα κλικ. Το Vue χειρίζεται άλλα συμβάντα, όπως συμβάντα με το πάτημα πλήκτρων, συμβάντα τοποθέτησης του ποντικιού και άλλα.
Για να συνδέσετε οποιοδήποτε από αυτά τα συμβάντα με το v-on οδηγία, αντικαταστήστε το Κάντε κλικ συμβάν με το όνομα του επιθυμητού συμβάντος:
<κουμπί @keydown.enter="counter++">Κάντε κλικ σε εμένακουμπί>
Ο παραπάνω κώδικας ρυθμίζει ένα πρόγραμμα ακρόασης συμβάντων στο κουμπί που ακούει για το keydown Εκδήλωση. Όταν πατηθεί οποιοδήποτε πλήκτρο ενώ το κουμπί έχει εστίαση, το Vue αξιολογεί το μετρητής++ έκφραση.
Στις περισσότερες εφαρμογές Vue, μπορείτε να χειριστείτε πιο σύνθετη λογική με βάση συγκεκριμένα συμβάντα που συμβαίνουν. Τα συμβάντα και οι μέθοδοι λειτουργούν χέρι-χέρι για την εκτέλεση ενεργειών εφαρμογής με βάση ένα συμβάν.
Η ιδιότητα των μεθόδων σε Αντικείμενο επιλογών του Vue διαθέτει σημαντικές λειτουργίες που χρειάζεται η εφαρμογή Vue για βελτιωμένη αντιδραστικότητα. Με την ιδιότητα μεθόδων στο Vue, μπορείτε να χειριστείτε πολύπλοκη λογική που βασίζεται σε συμβάντα.
Ακολουθεί ένα παράδειγμα μιας εφαρμογής Vue που εμφανίζει συμβάντα που χειρίζονται από την ιδιότητα μεθόδων:
<html>
<κεφάλι>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js">γραφή>
κεφάλι>
<σώμα>
<divταυτότητα="εφαρμογή">
<κουμπί @Κάντε κλικ="αύξηση">Προσθέστε 1κουμπί>
<κουμπί @Κάντε κλικ="περιορίζω">μειώνω 1κουμπί>
<Π>{{ μετρητής }}Π>
div>
<γραφή>
const app = Vue.createApp({
δεδομένα() {
ΕΠΙΣΤΡΟΦΗ {
text: 'Το Vue είναι υπέροχο!',
μετρητής: 0
}
},
μέθοδοι: {
αύξηση(){
αυτός.μετρητής = αυτός.μετρητής + 1
},
μείωση() {
αυτός.μετρητής = αυτός.μετρητής - 1
}
}
})
app.mount('#app')
γραφή>
σώμα>
html>
Η παραπάνω εφαρμογή Vue απεικονίζει τον τρόπο σύνδεσης συμβάντων με μεθόδους. Η εφαρμογή διαθέτει δύο κουμπιά στα οποία οι χρήστες μπορούν να κάνουν κλικ για να αυξήσουν ή να μειώσουν την τιμή του μετρητή στην ιδιότητα δεδομένων.
Η εφαρμογή το επιτυγχάνει με το @Κάντε κλικ διευθυντικός. ο @Κάντε κλικ Η οδηγία δείχνει τις συναρτήσεις στην ιδιότητα των μεθόδων για τον χειρισμό της τιμής του μετρητή.
Όταν συνδέετε ένα όρισμα με το συμβάν κλικ, μπορείτε να προσαρμόσετε τις μεθόδους αύξησης και μείωσης για να προσθέσετε ή να μειώσετε την τιμή του μετρητή με βάση το όρισμα που μεταβιβάζετε στη μέθοδο.
Όπως έτσι:
<σώμα>
<divταυτότητα="εφαρμογή">
<κουμπί @Κάντε κλικ="προσαύξηση (5)">Προσθέστε 5κουμπί><κουμπί @Κάντε κλικ="μείωση (3)">μειώνω 3κουμπί>
<Π>{{ μετρητής }}Π>
div><γραφή>
const app = Vue.createApp({
δεδομένα() {
ΕΠΙΣΤΡΟΦΗ {
text: 'Το Vue είναι υπέροχο!',
μετρητής: 0
}
},
μέθοδοι: {
προσαύξηση (αριθμός){
αυτός.μετρητής = αυτός.μετρητής + αρίθμ
},
μείωση (αριθμός) {
αυτός.μετρητής = αυτός.μετρητής - αρίθμ
}
}
})
app.mount('#app')
γραφή>
σώμα>
Αυτό το μπλοκ κώδικα επεκτείνεται στην προηγούμενη εφαρμογή Vue για να επιτρέπει τη μετάδοση ορισμάτων στις μεθόδους που συνδέονται με το πρόγραμμα ακρόασης συμβάντων κλικ στο κουμπί.
Οι μέθοδοι αύξησης και μείωσης στο στιγμιότυπο Vue λαμβάνουν ένα όρισμα num για να αυξήσουν ή να μειώσουν την ιδιότητα του μετρητή.
Αυτό το παράδειγμα δείχνει πώς μπορείτε να εργαστείτε με ορίσματα όταν συνδέετε μεθόδους με συμβάντα στο Vue. Η σύνδεση μεθόδων με συμβάντα μπορεί να βοηθήσει στο να γίνουν οι εφαρμογές Vue πιο διαδραστικές.
Εξερευνώντας τους τροποποιητές Αποτροπή και Διακοπή στο Vue
Οι τροποποιητές συμβάντων στο Vue σάς επιτρέπουν να δημιουργείτε καλύτερους ακροατές συμβάντων που καλύπτουν τις συγκεκριμένες ανάγκες της εφαρμογής σας. Για να χρησιμοποιήσετε αυτούς τους τροποποιητές συμβάντων, συνδέετε τους τροποποιητές σε συμβάντα στο Vue.
Για παράδειγμα:
<μορφή @υποβάλλω.αποτρέψω="handleSubmit">
<εισαγωγήτύπος="κείμενο"v-μοντέλο="κείμενο">
<κουμπίτύπος="υποβάλλουν">υποβάλλουνκουμπί>
μορφή>
Το μπλοκ κώδικα παραπάνω αλυσιδώνει το αποτρέψει τροποποιητής στο συμβάν υποβολής. ο αποτρέψει Ο τροποποιητής χρησιμοποιείται συνήθως όταν εργάζεστε με φόρμες στο Vue.
ο αποτρέψει Ο σκοπός του τροποποιητή είναι να αποτρέψει την προεπιλεγμένη συμπεριφορά της υποβολής φόρμας, που είναι η επαναφόρτωση της σελίδας. Χρησιμοποιώντας αποτρέψει, το Vue μπορεί να συνεχίσει τις διαδικασίες του ενώ το handleSubmit μέθοδος φροντίζει για την υποβολή της φόρμας.
Ένα άλλο παράδειγμα ενός πολύ χρήσιμου τροποποιητή είναι το να σταματήσει τροποποιητής συμβάντος. ο να σταματήσει Ο τροποποιητής συμβάντος σταματά τη διάδοση ενός συμβάντος πιο πάνω στο δέντρο DOM.
Συνήθως, το συμβάν ενός θυγατρικού στοιχείου HTML εμφανίζεται με φυσαλίδες μέσω του δέντρου DOM, ενεργοποιώντας τυχόν προγράμματα ακρόασης συμβάντων που συνδέονται με γονικά στοιχεία. Μπορείτε να το αποτρέψετε αυτό διάδοση γεγονότων με την να σταματήσει τροποποιητή και να αποτρέψει το συμβάν από το να ενεργοποιήσει περαιτέρω ακροατές συμβάντων.
Για να καταλάβετε πώς το να σταματήσει ο τροποποιητής σταματά τη διάδοση γεγονότων πιο πάνω από ένα δέντρο DOM, λάβετε υπόψη το παρακάτω μπλοκ κώδικα:
<σώμα>
<divταυτότητα="εφαρμογή">
<div @Κάντε κλικ="outerClick"τάξη="εξωτερικός">
<div @κάντε κλικ.σταματήστε="innerClick"τάξη="εσωτερικός">
<κουμπί @Κάντε κλικ="buttonClick"τάξη="κουμπί">Κάντε κλικ σε εμένακουμπί>
div>
div>
div>
<γραφή>
const app = Vue.createApp({
μέθοδοι: {
outerClick() {
console.log('Εξωτερικό κλικ')
},
innerClick() {
console.log ("Εσωτερικό κλικ")
},
buttonΚλικ() {
console.log ("Κλικ με κουμπί")
}
}
});
app.mount("#app");
γραφή>
σώμα>
Το μπλοκ κώδικα παραπάνω έχει τρεις συσκευές ακρόασης συμβάντων συνδεδεμένες σε τρία διαφορετικά στοιχεία. ο κουμπί στοιχείο είναι μέσα στο div με το εσωτερικός τάξη, ενώ το div με το εσωτερικός η τάξη είναι μέσα στο div με το εξωτερικός τάξη.
Κάθε ένα από τα τρία στοιχεία ακούει για ένα Κάντε κλικ συμβάν και αρχεία καταγραφής στην κονσόλα, έγινε κλικ στο όνομα του στοιχείου HTML. Ακολουθεί πρόσθετο στυλ CSS κλάσης για να γίνει πιο κατανοητό το παραπάνω μπλοκ κώδικα:
<κεφάλι>
<στυλ>
.εξωτερικός {
padding: 20px;
Χρώμα φόντου: μαύρο;
}
.inner {
padding: 20px;
Χρώμα φόντου: γκρι;
}
κουμπί {
padding: 10px;
Χρώμα φόντου: λευκό;
περίγραμμα: 2px συμπαγές μαύρο.
μέγεθος γραμματοσειράς: 16 px;
βάρος γραμματοσειράς: έντονη;
δρομέας: δείκτης;
}
στυλ>
κεφάλι>Κατά την εκτέλεση του προγράμματος, η εφαρμογή Vue που δημιουργήθηκε θα μοιάζει με αυτό:
Σημειώστε ότι όταν κάνετε κλικ στο κουμπί, το πρόγραμμα καλεί το κουμπίΚάντε κλικ μέθοδο και καταγράφει ένα μήνυμα στην κονσόλα. Το πρόγραμμα καλεί επίσης το innerClick μέθοδος.
Ωστόσο, το πρόγραμμα δεν καλεί το outerClick μέθοδο επειδή το μπλοκ κώδικα προστέθηκε α να σταματήσει τροποποιητής στο innerClick ακροατής εκδήλωσης. Αυτό εμποδίζει τη διάδοση του συμβάντος πιο πάνω στο δέντρο DOM.
Χωρίς το να σταματήσει τροποποιητή, το πρόγραμμα θα καλέσει το κουμπίΚάντε κλικ όταν κάνετε κλικ στο κουμπί και το συμβάν θα συνεχίσει να διαδίδεται στο δέντρο, φτάνοντας στο innerClick μέθοδο και μετά το outerClick μέθοδος.
Χειρισμός συμβάντων σε εφαρμογές Ιστού
Έχετε μάθει πώς να χρησιμοποιείτε τη δέσμευση συμβάντων στο Vue για να επισυνάπτετε προγράμματα ακρόασης συμβάντων σε στοιχεία και πώς να καλείτε μεθόδους όταν συμβαίνουν συμβάντα. Έχετε επίσης κατανοήσει πώς να χρησιμοποιείτε τροποποιητές συμβάντων για την προσαρμογή της συμπεριφοράς συμβάντων.
Οι εφαρμογές Ιστού βασίζονται σε κάποια μορφή συμβάντων χρήστη για την εκτέλεση λειτουργιών. Η JavaScript είναι ενσωματωμένη με πολλές μεθόδους για να καταγράψετε και να χειριστείτε μια ποικιλία από αυτά τα συμβάντα. Αυτά τα συμβάντα βοηθούν στη δημιουργία διαδραστικών εφαρμογών.