Πώς να δημιουργήσετε μια εφαρμογή με το vue.js

Το οικοσύστημα JavaScript αλλάζει για πάνω από μια δεκαετία, που σημαίνει ότι οι προγραμματιστές του μπροστινού άκρου έπρεπε να παρακολουθήσουν νέες τεχνολογίες. Μετά τη δοκιμή JavaScript Πλαίσια και βιβλιοθήκες για πάνω από πέντε χρόνια, βρήκα εκείνο που λειτουργεί για μένα: vue.js.

Σε αυτό το σεμινάριο, θα εξηγήσω τη βασική δομή μιας εφαρμογής vue. Επιπλέον, θα ήθελα να ορίσω λεπτομερώς τα εξαρτήματα και να αγγίξω σε πιο προηγμένα χαρακτηριστικά όπως τα μίγματα για να αποδείξουν Πώς να ξεκινήσετε ένα blog Τρέξιμο στη δική σας απλή εφαρμογή.

Θέλετε περισσότερες συμβουλές; Έχουμε οδηγεί σε όλα web hosting Υπηρεσίες αποθήκευση σύννεφων επιλογές και το καλύτερο οικοδόμος ιστότοπου περίπου.

• Τις καλύτερες ελεύθερες πλατφόρμες blogging

Τα πλεονεκτήματα του vue.js

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

• Επιταχύνετε την απόδοση με το vue.js

Ξεκίνα

Για να ακολουθήσετε αυτό το σεμινάριο, χρειάζεστε μόνο μια σύνδεση στο Internet καθώς όλη η ανάπτυξη πρόκειται να πραγματοποιηθεί στο CodesAndBox, ένας επεξεργαστής Web Code Web. Ο σύνδεσμος με τον κώδικα μπορεί να βρεθεί εδώ .

Η εφαρμογή μας θα περιλαμβάνει αρχεία διαμόρφωσης όπως πακέτο.Json , ένα index.html Σελίδα που είναι το αρχείο εισόδου της εφαρμογής μας και ενός Src Φάκελος που είναι ο πυρήνας της εφαρμογής μας. Το περιεχόμενο αυτού του φακέλου θα εξηγηθεί σε όλο το σεμινάριο.

Εξαρτήματα στο vue

Το VUE προσφέρει τη δυνατότητα δημιουργίας εξαρτημάτων. Αυτά είναι προσαρμοσμένα στοιχεία που χρησιμοποιούνται για την ενθυλάκωση επαναχρησιμοποιήσιμου κώδικα και μπορούν να ποικίλουν από ένα απλό κουμπί σε μια πλήρη σελίδα. Ένα στοιχείο αποτελείται από τρία κύρια τμήματα, & lt; template & gt; , & lt; script & gt; και & lt; στυλ & gt; , που θα διερευνηθεί περαιτέρω.

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

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

 & lt; template & gt;
& lt; div id = "app" & gt;
& lt; img class = "logo" src = "./ Ενεργητικό / logo.png" alt = "vue js επίσημο λογότυπο" / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Εξαγωγή προεπιλογής {
Όνομα: "App",
συστατικά: {}
};
& lt; / script & gt;
& lt; στυλ & gt;
#App {// κανονικά css εδώ}
& lt; / style & gt; 

Δημιουργία άρθρου.Vue

Για να δημιουργήσετε την εφαρμογή blog μας, χρειαζόμαστε άρθρα. Αυτό συνεπάγεται τη δημιουργία ενός αρχείου που ονομάζεται Άρθρο και την αποθηκεύοντας μέσα σε ένα φάκελο εξαρτημάτων. Αυτό το στοιχείο θα είναι πιο περίπλοκο, καθώς θα περιλαμβάνει ορισμένα βασικά χαρακτηριστικά vue που θα επιτρέψουν να είναι δυναμική.

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

 & lt; template & gt;
& lt; div class = "άρθρο" & gt;
& lt; img src = "./../ περιουσιακά στοιχεία / logo.png" / & gt;
& lt; h1 & gt; {{τίτλος}} & lt; / h1 & gt;
& lt; p & gt; {{τιμή}} & lt; / p & gt;
& lt; / div & gt;
& lt; / template & gt; 

Για να είναι δυναμική η συνιστώσα, πρέπει να είμαστε σε θέση να περάσουμε τα δεδομένα σε αυτό. Αυτό μπορεί να επιτευχθεί με δήλωση ιδιοτήτων. Ένα στοιχείο έχει επίσης πρόσβαση στη δική του μεταβλητή ιδιωτική παρουσία που ονομάζεται δεδομένα.

 & lt; script & gt;
Εξαγωγή προεπιλογής {
στηρίγματα: {
Τίτλος: String,
Αξία: {Τύπος: String, Απαιτείται: TRUE}
},
δεδομένα () {
Επιστροφή {Likes: 0, ShowingsNippets: TRUE};
}};
& lt; / script & gt; 

