Πώς να εφαρμόσετε την υπό όρους απόδοση στο Vue.js

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

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

Τι είναι οι οδηγίες Vue;

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

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

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

Το πλαίσιο Vue προσαρτά τις οδηγίες του με "v-" πριν από το όνομα της οδηγίας. Παραδείγματα οδηγιών που χρησιμοποιούνται συνήθως στο Vue περιλαμβάνουν v-on, v-bind, v-για, και v-αν.

Τι είναι η υπό όρους απόδοση;

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

Στο Vue.js, μπορείτε να χρησιμοποιήσετε οδηγίες όπως π.χ v-αν και v-show για να επιτύχετε απόδοση υπό όρους στην αίτησή σας, διαφορετική από αυτήν που θα κάνατε απόδοση περιεχομένου υπό όρους στο React.js.

Επίτευξη απόδοσης υπό όρους με την οδηγία v-if

Παρόμοιο με το JavaScript αν...αλλιώς δήλωση, ο v-αν η οδηγία στο Vue.js έχει μια προϋπόθεση. Εάν δεν ικανοποιηθεί, το Vue.js αξιολογεί την ακόλουθη συνθήκη που καθορίζεται στο α v-άλλο οδηγία και συνεχίζει να το πράττει έως ότου είτε πληροί μια προϋπόθεση είτε αξιολογεί όλες τις προϋποθέσεις.

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

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

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

Το μπλοκ κώδικα παραπάνω απεικονίζει μια εφαρμογή Vue που δημιουργήθηκε με την προσθήκη α Δίκτυο παράδοσης περιεχομένου (CDN) σύνδεση στο σώμα του αρχείου HTML σας. Η οδηγία v-if θα αποδώσει το στοιχείο h1 μόνο εάν η συνθήκη του είναι αληθής.

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

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

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Εφαρμογή Vueτίτλος>
<γραφήsrc=" https://unpkg.com/vue@3/dist/vue.global.js">γραφή>
κεφάλι>
<σώμα>
<divταυτότητα="εφαρμογή">
<divv-αν="showUsers">
<ul>
<li>Χρήστης 1li>
<li>Χρήστης 2li>
ul>
div>
<κουμπίv-on: κλικ="toggleShowUsers()">
 Εναλλαγή χρηστών
κουμπί>
<h1>{{ μήνυμα }}h1>
div>
<γραφή>
 const app = Vue.createApp({
 δεδομένα () {
 ΕΠΙΣΤΡΟΦΗ {
 showUsers: true,
 μήνυμα: "Αυτή είναι η εφαρμογή Vue σας."
 }
 },
 μέθοδοι: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
γραφή>
σώμα>
html>

Το παραπάνω μπλοκ κώδικα χρησιμοποιεί το v-αν οδηγία για την υπό όρους απόδοση περιεχομένου με βάση την τιμή μιας δυαδικής μεταβλητής, showUsers.

ο div Το στοιχείο εμφανίζεται εάν η τιμή είναι αληθής και κρυφό αν είναι ψευδής. Κάνοντας κλικ στο Εναλλαγή χρηστών το κουμπί ενεργοποιεί το toggleShowUsers() μέθοδος αλλαγής της τιμής του showUsers.

Αυτό το παράδειγμα χρησιμοποιεί επίσης το v-on οδηγία για την ακρόαση συμβάντων, όπως ένα συμβάν κλικ στο κουμπί. Επαναξιολογεί το v-αν οδηγία όποτε η αξία του showUsers αλλαγές.

Επίτευξη απόδοσης υπό όρους με την οδηγία v-show

ο v-show Η οδηγία είναι ένας άλλος τρόπος εμφάνισης ή απόκρυψης στοιχείων στο Vue.js υπό όρους. Είναι παρόμοιο με το v-αν οδηγία στο ότι μπορεί να αποδώσει στοιχεία με βάση μια έκφραση Boolean. Ωστόσο, υπάρχουν ορισμένες κρίσιμες διαφορές μεταξύ των δύο οδηγιών.

ο v-show Η οδηγία δεν αφαιρεί το στοιχείο από το DOM όταν η έκφραση αξιολογείται ως ψευδής. Αντίθετα, χρησιμοποιεί CSS για εναλλαγή του στοιχείου απεικόνιση ιδιοκτησίας μεταξύ κανένας και την αρχική του αξία.

Αυτό σημαίνει ότι το στοιχείο εξακολουθεί να υπάρχει στο DOM αλλά δεν είναι ορατό όταν η έκφραση είναι ψευδής.

Εδώ είναι ένα παράδειγμα:

<σώμα>
<divταυτότητα="εφαρμογή">
<divv-αν="showUsers">
<ul>
<li>Χρήστης 1li>
<li>Χρήστης 2li>
ul>
div>
<κουμπίv-on: κλικ="toggleShowUsers()">
 Εναλλαγή χρηστών
κουμπί>
<h1v-show="showUsers">{{ μήνυμα }}h1>
div>
<γραφή>
 const app = Vue.createApp({
 δεδομένα () {
 ΕΠΙΣΤΡΟΦΗ {
 showUsers: true,
 μήνυμα: "Αυτοί είναι οι χρήστες της εφαρμογής Vue"
 }
 },
 μέθοδοι: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
γραφή>
σώμα>

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

Επιλογή μεταξύ v-if και v-show

Όταν αποφασίζετε μεταξύ χρήσης του v-αν και v-show οδηγίες για την εμφάνιση ή την απόκρυψη στοιχείων στο Vue.js υπό όρους, υπάρχουν ορισμένοι σημαντικοί παράγοντες που πρέπει να ληφθούν υπόψη.

Όταν η κατάσταση αλλάζει σπάνια, χρησιμοποιώντας το v-αν η οδηγία είναι καλή. Αυτό είναι επειδή v-αν αφαιρεί το στοιχείο από το DOM όταν η συνθήκη είναι ψευδής, γεγονός που μπορεί να εμποδίσει τη βέλτιστη απόδοση. Το στοιχείο αποδίδεται μόνο όταν η συνθήκη γίνει αληθής και αφαιρείται από το DOM όταν η συνθήκη γίνει ξανά ψευδής.

Από την άλλη πλευρά, εάν η κατάσταση είναι πιθανό να αλλάζει συχνά, είναι καλύτερο να χρησιμοποιήσετε το v-show οδηγία, η οποία βελτιώνει τις επιδόσεις. Αυτό είναι επειδή v-show χρησιμοποιεί το CSS για να κρύψει ή να εμφανίσει το στοιχείο εναλλάσσοντας την ιδιότητα εμφάνισης CSS μεταξύ κανένα και μπλοκ, αφήνοντας το στοιχείο να αποδίδεται πάντα στο DOM.

Η απόδοση υπό όρους στην εφαρμογή Vue σας έγινε εύκολη

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