Vue Templates

 Vue Templates

They are written using HTML + Vue’s template syntax, allowing you to bind data, handle events, and render content dynamically.

 What are Vue Templates?

A Vue template is an HTML-based syntax that tells Vue how to render the component.

•  Uses standard HTML
•  Enhanced with Vue directives
•  Automatically updates when data changes

 Template Syntax Overview

 Text Interpolation ({{ }})

Used to display dynamic data.

• Also called Mustache syntax.

 Raw HTML (v-html)

Renders HTML instead of plain text.

•  Avoid untrusted content (XSS risk).

 Vue Directives in Templates

Directives are special attributes starting with v-.

Commonly Used Directives

• v-bind → bind attributes

• v-on → handle events

• v-if / v-show → conditional rendering

• v-for → list rendering

• v-model → two-way binding

 Attribute Binding

 Event Handling in Templates

 Conditional Rendering

 List Rendering

 Expressions in Templates

It support simple JavaScript expressions.

 Allowed:

 Not allowed:

 Using <template> Tag

Used to group multiple elements without adding extra DOM nodes.

Template Sources

Templates can be written in multiple ways:

 Inline Template (HTML)

Template String

 Single File Component (Recommended)

 Template vs Render Function

•  Templates are preferred in most cases.

 Best Practices

•  Keep templates clean & readable
•  Move logic to computed & methods
•  Avoid complex expressions
•  Use components to split UI

 Common Mistakes

• Writing heavy logic inside templates
• Forgetting key in v-for
•  Using v-if inside v-for
• Overusing v-html

 Summary Table

 Conclusion

 Templates are the foundation of Vue UI development.
They combine HTML clarity with powerful reactivity, making UI creation simple and efficient.