Template Syntax and Directives

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Use {{ }} interpolation
Bind attributes with v-bind
Read directive syntax comfortably

Let's break it down simply

In a template, {{ value }} is text interpolation. To bind an HTML attribute to a reactive value, use v-bind or its shorthand :. Never render user input directly with v-html.

vue

<script setup>
const profile = {
  name: 'Su Su',
  avatar: '/avatar.png',
  active: true
}
</script>

<template>
  <h2>{{ profile.name }}</h2>
  <img :src="profile.avatar" :alt="profile.name">
  <p :class="{ online: profile.active }">Online</p>
</template>

You should see

Su Su
[avatar image]
Online

Try it yourself

Create a product object and display its title, price, and image src in the template.

Template Syntax — Vue.js

Easy traps

Using {{ }} inside an attribute
Rendering untrusted user input with v-html

Exercise

Create a product object and display its title, price, and image src in the template.

You'll know it worked when: Su Su [avatar image] Online