Vue templates are HTML extended with directives — special attributes prefixed with v- that apply reactive behavior to the DOM.

Text Interpolation

Use double curly braces to display reactive data:

  <script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue!');
const count = ref(42);
</script>

<template>
  <p>{{ message }}</p>
  <p>Count: {{ count }}</p>
  <p>Double: {{ count * 2 }}</p>
</template>

v-bind — Attribute Binding

Bind dynamic values to HTML attributes with v-bind: or the : shorthand:

  <script setup>
import { ref } from 'vue';

const imageUrl = ref('/logo.png');
const isDisabled = ref(false);
const inputId = ref('username');
</script>

<template>
  <img v-bind:src="imageUrl" alt="Logo" />
  <!-- Shorthand -->
  <img :src="imageUrl" alt="Logo" />

  <input :id="inputId" :disabled="isDisabled" />
  <button :class="{ active: isDisabled }">Toggle</button>
</template>

v-on — Event Handling

Listen to DOM events with v-on: or the @ shorthand:

  <script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

function greet(name) {
  alert(`Hello, ${name}!`);
}
</script>

<template>
  <button v-on:click="increment">Count: {{ count }}</button>
  <!-- Shorthand -->
  <button @click="increment">+1</button>
  <button @click="greet('Alice')">Greet</button>
</template>

v-if — Conditional Rendering

Render elements only when a condition is true:

  <script setup>
import { ref } from 'vue';

const isLoggedIn = ref(false);
const role = ref('guest');
</script>

<template>
  <p v-if="isLoggedIn">Welcome back!</p>
  <p v-else>Please log in.</p>

  <p v-if="role === 'admin'">Admin panel</p>
  <p v-else-if="role === 'editor'">Editor tools</p>
  <p v-else>Read-only view</p>
</template>

Use v-show instead of v-if when toggling visibility frequently — it toggles CSS display rather than adding/removing DOM nodes.

v-for — List Rendering

Render arrays and objects with v-for. Always provide a unique :key:

  <script setup>
import { ref } from 'vue';

const todos = ref([
  { id: 1, text: 'Learn Vue', done: false },
  { id: 2, text: 'Build an app', done: false },
  { id: 3, text: 'Deploy', done: true },
]);
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
  </ul>
</template>

Directive Cheat Sheet

Directive Purpose Shorthand
v-bind Bind attributes :
v-on Event listeners @
v-if / v-else Conditional render —
v-for List rendering —
v-model Two-way binding —

Next: dive into reactivity with ref, reactive, computed, and watch.