Template Syntax & Interpolation

💚 Vue.js Lesson 3 Beginner

Vue templates use standard HTML syntax, extending it with custom directives and mustache interpolation to bind view elements to the underlying reactive state.

1 Essential Template Bindings

Common binding patterns in Vue include:

Mustache Interpolation ({{ value }}): Renders text dynamically inside elements.
v-html Directive: Renders raw HTML strings directly into the DOM (caution: sanitization is required to prevent XSS attacks).
v-bind / : Selector: Dynamically binds reactive variables to HTML attributes (e.g. :src="imageUrl", :disabled="isBtnDisabled").

2 Template Binding Implementation

Let's check how templates use these bindings in code:

HTML — Vue Template Bindings

<!-- Dynamic Text Interpolation -->
<h3>User: {{ user.name }}</h3>
<p>Active: {{ user.status.toUpperCase() }}</p>

<!-- Dynamic Attribute Binding (shorthand) -->
<img :src="user.avatarUrl" :alt="user.name">

<!-- Dynamic Disabled state -->
<button :disabled="!user.isActive">Send Message</button>

<!-- Raw HTML injection -->
<div v-html="formattedHtmlCode"></div>

3 Code Challenge

Challenge: Write a component template containing an anchor tag (<a>) whose href and title attributes are bound dynamically using the v-bind shorthand.