Với phép Interpolation và V-bind, chúng ta đã học về hai tính năng chính để xuất và sử dụng dữ liệu do Vue quản lý trong mã HTML. Và điều đó thực sự quan trọng. Bây giờ, hãy làm cho ứng dụng của chúng ta ít nhất là năng động hơn một chút.

Bây giờ là lúc để tìm hiểu về một tùy chọn mới. Và đó là tùy chọn methods. Methods cho phép bạn định nghĩa các functions ( hàm ) để thực thi xử lý sự kiện, tính toán dữ liệu, hoặc thực hiện các tác vụ khác mà bạn muốn thực hiện khi tương tác với ứng dụng Vue của bạn, dưới đây là cách bạn có thể sử dụng methods:

const app = Vue.createApp({
    data() {
        return {
            goalContent: 'Finish the course and learn Vue!',
            vueLink: "https://vuejs.org/",
        }
    },
    methods: {
       
    },
})
app.mount('#user-goal');

Với methods bạn không cần chuyển vào bất kỳ tham số nào, mà nó chỉ nhận những phương thức do bạn định nghĩa .Ví dụ, outputGoal, những tên hàm này hoàn toàn phụ thuộc vào bạn.

Bạn nên nhớ rằng đối tượng methos được định nghĩa bời Vue, nó không thế thay thế bằng một tên khác, nó cũng giống như đối tượng data của chúng ta vậy, NHƯNG với các hàm trong đối tượng methods bạn có thể đặt tên phụ thuộc vào bạn.

có 2 cách cho chúng ta có thể định nghĩa một function:

Cách 1:

methods: {
    outputGoal: function () {
       // do something here
    }
},

Cách 2:

methods: {
    outputGoal () {
     // do something here
    }
},

Dưới đây là một ví dụ cụ thể:

const app = Vue.createApp({
    data() {
        return {
            goalContent: 'Finish the course and learn Vue!',
            vueLink: "https://vuejs.org/",
        }
    },
    methods: {
        outputGoal: function () {
            const randomNumber = Math.random();
            if(randomNumber > 0.5) {
                return "Master Vue";
            } else {
                return "Learn Vue"
            }
        }
    },
})
app.mount('#user-goal');

Trong ví dụ trên, phương thức outputGoal không cần bất kỳ tham số nào. Nó chỉ đơn giản là random ra một số nếu lớn hơn 0.5 thì  return "Master Vue" còn ngược lại thì trả về "Learn Vue".

Khi bạn muốn sử dụng một phương thức đã được định nghĩa trong methods, bạn chỉ cần gọi tên của phương thức đó trong phần từ HTML mà được Vue kiểm soát kết hợp với Interpolation. Ví dụ:

<section id="user-goal">
  <h2>{{ goalContent }}</h2>
  <p>Learn more <a v-bind:href="vueLink">about Vue</a></p>
  <p>{{ outputGoal() }}</p>
</section>

Sau đó mỗi khi bạn tải lại trang dữ liệu đã được trả về một cách dynamic như thế này

Từ ví dụ trên chúng ta đã thấy Vue tuyệt vời như thế nào rồi đúng không, đây vẫn chỉ là một ví dụ đơn giản để cho các bạn hiểu về thằng methods này, ở trong series tiếp theo được hiểu hơn về nó nhiều hơn nữa, dưới đây là một ví dụ khi chúng ta xứ lý một hàm thông qua một event, bạn chưa cần hiểu điều này vội vì mình chỉ muốn show cho các bạn thấy rằng sự mạnh mẽ của Vue, hãy cùng mình đi tiếp phần sau nhé!

Dưới đây là cách bạn có thể sử dụng methods:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    // Định nghĩa một phương thức có tên là `reverseMessage`
    reverseMessage: function () {
      // Trong phương thức này, chúng ta đảo ngược chuỗi `message`
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Sau đó, trong template HTML của bạn, bạn có thể gọi phương thức này bằng cách sử dụng cú pháp v-on (hoặc viết tắt là @) để lắng nghe sự kiện và gọi phương thức tương ứng:

<div id="app">
  <p>{{ message }}</p>
  <!-- Khi click vào button, phương thức `reverseMessage` sẽ được gọi -->
  <button v-on:click="reverseMessage">Đảo ngược message</button>
</div>

Trong ví dụ trên, khi bạn click vào nút "Đảo ngược message", phương thức reverseMessage sẽ được gọi và chuỗi message sẽ được đảo ngược.

Điều này cho phép bạn tổ chức code của mình một cách rõ ràng và dễ dàng hiểu bằng cách chia nhỏ các tác vụ thành các phương thức riêng biệt.