Updated April 3, 2023
Introduction to Vue.js class
Like other programming languages, we can define our logic inside the class; this is the business logic. We can make this class act as a component by using the @component annotation. So by this, we can bind our data to make API calls as well. To define a normal class in Vue.js, we have the ‘export’ keyword followed by the class name, just like we do in Agular while creating the class.
Syntax
Below is the syntax to define a class in Vue.js by using the ‘export’ keyword; also, we need to extend the Vue class while making any custom class in Vue.js. Below we can see the syntax of class and component class in Vue.js :
1. To define a class
syntax:
import Vue from 'vue'
export scop_of_class class Name extends Vue {}In the above lines of code, we are using the Vue class from the vue library; to this, we need to import the ‘Vue’ like above we have done. In the next line, we are using the ‘export’ keyword followed by the scope of the class mentioned as default. After that, we are defining the name of the class, which is, in turn, extending the Vue class from the library. We will see one practice example for better understanding;
Export class Demo extends Vue {}2. To make use of component class
syntax:
import Component from 'vue-class-component'
import Vue from 'vue'
@Component
export scope class name extends Vue {}Here we are using @component to make our class act as a component. More about this, we will discuss this in the coming section.
How does classwork in Vue.js?
As of now, we know that we use the ‘export’ and ‘class’ keywords to define any class in Vue.js, and this class contains all the logic that is going to perform to get the user data from the server. Our whole application behavior would depend upon this class structure, or we can say the business logic we write here can be anything type of logic. Now our classes in Vue.js also contain the member function, class variable, constructor, etc. We can also import the custom class into our application anywhere.
1. Constructor
We can define a constructor in the same way we use it in another object-oriented programming language. Below is one example for beginners to define a constructor in the class of Vus.js. Inside the constructor, we can write the logic that we want to execute when the object of the class got created.
Example:
export default class Demo extends Vue {
public constructor() {
console.log("called !!")
}
}2. Class variable
This can be termed as class data. We can define our local variable by using any name followed by the type and its value. For more understanding, see the below example;
Example:
variable_name = value_hereLike above, we can define our member variable or say data members of the class. This variable is local to this class only.
3. Methods
Like any other feature, we can define our functions as well. This function contains the business logic or the API call, which will call the server and get the data that we are going to show. We can reuse functions as well.
Example:
name_function(){
// logic will goes here.
}Using the above syntax, we can define our syntax function we just to specify the name of the function and argument, if any.
Now we will see one example to define the class and component class used in Vue.js :
Example:
import Vue from 'vue'
export default class Demo extends Vue {
msg = "hello world !!"
}
<template>
<div>{{ msg }}</div>
</template>In the above example, this will print the message ‘hello world !!’. We can define our variables and use them in the template to get the value. This is called one-way binding.
Vue.js class Components
To make our class act as the component, we can use the @Component above our class. To use this, we need to import components from the vue class component library. It is a library only to make the normal act as a style class syntax. This is the same thing we do in angular for creating components, but there we are using the angular core to import this.
By using class components, we can achieve the same thing like create constructors, methods and define our functions to call the services and perform the logic.
Example:
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Demo extends Vue {
msg = "hello world !!"
}
<template>
<div>{{ msg }}</div>
</template>The above example will print the message as ‘hello world !!’ we can also perform so many different operations here. They are basically a typescript class only, extending the Vue class further, and we can use all the typescript options here to make our application easier and code under stable.
Examples of Vue.js class
Different examples are mentioned below:
Example #1
This is a very basic example for beginners to understand the flow of the component class. For example, making only one function and binding the value of the variable via a function.
Code for Vus.js file :
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class DemoComponent extends Vue {
msg = ""
showMsg() {
console.log("msg is ")
this.msg = "Hello! Demo for class component."
}
}Code for HTMl file :
<div>
<button v-on:click="showMsg">Click Here</button>
{{msg}}
</div>Output:
Example #2
In this example, we are making a class component and using this; we are trying to perform increment and decrement of value on button click.
Code for Vus.js file :
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class DemoComponent extends Vue {
//defining variable here local to class.
i = 0;
msg = "value "
//defining functions called from html file
valPlus() {
this.msg = "";
console.log("here vale would be increase by 1")
this.msg = this.msg + "got increase"
this.i++
}
//defining functions called from html file
valSub() {
this.msg = "";
console.log("here vale would be decrease by 1")
this.msg = this.msg + "got decrease"
this.i--
}
}code for Html file:
<div>
<button v-on:click="valSub">Decrese value</button>
<button v-on:click="valPlus">Increase Value</button>
{{ i }}
{{msg}}
</div>Output :
Conclusion
Class is used to write the logic and one of the major aspects of object-oriented programming language. We can add @component annotation to make our class more interactive with html without the messy code structure. Moreover, it helps to separate the business logic from the template, which makes our code more readable and easy to maintain. So nowadays, it is a highly recommended approach to follow for making any web application.
Recommended Articles
This is a guide to Vue.js class. Here we discuss How does classwork in Vue.js and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
