Shorthand syntax (: and @) in Vue

Introduction

Shorthand syntax makes Vue code shorter and easier to read by replacing long attribute names with symbols.

When binding a JavaScript value to an HTML attribute in Vue templates.

When listening to events on elements in Vue components.

To write cleaner and more concise Vue template code.

When you want to improve readability by reducing repetitive code.

When you want to follow common Vue style practices.

Syntax

Vue

<element :attribute="value" @event="handler" />

: is shorthand for v-bind: to bind data or props.

@ is shorthand for v-on: to listen to events.

Examples

Binds the src attribute to the imageUrl data property.

Vue

<img :src="imageUrl" alt="Photo" />

Listens for the click event and calls submitForm method.

Vue

<button @click="submitForm">Send</button>

Binds the input's value and listens for input changes.

Vue

<input :value="username" @input="updateUsername" />

Sample Program

This Vue component uses : to bind the input's value to the name variable. It uses @ to listen for input events and update the name. The paragraph shows the live greeting.

Vue

<template>
  <div>
    <input :value="name" @input="updateName" aria-label="Name input" />
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
function updateName(event) {
  name.value = event.target.value
}
</script>

Important Notes

Using shorthand makes your templates cleaner and easier to maintain.

Remember that : and @ only work inside Vue templates.

Always use aria-label or other accessibility attributes for better user experience.

Summary

: is short for v-bind: to bind data.

@ is short for v-on: to listen to events.

Shorthand syntax helps write cleaner and simpler Vue templates.