Vue.js Instance

Every Vue application begins with creating a Vue instance. This instance serves as the application's foundation, connecting your HTML structure to JavaScript-written data and logic. When Vue is initialized, it activates its reactivity system, which automatically updates the user interface with changes to the data.

What is a Vue Instance?

A Vue instance is created using the Vue constructor function. It acts as the bridge between the DOM and your data, allowing Vue to manage the contents of a specified HTML element. Once set up, any change in the instance's data automatically updates the DOM, keeping your UI in sync without manual intervention.

How to Create a Vue Instance

To create a Vue instance, use the new Vue() syntax and provide an options object. This object may include properties like el, data, and methods.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Instance Example</title>
</head>
<body>
  <div id="app">
    <p>{{ greeting }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>

  <!-- Vue.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  <script>
    new Vue({
      el: '#app', // DOM element Vue controls
      data: {
        greeting: 'Hello, Vue!'
      },
      methods: {
        changeMessage: function () {
          this.greeting = 'Message updated!'
        }
      }
    });
  </script>
</body>
</html>

In this setup, el specifies the target element, data holds the reactive state, and methods defines functions that update the state when triggered. Vue observes the data and automatically re-renders the view when changes occur.

Key Properties in the Vue Instance

The Vue instance accepts several configuration options that define its behavior. The table below lists the most commonly used ones:

Property Description
el Specifies the DOM element that Vue controls. Requires a CSS selector like #app.
data Defines the reactive state of the application. Vue updates the DOM whenever this data changes.
methods Contains functions used to handle events or manipulate the application data.
computed Defines values derived from existing data. These values update automatically when their dependencies change.
watch Enables you to respond to changes in specific data properties using custom logic.

Each property enhances how the Vue instance interacts with your page and manages reactivity.

Lifecycle of a Vue Instance

Each Vue instance goes through a series of lifecycle hooks, such as:

  • created – Called after the instance is initialized.
  • mounted – Runs after the instance is attached to the DOM.
  • updated – Triggered when reactive data changes.
  • destroyed – Called before the instance is removed.

These lifecycle hooks let you run code at key moments during the application's existence.

Conclusion

The Vue.js instance is the core of every Vue application. It connects your data, methods, and DOM elements through Vue's reactivity system. Understanding how to create and configure a Vue instance is the first step toward building dynamic, responsive interfaces. In the next tutorial, you'll explore data binding to see how Vue keeps your data and UI in constant sync.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram