Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Under the hood, Vue compiles the templates into optimized JavaScript code.
<template>
<div>
<!-- Text interpolation -->
<p>{{ message }}</p>
<!-- Raw HTML -->
<p v-html="rawHtml"></p>
<!-- Attribute binding -->
<a :href="url">Visit Link</a>
<button :disabled="isDisabled">Click</button>
<!-- Conditional -->
<p v-if="isVisible">Visible!</p>
<p v-else>Hidden!</p>
<!-- Loop -->
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>