Getting Started

Template Syntax

Learn Vue's template syntax for rendering data, binding attributes, and handling events.

Text Interpolation

Use double curly braces {{ }} to render reactive data as text.

Directives

Vue templates use special attributes called directives (prefixed with v-):

  • v-bind (or :) — bind attributes to expressions
  • v-on (or @) — attach event listeners
  • v-if / v-else-if / v-else — conditional rendering
  • v-show — toggle visibility (keeps element in DOM)
  • v-for — render lists
  • v-model — two-way data binding on form inputs

Two-Way Binding

v-model creates a two-way binding between an input element and reactive data.

Example

html
<template>
  <!-- Text interpolation -->
  <p>{{ message }}</p>
  <p>{{ 1 + 1 }}</p>
  <p>{{ isAdmin ? 'Admin' : 'User' }}</p>

  <!-- Attribute binding -->
  <a :href="url">Click here</a>
  <img :src="imageSrc" :alt="imageAlt" />
  <button :disabled="isLoading">Submit</button>

  <!-- Class and style binding -->
  <div :class="{ active: isActive, error: hasError }">...</div>
  <p :style="{ color: textColor, fontSize: size + 'px' }">...</p>

  <!-- Event handling -->
  <button @click="handleClick">Click me</button>
  <input @keyup.enter="submitForm" />
  <form @submit.prevent="onSubmit">...</form>

  <!-- Conditional rendering -->
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else>Please log in.</div>
  <span v-show="isVisible">Shown/hidden via CSS</span>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>

  <!-- Two-way binding -->
  <input v-model="username" placeholder="Enter username" />
  <p>Hello, {{ username }}!</p>
</template>
Try it yourself — HTML