Vue.js Instances

It is essentially a ViewModel according to the MVVM pattern; hence we will see the variable name vm throughout the docs.

To start a Vue.js application, we need to create the instance of Vue with the help of the Vue function, which is called the root Vue instance. The following are the syntax of a Vue instance in vue.js:

Syntax:

Example: This example helps us to understand how we can use the Vue instance in the Vue.js application.

Index.html

Main.js

Output: When we execute this code, we will get the output, as shown below:

Vue.js Instances

In the above example, there is an id = app, which is the id of the div component available in the Index.html file. For the Vue, we used a parameter which is known as el. This el takes the id of the DOM element from Vue file.

Next, we have defined the data objects in the Vue file, including values firstname, lastname, and address. These values are assigned in the div tag.

These values are going to be replaced in the interpolation {{}} with the value assigned in the data object.

In the Vue instance, it is required to pass options to the Vue constructor, such as data, template, methods, callback, etc.

Now, we are going to discuss the options to be passed in the Vue instance.

Data

It is type of data that can be an object or a function. Vue.js converts the properties of the data to getters/setters that makes it reactive.

Example: In the below example, we are going to explain how we can use the data options in the Vue instance.

Index.html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Instances

In the above program, we can see that the console log is used to print the details, as shown below:

If there is a Vue component, the data object must be referred by a function, as shown below:

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Instances

In the above example, we have used the data as a function, which is used with the Vue.extend.

Props

Vue.js can use type for the prop as a string or an object array. It takes syntax based on an array or an object. Props are said to be attributes, which is used to accept information from the parent elements. The following are the syntax that can be used for props:

Syntax:

propsData: The propsData is used for the unit testing. During the creation of Vue instance, it is required to passed this propsData method.

Type: array of string.

Syntax:

Example:

Output: After executing this code, we will get the output, as shown below:

Vue.js Instances

In the above example, we have used the two functions, which are a.sum and a.square.

Methods: The methods are part of the Vue constructor. Methods can be added with the Vue instance. Let’s take an example to understand how we can use the methods in the Vue instance.

Example:

Main.js

Output: After executing this code, we will get the output, as shown below;

Vue.js Instances

In the above example, we have used a.square function to get the square of the number.

Pin It on Pinterest

Share This