Vue binds data to the template in four ways. Interpolation and attribute binding carry data from state to the DOM, event binding carries user actions back, and v-model does both.
Text interpolation puts a value into text with double curly braces. Vue renders it as plain text and updates it when the value changes.
<span>{{ message }}</span>
Attribute binding uses v-bind, or its : shorthand, because curly braces do not work inside attributes.
<div :id="dynamicId"></div>
<div v-bind:class="className"></div>
Two-way binding with v-model keeps a form input and a state value in sync.
<input v-model="message" />
Event binding uses v-on, or its @ shorthand, to run a handler when a DOM event fires.
<button @click="handleClick">Click me</button>
<button v-on:click="handleClick">Click me</button>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