Shorthand syntax (: and @) in Vue - Step-by-Step Execution

Concept Flow - Shorthand syntax (: and @)

Start with Vue template

↓

Use full syntax: v-bind or v-on

↓

Replace v-bind with :

↓

Replace v-on with @

↓

Template compiles with shorthand

↓

Browser renders with bound props and events

This flow shows how Vue template syntax can be shortened by replacing v-bind with : and v-on with @ for cleaner code.

Execution Sample

Vue

<template>
  <button v-on:click="increment">Click me</button>
  <input v-bind:value="count" />
</template>

This Vue template binds a click event and an input value using full syntax.

Execution Table

Step	Template Syntax	Action	Resulting Shorthand	Effect on Render
1	<button v-on:click="increment">	Detect v-on directive	@click	Button listens for click event
2	<input v-bind:value="count" />	Detect v-bind directive	:value	Input value bound to count
3	<button @click="increment">	Use shorthand @ for v-on	No change in behavior	Click event triggers increment method
4	<input :value="count" />	Use shorthand : for v-bind	No change in behavior	Input shows current count value
5	Render template	Compile template with shorthand	Final DOM with event and binding	User can click button and see input value
6	User clicks button	Event triggers increment	count increases	Input updates with new count
7	User sees updated input	Reactive update	Value changes on screen	UI reflects new count value
8	End	No more changes	-	Execution stops

💡 All shorthand directives processed and template rendered with reactive updates

Variable Tracker

Variable	Start	After Click 1	After Click 2	Final
count	0	1	2	2

Key Moments - 3 Insights

Why can we replace v-bind with : without changing behavior?

Because : is just a shorter alias for v-bind, as shown in execution_table rows 2 and 4, it binds the property the same way.

Does using @ instead of v-on affect how events work?

No, @ is a shorthand for v-on. Execution_table rows 1 and 3 show the event binding is identical, only syntax is shorter.

What happens to the input value when count changes?

The input updates reactively to show the new count value, as seen in execution_table rows 6 and 7 and variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What does @click replace?

A v-on:click

B v-bind:click

C :click

D v-model:click

💡 Hint

Check execution_table row 1 and 3 where v-on:click changes to @click

At which step does the input element get its value bound using shorthand syntax?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Look at execution_table rows 2 and 4 for v-bind:value and :value

If we did not use shorthand, how would the template syntax look for binding a click event?

A @click="increment"

B v-bind:click="increment"

C v-on:click="increment"

D :click="increment"

💡 Hint

Refer to execution_table row 1 showing full syntax for event binding

Concept Snapshot

Vue shorthand syntax:
- Use : instead of v-bind for binding props
- Use @ instead of v-on for event listeners
- Both shorten template code without changing behavior
- Makes templates cleaner and easier to read
- Reactive updates work the same way

Full Transcript

This lesson shows how Vue templates use shorthand syntax to make code simpler. Instead of writing v-bind for binding properties, you can write : followed by the property name. Instead of v-on for event listeners, you can write @ followed by the event name. The execution table traces how the template changes from full syntax to shorthand and how the browser renders the button and input with these bindings. The variable tracker shows how the count variable changes when the button is clicked, updating the input value reactively. Key moments clarify that shorthand does not change behavior, only syntax. The visual quiz tests understanding of which shorthand replaces which full directive and when bindings happen. The snapshot summarizes the key points for quick reference.