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.
Use cd vue-appChange the working directory, then open the project folder using your favorite code editor.
Navigate to the App.vue file in the src folder and delete all contents, then replace it with the code below.
App.vue
Hello Vuejs
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 the title attribute to the template tag using {{}}double curly braces.
App.vue
Hello {{title}}
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 a welcomeMsg method that returns a string.
Inside methods, we can access the data object using this.propertyname.
Let us call the welcomeMsg method in the template tag.
Hello {{title}}
{{welcomeMsg()}}
##
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!
0
1
377
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
