Vue.js Instance

A Vue.js instance is a Vue object that is created by instantiating the Vue class. It is the root of every Vue application and is responsible for managing the entire application. In this guide, we will learn how to create a Vue.js instance and use it to display data on a web page.

Creating a Vue.js Instance

To create a Vue.js instance, we need to include the Vue library in our HTML file. We can do this by adding the following script tag to the head of our HTML file:

<script src="<https://cdn.jsdelivr.net/npm/vue>"></script>

When we have included the Vue.js library, we can create a new Vue instance by instantiating the Vue class:

const app = new Vue({
  // options object
})

The options object is where we define the properties and methods of our Vue instance. These properties and methods are what make up our Vue application.

Displaying Data

One of the essential features of a Vue.js instance is its ability to display data on the web page. We can display data in our Vue.js instance by defining a data property in the options object. The data property is an object that contains all the data we want to use in our application.

const app = new Vue({
  data: {
    message: 'Hello, world!'
  }
})

To display the data in our HTML file, we can use a template string with the {{ }} syntax:

<div id="app">
  <p>{{ message }}</p>
</div>

Here, we are using the message data property inside the {{ }} syntax to display the data in our HTML file. Vue.js will automatically update the data in the HTML file when the data changes.

Methods

Another essential feature of a Vue.js instance is the ability to define methods. Methods are functions that can be called from our HTML file. We can define methods in our Vue.js instance by adding a methods property to the options object.

const app = new Vue({
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

To call a method in our HTML file, we can use the v-on directive:

<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="increment">Increment</button>
</div>

Here, we are using the v-on:click directive to call the increment method when the button is clicked. Vue.js will automatically update the data in the HTML file when we call a method.

Computed Properties

Computed properties are properties that are calculated based on other properties in our Vue.js instance. We can define computed properties by adding a computed property to the options object.

const app = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

To display a computed property in our HTML file, we can use the same {{ }} syntax as for data properties:

<div id="app">
  <p>{{ fullName }}</p>
</div>

Here, we are using the fullName computed property to display the full name of the person. When the firstName or lastName data property changes, the fullName computed property will automatically update.

Conclusion

In this guide, we learned how to create a Vue.js instance and use it to display data on a web page. We covered data properties, methods, and computed properties. With this knowledge, you can start building your own Vue.js applications. Vue.js is a powerful tool for building dynamic web applications, and we have only scratched the surface of what it can do. By continuing to learn and experiment with Vue.js, you can take your web development skills to the next level.