Directives στο Vue.js σας επιτρέπει να εφαρμόζετε ειδικές συμπεριφορές σε στοιχεία στο DOM. Έχουν πρόθεμα με τη v- σύνταξη και χρησιμοποιούνται για τον χειρισμό του DOM, τον χειρισμό συμβάντων, την υπό όρους απόδοση στοιχείων και πολλά άλλα. Το Vue.js παρέχει πολλά ενσωματωμένα, directives όπως, , και, τα οποία καλύπτουν ένα ευρύ φάσμα περιπτώσεων κοινής χρήσης. v-if v-for v-bind v-on
Εδώ είναι μερικά κοινά directives στο Vue.js:
1. Οδηγία: Αυτή η οδηγία χρησιμοποιείται για την υπό όρους απόδοση ενός στοιχείου που βασίζεται σε μια συνθήκη. v-if
Παράδειγμα:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Οδηγία: Αυτή η οδηγία χρησιμοποιείται για την επανάληψη πάνω από έναν πίνακα ή ένα αντικείμενο και τη δημιουργία αντίστοιχων στοιχείων. v-for
Παράδειγμα:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Οδηγία: Αυτή η οδηγία χρησιμοποιείται για τη δέσμευση της τιμής μιας έκφρασης σε ένα χαρακτηριστικό ή μια ιδιότητα ενός στοιχείου. v-bind
Παράδειγμα:
<img v-bind:src="imageUrl">
4. Οδηγία: Αυτή η οδηγία χρησιμοποιείται για την ακρόαση και το χειρισμό συμβάντων σε ένα στοιχείο. v-on
Παράδειγμα:
<button v-on:click="handleClick">Click me!</button>
5. Οδηγία: Αυτή η οδηγία δημιουργεί μια αμφίδρομη σύνδεση μεταξύ ενός στοιχείου εισόδου και μιας ιδιότητας δεδομένων. v-model
Παράδειγμα:
<input v-model="message">
Αυτά είναι μόνο μερικά βασικά directives στο Vue.js. Μπορείτε επίσης να δημιουργήσετε τη δική σας προσαρμογή directives για την εκτέλεση συγκεκριμένων συμπεριφορών στην εφαρμογή Vue.js.