Μια εισαγωγή στην απόδοση λίστας στο Vue

Μία από τις πιο κοινές εργασίες στην ανάπτυξη Ιστού είναι η απόδοση λιστών δεδομένων. Ο Vue το χειρίζεται αυτό με τη βοήθεια του v-για διευθυντικός. Θα εξερευνήσετε τι είναι η οδηγία v-for, πώς να αφαιρέσετε στοιχεία από μια λίστα και πώς να αποδώσετε λίστες με κλειδιά.

Τι είναι η Οδηγία v-for στο Vue;

ο v-για Η οδηγία είναι μία από τις οδηγίες του Vue που σας επιτρέπει να αποδίδετε λίστες με ελάχιστο κώδικα JavaScript. ο v-για η οδηγία λειτουργεί παρόμοια με την for βρόχο σε JavaScript και μπορεί να επαναλάβει πίνακες και αντικείμενα για απόδοση στοιχείων σε μια λίστα.

Για να αξιοποιήσετε το v-για οδηγία, παρέχετε έναν πίνακα που θέλετε να επαναλάβετε στο δεδομένα ιδιοκτησία του Αντικείμενο επιλογών στο Vue.

Για παράδειγμα:

<πρότυπο>
<ul>
<liv-για="όνομα στα ονόματα">{{ όνομα }}li>
ul>
πρότυπο>
<γραφή>
εξαγωγή προεπιλογή {
 δεδομένα() {
 ΕΠΙΣΤΡΟΦΗ {
 ονόματα: ['John', 'Doe', 'James'],
 };
 },
};
γραφή>

Το μπλοκ κώδικα παραπάνω απεικονίζει ένα παράδειγμα μιας εφαρμογής Vue που χρησιμοποιεί το

v-για οδηγία για επανάληψη του ονόματα πίνακας που παρέχεται στο δεδομένα ιδιοκτησία.

v-για έχει μια τιμή που ορίζεται σε μια παράσταση με δύο μέρη: τη μεταβλητή επανάληψης (όνομα) και το ονόματα πίνακας v-για δείχνει προς. Η μεταβλητή επανάληψης ισχύει για καθεμία όνομα στο ονόματα πίνακα και εμφανίζει το όνομα.

Το Vue δημιουργεί ένα νέο Μοντέλο αντικειμένου εγγράφου (DOM) στοιχείο για το καθένα όνομα στο ονόματα πίνακα και τον αποδίδει στην ιστοσελίδα.

Αν το ονόματα αλλαγές πίνακα (για παράδειγμα, προστίθεται ένα νέο όνομα ή αφαιρείται ένα παλιό), το Vue θα ενημερώσει αυτόματα το εικονικό DOM και θα αποδώσει ξανά τη λίστα για να αντικατοπτρίζει τα ενημερωμένα δεδομένα.

Το Vue προσφέρει επίσης έναν τρόπο λήψης του ευρετηρίου ενός στοιχείου σε μια λίστα.

<liv-για="(όνομα, ευρετήριο) σε ονόματα">{{ όνομα }} -- {{ ευρετήριο }}li>

Ο παραπάνω κώδικας απεικονίζει τη σύνταξη για την εμφάνιση του ευρετηρίου του καθενός όνομα στο ονόματα πίνακας.

Μπορείτε επίσης να χρησιμοποιήσετε το v-για οδηγία για βρόχο μέσω μιας σειράς αριθμών:

<liv-για="αριθμός σε 10">Το Vue είναι ωραίοli>

Ο παραπάνω κώδικας θα αποδώσει μια λίστα με το κείμενο Το Vue είναι ωραίο δεκα φορες. ο v-για Η οδηγία μπορεί επίσης να κάνει βρόχο μέσω μιας σειράς αριθμών για επανειλημμένη εμφάνιση δεδομένων ή εκτέλεση μιας λειτουργίας. Σε αυτή την περίπτωση, το αρ Η μεταβλητή επανάληψης χρησιμοποιείται για πρόσβαση στο τρέχον στοιχείο στη λίστα.

