Getting started with Vue JS, Hello World Example

This is an introductory post to Vue JS. Here I will cover getting started with Vue JS, it's installation and also a Hello World Example in Vue JS.

VueJS is a progressive JS framework for modern web application development and the easiest for you to install / include the framework in your application is by including the CDN script in your HTML


<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Once you have included the vueJS library in your code, you are now ready to start writing the Vue Code.

Here is an example of Hello World


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="root">        
        {{message}}
    </div>

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        let app = new Vue({
            el: '#root',

            data: {
                message: "Hello World",
            }

        });
    </script>
    
</body>
</html>

We define the new instance of Vue by using new Vue keyword. In this we can pass the options object.
el denotes the target element in our DOM, This means that we can use vue features within #root element.

The output of vue data can be displayed using moustache syntax {{message}} , The is called declarative rendering.

This means the data is reactive.

Open your console and type app.message = 'Namaste';

As you can see Hello World message on your screen will now be changed to Namaste.

Code:

https://github.com/tushargugnani/vue-examples/blob/master/hello-world.html

Working Demo:

https://tushargugnani.github.io/vue-examples/hello-world.html

Comments