Template Syntax and Rendering Data

Vue allows you to display data in the interface using template syntax. Instead of manually updating the page with JavaScript, you bind data directly in the template.

Inside a Vue component, you define data in the <script> section and use it in the <template>.

<script setup>
import { ref } from "vue";

const message = ref("Hello Vue");
</script>

<template>
  <h1>{{ message }}</h1>
</template>

The {{ }} syntax is called interpolation. It displays the value of a variable inside the template.

Vue automatically keeps the UI in sync with the data. When the value changes, the interface updates.

<script setup>
import { ref } from "vue";

const message = ref("Hello Vue");

message.value = "Updated Message";
</script>

After the value changes, the text on the page updates automatically.

You can also use expressions inside the template.

<p>{{ message + "!" }}</p>

Template syntax allows you to connect data with the interface in a simple and declarative way.