Αυτό το στοιχείο χρειάζεται μόνο ένα βασικό στυλ για να εμφανιστεί σωστά.

Για να εμφανίσετε το πρώτο μας άρθρο, πρέπει να πάρουμε τρία βήματα: Συμπεριλάβετε το αρχείο στο App.vue , προσθέστε το στην εμφάνιση VUE και να το παραπέμψετε ως μέρος της ενότητας προτύπου:

& lt; template & gt;
& lt; div id = "app" & gt;
& lt; img class = "logo" src = "./ Ενεργητικό / logo.png" alt = "vue js επίσημο λογότυπο" / & gt;
& lt; articlecontainer / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Εισαγωγή ArticleContainer από "./Components/article";
Εξαγωγή προεπιλογής {
Όνομα: "App",
Εξαρτήματα: {ARTICLECONTAINER}};
& lt; / script & gt; 

Δυστυχώς, η λειτουργία αυτού του κώδικα θα παράγει ένα σφάλμα, λόγω του γεγονότος ότι δεν έχουμε παράσχει όλες τις ιδιότητες που ορίζονται όπως απαιτείται στο στοιχείο του άρθρου. Για να διορθώσουμε το ζήτημα, πρέπει να δηλώσουμε ένα αντικείμενο δεδομένων και να χρησιμοποιήσουμε μια νέα οδηγία που ονομάζεται v-bind να περάσει το αντικείμενο στο στοιχείο του άρθρου.

 & lt; template & gt;
...
& lt; articlecontainer v-bind = "post" / & gt; ...
& lt; / template & gt;
& lt; script & gt;
...
Όνομα: "App",
Δεδομένα: Λειτουργία () {
  Επιστροφή {Post: {
    Τίτλος: "Η πρώτη μου θέση",
    Αξία: "Lorem ipsum Dolor κάθονται Amet, ...",
    img: "./assets/logo.png"}
  };
}, ...
& lt; / script & gt; 

Υπολογισμένες ιδιότητες

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

 & lt; template & gt;
