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.