Do you want to get started with frontend framework VueJs? If the answer is yes, then this post might be beneficial for you.

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. (Source: Vuejs.org) Unlike normal javscript variables, the variables defined in data in VueJs is reactive, which means the change will reflect immediately in the screen.  Here's an example to print "Hello World" and some more simple functions in a simple HTML file

Add this section inside head tag of your html file

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
<script>
    window.onload = function(){
        new Vue({
            el: 'body',
            data: {
                hasStyle: true,
                message: ''
            },
            created() {
                this.message = 'Hello world';
            },
            methods: {
                changeText() {
                    this.message = 'This text has been changed'
                }
            }
        });
    }
</script>
<style>
    .my-style {
        margin-top: 25px;
    }

    .my-style button {
        margin-right: 10px;
    }
</style>

This basically adds the script and style for the the html. All your javascript logic in VueJs can then sit in the object that is passed to VueJs method on window load.

Add this inside the body tag. This is basically the template which renders the vue data variables and shows it to the user

<div> {{ message }} </div>
<hr>
<h3>Test reactive property</h3>
<div >
    <input type="text" v-model="message">
</div>
<hr>
<div v-class="my-style: hasStyle">
    <button v-on="click: changeText">Change Text</button>
    <a href="https://www.lamadly.com" target="_blank">Click out</a>
</div>

Checkout the code here inside javascript/vuejs.html file