Εισαγωγή στα στοιχεία Vue

Εισαγωγή

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

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

Τι είναι ένα στοιχείο Vue;

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

Μπορείτε να σκεφτείτε τα στοιχεία Vue ως στοιχεία HTML εμποτισμένα με JavaScript, τα οποία μπορείτε να ορίσετε και να χειριστείτε μόνοι σας.

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

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

Πώς να δημιουργήσετε ένα στοιχείο Vue

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

Δημιουργήστε στοιχεία Vue με μια εγκατάσταση κατασκευής

Τα περισσότερα έργα δημιουργούνται χρησιμοποιώντας το build setup, το οποίο μας δίνει τη δυνατότητα να δημιουργήσουμε στοιχεία ενός αρχείου (SFC) – αποκλειστικά αρχεία στοιχείων με το .vue επέκταση. Αυτό μας επιτρέπει να ενσωματώσουμε το πρότυπο, τη λογική και το στυλ ενός στοιχείου Vue σε ένα μόνο αρχείο:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Δημιουργήστε στοιχεία Vue χωρίς εγκατάσταση κατασκευής

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

Η εγκατάσταση του Vue χωρίς build θα μας επιτρέψει να χρησιμοποιήσουμε συγκεκριμένες λειτουργίες του Vue όπως κάνουμε με την απλή JavaScript. Η σύνταξη είναι κάπως παρόμοια με αυτή που έχουμε δει στα συνηθισμένα SFC:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

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

Πώς να καταχωρήσετε στοιχεία στο Vue

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

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

Vue Components – Παγκόσμια εγγραφή

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

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

Σε μια κατάσταση που έχουμε πολλά συστατικά, μπορούμε αλυσίδα τους ως εξής:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

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

<ChildComponent/>
<ProfileComponent/>

Vue Components – Τοπική εγγραφή

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

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

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

Πώς να περάσετε δεδομένα μέσω των στοιχείων Vue

Ένα από τα πλεονεκτήματα της δημιουργίας στοιχείων είναι η δυνατότητα επαναχρησιμοποίησης κώδικα καθιστώντας τον αρθρωτό.

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

Σφήνες

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

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

Κουλοχέρηδες

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

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε αυτό το στοιχείο οπουδήποτε θέλουμε και να του δώσουμε το περιεχόμενο που επιθυμούμε. Εάν δεν του δώσουμε περιεχόμενο σημαίνει ότι θα χρησιμοποιήσει την προεπιλεγμένη τιμή που του δώσαμε (Κάντε κλικ σε εμένα):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Πώς να εκπέμψετε συμβάντα από τα στοιχεία του Vue

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

Ας υποθέσουμε ότι έχουμε ένα γονικό στοιχείο (App.vue) που περιέχει ένα μόνο θυγατρικό στοιχείο (MyBlogPost.vue). Επιπλέον, το θυγατρικό στοιχείο περιέχει ένα κουμπί που υποτίθεται ότι αλλάζει τον τίτλο.

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

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

Και το θυγατρικό στοιχείο θα μοιάζει με αυτό:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Συμπέρασμα

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

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://stackabuse.com/introduction-to-vue-components/