Introduction About VueJs Instance

To better understand easily, Vue Instance is a heart(root) of the Vue application. That means, must need to assign a Vue function when you are creating a Vue Instance.

Rathik
Rathik   Follow
var vm = new Vue({
//options object
})

You can see on the above code, i took a variable vm & created an instance by declaring vue Functions to keep into VM variable.

# How can it integrate/Use VueJs into HTML CSS code ?

Well, you can do it two ways easily. The first one is CDN & the second one is Vue-CLI. Since we just started learning VueJS. So we will learn about vuejs CDN first. Later, we will go deep into VueJs with Vue-CLI according to our Vue-JS Syllabus.

Please add this CDN link in your HTML code into the head, like CSS & JS link.

Example Code 1:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World in Vue.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>  
<body>
    <div id="app">
     <p>This is HMTL Paragraph</p>
    </div>
  </body>
</html>

Following at Example Code 1 we just added a CDN link. if you run this code, you will see this text "This is HMTL Paragraph.

Let's change that paragraph from Vue Instance,

<script>
      new Vue({
        el: "#hello-world-app",
        data() {
          return {
            msg: "Hello World!"
          }
        }
      });
    </script>

Add this Code into our previous Example Code 1

Example Code 2

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World in Vue.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head> 
<body>

<div id="app">
 <p>  </p>
</div>

 <script>
  var app = new Vue({
  el: "#app",
  data: {
    message: "Hello World!!!"
  }
});
 </script>

 </body>
</html>

Now you can reload the browser and you can see It's working & output

This Text From VueApp What we have done here.

  1. Created an instance
  2. by defines el: '#app' , we catch our div id.
  3. we Define that data object for showing the message from Vue instance.
  4. Double braces is using as place-holders for data at VueJS.

To following Clean code, I suggest using another .js file for VueJs code(like as .css file you use for avoiding inline CSS). Here you go for the codepen - Hello-world-in-Vue_js