Introduction to VueJS

VueJs is a Javascript front-end framework. In the MVC architecture, it focuses only on the view layer. It is also very easy to understand.

Introduction

  • Vue was created by Evan.
  • Vue is called a progressive framework means it is easily adoptable according to the developers need.
  • Vue can be easily be placed inside the script tag.
  • Download VueJS from this site https://vuejs.org/v2/guide/installation.html, as per ur need.
  • There are two versions:- production version and development version.
  • Development version will help with the warnings and debug mode while production version is minimized.

First Vue App

Here, we will go through the basic example of using Vue.

Example :-

<html>
   <head>
      <title>The Introduction to VueJS</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "basic" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue1 = new Vue({
            el: '#basic',
            data: {
               message: 'This is the introduction to VueJS'
            }
         });
      </script>
   </body>
</html>

Output :-

VueJS Introduction
  • At the start of this app html file, we have included script tag and included source as vue,.js. Which will consider this as as VueJS script.
    <script type = "text/javascript" src = "js/vue.js"></script>
  • To print the message in browser we need to include div tag.

<div id = “basic” style = “text-align:center;”>

         <h1>{{ message }}</h1>

  • The {{ message }} will interact with VueJS and print the message in the browser. To fetch the value of the message in DOM, we have created an instance as below:
var vue1 = new Vue({
	el: '#basic',
	data: {
	   message: 'This is the introduction to VueJS'
	}
});
  • Here, we are calling Vue instance, which is taking the id of <div> i.e. DOM element e1:’#basic’. The data with the message is assigned the value ‘This is the introduction to VueJS’.
  • We can change the value assigned to the message through console. For this we need to open console in the browser. Right click in the browser click on inspect and the console window will get opened.

Example :-

Vue introduction Console
  • In this console, the vue1 object is printed, which is the instance of vue.
  • Here, we have updated the message value with “All About VueJS”, which is updated in the browser.