Getting Started and Template Syntax

Create a project

npm create vue@latest
cd my-app
npm install
npm run dev

This scaffolds a Vue 3 project with Vite, giving you an instant dev server with hot reload.

Text interpolation

Show reactive data in the template with double braces (“mustache” syntax):

<h1>Hello, {{ name }}</h1>
<p>{{ count * 2 }}</p>   <!-- expressions work too -->

Binding attributes with v-bind

To make an HTML attribute reactive, bind it with v-bind, or its shorthand ::

<img :src="imageUrl" :alt="title">
<a :href="link">Read more</a>
<div :class="{ active: isActive }"></div>

Handling events with v-on

Listen to DOM events with v-on, or its shorthand @:

<button @click="count++">Add</button>
<button @click="save">Save</button>
<form @submit.prevent="onSubmit"></form>

.prevent is an event modifier – a shortcut for event.preventDefault(). Others include .stop and .once.

Two-way binding with v-model

Form inputs commonly need to read and write a value. v-model does both in one directive:

<input v-model="username">
<p>Hello, {{ username }}</p>

Key points

• Scaffold with npm create vue@latest (Vite dev server, hot reload).
• {{ }} interpolates reactive data and expressions.
• : (v-bind) binds attributes; @ (v-on) handles events, with modifiers like .prevent.
• v-model gives two-way binding for form inputs.