Attribute binding with v-bind in Vue - Step-by-Step Execution

Concept Flow - Attribute binding with v-bind

Start Vue Component

↓

Template with v-bind

↓

Vue parses v-bind

↓

Evaluate bound expression

↓

Set attribute on element

↓

Render element with updated attribute

↓

User sees updated attribute effect

Vue reads the v-bind directive, evaluates the expression, sets the attribute on the element, and renders it with the updated value.

Execution Sample

Vue

<template>
  <img v-bind:src="imageSrc" alt="Vue logo" />
</template>

<script setup>
const imageSrc = 'https://vuejs.org/images/logo.png'
</script>

This code binds the src attribute of an img element to the imageSrc variable, so the image source updates dynamically.

Execution Table

Step	Action	Expression Evaluated	Attribute Set	Rendered Output
1	Vue starts parsing template	-	-	<img> element created
2	Find v-bind:src directive	imageSrc	-	Prepare to bind src
3	Evaluate imageSrc	'https://vuejs.org/images/logo.png'	-	-
4	Set src attribute on img	-	src="https://vuejs.org/images/logo.png"	-
5	Render img element	-	-	<img src="https://vuejs.org/images/logo.png" alt="Vue logo">
6	User sees image loaded from bound src	-	-	Image of Vue logo displayed

💡 All bindings processed and element rendered with updated attributes

Variable Tracker

Variable	Start	After Binding	Final
imageSrc	undefined	'https://vuejs.org/images/logo.png'	'https://vuejs.org/images/logo.png'

Key Moments - 3 Insights

Why does the src attribute update when imageSrc changes?

Because v-bind tells Vue to watch the imageSrc variable and update the src attribute whenever imageSrc changes, as shown in execution_table step 4.

Can I use v-bind without the colon syntax?

Yes, v-bind:src is the same as :src. Both bind the attribute dynamically, as seen in step 2 where Vue finds the directive.

What happens if imageSrc is undefined?

The src attribute will be set to undefined or empty, so the image won't load properly. Vue still sets the attribute as in step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of imageSrc at step 3?

A null

B undefined

C 'https://vuejs.org/images/logo.png'

D empty string

💡 Hint

Check the 'Expression Evaluated' column at step 3 in the execution_table

At which step does Vue set the src attribute on the img element?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Attribute Set' column in the execution_table

If imageSrc changes after rendering, what will Vue do?

A Update the src attribute to new value

B Nothing, attribute stays the same

C Remove the img element

D Reload the whole page

💡 Hint

Remember v-bind keeps attributes in sync with variables as explained in key_moments

Concept Snapshot

v-bind dynamically sets HTML attributes in Vue templates.
Syntax: v-bind:attr="expression" or shorthand :attr="expression".
Vue evaluates the expression and updates the attribute.
Changes in the bound variable update the attribute automatically.
Use for dynamic links, images, classes, and more.

Full Transcript

This visual execution shows how Vue processes attribute binding using v-bind. Vue starts by parsing the template and finds the v-bind directive on the img element's src attribute. It evaluates the expression imageSrc, which holds the URL string. Vue then sets the src attribute on the img element with this URL. Finally, the img element renders with the updated src, displaying the Vue logo image. The variable tracker shows imageSrc starts undefined and is set to the URL before rendering. Key moments clarify why the attribute updates dynamically and how shorthand syntax works. The quiz tests understanding of the evaluation and attribute setting steps. This helps beginners see how Vue connects variables to HTML attributes visually and step-by-step.