Vue.js είναι ένα πλαίσιο micro JavaScript για τη δημιουργία επαναχρησιμοποιήσιμων και αντιδραστικών στοιχείων στον ιστότοπό σας.

Τα πλαίσια του Front-end ποικίλλουν ευρέως τόσο σε μέγεθος όσο και σε πεδίο εφαρμογής, όπου το Vue.js ξεχωρίζει, έχει τον ελάχιστο σχεδιασμό του και επικεντρώνεται στην προσαρμοστικότητα. Έχετε την επιλογή να χτίσετε ολόκληρο τον ιστότοπό σας χρησιμοποιώντας το Vue.js, απλά κάνοντας ένα μόνο στοιχείο του site σας αντιδραστικό ή οτιδήποτε άλλο. Εξαιτίας αυτού, είναι πολύ προσιτή με μια ρηχή καμπύλη μάθησης.

Σε αυτό το άρθρο πρόκειται να ρίξουμε μια ματιά στα βασικά συστατικά του Vue.js και πώς να τα εγκαταστήσουμε και να ξεκινήσουμε, αλλά πρώτα να ρίξουμε μια ματιά στο πότε θα θέλατε να χρησιμοποιήσετε ένα πλαίσιο front-end όπως το Vue.js και γιατί .

Γιατί να χρησιμοποιήσετε ένα πλαίσιο Front-End

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

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

Για παράδειγμα, ας υποθέσουμε ότι έχετε μια σελίδα όπου έχετε μια δυναμική λίστα ονομάτων. Μπορεί να έχετε γράψει κώδικα που μοιάζει με αυτό:

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

Με το Vue.js διαχωρίζετε το HTML ως πρότυπο που απεικονίζει τι θα δημιουργήσει με βάση τα δεδομένα και το Vue.js θα το καταστήσει αυτόματα.

Το ίδιο παράδειγμα στο Vue.js θα μοιάζει με το ακόλουθο:

Έχουμε πλήρη διαχωρισμό μεταξύ των πτυχών HTML του κώδικα JavaScript στη λογική του κώδικα JavaScript, κάνοντας τα πάντα αυτοδύναμα και πολύ πιο διαχειρίσιμα. Παίρνουμε λίγο μπροστά από τους εαυτούς μας, όμως, ας πάρουμε ένα βήμα πίσω και να δούμε πώς ο πυρήνας του Vue.js επιτυγχάνει αυτό ...

Έλεγχος δεδομένων DOM

Στον πυρήνα του Vue.js ορίζετε μια συσχέτιση μεταξύ της HTML και ορισμένων δεδομένων και κάθε φορά που αλλάζουν τα δεδομένα το HTML θα ενημερωθεί. Ο τρόπος με τον οποίο λειτουργεί αυτό είναι όταν παράσταση ενός συστατικού Vue.js το διαβιβάζετε μερικά δεδομένα με τη μορφή ενός αντικειμένου JavaScript, αλλάζει αυτό το αντικείμενο αντικαθιστώντας τις ιδιότητες του με trackable μεθόδους getter και setter.

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

Η ύπαρξη τόσο στενής σύνδεσης μεταξύ των δεδομένων και της προβολής απλοποιεί δραστικά την ανάπτυξη εφαρμογών front-end και ελαχιστοποιεί τα σφάλματα που οφείλονται σε ψευδή δήλωση. Αυτός ο διαχωρισμός των ανησυχιών σας επιτρέπει να εστιάσετε στη λογική της αίτησής σας χωρίς να χρειάζεται να αντιμετωπίσετε καθόλου την ενημέρωση της άποψης.

Δημιουργία της πρώτης εφαρμογής Vue.js

Η εγκατάσταση για το Vue.js είναι τόσο απλή όσο και η βιβλιοθήκη:

Τώρα, όπως ανέφερα, μια εφαρμογή Vue.js αποτελείται από ένα αντικείμενο δεδομένων και ένα πρότυπο HTML στο οποίο θα ενσωματωθούν τα δεδομένα. Έτσι, για πρώτη εφαρμογή μας για να δείτε Vue.js σε δράση αφήνει να προσθέσετε στο body :

Αρχικά ορίζουμε ένα div που θα είναι το πρότυπο HTML για την εφαρμογή Vue.js. Στο εσωτερικό χρησιμοποιούμε τα διπλά τιράντες για παρεμβολή δεδομένων στο HTML.

Μέσα από την πραγματική εφαρμογή Vue.js απλά ορίζουμε τα δεδομένα και συνδέουμε το div ως το στοιχείο για την εφαρμογή και για την απόδοση και τη χρήση ως πρότυπο. Στη συνέχεια, για επιπλέον φλόγα, αυξάνουμε τη μεταβλητή μετρήσεων στην εφαρμογή μας μία φορά το δευτερόλεπτο.

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

Εκδηλώσεις και μέθοδοι

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

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

Στο πρότυπο HTML, προσθέσαμε ένα κουμπί για να ξεκινήσουμε και να σταματήσουμε τον μετρητή, για να το επιτύχουμε, χρειαζόμαστε το κείμενο του κουμπιού να είναι δυναμικό και χρειαζόμαστε ένα πρόγραμμα χειρισμού συμβάντος για το κλικ του κουμπιού.

Για να δηλώσετε ένα συμβάν στο Vue.js σε ένα στοιχείο, προθέστε το όνομα οποιουδήποτε τυποποιημένου συμβάντος HTML DOM με v-on: , έτσι το mouseover η εκδήλωση γίνεται v-on:mouseover ή το keyup η εκδήλωση γίνεται v-on:keyup . Στο παράδειγμά μας χρησιμοποιούμε το v-on:click ιδιότητα για να χειριστεί το click Εκδήλωση.

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

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

Δεδομένου ότι η μέθοδος εναλλαγής αλλάζει την ιδιότητα χρονομέτρου και η μέθοδος counterAction που είναι στο πρότυπο Vue.js χρησιμοποιεί την ιδιότητα χρονοδιακόπτη, οποιεσδήποτε εναλλαγή χρόνου καλείται, το πρότυπο θα επαναδημιουργήσει το κείμενο του κουμπιού.

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

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

Ας ενημερώσουμε το παράδειγμα για να συμπεριλάβουμε αποθηκευμένες ιδιότητες:

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