Πώς να αφαιρέσετε στοιχεία από μια λίστα στο Vue

Μπορείτε να επιτρέψετε στους χρήστες να αφαιρούν στοιχεία από λίστες στην εφαρμογή ιστού σας. Αυτή η δυνατότητα είναι χρήσιμη κατά τη δημιουργία εφαρμογών όπως μια λίστα υποχρεώσεων.

Μπορείτε να χρησιμοποιήσετε το συνδέω Μέθοδος JavaScript (αυτός είναι ένας από τους τρόπους αφαίρεση στοιχείων από πίνακες) για να αφαιρέσετε ένα στοιχείο από μια λίστα στο Vue.

array.splice (startIndex, numToRemove, newElements)

Η μέθοδος συναρμογής μπορεί να προσθέσει ή να αφαιρέσει στοιχεία από έναν πίνακα. Η μέθοδος ματίσματος παίρνει τις παραμέτρους με την ακόλουθη σειρά:

1. ο ευρετήριο έναρξης Η παράμετρος ορίζει τον δείκτη από τον οποίο θα ξεκινήσει η τροποποίηση του πίνακα.
2. numToRemove υποδεικνύει τον αριθμό των στοιχείων που θέλετε να αφαιρέσετε από τον πίνακα.
3. Τέλος, το νέα στοιχεία παράμετρος, την οποία μπορείτε να χρησιμοποιήσετε για να προσθέσετε στοιχεία στον πίνακα. Εάν δεν προσδιορίζονται στοιχεία, συνδέω() θα αφαιρέσει μόνο στοιχεία από τον πίνακα.

Για να χρησιμοποιήσετε τη μέθοδο splice για να αφαιρέσετε ένα στοιχείο από μια λίστα στο Vue, πρέπει να γνωρίζετε το ευρετήριο αυτού του στοιχείου. Ένας τρόπος για να το πετύχετε αυτό είναι να περάσετε το δείκτης ως όρισμα σε μια μέθοδο που χειρίζεται την αφαίρεση του στοιχείου.

Για παράδειγμα, μπορείτε να προσθέσετε ένα κουμπί δίπλα σε κάθε όνομα στον πίνακα που ενεργοποιεί μια μέθοδο κατάργησης του στοιχείου όταν ένας χρήστης κάνει κλικ σε αυτό:

<πρότυπο>
<ul>
<liv-για="(όνομα, ευρετήριο) σε ονόματα">
 {{ όνομα }} -- {{ ευρετήριο }}
<κουμπί @Κάντε κλικ="removeItem (ευρετήριο)">Αφαιρώκουμπί>
li>
ul>
πρότυπο>

ο δείκτης παράμετρος μας δίνει πρόσβαση στο ευρετήριο του καθενός όνομα στον πίνακα, τον οποίο αυτό το πρόγραμμα περνά ως όρισμα στο αφαιρέστε το στοιχείο μέθοδος. ο αφαιρέστε το στοιχείο μέθοδος μπορεί στη συνέχεια να χρησιμοποιήσει το συνδέω μέθοδος αφαίρεσης α όνομα από το ονόματα πίνακας:

<γραφή>
εξαγωγή προεπιλογή {
 δεδομένα() {
 ΕΠΙΣΤΡΟΦΗ {
 ονόματα: ['John', 'Doe', 'James'],
 };
 },
 μέθοδοι: {
 removeItem (ευρετήριο) {
 this.names.splice (ευρετήριο, 1);
 }
}
};
γραφή>

Το παραπάνω σενάριο χρησιμοποιεί το συνδέω μέθοδο για να αφαιρέσετε ένα όνομα από τη λίστα με τα ονόματα που έχουν αποδοθεί. Αυτό θα ενημερώσει αυτόματα τη λίστα στη διεπαφή χρήστη για να αντικατοπτρίζει τον ενημερωμένο πίνακα.

Πώς να αποδώσετε λίστες με κλειδιά στο Vue

