A Vue.js application starts with a Vue instance. The instances object is the main object for our Vue App. It helps us to use Vue components in our application. A Vue instance uses the MVVM(Model-View-View-Model) pattern. The Vue constructor accepts a single JavaScript object called an options object. When you instantiate a Vue instance, you need to pass an options object which can contain options for data, methods, elements, templates, etc.
Syntax:Â
var app = new Vue({
// options
});
Approach: First, we need to create an object to use Vue and assigning it to the variable app. In Vue, there is a parameter called el which takes the id of the DOM element. So we will create a div element with id as home. Vue elements will work within this id(#home) only. We can assign values of parameters inside this data object.
In the following examples, we use Vue.js to show the working of instances.
Example 1:
HTML
<!DOCTYPE html> <html>   <head>     </script> </head>   <body>     <div style="text-align: center;" id="home">           <!-- Rendering data to DOM -->        <h1 style="color: seagreen;">{{title}}</h1>         <h2>Title : {{name}}</h2>         <h2>Topic : {{topic}}</h2>     </div>         <script type="text/javascript">         // Creating Vue Instance         var app = new Vue({             // Assigning id of DOM in parameter             el: '#home',             // Assigning values of parameters             data: {                 title: "Geeks for Geeks",                 name: "Vue.js",                 topic: "Instances"             }         });     </script> </body>   </html> |
Output:
Vue App
Example 2:
HTML
<!DOCTYPE html> <html>   <head>     </script> </head>   <body>     <div style="text-align: center;" id="home">           <!-- Rendering data to DOM -->        <h1 style="color: seagreen;">             {{title}}         </h1>         <h1>Enter first name :             <input type="text" id="firstname">         </h1>         <h1>Enter last name :             <input type="text" id="lastname">         </h1>         <button @click="fullname()">Click</button>         <h2 id="full_name"></h2>     </div> </body>   <script type="text/javascript">     // Creating Vue Instance     var app = new Vue({         // Setting id of DOM in parameter         el: '#home',         // Passing datas         data: {             title: "Geeks for neveropen",         },         methods: {             fullname: function () {                 // Getting values from inputs                 var first_name = document                     .getElementById("firstname").value                   var last_name = document                     .getElementById("lastname").value                   // Setting text in element                 document.getElementById("full_name")                     .innerHTML = "Hi, " + first_name                     + " " + last_name             }         }     }); </script>   </html> |
Output:
