Vue 3·Vue from reactivity to a routed app

Template syntax

Interpolate values, bind attributes and avoid unsafe HTML.

Intermediate 12 min read Lesson 2 of 300 Challenge included

What you will be able to do

Use double braces for text interpolation.
Use :attr for attribute binding.
Use v-bind with an object for several attributes.
Avoid v-html unless the HTML is trusted.

In plain English

Templates are HTML with expressions. Text interpolation escapes values, which protects you from injected markup. v-bind connects attributes to state; v-html is an escape hatch that bypasses escaping and must never receive user input.

template.htmlHTML

<script setup>
const title = 'CSS Grid'
const url = '/tutorials/css'
</script>

<template>
  <h1>{{ title }}</h1>
  <a :href="url" :title="title">Open course</a>
</template>

Your turn

Bind an image

Easy

Bind an image src and alt from two refs.

HTML · starter

<img>

Check your understanding before moving on.

Knowledge checkQuestion 1

Which directive inserts raw HTML and bypasses escaping?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Computed and watch

Lesson 2 of 300 · 0% of course