Methods In Vue - How To Use Vue Methods

Methods in Vue – How to Use Vue Methods

In this post, we will give you information about Methods in Vue – How to Use Vue Methods. Here we will give you detail about Methods in Vue – How to Use Vue Methods And how to use it also give you a demo for it if it is necessary.

Methods in Vue are defined in the methods object.

Vue.createApp({
  data: () => ({ value: 0 }),
  methods: {
    getValue() {
      return this.value;
    }
  },
  template: '
  <div>
    <div>A function that returns the value of 'value'</div>
    <div>{{getValue()}}</div>
  </div>
  '
}).mount('#app');

Methods are reactive

If your Vue template uses a method, and a value that the method relies on changes, Vue will re-render the template.
For example, the following code correctly displays the current value, even though value is displayed using a method.

Vue.createApp({
  data: () => ({ value: 0 }),
  methods: {
    getValue() {
      return this.value;
    },
    incrementValue() {
      this.value++;
    }
  },
  template: '
  <div>
    <div>Change the Value of 'value'</div>
    <div>
      <button @click="incrementValue">Click me</button>
    </div>
    <div>Current Value: {{getValue()}}</div>
  </div>
  '
}).mount('#example');

Methods can be async

Simply add the async keyword in front of your function name to make it async.
Async methods aren’t useful for displaying in templates, but they are helpful for making API requests when the user clicks a button or submits a form.

Vue.createApp({
  data: () => ({ response: '' }),
  methods: {
    async makeRequest() {
      const res = await fetch('https://httpbin.org/get').
        then(res => res.json());
      this.response = res;
    }
  },
  template: '
  <div>
    <div>Make an async request</div>
    <div>The response: {{response}} </div>
    <div>
      <button @click="makeRequest">Click Me</button>
    </div>
  </div>
  '
}).mount('#async')

When not to use Methods

When it comes to display or formatting related logic, you should use computed properties.
Methods should only be used for event handlers and formatting in a v-for that is dependent on the state of the loop.

Vue.js is a progressive JavaScript framework that makes building user interfaces simple and enjoyable. Vue is designed from the ground up to be incrementally adoptable, so you can use the features you need, and mix and match Vue with other libraries or frameworks.

Vue is a relatively new framework, but it has quickly become one of the most popular JavaScript frameworks in the world. It is used by large companies like Alibaba, Baidu, and Xiaomi, as well as by thousands of smaller businesses and startups.

Here are some of the features that make Vue.js so popular:

Declarative rendering: Vue uses a declarative rendering model, which means that you can describe the desired output of your application in terms of HTML, CSS, and JavaScript. This makes it easy to reason about your code and to make changes to your application.
Reactivity: Vue is a reactive framework, which means that it automatically updates the DOM whenever there is a change to the application’s state. This makes your application feel fast and responsive.
Composition: Vue is a component-based framework, which means that you can build your application out of reusable components. This makes your code more maintainable and easier to test.
Performance: Vue is a highly performant framework. It has been benchmarked against other popular JavaScript frameworks, and it has consistently outperformed them.