Difference between v-bind: value or :value?

I really don’t understand the difference between v-bind: value or simple :value !!
Can anyone explain??

Hi @bilal-shuja – I don’t think there is any difference, :name="value" is just the shorthand for v-bind:name="value". For details, please see the api docs for v-bind.

The only reason I can see for having and using the longhand version would be to make it clear what the intent is for people initially learning the api and to make it easier to spot bindings in templates. This is me just guessing though, if anyone has more details I’d be interested to know! :slight_smile:

You’d usually just use the : shorthand.

For binding an object (‘spreading’ the properties) you’d need to use the longer version:

<my-component v-bind="object">

The longer version gives us a name to use when talking about it and something to search for in the docs. If we just had : it would be more difficult to communicate. The full name, with the v- prefix, also makes it easier to reason about v-bind more generally as a directive (with arguments, modifiers and a value) rather than as a distinct part of the syntax. The same goes for v-on/@ and v-slot/#.

1 Like