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.

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

<template>
  <div>
    <h1>Hello Vuejs</h1>
  </div>
</template>

<script>
export default {};
</script>

<strong>data</strong>Properties

In the above code, we will export the default empty object inside the <script> tag, let us add the data attribute to this empty object. </script>

<script>
export default {
   data:function(){
       return {
           title: "Vuejs"
       }
   }
};
</script>

<strong>data</strong>: 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

<template>
  <div>
    <h1>Hello {{title}}</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  }
};
</script>

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.

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  },
  methods:{
      welcomeMsg:function(){
          return `Welcome to ${this.title} world`
      }
  }
};
</script>

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.

<template>
  <div>
    <h1>Hello {{title}}</h1>
    <h2>{{welcomeMsg()}}</h2>
  </div>
</template>

##

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!