Vue.js for Beginners: Your First 30 Minutes

Vue.js is a progressive JavaScript framework that makes building interactive web interfaces simple and intuitive. Unlike monolithic frameworks, Vue is designed to be incrementally adoptable—you can start small and scale up as needed. Its core focus is on the view layer, making it easy to integrate with existing projects or use as a standalone framework for building single-page applications (SPAs).

If you’re new to Vue and want to get hands-on quickly, you’re in the right place. In just 30 minutes, you’ll learn the basics of Vue.js, build a simple interactive app, and understand key concepts like data binding, event handling, and conditional rendering. Let’s dive in!

Setting Up Vue.js
Your First Vue App: The Basics
Data & Interpolation: Displaying Dynamic Content
Attribute Binding with v-bind
Two-Way Binding with v-model
Event Handling with v-on
Conditional Rendering: v-if & v-else
List Rendering with v-for
Putting It All Together: A Mini Todo App
Summary & Next Steps

1. Setting Up Vue.js

The easiest way to start with Vue.js (no complex setup!) is via a CDN (Content Delivery Network). This lets you include Vue directly in an HTML file without installing anything locally.

Step 1: Create an HTML File

Open your code editor (VS Code, Sublime, etc.) and create a new file named index.html.

Step 2: Add the Vue CDN

Paste this script tag inside the <head> of your HTML file. This loads Vue.js from a CDN:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

That’s it! You’re ready to use Vue.

2. Your First Vue App

Let’s build a simple app that displays a message. Here’s the full code—we’ll break it down step by step:

<!DOCTYPE html>  
<html>  
<head>  
    <title>My First Vue App</title>  
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
</head>  
<body>  
    <!-- The Vue app will mount here -->  
    <div id="app">  
        <h1>{{ message }}</h1>  
    </div>  

    <script>  
        // Create a Vue app instance  
        const { createApp } = Vue;  

        createApp({  
            // Data: Reactive state for the app  
            data() {  
                return {  
                    message: "Hello, Vue!"  
                }  
            }  
        }).mount('#app'); // Mount the app to the DOM element with id "app"  
    </script>  
</body>  
</html>

How It Works:

div id="app": This is the “mount point” where Vue will take control of the DOM.
createApp(): Initializes a new Vue app.
data(): A function that returns an object containing reactive data properties (e.g., message). Vue automatically updates the DOM when these properties change (this is reactivity!).
{{ message }}: “Mustache” syntax to interpolate (display) the message data property in the DOM.

Test It:

Save the file and open it in a browser. You’ll see:

Hello, Vue!

3. Data & Interpolation

In Vue, data() holds the app’s state. You can display this data in the DOM using interpolation (the {{ }} syntax).

Example: Dynamic Greeting

Update the data() function to include a name property:

data() {  
    return {  
        message: "Hello,",  
        name: "Vue Beginner"  
    }  
}

Then update the HTML to combine them:

<div id="app">  
    <h1>{{ message }} {{ name }}!</h1> <!-- Output: Hello, Vue Beginner! -->  
</div>

Vue automatically updates the DOM if message or name changes (we’ll see how to trigger this later!).

4. Attribute Binding with `v-bind`

Interpolation works for text, but what if you want to dynamically set HTML attributes (e.g., src for an image, href for a link)? Use the v-bind directive.

Syntax:

<element v-bind:attribute="dataProperty"></element>

Shorthand (most common):

<element :attribute="dataProperty"></element>

Example: Dynamic Image

Add an image to your app. First, add an imageUrl to data():

data() {  
    return {  
        // ... previous data  
        imageUrl: "https://vuejs.org/images/logo.png"  
    }  
}

Then bind the src attribute:

<div id="app">  
    <!-- ... previous content -->  
    <img :src="imageUrl" alt="Vue Logo" width="200">  
</div>

Now the image’s src is dynamically set to imageUrl. If imageUrl changes, the image updates automatically!

5. Two-Way Binding with `v-model`

So far, we’ve seen one-way binding (data → DOM). v-model enables two-way binding: changes to the DOM (e.g., user input) update the data, and vice versa.

Use Case: Form Inputs

v-model is most useful with form elements like <input>, <textarea>, or <select>.

Example: User Input

Add an input field and bind it to a username data property:

<div id="app">  
    <p>Your name: {{ username }}</p>  
    <input v-model="username" placeholder="Enter your name">  
</div>

Update data() to include username:

data() {  
    return {  
        username: "" // Empty initial value  
    }  
}

Try it: Type in the input—you’ll see {{ username }} update in real time!

6. Event Handling with `v-on`

To make your app interactive, you need to handle user events (clicks, key presses, etc.). Use the v-on directive (shorthand: @).

Syntax:

<element v-on:event="methodName"></element>  
<!-- Shorthand -->  
<element @event="methodName"></element>

Example: Counter App

Let’s build a button that increments a counter.

Add a count property to data():

data() {  
    return {  
        count: 0  
    }  
}

Add a methods object to your Vue app (to define functions):

createApp({  
    data() {  
        return { count: 0 }  
    },  
    methods: {  
        increment() {  
            this.count++; // "this" refers to the Vue instance  
        }  
    }  
}).mount('#app');