ο κλειδί Το χαρακτηριστικό είναι ένα μοναδικό χαρακτηριστικό που χρησιμοποιεί το Vue για να παρακολουθεί την ταυτότητα κάθε στοιχείου στη λίστα. Όταν αλλάζει ένα στοιχείο στη λίστα, με τη βοήθεια του κλειδί Το χαρακτηριστικό Vue μπορεί να ενημερώσει γρήγορα το DOM χωρίς να αποδώσει ξανά ολόκληρη τη λίστα.

Ας ρίξουμε μια ματιά σε ένα παράδειγμα απόδοσης λίστας με κλειδιά στο Vue:

<πρότυπο>
<div>
<ul>
<liv-για="όνομα στα ονόματα":κλειδί="name.id">
 {{ name.name }}
<κουμπί @Κάντε κλικ="removeItem (name.id)">Αφαιρώκουμπί>
li>
ul>
div>
πρότυπο>
<γραφή>
εξαγωγή προεπιλογή {
 δεδομένα() {
 ΕΠΙΣΤΡΟΦΗ {
 ονόματα: [
 { id: 1, όνομα: "John"},
 { id: 2, όνομα: "Doe"},
 { id: 3, όνομα: "James"},
 ],
 };
 },
 μέθοδοι: {
 removeItem (κλειδί) {
 this.names.splice (κλειδί - 1, 1);
 },
 },
};
γραφή>

Σε αυτό το παράδειγμα, έχετε μια λίστα στοιχείων με μοναδικά ταυτότητα ιδιότητες. Το μπλοκ κώδικα χρησιμοποιεί το κλειδί χαρακτηριστικό με το v-για οδηγία για την παρακολούθηση της ταυτότητας κάθε στοιχείου στη λίστα. Αυτό επιτρέπει στο Vue να ενημερώνει αποτελεσματικά το DOM όταν αλλάζει η λίστα.

Εάν καταργούσατε ένα στοιχείο από τη λίστα, το Vue θα ενημερώσει το DOM χωρίς να χρειάζεται να αποδώσει ξανά ολόκληρη τη λίστα. Αυτό συμβαίνει επειδή το Vue διατηρεί την ταυτότητα κάθε στοιχείου στη λίστα και μπορεί να ενημερώσει μόνο τα στοιχεία που έχουν αλλάξει.

ο κλειδί Το χαρακτηριστικό θα πρέπει να είναι ένα μοναδικό αναγνωριστικό για κάθε στοιχείο στη λίστα. Αυτό μπορεί να είναι ένα ταυτότητα ιδιοκτησία ή οποιοδήποτε άλλο μοναδικό αναγνωριστικό που μπορεί να χρησιμοποιηθεί για την παρακολούθηση του στοιχείου.

Χρησιμοποιώντας την κλειδί χαρακτηριστικό με το v-για η οδηγία βοηθά στην αποφυγή προβλημάτων απόδοσης. Για παράδειγμα, κατά την κατάργηση των ονομάτων, το Vue χρησιμοποιεί το κλειδί χαρακτηριστικό για τη διατήρηση της σειράς των στοιχείων στη λίστα.

Οι οδηγίες Vue είναι απαραίτητες

Εδώ, καλύψατε τα βασικά της απόδοσης λιστών στο Vue, συμπεριλαμβανομένης της κατάργησης στοιχείων από λίστες και της απόδοσης λιστών με κλειδιά. Μπορείτε να δημιουργήσετε ανταποκρινόμενες διεπαφές που χειρίζονται σύνθετες λίστες δεδομένων κατανοώντας αυτές τις έννοιες.

Το Vue έχει μια πληθώρα οδηγιών για διαφορετικούς σκοπούς, συμπεριλαμβανομένης της απόδοσης υπό όρους, της δέσμευσης συμβάντων και της δέσμευσης δεδομένων. Η κατανόηση αυτών των οδηγιών μπορεί να σας βοηθήσει να δημιουργήσετε αποτελεσματικές διαδραστικές εφαρμογές ιστού.