Introduction to Vue.js - A simple Illustration

Vue.js is described as the progressive javascript framework and has come a long way to be a contender among other popular frameworks like React and Angular. Vue.js is made to be simple and has a non-steep learning curve for a beginner in the Vue World. Let's start the Vue business. Installation Vue can be installed in a couple of ways depending on the way you want to use it. It can be downloaded or used through a CDN or installing it with npm. CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

the above code should be included in the head tag of your html code for development and for production use this

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

NPM install it with npm using

npm install vue

You might need to install Vue CLI in addition using

npm install vue@cli -g

The simplest Vue code might be:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
    </div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello Guy"
        }
    });
</script>
</body>
</html>

WHAT IS ALL THIS?

The code above might look scary at first, now let's understand it. copy or type the code directly into your IDE and save it, then open it in a browser probably Chrome or Firefox.

behold !, you see a large heading displaying "Hello Guy".

 <div id="app">
        <h1>{{title}}</h1>
</div>

The code is a normal HTML code except for the text in interpolation "{{title}}". We gave the div tag and id of "app' and inside it is an h1 tag containing "{{title}}". any text in the "{{}}" will be bind to it's corresponding name in the data object in the Vue instance.

<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello Guy"
        }
    });
</script>

The code in the script tag is used to create an instance of the Vue class and inside it is an object having el: "#app" the above line is needed to link Vue and the DOM . if you use a class in your html i.e <div class="app"></div> use el: ".app" instead. The data object contains your variables or states that will be used in your app and can be accessed in the html using the curly braces e.g {{variable}}

Yay, You got that right?, In my next Post we'll be creating a simple Counter app in Vue.

No Comments Yet