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.

Practice

1. What does v-bind do in Vue?

easy

A. It links HTML attributes to Vue data properties so they update automatically.

B. It creates a new Vue component.

C. It runs JavaScript code inside the template.

D. It styles elements with CSS.

Solution

1. Step 1: Understand the purpose of v-bind

   v-bind connects HTML attributes to Vue data, making the UI update when data changes.

2. Step 2: Compare options with this purpose

   Only It links HTML attributes to Vue data properties so they update automatically. describes this behavior correctly; others describe unrelated Vue features.

3. Final Answer:

   It links HTML attributes to Vue data properties so they update automatically. -> Option A

4. Quick Check:

   v-bind connects attributes to data = C [OK]

Hint: Remember: v-bind links attributes to data [OK]

Common Mistakes:

• Thinking v-bind creates components
• Confusing v-bind with event handling
• Assuming v-bind styles elements

2. Which of the following is the correct shorthand syntax for v-bind:href in Vue?

easy

A. $href

B. #href

C. :href

D. @href

Solution

1. Step 1: Recall Vue shorthand for v-bind

   The shorthand for v-bind:attr is :attr.

2. Step 2: Match the shorthand to the attribute

   For v-bind:href, the shorthand is :href.

3. Final Answer:

   :href -> Option C

4. Quick Check:

   v-bind shorthand = :attr = D [OK]

Hint: Use colon (:) before attribute for v-bind shorthand [OK]

Common Mistakes:

• Using @ instead of : for v-bind
• Confusing v-bind shorthand with event binding
• Adding extra symbols like # or $

3. Given the Vue template:

<a :href="url">Link</a>

and data: { url: 'https://vuejs.org' }, what will be the rendered href attribute in the browser?

medium

A. :href='url'

B. https://vuejs.org

C. url

D. undefined

Solution

1. Step 1: Understand v-bind behavior

   The :href="url" binds the href attribute to the value of url in data.

2. Step 2: Substitute the data value

   Since url is 'https://vuejs.org', the href attribute becomes this string.

3. Final Answer:

   https://vuejs.org -> Option B

4. Quick Check:

   Bound attribute shows data value = A [OK]

Hint: v-bind sets attribute to data value, not literal text [OK]

Common Mistakes:

• Thinking it outputs the literal string ':href="url"'
• Confusing attribute name with value
• Expecting 'url' as string instead of data value

4. What is wrong with this Vue template snippet?

<img v-bind:src='imageUrl></img>

medium

A. Missing closing quote for the attribute value.

B. v-bind cannot be used on <img> tags.

C. The tag <img> cannot have a closing tag.

D. The attribute should be v-bind:href, not v-bind:src.

Solution

1. Step 1: Check attribute syntax

   The attribute value for v-bind:src is missing the closing single quote after imageUrl.

2. Step 2: Verify other options

   v-bind works on <img>, <img> can be self-closing or no closing tag, and src is correct attribute for images.

3. Final Answer:

   Missing closing quote for the attribute value. -> Option A

4. Quick Check:

   Attribute quotes must be closed = B [OK]

Hint: Always close quotes around v-bind attribute values [OK]

Common Mistakes:

• Leaving quotes open in attribute bindings
• Thinking v-bind can't be on <img>
• Confusing src and href attributes

5. You want to bind a dynamic class name and a dynamic href attribute to an <a> tag in Vue. Which is the correct way to do this using v-bind shorthand?

hard

A. <a :class=linkClass :href=linkUrl>Click</a>

B. <a v-bind:class="linkClass" href="linkUrl">Click</a>

C. <a class=":linkClass" :href=linkUrl>Click</a>

D. <a :class="linkClass" :href="linkUrl">Click</a>

Solution

1. Step 1: Use correct v-bind shorthand syntax

   Shorthand for v-bind is a colon before the attribute name, and the value must be in quotes if it's a JavaScript expression.

2. Step 2: Check each option

   <a :class="linkClass" :href="linkUrl">Click</a> correctly uses :class="linkClass" and :href="linkUrl". <a v-bind:class="linkClass" href="linkUrl">Click</a> misses binding on href. Options C and D have incorrect quoting or missing quotes.

3. Final Answer:

   <a :class="linkClass" :href="linkUrl">Click</a> -> Option D

4. Quick Check:

   Use :attr="value" for binding multiple attributes = A [OK]

Hint: Use colon and quotes for each dynamic attribute [OK]

Common Mistakes:

• Not quoting the bound value
• Mixing static and dynamic attributes incorrectly
• Using wrong attribute names