The Vue Crash Course I've always wanted is here! Part 1: The Vue Practitioner

The Vue Crash Course I've always wanted is here! Part 1: The Vue Practitioner

Written by Mattia Toselli on Nov 15th, 2022 Views Report Post

In this article we will cover the basics of Vue and then we will focus on getting more proficient using that Javascript framework, from the ground up, the way I would like it has been teached to me when i studied it.

The absolute basics of Vue

I'm not going to lose time over a pointless introduction. We all know what Vue is, and in case you don't know it, just read the documentation or be aware that Google is your friend ;)

Importing Vue in your HTML code

We'll start from the very basics, this is an html boilerplate for a simple Vue application:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My New Vue Application</title>
    </head>
    <script src="https://unpkg.com/[email protected]"></script>
    <body>
        
    </body>
</html>

this is the most common way to import Vue, just by using a CDN. Nothing to be concerned about. Let's add some Vue functionality.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My New Vue Application</title>
    </head>
    <script src="https://unpkg.com/[email protected]"></script>
    <body>
        
        <!--this div will be out of the vue app, see how the moustache variable won't be replaced by the message-->

        <div>
            {{ message }}
        </div>

        <!--This div will be controlled by Vue-->
        <div id="app">
            {{ message }}
        </div>

        <script>
            Vue.createApp({
                data () { //the data function in Vue must return an object
                    return {
                        message: "Hello there!" //all vue variables will replace all the double moustache elements
                    }
                }
            }).mount('#app') //mount Vue to the element with id="app"
        </script>
    </body>
</html>

We can think to the data object as a single source of truth, all the manipulation of the DOM should happen there.

Listening for changes

Using the v-model attribute, we can listen fo changes in a certain variable, this is particularly useful when we want to change something in the DOM according to some variable changes immediately, like in this case:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My New Vue Application</title>
    </head>
    <script src="https://unpkg.com/[email protected]"></script>
    <body>
        <div id="app">
            <!-- If you change the message in the input, also the message below will reflect the changes-->
            <input type="text" v-model="message">
            <br>
            {{ message }}
        </div>

        <script>
            Vue.createApp({
                data () {
                    return {
                        message: "Hello there!"
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>

Hope you enjoyed that small introduction, there's so much to cover, and I hope you'll be on board with me for the next articles. I'll come ASAP with the next parts ;)

Comments (1)