Lesson 1 — Hello Vue

A template plus data

A Vue single-file component (a .vue file) has a <template> with the HTML and a <script setup> with the JavaScript. ref(value) creates a reactive value — one Vue watches, so the page updates when it changes. In the template, {{ name }} (double curly braces, called interpolation) prints a value.

<template><p>{{ city }}</p></template>
<script setup>
import { ref } from "vue"
const city = ref("Oslo")
</script>

Why it matters: every Vue screen is this pairing of template and data.