Τι κάνει το v-bind;

Question

Τι κάνει το v-bind;

Accepted Answer

Το `v-bind` δεσμεύει δυναμικά ένα **χαρακτηριστικό HTML** (ή component prop) σε μια έκφραση JavaScript, ώστε το χαρακτηριστικό να ενημερώνεται αντιδραστικά όταν αλλάζουν τα δεδομένα. Η συντομογραφία του είναι απλώς `:`. ```vue ``` Η διαφορά μεταξύ `:src="imageUrl"` και `src="imageUrl"` είναι κρίσιμη: χωρίς το `:`, είναι ένα κυριολεκτικό string· με αυτό, το Vue αξιολογεί την έκφραση. ## Δέσμευση κλάσεων και στυλ (ειδική επεξεργασία) ```vue ``` Το Vue δίνει `:class` και `:style` ειδική σύνταξη object/array για δεσμευτική εφαρμογή κλάσεων και ενσωματωμένων στυλ. ## Δέσμευση ενός ολόκληρου αντικειμένου χαρακτηριστικών ```vue ``` Το `v-bind` χωρίς όρισμα διαδίδει τα κλειδιά ενός αντικειμένου ως πολλαπλά χαρακτηριστικά — χρήσιμο για τη μεταβίβαση πολλών props ταυτόχρονα. ## Μεταβίβαση props σε components ```vue ``` Η ίδια σύνταξη `:prop` μεταβιβάζει δεδομένα σε θυγατρικά components (όχι μόνο χαρακτηριστικά DOM). ## Γιατί είναι σημαντικό Το `v-bind` (`:`) είναι ο τρόπος με τον οποίο κάνετε τα χαρακτηριστικά και τα props **δυναμικά και αντιδραστικά** — το αντίστοιχο του `{{ }}` για περιεχόμενο. Χρησιμοποιείται συνεχώς: δέσμευση `src`/`href`/`disabled`, υπό όρους `:class`/`:style` και μεταβίβαση props σε components. Γνώση των σύνταξης object/array για class/style και της μορφής object-spread καλύπτει σχεδόν όλες τις ανάγκες δέσμευσης χαρακτηριστικών.