JavaScript expressions in templates in Vue - Step-by-Step Execution

Concept Flow - JavaScript expressions in templates

Start Template Rendering

↓

Evaluate JS Expression

↓

Insert Result into DOM

↓

Render Complete

↓

Wait for Data Change or Event

↓

Re-evaluate Expression if Needed

↓

Update DOM with New Result

↓

Repeat as Needed

Vue templates evaluate JavaScript expressions inside {{ }} or directives, then insert the result into the DOM, updating reactively when data changes.

Execution Sample

Vue

<template>
  <p>{{ message.toUpperCase() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('hello')
</script>

This template shows how a JavaScript expression (toUpperCase) runs inside {{ }} to display uppercase text.

Execution Table

Step	Template Expression	Data State	Evaluation Result	DOM Update
1	message.toUpperCase()	message = 'hello'	'HELLO'	<p>HELLO</p> rendered
2	message.toUpperCase()	message changed to 'vue'	'VUE'	<p>VUE</p> updated
3	message.toUpperCase()	message changed to 'js'	'JS'	<p>JS</p> updated
4	message.toUpperCase()	no change	no re-evaluation	DOM unchanged

💡 Rendering stops when no data changes trigger re-evaluation.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
message	'hello'	'hello'	'vue'	'js'	'js'
evaluation result	''	'HELLO'	'VUE'	'JS'	'JS'

Key Moments - 3 Insights

Why does the expression inside {{ }} update automatically when 'message' changes?

Vue tracks reactive variables like 'message'. When 'message' changes (see execution_table rows 2 and 3), Vue re-evaluates the expression and updates the DOM automatically.

Can I use any JavaScript code inside {{ }}?

You can use JavaScript expressions but not statements. For example, you can call functions or use operators, but you cannot write loops or if statements directly inside {{ }}.

What happens if the data does not change?

If the data stays the same (execution_table row 4), Vue does not re-evaluate the expression or update the DOM, improving performance.

Visual Quiz - 3 Questions

Look at the execution table, what is the DOM content after step 2?

A <p>HELLO</p>

B <p>VUE</p>

C <p>JS</p>

D <p>hello</p>

💡 Hint

Check the 'DOM Update' column at step 2 in the execution_table.

At which step does the variable 'message' change to 'js'?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Data State' column in the execution_table for when 'message' changes.

If you replace 'message.toUpperCase()' with 'message.length', what would be the evaluation result at step 1?

A 'HELLO'

B 'hello'

C 5

D undefined

💡 Hint

Check the length of the string 'hello' in the variable_tracker or think about what .length returns.

Concept Snapshot

Vue templates let you write JavaScript expressions inside {{ }}.
These expressions run when rendering and update reactively when data changes.
You can use properties, methods, and operators but not statements.
Vue tracks reactive data and updates the DOM automatically.
This makes templates dynamic and easy to read.

Full Transcript

In Vue templates, you can write JavaScript expressions inside double curly braces {{ }}. When Vue renders the template, it evaluates these expressions using the current data. For example, if you have a reactive variable 'message' with value 'hello', writing {{ message.toUpperCase() }} will show 'HELLO' in the page. When 'message' changes, Vue automatically re-evaluates the expression and updates the displayed text. This reactive update happens only when the data changes, so the DOM stays efficient. You can use expressions like property access, method calls, and operators inside {{ }}, but you cannot write full JavaScript statements like loops or if conditions there. This feature lets you keep your templates simple and dynamic, showing live data easily.

Practice

1. In Vue templates, which syntax correctly inserts a JavaScript expression to display a variable named message?

easy

A. [[ message ]]

B. { message }

C. {{ message }}

D. ${ message }

Solution

1. Step 1: Recognize Vue interpolation syntax

   Vue uses double curly braces {{ }} to insert JavaScript expressions in templates.

2. Step 2: Match the correct syntax for variable display

   The correct way to show the value of message is {{ message }}.

3. Final Answer:

   <code>{{ message }}</code> -> Option C

4. Quick Check:

   Vue interpolation = {{ }} [OK]

Hint: Use double curly braces {{ }} to insert expressions [OK]

Common Mistakes:

• Using single curly braces or square brackets
• Trying to use template literals syntax inside templates
• Forgetting to use any braces

2. Which of the following is the correct way to write a simple math expression inside a Vue template to add 5 and 3?

easy

A. {{ 5 & 3 }}

B. {{ 5 + 3 }}

C. {{ add(5, 3) }}

D. {{ '5' + '3' }}

Solution

1. Step 1: Understand expression evaluation in Vue templates

   Vue evaluates JavaScript expressions inside {{ }} as normal JavaScript.

2. Step 2: Identify the correct math addition expression

   5 + 3 correctly adds numbers to get 8. {{ '5' + '3' }} concatenates strings, {{ add(5, 3) }} calls an undefined function, and {{ 5 & 3 }} uses bitwise AND.

3. Final Answer:

   <code>{{ 5 + 3 }}</code> -> Option B

4. Quick Check:

   Math addition uses + inside {{ }} [OK]

Hint: Use normal JavaScript math inside {{ }} [OK]

Common Mistakes:

• Using string quotes for numbers causing concatenation
• Calling undefined functions inside templates
• Using bitwise operators instead of arithmetic

3. Given the Vue data property count: 4, what will be displayed by this template snippet?

<div>{{ count * 2 }}</div>

medium

A. 8

B. count * 2

C. 4 * 2

D. undefined

Solution

1. Step 1: Evaluate the expression inside the template

   The expression count * 2 multiplies the value of count (which is 4) by 2.

2. Step 2: Calculate the result

   4 multiplied by 2 equals 8, so the template will display 8.

3. Final Answer:

   8 -> Option A

4. Quick Check:

   4 * 2 = 8 [OK]

Hint: Multiply variables directly inside {{ }} [OK]

Common Mistakes:

• Expecting the expression to print as text
• Confusing variable name with string
• Assuming undefined if variable is not reactive

4. What is wrong with this Vue template expression?

<div>{{ user.name.toUpperCase }}</div>

Assuming user.name is a string.

medium

A. toUpperCase is not a valid method

B. Cannot use functions inside templates

C. user.name is undefined

D. Missing parentheses to call the function

Solution

1. Step 1: Identify the method usage error

   toUpperCase is a function and must be called with parentheses ().

2. Step 2: Correct the expression

   The correct expression is user.name.toUpperCase() to get the uppercase string.

3. Final Answer:

   Missing parentheses to call the function -> Option D

4. Quick Check:

   Call methods with () inside {{ }} [OK]

Hint: Always add () when calling functions in templates [OK]

Common Mistakes:

• Forgetting parentheses on method calls
• Trying to use unsupported functions
• Assuming properties auto-call functions

5. You want to display a list of numbers doubled inside a Vue template using numbers = [1, 2, 3]. Which expression correctly creates a comma-separated string of doubled numbers?

hard

A. {{ numbers.map(n => n * 2).join(', ') }}

B. {{ numbers * 2 }}

C. {{ numbers.forEach(n => n * 2) }}

D. {{ numbers.map(n => n * 2) }}

Solution

1. Step 1: Understand array transformation in templates

   To double each number, use map with a function n => n * 2.

2. Step 2: Convert the array to a string

   Using join(', ') converts the array to a comma-separated string for display.

3. Final Answer:

   <code>{{ numbers.map(n => n * 2).join(', ') }}</code> -> Option A

4. Quick Check:

   Use map + join for array display [OK]

Hint: Use map() then join() to show transformed arrays [OK]

Common Mistakes:

• Trying to multiply array directly
• Using forEach which returns undefined
• Not joining array to string for display