Vue Template Syntax and Interpolation

Vue templates use an HTML-based syntax that allows you to declaratively bind the rendered DOM to the component's data.

Text Interpolation

<p>{{ message }}</p>
<p>{{ count + 1 }}</p>
<p>{{ isActive ? 'Yes' : 'No' }}</p>
<p>{{ user.name.toUpperCase() }}</p>

Raw HTML with v-html

<!-- ⚠️ Only use with trusted content — XSS risk -->
<div v-html="htmlContent"></div>

Attribute Binding with v-bind

<!-- longhand -->
<img v-bind:src="imageUrl" v-bind:alt="imageAlt" />

<!-- shorthand : -->
<img :src="imageUrl" :alt="imageAlt" />

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

<!-- bind an object of attributes -->
<input v-bind="inputAttrs" />

const inputAttrs = { type: 'email', placeholder: 'Enter email', required: true }