VueJS Library For Developing JavaScript Component -Tutorial Savvy

Vue.js library is a framework for developing Web interfaces.
Vue.js library is developed on Model and View relation and binded by 2 way data binding.
In this Demo,”We will learn to install Vue.js library and develop a custom component”.
Vue.js library can be installed using npm install vue –save command.The following screenshot shows the terminal with VueJS installation.

To demonstrate Vue.js library we have created VueJSDemo project.The following screenshot shows the VueJSDemo directory structure:-

The custom component is welcome which has a property name message.On rendering it displays a greeting message.In Vue.js library a custom component can be created using Vue.component() method.A template for this component can be defined using SCRIPT tag with type text/x-template and with some ID value.The DOM can be then initialized using new keyword and Vue() constructor.The index.html contains the code for defining and implementing welcome component.The code content of index.html is as follows:-

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue.js library Demo</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demo">
        <welcome message="Sandeep">
        </welcome>
    </div>
</body>
    <script type="text/x-template" id="welcomeTemplate">
    <h1>Welcome {{message}}</h1>
</script>
    <script>
    Vue.component('welcome', {
        template: '#welcomeTemplate',
        replace: true,
        props: ['message']
    });
    var demo = new Vue({
        el: '#demo',
        data: {
            searchQuery: '',
            gridColumns: ['name', 'power'],
            gridData: [
                { name: 'Chuck Norris', power: Infinity },
                { name: 'Bruce Lee', power: 9000 },
                { name: 'Jackie Chan', power: 7000 },
                { name: 'Jet Li', power: 8000 }
            ]
        }
    })
</script>
</html>