Search⌘ K
AI Features
Home
Courses
Jump Start with Vue 3

Methods and Computed Properties

Explore how to define and use methods to keep your Vue 3 templates clean and logical. Understand computed properties for efficiently deriving reactive data with caching, helping you create maintainable and high-performance Vue components.

We'll cover the following...

Methods

Defining methods helps keep our UI logic together and out of our template. This helps keep the templates clean and readable and makes our logic easier to test.

Syntax

The basic syntax for defining methods in Vue components is as follows:

Javascript (babel-node)
export default {
  // Other component options...
  methods: {
    methodName() {
      // Method logic goes here
    },
    // Other methods...
  },
};

  • methods: This is an option in the Vue component object that’s used to define the methods for that component.

  • methodName: We can replace this with the name we want to give to our method. It should be a valid JavaScript identifier (e.g., handleClick, fetchData, etc.).

  • methods: We can define multiple methods within the methods object, separating them with commas.

We can define custom methods on our Vue instance by adding them to an object under the methods property.

...