VuVue · Lesson 1 of 7

Hello, Vue!

Vue's building block is the Single File Component (.vue file) — HTML, JavaScript, and CSS in one file, cleanly separated into three sections. It's the part that makes developers who've never used Vue say 'wait, that's actually nice.'

HTML

<!-- App.vue — a Vue Single File Component (SFC) -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

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

// ref() makes a value reactive
const message = ref("Hello, Vue!")
const count   = ref(0)
</script>

<style scoped>
/* scoped — styles only apply to this component */
h1 { color: #42b883; }
</style>

`<script setup>` is Vue 3's Composition API. The `setup` attribute is syntactic sugar — everything you declare at the top level is automatically available in the template. No need for `return {}` or wrapping in `setup()`.

HTML

<!-- CDN version — no build step, great for quick experiments -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">{{ count }}</button>
  </div>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const message = ref("Hello from CDN!")
        const count   = ref(0)
        return { message, count }
      }
    }).mount('#app')
  </script>
</body>
</html>

◆ Note
Vue has two API styles: Composition API (`<script setup>`, modern, recommended) and Options API (`data()`, `methods:`, `computed:`, older style). Both work in Vue 3. This course uses Composition API — it's better for large components and TypeScript.