v-bind کیا کرتا ہے؟

Question

v-bind کیا کرتا ہے؟

IT Interview Practice · Accepted Answer

`v-bind` ایک **HTML attribute** (یا component prop) کو JavaScript expression سے dynamic طریقے سے bind کرتا ہے، تاکہ جب data تبدیل ہو تو attribute reactively update ہو۔ اس کی shorthand صرف `:` ہے۔ ```vue ``` `:src="imageUrl"` اور `src="imageUrl"` کے درمیان فرق بہت اہم ہے: بغیر `:` کے، یہ literal string ہے؛ اس کے ساتھ، Vue expression کو evaluate کرتا ہے۔ ## Classes اور styles کو bind کرنا (خصوصی handling) ```vue ``` Vue `:class` اور `:style` کو special object/array syntax دیتا ہے تاکہ conditionally classes اور inline styles کو apply کیا جا سکے۔ ## پورے attributes کا object bind کرنا ```vue ``` `v-bind` بغیر کسی argument کے ایک object کی keys کو multiple attributes کے طور پر spread کرتا ہے — بہت سے props کو ایک ساتھ pass کرنے کے لیے مفید ہے۔ ## Components کو props pass کرنا ```vue ``` یہی `:prop` syntax child components میں data pass کرتا ہے (نہ صرف DOM attributes)۔ ## اہمیت `v-bind` (`:`) یہ ہے کہ آپ attributes اور props کو **dynamic اور reactive** کیسے بناتے ہیں — یہ content کے لیے `{{ }}` کا counterpart ہے۔ یہ ہمیشہ استعمال ہوتا ہے: `src`/`href`/`disabled` bind کرنا، conditional `:class`/`:style`، اور components کو props pass کرنا۔ Class/style کے لیے object/array syntaxes اور object-spread form کو جاننا تقریباً تمام attribute-binding ضروریات کو cover کرتا ہے۔

Classes اور styles کو bind کرنا (خصوصی handling)

پورے attributes کا object bind کرنا

Components کو props pass کرنا

اہمیت

متعلقہ سوالات