⚙️ Vue Instance and Directives

Creating the Application

In Vue 3 an app is created with the createApp() function and connected to a DOM element with mount(). Everything inside that element becomes Vue's territory — reactive, managed, and re-rendered on demand.

import { createApp } from 'vue'
import App from './App.vue'

// Create the application from a root component…
const app = createApp(App)

// …and mount it to the <div id="app"> in index.html
app.mount('#app')

🧠 Analogy: The application instance is the brain of your app. Just as the brain coordinates every system in the body, the Vue app orchestrates components, reactivity, and directives across the tree it controls.

Reactive State: ref & reactive

With the Composition API you declare state directly in <script setup>. Two functions do almost all the work.

ref — for a single value

Wrap any value (number, string, boolean, or even an object) in ref(). Read and write it through .value in JavaScript; the template unwraps it automatically.

import { ref } from 'vue'

const count = ref(0)
const message = ref('Hello Vue!')

count.value++          // now 1
message.value = 'Hi!'  // updates everywhere it's used

reactive — for an object of related state

When several values belong together, reactive() makes a whole object reactive. No .value needed — you access properties directly.

import { reactive } from 'vue'

const user = reactive({
  name: 'Ada',
  loggedIn: false
})

user.loggedIn = true   // reactive; the UI updates

Derived and observed state

Two more helpers round out the toolkit:

import { ref, computed, watch } from 'vue'

const count = ref(0)

// computed: cached, recalculated only when `count` changes
const doubled = computed(() => count.value * 2)

// watch: run a side effect when `count` changes
watch(count, (newVal, oldVal) => {
  console.log(`count went from ${oldVal} to ${newVal}`)
})

What Directives Are

Directives are special template attributes, all prefixed with v-, that apply reactive behavior to the DOM. They're the bridge between your reactive state and what the browser actually renders.

🚦 Analogy: A plain HTML attribute is a static sign — a painted "EXIT" that never changes. A directive is a digital sign that updates its message the moment the underlying data changes.

The directives below cover the vast majority of everyday Vue work. Learn these six and you can build real interfaces.

Binding Text, Attributes & Events

Text interpolation

The double-curly "mustache" syntax inserts a reactive value as text. It's safe by default — HTML is escaped.

<p>{{ message }}</p>

v-bind — dynamic attributes

Mustaches can't go inside attributes, so v-bind (shorthand :) binds an attribute to an expression.

<!-- Full syntax -->
<img v-bind:src="imageUrl" v-bind:alt="imageDescription">

<!-- Shorthand (preferred) -->
<img :src="imageUrl" :alt="imageDescription">

<!-- Conditional classes -->
<div class="btn" :class="{ 'btn-primary': isPrimary, active: isActive }"></div>

v-on — event handling

v-on (shorthand @) listens for DOM events and runs a handler. Handy event modifiers take care of common chores.

<!-- Full and shorthand -->
<button v-on:click="increment">Increment</button>
<button @click="increment">Increment</button>

<!-- Inline expression -->
<button @click="count++">Increment</button>

<!-- Modifiers -->
<form @submit.prevent="submitForm">...</form>   <!-- preventDefault -->
<button @click.stop="handleClick">Click</button> <!-- stopPropagation -->
<input @keyup.enter="submit">                    <!-- only on Enter -->

Conditional & List Rendering

v-if / v-else-if / v-else

These add or remove elements from the DOM based on a condition.

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Neither A nor B</div>

v-show

Similar in effect, but v-show only toggles the CSS display property — the element always stays in the DOM.

<div v-show="isVisible">Toggled with CSS display</div>

v-for — rendering lists

Iterate arrays or objects. Always provide a unique :key so Vue can track each item's identity across updates.

<!-- Array with index -->
<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }}: {{ item.name }}
  </li>
</ul>

<!-- Object properties -->
<ul>
  <li v-for="(value, key) in profile" :key="key">
    {{ key }}: {{ value }}
  </li>
</ul>

Two-Way Binding with v-model

