VueJS - Introduction

VueJS - Introduction

Welcome to VueJS! Vue is a progressive JavaScript framework designed for building interactive user interfaces. Its core library focuses on the ‘view’ layer (the part users see and interact with) and is known for being approachable, versatile, and performant.

This tutorial uses Vue 3, the latest major version, which introduces powerful features like the Composition API alongside the familiar Options API.

Since Vue is primarily used for frontend development, we’ll be working with HTML, CSS, and JavaScript. Let’s start with a fundamental example to see Vue in action.

Your First Vue 3 App

This example uses Vue directly via a CDN link, which is great for quick prototypes or learning. For larger projects, using a build tool setup (like Vite via npm create vue@latest) is recommended.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 3 Introduction</title>
    <!-- Import Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        #app {
            font-family: sans-serif;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
        button {
            margin-top: 10px;
            padding: 8px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- This div is the container for our Vue app -->
    <div id="app">
        <!-- Double curly braces {{ }} are used for text interpolation -->
        <h1>{{ message }}</h1>
        <p>The counter is: {{ counter }}</p>
        <button @click="increment">Increment Counter</button>
    </div>

    <script>
        // Import necessary functions from the global Vue object
        const { createApp, ref } = Vue;

        // Create a new Vue application instance
        const app = createApp({
            // The setup() function is part of the Composition API
            // It's where we define reactive state and functions
            setup() {
                // 'ref' makes a value reactive.
                // When its .value changes, Vue updates the DOM.
                const message = ref('My First Vue 3 App!');
                const counter = ref(0);

                // Define a function to modify the reactive state
                function increment() {
                    counter.value++;
                    message.value = `Counter updated! (${counter.value})`;
                }

                // Expose the state and functions to the template
                return {
                    message,
                    counter,
                    increment
                };
            }
        });

        // Mount the application instance to the DOM element with id="app"
        app.mount('#app');
    </script>
</body>
</html>

Explanation

1. HTML Structure: We have a basic HTML page with a <div> element having the ID app. This div will be controlled by our Vue application.
2. Vue Import: We include Vue 3 from a CDN using <script src="https://unpkg.com/vue@3"></script>. This makes a global Vue object available.
3. Creating the App: We use Vue.createApp({...}) to create an application instance. This takes an options object defining the root component.
4. Composition API (setup()): We use the setup() function, a core part of Vue 3’s Composition API. This function is executed before the component is created. It’s where we define reactive data and logic.
5. Reactivity (ref): We use Vue.ref() to create reactive variables (message and counter). ref wraps the primitive value (string, number) in an object. To access or modify the value, you use .value (e.g., counter.value++). Vue automatically tracks dependencies on these refs and updates the DOM when their .value changes.
6. Methods: We define a regular JavaScript function increment inside setup. This function modifies the reactive counter and message refs.
7. Exposing to Template: The setup function returns an object. Properties on this object (message, counter, increment) become available directly in the template (<div id="app">...</div>).
8. Template Syntax:
9. • {{ message }} and {{ counter }}: This is text interpolation (also called ‘mustache syntax’). Vue replaces these placeholders with the current value of the corresponding reactive variables.
10. • @click="increment": This is shorthand for v-on:click="increment". It’s an event listener that calls the increment method when the button is clicked.
11. Mounting the App: Finally, app.mount('#app') tells Vue to take control of the DOM element with the ID app and render our component’s template inside it.

Interactivity

Open this HTML file in your browser. You’ll see the initial message and counter value. Click the ‘Increment Counter’ button. Notice how both the message and the counter value in the browser update instantly without a page reload. This is Vue’s reactivity system in action!

You can also open your browser’s developer console and interact with the application instance (though accessing refs directly requires a bit more setup in this simple CDN example). For instance, if you had access to the returned values from setup, typing counter.value = 10 in the console would update the displayed counter on the page.

This basic example demonstrates the core concepts: creating a Vue app, defining reactive state, binding state to the template, and handling user events to modify that state. The next chapters will delve deeper into Vue’s features like components, directives, lifecycle hooks, and more advanced state management.