This tutorial is done by following Vue.js Course for Beginners [2021 Tutorial] by Gwendolyn Faraday.

let app = Vue.createApp()({
    data:function(){
        return{
            greeting: "Hello world"
        }
    }
})

app.mount("#app")

Vue is the variable that can be used after importing Vue.js package. createApp() is the method of it. It basically lets you create your vue application and you can pass it an options object such as data. Any variable or functions will live in this area.

data is a function that returns an object. In the object we return, we have greeting as our variable and it is holding a string "Hello world".

Storing it into variable app allows you to call the code and use another method on it. In this instance, .mount() was used to mount it into HTML. It would look for the id "app" in HTML.

Directives are a way for your HTML elements to connect to Vue.js scripts.

<input v-model="greeting"/>

Directives in Vue.js looks like a HTML attribute. But they start with v-. In the above instance, v-model is being used. What this would do is bind the variable that was passed as an argument into v-model to be used in HTML. The input would start with what was in the greeting variable and as you type, the greeting text changes as well. This is known as two-way data binding and is handled by Vue.js via the v-model directive.

<div class="box" v-if="isVisible"></div>

let app = Vue.createApp()({
    data:function(){
        return{
            greeting: "Hello world",
            isVisible: true
        }
    }
})

app.mount("#app")

v-if works like how a normal if-else statement would work. It takes in a boolean data type. If the boolean is set to false, then that whole element would not be rendered. There is an alternative directive that we can use if we wish to reduce script latency.

<div class="box" v-show="isVisible"></div>

v-show is almost similar to v-if. Takes in a boolean data type. However, instead of not rendering when set to false, it would actually change style display to display:none;.

Most of the time you would use v-if. For things like loading spinner/icon, where it would only show up for that particular purpose and disappear. v-show however, would be for things where you would toggle often. Hiding the element would be more performant than having to create and delete the DOM often.

<div class="box" v-if="isVisible"></div>
<div class="box-2" v-else-if="isVisible2"></div>
<div class="box-3" v-else></div>

For a v-if directive, as mentioned, it works like any if-else statement. The v-else-if would also take in an argument while the v-else would not need to.

<div id="app" v-cloak>
    {{ greeting}}
</div>

[v-cloak]{
    display:none;
}

v-cloak is another useful directive. Most of the time you may not need to use it. What this does is to "hide" your element with a CSS script until Vue.js has rendered the particular variable. By defualt, it would have already done that. But in the case where you see your variables appear with the curly brackets {{ }} as it renders, you may want to use v-cloak.