v-model keeps a form input and a piece of state in sync in both directions. It's shorthand for a v-bind plus a v-on working together.

<!-- Text input -->
<input v-model="message">
<p>Message: {{ message }}</p>

<!-- Checkbox (boolean) -->
<input type="checkbox" v-model="agreed">

<!-- Select dropdown -->
<select v-model="selected">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>

Under the hood, this:

<input v-model="message">

<!-- is roughly equivalent to -->
<input :value="message" @input="message = $event.target.value">

Useful modifiers

<input v-model.trim="message">   <!-- strip surrounding whitespace -->
<input v-model.number="age">     <!-- cast to a number -->
<input v-model.lazy="message">   <!-- sync on change, not every keystroke -->

Custom Directives

When you need reusable low-level DOM behavior that the built-ins don't cover, write a custom directive. A classic example is auto-focusing an input when it appears.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Register a global v-focus directive
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')

<!-- The input focuses itself as soon as it mounts -->
<input v-focus>

In <script setup> you can also define a local directive by naming a variable with the v prefix:

<script setup>
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus>
</template>

Directive hooks mirror the component lifecycle: beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted. Real-world uses include tooltips, lazy-loading images, and click-outside handlers.

Worked Example: Task Manager

Let's combine everything — reactive state, computed values, events, conditional and list rendering, two-way binding, and a custom directive — into one small but complete Single-File Component.

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

const title = ref('Task Manager')
const newTask = ref('')
const tasks = ref([
  { id: 1, text: 'Learn Vue basics', done: false },
  { id: 2, text: 'Build a todo app', done: false }
])
let nextId = 3

// Local custom directive: focus on mount
const vFocus = { mounted: (el) => el.focus() }

const remaining = computed(() => tasks.value.filter(t => !t.done).length)

function addTask() {
  const text = newTask.value.trim()
  if (!text) return
  tasks.value.push({ id: nextId++, text, done: false })
  newTask.value = ''
}

function removeTask(id) {
  tasks.value = tasks.value.filter(t => t.id !== id)
}
</script>

<template>
  <h1>{{ title }}</h1>

  <!-- v-model + event modifier + attribute binding -->
  <input
    v-model.trim="newTask"
    v-focus
    placeholder="Add a task"
    @keyup.enter="addTask">
  <button @click="addTask" :disabled="!newTask">Add</button>

  <!-- Conditional rendering -->
  <p v-if="tasks.length === 0">No tasks yet. Add one!</p>

  <!-- List rendering with dynamic class -->
  <ul v-else>
    <li
      v-for="task in tasks"
      :key="task.id"
      :class="{ done: task.done }">
      <input type="checkbox" v-model="task.done">
      {{ task.text }}
      <button @click="removeTask(task.id)">Delete</button>
    </li>
  </ul>

  <p>Remaining: {{ remaining }}</p>
</template>

<style scoped>
.done { text-decoration: line-through; color: gray; }
</style>

Hands-on Exercise

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

const name = ref('Your Name')
const color = ref('#42b883')
const visible = ref(true)
</script>

<template>
  <input v-model="name" placeholder="Enter your name">

  <select v-model="color">
    <option value="#42b883">Green</option>
    <option value="#3b82f6">Blue</option>
    <option value="#e44d26">Orange</option>
  </select>

  <button @click="visible = !visible">Toggle badge</button>

  <div
    v-show="visible"
    class="badge"
    :style="{ backgroundColor: color }">
    {{ name }}
  </div>
</template>

<style scoped>
.badge {
  margin-top: 1rem;
  padding: 1rem 2rem;
  color: white;
  border-radius: 8px;
  display: inline-block;
  font-weight: 700;
}
</style>

Summary & Quiz

📚 Further Reading

• Vue.js — Creating an Application
• Vue.js — Built-in Directives Reference
• Vue.js — Custom Directives

🚀 What's Next?

You can now wire state to the DOM. Next we go deeper into template syntax and reactivity — interpolation nuances, dynamic class and style binding, computed properties, and watchers — so your components stay clean as they grow.