Οι προσαρμοσμένες οδηγίες σάς επιτρέπουν να επεκτείνετε τη λειτουργικότητα των ιστοσελίδων σας Vue με έναν επεκτάσιμο και αρθρωτό τρόπο.
Οι οδηγίες είναι δομές προγραμματισμού που καθορίζουν τον τρόπο με τον οποίο οι διερμηνείς και οι μεταγλωττιστές πρέπει να επεξεργάζονται τις εισόδους για μια λειτουργία. Οι οδηγίες Vue επεκτείνουν τη λειτουργικότητα των στοιχείων HTML στα πρότυπα Vue, επιτρέποντας τον άμεσο χειρισμό του DOM.
Μπορείτε να χρησιμοποιήσετε οδηγίες στο Vue για να προσθέσετε ακροατές συμβάντων, μεταξύ άλλων λειτουργιών. Θα επισυνάψετε επιπλέον χαρακτηριστικά σε στοιχεία HTML για να χρησιμοποιήσετε οδηγίες στην εφαρμογή σας.
Η δομή των οδηγιών Vue
Οι οδηγίες στο Vue έχουν α v- πρόθεμα για να τα διακρίνει από τα κανονικά χαρακτηριστικά HTML. ο v- Το πρόθεμα λέει στον μεταγλωττιστή Vue ότι το χαρακτηριστικό είναι μια οδηγία Vue, ώστε να μπορεί να επεξεργαστεί και να εφαρμόσει τη συμπεριφορά αυτής της οδηγίας στο στοιχείο HTML.
Ακολουθεί ένα παράδειγμα που δείχνει τη χρήση του v-show χαρακτηριστικό για την εμφάνιση των περιεχομένων ενός h2 στοιχείο:
"αληθής">Γεια σου Vue</h2>
Το Vue.js έχει πολλές ακόμη ενσωματωμένες οδηγίες όπως v-bind, v-αν, και v-on, δίνοντάς σας τη δυνατότητα να εκτελείτε εργασίες όπως δέσμευση δεδομένων, υπό όρους απόδοση, χειρισμός εκδηλώσεων, κι αλλα.
Καθορισμός προσαρμοσμένων οδηγιών στο Vue
Μπορείτε να ορίσετε προσαρμοσμένες οδηγίες για να προσθέσετε νέα, επαναχρησιμοποιήσιμη λειτουργικότητα για τις εφαρμογές σας Vue.js. Η δημιουργία προσαρμοσμένων οδηγιών απαιτεί δύο βασικά βήματα. Αρχικά, θα καταχωρίσετε την οδηγία τοπικά ή παγκοσμίως. Στη συνέχεια, θα καθορίσετε τη συμπεριφορά της οδηγίας με τα άγκιστρα κύκλου ζωής.
Καταχώριση προσαρμοσμένων οδηγιών
Μπορείτε να καταχωρίσετε μια προσαρμοσμένη οδηγία στο Vue σε τοπικό ή παγκόσμιο επίπεδο, ανάλογα με το προβλεπόμενο εύρος της. Ωστόσο, είναι πιο κοινή πρακτική η καταχώριση οδηγιών παγκοσμίως. Αυτό διασφαλίζει ότι οι οδηγίες είναι διαθέσιμες παντού μέσα στην εφαρμογή Vue.
Μπορείτε να καταχωρίσετε προσαρμοσμένες οδηγίες τοπικά εάν σκοπεύετε να χρησιμοποιήσετε την προσαρμοσμένη οδηγία μέσα σε ένα απλό στοιχείο Vue. Δείτε πώς μπορείτε να εγγραφείτε α v-αλλαγή χρώματος οδηγία σε τοπικό επίπεδο: