let there be a Template

a minimal Vue file:

<template>
  <p>Hi!</p>
</template>

<template> is where you put all the typical HTML in.

the script

you can also have <script>, which is where you can define variables, functions, do calculations, data processing, etc. before the HTML is rendered. you can also use said variables and functions to programmatically render (or not render) certain HTML elements.

you need the setup attribute in <script> if you want to use top-level variables directly in <template>.

<script setup>
import { ref } from 'vue'

const name = ref('Cookie')
const showMessage = ref(true)
const characters = [
  {key: "M", name: "Mizuho"}, 
  {key: "Y", name: "Yachiyo"}, 
  {key: "F", name: "Frieren"}
]

function toggleMessage() {
  showMessage.value = !showMessage.value
}
</script>

<template>
  <h1>Hello, {{ name }}!</h1>

  <input v-model="name" placeholder="Your name" />

  <button @click="toggleMessage">Toggle message</button>
  <p v-if="showMessage">Nice to meet you!</p>
  <li v-for="c in characters" :key="c.key">{{c.name}}</li>
</template>

  • {{ name }} displays a value in the page.

  • ref(...) creates reactive state: when it changes, Vue updates the page.

  • @click="..." is shorthand for v-on:click="...". it listens for a click event.

  • :key="..." is shorthand for v-bind:key="...". it sets a normal HTML attribute from a JS expression. that expression can be a variable or something more complex like a function call that returns a value.

the styles

you can also have <style>.

<script setup>
import { ref } from 'vue'

const name = ref('Mina')
const showMessage = ref(true)
const characters = [
  {key: "M", name: "Mizuho"}, 
  {key: "Y", name: "Yachiyo"}, 
  {key: "F", name: "Frieren"}
]

function toggleMessage() {
  showMessage.value = !showMessage.value
}
</script>

<template>
  <h1>Hello, {{ name }}!</h1>

  <input v-model="name" placeholder="Your name" />

  <button @click="toggleMessage">Toggle message</button>
  <p v-if="showMessage">Nice to meet you!</p>
  <li v-for="c in characters" :key="c.key">{{c.name}}</li>
</template>

<style>
h1 { color: blue; }
</style>

<style> can be global or scoped. by default it's global. that means the CSS affects elements anywhere in the app, not just in this Vue file! if you want it to affect only this file's component (i.e. the <target> in this file), use <style scoped>.