Vue templates are valid HTML extended with Vue-specific syntax. They compile to render functions under the hood—you rarely write render functions by hand while learning.
Template basics
- One root element per template (or use a fragment wrapper in SFCs—in this playground, wrap siblings in a
<div>). - Bind dynamic attributes with
v-bindor the shorthand:— e.g.:href="url". - Listen to DOM events with
v-onor@— e.g.@click="handler". - Embed JavaScript expressions inside
{{ mustaches }}— not statements likeiforfor.
Templates vs JSX (React)
If you know React, JSX puts markup inside JavaScript. Vue templates keep markup in HTML-like strings with directives—a style many designers and backend developers find approachable.
<p>{{ message }}</p>
<button :disabled="isBusy" @click="save">Save</button>Self-check
- What is the shorthand for
v-bind:href? - Can you put a
forloop inside{{ }}?
Challenge
Hello template
- Change the greeting text inside the paragraph.
- Add a second paragraph with
{{ new Date().getFullYear() }}. - Click Run and confirm the preview updates.
Done when: the preview shows your greeting and the current year.
Tip: Template strings in the playground use backticks—escape nested backticks or use concatenation when embedding dynamic HTML fragments.
Interview prep
- How do templates relate to setup()?
setup()returns data and functions; the template binds to those bindings with mustache and directives likev-ifandv-for.