Add a button with @click to trigger increment():

<div id="app">  
    <p>Count: {{ count }}</p>  
    <button @click="increment">Click me!</button>  
</div>

Try it: Click the button—the count will increase!

7. Conditional Rendering: `v-if` & `v-else`

Use v-if and v-else to show/hide elements based on a condition (e.g., a boolean data property).

Example: Toggle Message

Add a showMessage flag to data():

data() {  
    return {  
        showMessage: true,  
        message: "Hello, Vue!"  
    }  
}

Add a button to toggle showMessage and conditionally render the message:

<div id="app">  
    <button @click="showMessage = !showMessage">  
        Toggle Message  
    </button>  

    <p v-if="showMessage">{{ message }}</p>  
    <p v-else>No message to display.</p>  
</div>

How it works:

If showMessage is true, the first <p> renders.
If false, the v-else <p> renders instead.

8. List Rendering with `v-for`

To loop through an array and render a list, use v-for.

Syntax:

<element v-for="item in array" :key="item.id">{{ item }}</element>

The :key attribute is required for performance (use a unique value for each item).

Example: Todo List

Add a todos array to data():

data() {  
    return {  
        todos: ["Learn Vue basics", "Build a mini app", "Celebrate!"]  
    }  
}

Render the list with v-for:

<div id="app">  
    <h3>My Todo List</h3>  
    <ul>  
        <li v-for="(todo, index) in todos" :key="index">  
            {{ index + 1 }}. {{ todo }}  
        </li>  
    </ul>  
</div>

Output:

Learn Vue basics
Build a mini app
Celebrate!

9. Putting It All Together: A Mini Todo App

Let’s combine everything we’ve learned into a simple todo app with:

A text input to add new todos (v-model).
A button to submit todos (v-on:click).
A list of todos (v-for).
A “no todos” message (v-if).

Full Code:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Mini Todo App</title>  
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
</head>  
<body>  
    <div id="app">  
        <h2>Todo App</h2>  

        <!-- Input to add new todo -->  
        <input  
            v-model="newTodo"  
            placeholder="Add a new todo..."  
        >  
        <button @click="addTodo">Add</button>  

        <!-- List of todos -->  
        <ul v-if="todos.length > 0">  
            <li v-for="(todo, index) in todos" :key="index">  
                {{ index + 1 }}. {{ todo }}  
            </li>  
        </ul>  

        <!-- No todos message -->  
        <p v-else>No todos yet. Add your first todo!</p>  
    </div>  

    <script>  
        const { createApp } = Vue;  

        createApp({  
            data() {  
                return {  
                    todos: [], // Empty initial array  
                    newTodo: "" // Bound to input  
                }  
            },  
            methods: {  
                addTodo() {  
                    if (this.newTodo.trim()) { // Ignore empty input  
                        this.todos.push(this.newTodo); // Add to array  
                        this.newTodo = ""; // Clear input  
                    }  
                }  
            }  
        }).mount('#app');  
    </script>  
</body>  
</html>

How it works:

v-model="newTodo" binds the input to newTodo.
@click="addTodo" triggers the addTodo method, which pushes newTodo to the todos array (if not empty).
v-for loops through todos to render the list.
v-if="todos.length > 0" shows the list only if there are todos; otherwise, shows “No todos yet.”

10. Summary & Next Steps

In just 30 minutes, you’ve learned Vue’s core basics:

Vue Instance: How to initialize an app with createApp() and mount it to the DOM.
Reactive Data: Using data() to store state that automatically updates the DOM.
Interpolation: Displaying data with {{ }}.
Directives: v-bind (attribute binding), v-model (two-way binding), v-on (event handling), v-if (conditionals), and v-for (lists).

Next Steps to Explore:

Vue CLI: For larger projects, use the Vue Command Line Interface to scaffold apps with build tools (Webpack, Babel).
Components: Break your app into reusable components (Vue’s most powerful feature!).
State Management: Learn Vuex/Pinia for managing complex app state.
Routing: Use Vue Router to build multi-page SPAs.

References

Happy coding—you’re now on your way to mastering Vue.js! 🚀

Table of Contents

1. Setting Up Vue.js

Step 1: Create an HTML File

Step 2: Add the Vue CDN

2. Your First Vue App

How It Works:

Test It:

3. Data & Interpolation

Example: Dynamic Greeting

4. Attribute Binding with v-bind

Syntax:

Example: Dynamic Image

5. Two-Way Binding with v-model

Use Case: Form Inputs

Example: User Input

6. Event Handling with v-on

Syntax:

Example: Counter App

7. Conditional Rendering: v-if & v-else

Example: Toggle Message

8. List Rendering with v-for

Syntax:

Example: Todo List

9. Putting It All Together: A Mini Todo App

Full Code:

10. Summary & Next Steps

Next Steps to Explore:

References

4. Attribute Binding with `v-bind`

5. Two-Way Binding with `v-model`

6. Event Handling with `v-on`

7. Conditional Rendering: `v-if` & `v-else`

8. List Rendering with `v-for`