Μια εισαγωγή Vue.js για άτομα που γνωρίζουν αρκετά jQuery για να περάσουν

Το λογότυπο για το Vue.js

Είχα μια σχέση αγάπης-μίσους με το JavaScript εδώ και χρόνια.

Γνώρισα τη γλώσσα μέσω του αγαπημένου αγόριου σχεδιασμού και ανάπτυξης της κοινότητας, jQuery. Βλέπετε, τη στιγμή που άρχισα να μαθαίνω JavaScript, ως "σχεδιαστής που κωδικοποιεί", η συνεργασία με το jQuery ήταν μια μαγευτική εμπειρία. Θα μπορούσα να κάνω modals fadeIn και fadeOut. Με μια βιβλιοθήκη τρίτου μέρους, θα μπορούσα να προσθέσω κύλιση παράλλαξης στο χαρτοφυλάκιο μου με μία μόνο κλήση λειτουργίας. Σχεδόν οτιδήποτε θα μπορούσα να ονειρευτώ ήταν ενσωματωμένο σε ένα και μόνο αρχείο ~ 100kb ...

Και έπειτα βγήκε η γωνιακή. Δεν είχα άλλη επιλογή παρά να επαναλάβω ολόκληρο το χαρτοφυλάκιό μου με το πλαίσιο. Και τότε βγήκε ο React. Δεν είχα άλλη επιλογή παρά να επαναλάβω ολόκληρο το χαρτοφυλάκιό μου με τη βιβλιοθήκη. Και έπειτα βγήκε ο Vue.js. Δεν είχα άλλη επιλογή παρά να επαναλάβω ολόκληρο το χαρτοφυλάκιό μου με τη βιβλιοθήκη ... Βλέπετε πού πηγαίνει αυτό.

Όλα τα ανέκδοτα στην άκρη, έχω απολαύσει πολύ τη λείανση των μπριζόλων JavaScript μου, δημιουργώντας πράγματα εδώ και εκεί με αυτά τα διαφορετικά πλαίσια και βιβλιοθήκες. Έχω διαβάσει αμέτρητα άρθρα και σεμινάρια στη διαδικασία, αλλά κανένας δεν έχει κολλήσει μαζί μου περισσότερο από το κομμάτι του Shu Uesugi, "React.js Εισαγωγή για τους ανθρώπους που ξέρουν ακριβώς αρκετά jQuery να πάρει από."

Ο Shu παίρνει τους αναγνώστες - οι οποίοι θεωρείται ότι έχουν κάποιο επίπεδο επάρκειας με τα βασικά στοιχεία του JavaScript και το jQuery - σε ένα ταξίδι μέσα από τον κόσμο του React καθώς χτίζουν έναν κλώνο του συστατικού Twitter "compose tweet".

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

Πριν ξεκινήσετε τα παρακάτω βήματα, σας ενθαρρύνω να διαβάσετε το άρθρο του Shu. Κάνει μια φανταστική δουλειά να σας περπατήσει μέσα από τον κώδικα jQuery που μπορείτε να γράψετε για να εφαρμόσετε μερικά από αυτά τα χαρακτηριστικά. Έτσι, και για να μετριάσει τον κίνδυνο της απόλυσης, θα επικεντρωθώ στην εμφάνισή σας των ins-and-outs του Vue.

Αυτό που χτίζουμε

Οι περισσότεροι από εμάς tweet (μερικά πιο prolifically από άλλα). Επομένως, είμαστε πιθανώς εξοικειωμένοι με το στοιχείο User Interface στο παρακάτω screenshot.

Το κουτί

Πιστέψτε το ή όχι, αυτό το στοιχείο UI είναι ένα εξαιρετικό παράδειγμα του πώς το Vue (και το React, σύμφωνα με το Shu) μπορεί να βελτιώσει τη ζωή σας ως προγραμματιστής JavaScript / jQuery. Τα στοιχεία αυτής της συνιστώσας που θα επικεντρωθούμε σήμερα στην οικοδόμηση είναι:

  • Το