The use of methods and data attributes in Vuejs

In this article, we will introduce to you how to use methods and data attributes in Vue JS.

Note, we use Vue cli to generate the project.

Create our project

Let’s quickly create our vue project by running the following command.

vue create vue-app

The above command will download the required files in the vue-app folder.

Usecd vue-appChange the working directory, then open the project folder using your favorite code editor.

Navigate to theApp.vuefile in thesrcfolder and delete all contents, then replace it with the code below.

App.vue

dataProperties

In the above code, we will export the default empty object inside the

data: The data attribute value is an anonymous function that returns an object. Every property in this object is added to the Vue reactive system so that if we change the property value then vuejs will re-render the dom with the updated data.

Let’s add thetitleattribute to the template tag using{{}}double curly braces.

App.vue

In Vuejs, we need to use double curly braces{{js expression}}to pass JavaScript expression.

Let us start the development server using the following command.

npm run serve

Did you see our{{title}}was replaced by Vuejs?

methodsAttribute

Let us create the first method using the methods attribute. The methods attribute value is also an object.

In the above code, we added awelcomeMsgmethod that returns a string.

Insidemethods, we can access the data object usingthis.propertyname.

Let us call thewelcomeMsgmethod in the template tag.

##

The above is the detailed content of The use of methods and data attributes in Vuejs. For more information, please follow other related articles on the PHP Chinese website!