Το Vue.js είναι μια πολύ ισχυρή, εύχρηστη και προσιτή βιβλιοθήκη που με τη γνώση HTML, CSS και Javascript, μπορούμε να ξεκινήσουμε τη δημιουργία διαδικτυακών εφαρμογών σε αυτήν. Το Vue.js είναι χτισμένο συνδυάζοντας τις καλύτερες δυνατότητες από τα ήδη υπάρχοντα Angular και react Frameworks. Είναι ένα προοδευτικό και αντιδραστικό πλαίσιο Javascript που χρησιμοποιείται για τη δημιουργία UI (User Interfaces) και SPA (Εφαρμογές μιας σελίδας), γι 'αυτό και οι προγραμματιστές λατρεύουν τον κώδικα και νιώθουν ελευθερία και άνεση ενώ αναπτύσσουν εφαρμογές στο Vue.js. Αν ρίξτε μια ματιά στο List Listing and Handling στο Vue.js., θα γνωρίζουμε ότι παρέχει μια οδηγία v-on για να ακούτε και να χειρίζεστε γεγονότα. Μπορούμε να χρησιμοποιήσουμε την οδηγία v-on για να ακούσουμε το DOM και να εκτελέσουμε τις απαιτούμενες εργασίες. Παρέχει επίσης πολλούς χειριστές εκδηλώσεων. Ωστόσο, σε αυτό το άρθρο, θα μάθουμε και θα επικεντρωθούμε μόνο στα συμβάντα κλικ. Λοιπόν, ας ξεκινήσουμε!
Ακριβώς όπως το συμβάν onClick της Javascript, το Vue.js παρέχει v-on: κλικ για ακρόαση συμβάντων.
Η σύνταξη για το συμβάν v-on: click θα έχει ως εξής:
< κουμπί v-on: κλικ='functionName'>>Κάντε κλικ</ κουμπί >>
Το Vue.js παρέχει μια συντομογραφία @ αντί να χρησιμοποιεί επίσης v-on.
< κουμπί @Κάντε κλικ='functionName'> Κάντε κλικ</ κουμπί >>
Το Vue.js δεν σταματά να ακούει απλώς το συμβάν κλικ και να καλεί τη συνάρτηση. Θα μας επιτρέψει επίσης να γράψουμε απευθείας οποιαδήποτε αριθμητική πράξη ή οτιδήποτε σχετίζεται με Javascript μέσα στα εισαγωγικά. Οπως αυτό:
< κουμπί @Κάντε κλικ='num += 1'> Προσθήκη</ κουμπί >>
Το Vue.js μας παρέχει τη δυνατότητα να καλέσουμε τη μέθοδο ή τη συνάρτηση σε μια ενσωματωμένη δήλωση Javascript, όπως φαίνεται παρακάτω:
< κουμπί @Κάντε κλικ='μήνυμα (' Γεια ')'> Εμφάνιση</ κουμπί >>Χρησιμοποιώντας τους χειριστές συμβάντων του Vue.js, μπορούμε να έχουμε πρόσβαση και στο συμβάν DOM, χρησιμοποιώντας inline statement, περνώντας τη μεταβλητή συμβάντος $ Vue.js στο όρισμα της μεθόδου, όπως το παρακάτω παράδειγμα:
< κουμπί @Κάντε κλικ='μήνυμα (' Γεια ', $ event)'> Αποστολή</ κουμπί >>
Το Vue.js μας παρέχει επίσης τη δυνατότητα κλήσης πολλών συναρτήσεων ή μεθόδων. Μπορούμε να καλέσουμε περισσότερες από μία συναρτήσεις και να τις διαχωρίσουμε με κόμματα, όπως αυτό το παράδειγμα:
< κουμπί @Κάντε κλικ='πρώτο (' Γεια '), δεύτερο (' Γεια ', $ event)'> Υποβολή</ κουμπί >>Το Vue.js παρέχει επίσης τροποποιητές συμβάντων.
Τροποποιητές συμβάντων
Συχνά πρέπει να καλέσουμε τροποποιητές μαζί με τα συμβάντα. Έτσι, το Vue.js παρέχει μερικούς από τους ακόλουθους τροποποιητές:
.να σταματήσει
Θα σταματήσει τη μετάδοση του συμβάντος κλικ.
< προς το @click.stop='Κάνε αυτό'>></ προς το >>.αποτρέψει
Θα εμποδίσει τη φόρτωση ή ανακατεύθυνση της σελίδας.
< μορφή @submit.prevent='onSubmit'>></ μορφή >>.μια φορά
Θα ενεργοποιήσει το συμβάν κλικ μόνο μία φορά.
< προς το @click.1 φορά='Κάνε αυτό'>></ προς το >>.πιάνω
Χρησιμοποιείται κυρίως για την προσθήκη του ακροατή συμβάντων.
< div @click.capture='Κάνε αυτό'> ...</ div >>Μπορούμε επίσης να αλυσιδώσουμε τους τροποποιητές. Ωστόσο, λάβετε υπόψη ότι η σειρά των τροποποιητών έχει σημασία και θα επηρεάσει τα αποτελέσματα.
< προς το @click.stop.prevent='Κάνε αυτό'>></ προς το >>συμπέρασμα
Σε αυτό το άρθρο, έχουμε καλύψει ολόκληρες τις έννοιες χειρισμού συμβάντων Click από το επίπεδο noob έως το ninja. Έχουμε μάθει για τις διαφορετικές συντάξεις της γραφής συμβάντων κλικ και τους διαφορετικούς τρόπους χρήσης | _+_ | οδηγία που παρέχεται από το Vue.js για την ευκολία των προγραμματιστών και των διαφορετικών τροποποιητών συμβάντων. Για πιο χρήσιμο περιεχόμενο όπως αυτό, που σχετίζεται με το Vue.js, συνεχίστε να επισκέπτεστε το linuxhint.com.