Vue JS 2 Tutorial for beginner

Vue Js is a JavaScript framework for building an awesome user interface web application. unlike monolithic frameworks. The library is focused on the view layer only so it's a lightweight framework so it's easy to pick up and integrate with other new or existing web project. 

Vue JS is also in demand like Angular and React JS nowadays. This Vue js course is perfect for beginners.

<html>
   <head>
      <title>VueJs Introduction</title>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
   </head>
   <body>
      <div id = "app" >
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first First App in Vue'
            }
         });
      </script>
   </body>
</html>

There is a div which is added in the body that prints “My first First App in Vue” in the browser.

  <div id = "intro" >
    <h1>{{ message }}</h1>
  </div>

In Vue instance code in the script

var vue_det = new Vue({
   el: '#app',
   data: {
      message: 'My first App in Vue'
   }
})

 

In the above code snippet, we use Vue instance on the home page, which takes the id of the DOM element i.e. e1:’#app’, it is the id of the div. There is data with the message which is assigned the value ‘My first App in Vue ’. Vue interacts changes the value in the DOM {{message}} with ’My first App in Vue’.

This is just a basic example showing to start we will learn about data binding, directives, components, conditional loops, etc.