Interpolation and Directives
Use mustache interpolation and core directives in templates.
Template Syntax Overview
Vue templates are valid HTML enhanced with special syntax:
- Mustache interpolation for text
- Directives (v- prefixed attributes) for behavior
Vue compiles these into efficient render functions.
Mustache Interpolation
The double curly braces, or mustache syntax, output text.
The content is a JavaScript expression, not just a variable name.
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>All lessons in this course
- Interpolation and Directives
- Conditionals and Loops
- Attribute and Class Bindings