Updated April 19, 2023
Introduction to Vue.js Methods
Vue.js methods are defined as a function to perform certain actions whenever the user is needed and the method is associated with a Vue instance as the method is similar to function like in other programming languages. In Vue.js methods are defined using the “method” name property before declaring or using it as a method in the Vue.js app code, in simple words we can say methods are function associated with an instance which are defined inside the method property, methods are usually defined similarly to as declaring “def” in the python for defining methods or functions and in Vue.js we use “method” property.
Working of Methods in Vue.js with Examples
Here, we will discuss the method declaration in Vue.js. In this, methods are defined or declared inside the method property which means we have to write “method” before writing the method body. In Vue.js methods are useful for connecting functionality to directives for handling the events. This can also be said to define any piece or small code of logic we need to use methods and this logic can be used for any other function or in the rest of the program. So we can also call a method inside a lifecycle hook also which is also another way of using methods in Vue.js.
Let us demonstrate how to declare methods in Vue.js with the below syntax and example.
Syntax:
new Vue({
e1: '#app'
…….
methods: {
piece of code or logic
}
)}In the above, we can see the syntax for declaring methods in the Vue.js code snippets. In this, we can see we have declared method property to define or declare methods that will have a piece of code or logic within the method property which we want it to call in another method or rest.
Example #1
So let us consider a simple example for demonstrating the use and declaration of methods in Vue.js.
Html File:
<html>
<head>
<title> Vue js </title>
<script src="//unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
<button v-on:click="func">click me </button>
</div>
</body>
<script src="app.js"></script>
</html>Vue js App Code:
new Vue({
el: '#app',
data: {
message: 'information'
},
methods: {
func() {
this.message = 'Educba Training Institute';
}
}
});Output:
In the above program we can see in the HTML file first we have taken the message to be printed after clicking the button and then calling the method declared to display the message. In the first screenshot we saw that it will display the message and asks to click on the button “click me” and then when we click on that button it will go to the next page where it displays the information which was given when we defined the method and the method is called so when the method is called it will display “Educba Training Institute” after clicking on the “click me” button in the message page and this is shown in the second screenshot. This is the easiest and useful way to call and use methods in Vue.js apps.
Now we know whenever we need some actions or events to be performed then these methods are the easiest and useful ways to use in such cases. To do this a venue provides a directive called v-on which can be used to handle the events.
So in the above example, we saw the event handling by using methods in Vue js codes. In the above example, we saw how the method was called after clicking on the click me button for getting the message which is defined within the method property in the Vue.js code snippet. So we saw we are using v-on directive used for the button defined in the HTML file. In the above example using v-on directive which will help to make a button trigger whenever the method is called. Therefore whenever we want any event handling actions to be performed we can use methods in Vue.js which is as easy as using functions in other programming languages and we also pass parameters to the method call is also similar to other programming languages.
In Vue.js accessing the date or message from the method is also simple as we saw in the above program where data to be accessed it written as the value of “message” which is information and this is accessed inside the method using “this. message” whereas we don’t need to use “this.data. message” which would rather throw an error and hence Vue.js provides transparent binding with the use of method property. And in the above program, we also saw they are closely interlinked to the events and hence in Vue.js the methods are mostly used as event handlers.
In Vue.js methods are also used to handle inline js statements because where instead of binding to the method name we can use inline statements using methods.
Example #2
So let us see a sample code for demonstrating the inline statement method handler.
Html file:
<html>
<head>
<title> Vue js methods </title>
</head>
<body>
<div id="methodapp">
<button v-on:click="disp(Click to check further)"> Extra course info</button>
<button v-on:click="disp(Click for Python course)">Python fundamental concepts</button>
</div>
</body>
</html>Vue js Code:
new Vue({
el: '#methodapp',
methods: {
disp: function (info) {
alert(info)
}
}
})Output:
After running this above program we will get a dialog box where it will give two tabs to click first “disp (Click to check further)” and second “disp (Click for Python course)” and when either of this is clicked the message stored for these buttons when the methods are called then the messages are displayed accordingly.
Conclusion
In this article, we conclude that the concept of the method in Vue.js is similar to that of functions concepts in other programming languages. In this article, we saw how to declare methods using “method” property before writing the function logic code and we also saw how we have used methods as an event handler using v-on directive along with which we also saw how it used for binding inline javascript statements instead of directly binding with the method names.
Recommended Articles
This is a guide to Vue.js Methods. Here we discuss the introduction and working of methods in Vue.js with examples respectively. You may also have a look at the following articles to learn more –
