Learn Vue.js by
watching it react

v-bind

Bind any attributeSet an attribute from your state. The shorthand is a colon.

<template>
  <img :src="user.avatar" :alt="user.name" />
  <p>Signed in as {{ user.name }}</p>
</template>

v-on

Handle eventsRun a function on any DOM event. Modifiers like @submit.prevent handle the boilerplate.

<template>
  <button @click="addToCart">Add to cart</button>
  <form @submit.prevent="checkout">...</form>
</template>

v-if

Render conditionallyShow an element only when a condition is true, and v-else covers the other case. v-show is similar but toggles CSS visibility instead.

<template>
  <p v-if="cart.length">You have {{ cart.length }} items</p>
  <p v-else>Your cart is empty</p>
</template>

v-for

Render a listRepeat an element for each item in an array. Give it a stable :key, an id rather than the index.

<template>
  <li v-for="product in products" :key="product.id">
    {{ product.name }}
  </li>
</template>

v-model

Two-way form bindingv-model keeps an input and your state in sync in both directions at once. Here it drives a small to-do list, with v-for rendering it and a stable :key on each item.

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

let nextId = 1
const task = ref('')
const tasks = ref([])

function addTask() {
  if (task.value) {
    tasks.value.push({ id: nextId++, text: task.value })
    task.value = ''
  }
}
</script>

<template>
  <input v-model="task" @keyup.enter="addTask" placeholder="Add a task" />
  <ul>
    <li v-for="item in tasks" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

computed

Derive values from stateWhen a value depends on other state, do not recalculate it by hand. A computed value updates itself whenever the state it reads from changes, the same reactivity from the counter, now doing your arithmetic for you.

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

const tasks = ref([
  { id: 1, done: false },
  { id: 2, done: true }
])
const remaining = computed(
  () => tasks.value.filter(t => !t.done).length
)
</script>

<template>
  <p>{{ remaining }} tasks left</p>
</template>

That handful of directives covers most of what you will type. Two more pieces finish a single component: reacting when a value changes, and running code as the component comes and goes.