& lt; div class = "άρθρο" & gt;
& lt; img src = "./../ περιουσιακά στοιχεία / logo.png" / & gt;
& lt; h1 & gt; {{τίτλος}} & lt; / h1 & gt;
& lt; p v-if = "showingsnippets" & gt; {{αποσπασμάτων}} & lt; / p & gt;
& lt; p v-other & gt; {{τιμή}} & lt; / p & gt;
& lt; button v-on: click = "togglarticle" & gt; {{buttontext}} & lt; / button & gt;
& lt; button v-on: click = "likes ++;" & gt; αρέσει: {likes}} & lt; / button & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Εξαγωγή προεπιλογής {
στηρίγματα: {
Τίτλος: String,
Αξία: {Τύπος: String, Απαιτείται: TRUE},
SnippetsLength: {Τύπος: Αριθμός, Απαιτούμενο: FALSE, DEFOULT: 20}
},
δεδομένα () {
Επιστροφή {Likes: 0, ShowingsNippets: TRUE};
},
Υπολογίζεται: {
αποσπάσματα () {
const fullarticle = αυτό.Value;
const articlesnippets = fullarticle.substring (0, αυτό. αποσπάσματα.
Επιστροφή `$ {ArticleNippets} ...` `},
κουμπιού () {
επιστρέψτε αυτό.showingsnippets; "Εμφάνιση πλήρους άρθρου": "Εμφάνιση αποσπασμάτων";}
},
Μέθοδοι: {
togglearticle () {
this.showingsnippets =! this.showingsnippets? }
}};
& lt; / script & gt; 

Αυτό το παράδειγμα παρέχει μια νέα οδηγία v-αν και v-on , που θα εμφανίζει αυτόματα ή θα αποκρύπτει εξαρτήματα, χρησιμοποιώντας μια ιδιωτική μεταβλητή που ονομάζεται showingsnippets . Η τιμή των αποσπασμάτων υπολογίζεται στη μύγα και θα αλλάξει εάν κάποια από τις ιδιότητες που χρησιμοποιεί ( αποσπάσματα , πλήρες ) αλλαγές.

Maincomponent.vue

Το επόμενο βήμα περιλαμβάνει ένα νέο στοιχείο που πρόκειται να αποτελέσει το σώμα της αίτησής μας, που χρησιμοποιείται για να μιμηθεί μια κλήση API και να μας εισάγει σε μια νέα οδηγία v-για . Το API VUE παρέχει πρόσβαση σε μια ολοκληρωμένη λίστα αγκίστρων για τη φόρτωση και την ενεργοποίηση συμβάντων στην κατάλληλη στιγμή (στην περίπτωση τους). Αυτά είναι εκτός πεδίου εφαρμογής αυτού του εκπαιδευτικού, αλλά μπορούν να βρεθούν λεπτομέρειες εδώ .

 & lt; template & gt;
& lt; div id = "maincontent" & gt;
& lt; articlecontainer v-for = "(στοιχείο, δείκτης) σε θέσεις": key = "index" v-bind = "στοιχείο" / & gt;
& lt; / div & gt;
& lt; / template & gt;
& lt; script & gt;
Εισαγωγή ArticleContainer από "./article.vue";
Εισαγωγή fakeposts από "../data/posts.js";
Εξαγωγή προεπιλογής {
Δεδομένα: Λειτουργία () {
Επιστροφή {Δημοσιεύσεις: []};
},
Μέθοδοι: {
fakeakicall () {
// εδώ εξομοιούμε τη δυνατότητα φόρτωσης της αξίας με ένα API
this.posts = fakeposts;}
},
Εξαρτήματα: {ArticleContainer},
συναρμολογημένο () {
αυτό.FakeApicall ();}
};
& lt; / script & gt; 

Δημιουργήστε ένα mixin

Ένα άλλο ισχυρό χαρακτηριστικό του vue.js είναι οι μίγματα. Αυτές είναι επαναχρησιμοποιούμενες μέθοδοι JS που επεκτείνουν τα χαρακτηριστικά ενός συγκεκριμένου συστατικού. Οι μίγματα έχουν πρόσβαση στο μεγαλύτερο μέρος του API VUE (ιδιότητες, δεδομένα, μεθόδους). Συνήθως αποθηκεύονται σε ένα μίγματα Φάκελος, που δημιουργήθηκε στον κατάλογο SRC και, καθώς οι μίγματα είναι καθαρά JS, αποθηκεύονται με ένα . επέκταση.

Αρχικά, η ισχύς αυτής της δυνατότητας μπορεί να μην είναι προφανής. Ωστόσο, καθώς εξοικειωθείτε με το vue και το API του, οι Mixins θα αρχίσουν να διαμορφώνουν και να υποστηρίζουν την αίτησή σας. Έχω δει αυτή τη λειτουργία που χρησιμοποιείται για να ορίσει την επικύρωση εισόδου, της διεθνοποίησης και την παροχή λειτουργικότητας προϊόντων, όπως ο μεταφορτών του αρχείου.

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

Θα χτίσουμε ένα ανάμειξο προσβασιμότητας. Αυτό θα παράσχει ένα togglecontrast Μέθοδος που μπορεί να εφαρμοστεί σε οποιοδήποτε από τα στοιχεία μας.

 Εξαγωγή προεπιλογής {
στηρίγματα: {
LighttextColour: {Τύπος: String, Προεπιλογή: "# 252525"},
Lightbackgroundground: {Τύπος: String, Προεπιλογή: "#fff"},
DarkTextColour: {Τύπος: String, Προεπιλογή: "#fff"},
DarkBackgroundClour: {Τύπος: String, Προεπιλογή: "# 252525"}
},
δεδομένα () {
επιστροφή {islight: true};
},
Μέθοδοι: {
togglehighcontrast () {
αυτό.Islight =! Αυτό το φως;
Αν (αυτό το φως) {
Αυτό. $ el.style.backgroundcolor = αυτό.Μ.
αυτό. $ el.style.Color = αυτό. φωτισμόςTextColour;
} αλλιώς {
αυτό. $ el.style.backgroundcolor = αυτό.darkbackgroundgroundour?
αυτό. $ el.style.Color = αυτό.Darktextcolour; }
}}
} · 

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

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

 & lt; template & gt;
& lt; div class = "άρθρο" & gt;
...
& lt; button v-on: click = "togglehighcontrast" & gt; εναλλαγή υψηλής αντίθετης αντίθεσης & lt; / button & gt;
& lt; / div & gt;
& lt; / template & gt;

& lt; script & gt;
Εισαγωγή προσβασιμότητας από το "../mixins/accessability.js".
...
Mixins: [Προσβασιμότητα]
};
& lt; / script & gt; 

Μπορούμε τώρα να αλλάξουμε την αντίθεση στο μεμονωμένο στοιχείο χρησιμοποιώντας το νέο καθορισμένο κουμπί. Είναι σημαντικό να καταλάβουμε ότι ακόμη και αν δεν έχουν καθοριστεί επιπλέον ιδιότητες, το στοιχείο του άρθρου μας είναι πραγματικά σε θέση να δεχτεί lighttextcolour , darktextcolour , lightbackgroundourcolour και darkbackgroundourcolour . Αυτά ορίζονται στο Mixin Προσβασιμότητας.

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

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 316 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 316 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

• 9 από τα καλύτερα πλαίσια JavaScript
• Αποκάλυψε: οι τελευταίες τάσεις JavaScript
• Πώς να οικοδομήσουμε μια τοποθεσία blogging με gatsby