learning Vue

Oct 28, 20262 min read

let there be a Template

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>.

slots: nesting templates within templates

// SiteLayout.vue
<template>
  <header>The Cookie Tin</header>
  <main>
    <slot></slot>
  </main>
  <footer>made with 🍪</footer>
</template>

// AboutMePage.vue
<template>
  <SiteLayout>
    <h1>About Me</h1>
    <p>i love cookies</p>
  </SiteLayout>
</template>

// ArtPage.vue
<template>
  <SiteLayout>
    <h1>My Art</h1>
    <img src="..." />
  </SiteLayout>
</template>

Did you enjoy this article?

Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.

cookie's field notes @cookie.ebil.club