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

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

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

<γραφήsrc="">γραφή>

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

Ωστόσο, πρέπει να εγκαταστήσετε το Vue.js μέσω npm για να χρησιμοποιήσετε περισσότερες από τις προηγμένες λειτουργίες του, όπως η σύνταξη Single-File Component (SFC), που είναι χρήσιμα κατά τη δημιουργία ολοκληρωμένων εφαρμογών Vue.

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

Η πρόσβαση στη βιβλιοθήκη Vue μέσω του συνδέσμου CDN παρέχει ένα αντικείμενο Vue, συμπεριλαμβανομένου του .createApp() μέθοδος.

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

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

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Εφαρμογή Vueτίτλος>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js">γραφή>
κεφάλι>
<σώμα>
<γραφή>
 const app = Vue.createApp();
γραφή>
σώμα>
html>

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

Όπως έτσι:

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Εφαρμογή Vueτίτλος>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js">γραφή>
κεφάλι>
<σώμα>
<divταυτότητα="εφαρμογή">div>
<γραφή>
 const app = Vue.createApp();
 app.mount("#app");
γραφή>
σώμα>
html>

Για να χρησιμοποιήσετε το Vue's .βουνό() μέθοδο, πρέπει να παρέχετε ένα στοιχείο DOM ή έναν επιλογέα ως όρισμα. Σε αυτό το παράδειγμα, προσαρτήσαμε την εφαρμογή Vue χρησιμοποιώντας το στοιχείο DOM με το #εφαρμογή ΤΑΥΤΟΤΗΤΑ.

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

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

Το αντικείμενο Επιλογών στο Vue

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

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

Μερικές από τις ευρέως χρησιμοποιούμενες ιδιότητες στο Επιλογές αντικείμενο είναι:

• δεδομένα: Αυτή η ιδιότητα ορίζει το αντικείμενο δεδομένων για τις εφαρμογές Vue. Είναι μια συνάρτηση που επιστρέφει ένα αντικείμενο που περιέχει τις ιδιότητες δεδομένων και τις αρχικές τους τιμές.
• μεθόδους: Ο μεθόδους Η ιδιότητα του αντικειμένου Επιλογές έχει ζωτικές λειτουργίες για την ενεργοποίηση της δυναμικής απόδοσης.
• πρότυπο: Αυτή η ιδιότητα ορίζει το πρότυπο HTML για την παρουσία ή το στοιχείο Vue. Είναι μια συμβολοσειρά που περιέχει τη σήμανση HTML, την οποία μπορεί να αναλύσει ο μεταγλωττιστής προτύπων του Vue.

Σημειώστε ότι όταν χρησιμοποιείτε μια ιδιότητα προτύπου, ο μεταγλωττιστής Vue θα αποδίδει μόνο περιεχόμενο που ορίζεται στο πρότυπο.

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

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Εφαρμογή Vueτίτλος>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js">γραφή>
κεφάλι>
<σώμα>
<divταυτότητα="εφαρμογή">
<h1 @Κάντε κλικ="αντίστροφο μήνυμα" >{{ κείμενο }}h1>
div>
<γραφή>
συνθ app = Vue.createApp({
// πρότυπο: '
Καλώς ήρθατε στην εφαρμογή Vue
',
 δεδομένα() {
ΕΠΙΣΤΡΟΦΗ {
 κείμενο: "Αυτή είναι η εφαρμογή Vue σας"
 };
 },
 μέθοδοι: {
 αντίστροφο μήνυμα () {
Αυτό.κείμενο = Αυτό.text.split('').reverse().join('')
 }
 }
 });
εφαρμογή.βουνό("#εφαρμογή");
γραφή>
σώμα>
html>

Αυτό το πρόγραμμα απεικονίζει μια βασική εφαρμογή Vue που εμφανίζει το κείμενο "This is your Vue App" χρησιμοποιώντας παρεμβολή κειμένου και επιτρέπει στους χρήστες να κάνουν κλικ σε αυτήν για να αντιστρέψουν το μήνυμα.

ο δεδομένα() Η συνάρτηση επιστρέφει ένα αντικείμενο με μια μοναδική ιδιότητα που ονομάζεται κείμενο. ο @Κάντε κλικ οδηγία χρησιμοποιείται για να επισυνάψετε α reverseMessage() μέθοδος στο στοιχείο, το οποίο αντιστρέφει το κείμενο ιδιοκτησία.

Κατά την εκτέλεση αυτού του προγράμματος, η εφαρμογή Vue που δημιουργήθηκε θα μοιάζει με αυτό:

Κάνοντας κλικ στο κείμενο θα αντιστραφεί.

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

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

Παρεμβολή κειμένου στο Vue

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

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

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

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Εφαρμογή Vueτίτλος>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js">γραφή>
κεφάλι>
<σώμα>
<divταυτότητα="εφαρμογή">
<h1>{{ μήνυμα }}h1>
<Π>Καλώς ορίσατε {{ όνομα }}Π>
div>
<γραφή>
 const app = Vue.createApp({
 δεδομένα() {
 ΕΠΙΣΤΡΟΦΗ {
 μήνυμα: "Αυτή είναι η εφαρμογή Vue.",
 όνομα: "ευγενής",
 };
 },
 });
 app.mount("#app");
γραφή>
σώμα>
html>

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

Μπορείτε επίσης να εμφανίσετε το αποτέλεσμα μιας κλήσης μεθόδου ή να εκτελέσετε βασικές λειτουργίες JavaScript μέσα στις διπλές αγκύλες:

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Εφαρμογή Vueτίτλος>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js">γραφή>
κεφάλι>
<σώμα>
<divταυτότητα="εφαρμογή">
<h1>{{ μήνυμα }}h1>
<h3>Καλώς ορίσατε {{ name.toUpperCase() }}h3>
<Π>Υπάρχουν {{ nameLength() }} γράμματα στο όνομά σας.Π>
div>
<Π>ΟΧΙ εδωΠ>
<γραφή>
 const app = Vue.createApp({
 δεδομένα() {
 ΕΠΙΣΤΡΟΦΗ {
 μήνυμα: "Αυτή είναι η εφαρμογή Vue σας",
 όνομα: "Noble Okafor",
 };
 },
 μέθοδοι: {
 nameLength() {
 επιστροφή this.name.length - 1;
 },
 },
 });
 app.mount("#app");
γραφή>
σώμα>
html>

Σε αυτό το παράδειγμα, η εφαρμογή Vue έχει ένα δεδομένα αντικείμενο που περιέχει δύο ιδιότητες: μήνυμα και όνομα.

Μέσα στην εφαρμογή Vue, τα τρία στοιχεία HTML εμφανίζουν δεδομένα χρησιμοποιώντας την παρουσία Vue. ο h1 στοιχείο εμφανίζει την τιμή του μήνυμα ιδιοκτησίας, ενώ η h3 στοιχείο εμφανίζει την τιμή του όνομα ιδιοκτησία με α toUpperCase() μέθοδο που εφαρμόζεται σε αυτό.

ο Π στοιχείο εμφανίζει το επιστρεφόμενο αποτέλεσμα του nameLength() μέθοδος που ορίζεται στο μεθόδους αντικείμενο της εφαρμογής Vue. ο nameLength() μέθοδος επιστρέφει το μήκος του όνομα ιδιότητα αφαιρούμενη κατά ένα.

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

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

Δημιουργήστε το Front-End σας χρησιμοποιώντας το Vue

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