The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Understanding the Vue Instance

Next ►
►

In this section, we will delve into the core of any Vue.js application: the Vue instance. Understanding the Vue instance is crucial as it forms the foundation upon which Vue applications are built. We will cover the following key concepts:

  1. What is the Vue Instance?
  2. Creating a Vue Instance
  3. Vue Instance Properties and Methods
  4. Lifecycle Hooks

  1. What is the Vue Instance?

The Vue instance is the root of every Vue application. It is an object created using the Vue constructor and serves as the main entry point for Vue's reactivity system. The Vue instance manages the data, methods, and lifecycle of the application.

  1. Creating a Vue Instance

To create a Vue instance, you use the new Vue() constructor. Here is a basic example:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Instance Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    // Creating a new Vue instance
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    });
  </script>
</body>
</html>

Explanation:

  • el: This property specifies the DOM element that the Vue instance will be mounted on. In this case, it is the div with the id app.
  • data: This property contains the data for the Vue instance. Here, we have a single data property called message.

  1. Vue Instance Properties and Methods

The Vue instance comes with several built-in properties and methods that you can use to interact with your application.

Common Properties:

  • el: The DOM element that the Vue instance is mounted on.
  • data: The data object for the Vue instance.
  • methods: An object containing methods that can be used in the Vue instance.

Common Methods:

  • $mount: Manually mount the Vue instance to a DOM element.
  • $destroy: Destroy the Vue instance and clean up its resources.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Instance Methods</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
    <button @click="updateMessage">Update Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      methods: {
        updateMessage: function() {
          this.message = 'Message Updated!';
        }
      }
    });
  </script>
</body>
</html>

Explanation:

  • methods: We define a method called updateMessage that updates the message data property when the button is clicked.

  1. Lifecycle Hooks

Vue instances have a series of lifecycle hooks that allow you to run code at specific stages of an instance's lifecycle. These hooks provide greater control over the behavior of your application.

Common Lifecycle Hooks:

  • created: Called after the instance is created.
  • mounted: Called after the instance is mounted to the DOM.
  • updated: Called after the instance's data changes and the DOM is re-rendered.
  • destroyed: Called after the instance is destroyed.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Lifecycle Hooks</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      created: function() {
        console.log('Instance created');
      },
      mounted: function() {
        console.log('Instance mounted');
      },
      updated: function() {
        console.log('Instance updated');
      },
      destroyed: function() {
        console.log('Instance destroyed');
      }
    });

    // Manually destroy the instance after 5 seconds
    setTimeout(function() {
      app.$destroy();
    }, 5000);
  </script>
</body>
</html>

Explanation:

  • created: Logs a message when the instance is created.
  • mounted: Logs a message when the instance is mounted to the DOM.
  • updated: Logs a message when the instance's data changes and the DOM is re-rendered.
  • destroyed: Logs a message when the instance is destroyed.

Practical Exercise

Exercise:

  1. Create a Vue instance that displays a message.
  2. Add a button that changes the message when clicked.
  3. Use lifecycle hooks to log messages to the console at different stages of the instance's lifecycle.

Solution:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Instance Exercise</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
    <button @click="changeMessage">Change Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      methods: {
        changeMessage: function() {
          this.message = 'Message Changed!';
        }
      },
      created: function() {
        console.log('Instance created');
      },
      mounted: function() {
        console.log('Instance mounted');
      },
      updated: function() {
        console.log('Instance updated');
      },
      destroyed: function() {
        console.log('Instance destroyed');
      }
    });
  </script>
</body>
</html>

Explanation:

  • changeMessage: A method that changes the message data property when the button is clicked.
  • Lifecycle Hooks: Logs messages to the console at different stages of the instance's lifecycle.

Conclusion

In this section, we covered the basics of the Vue instance, including how to create one, its properties and methods, and its lifecycle hooks. Understanding these concepts is essential for building and managing Vue applications effectively. In the next module, we will explore Vue.js basics, starting with template syntax.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved