Vậy bây giờ chúng ta đã biết cách xây dựng ứng dụng Vue của mình, cách xuất nội dung hoặc ràng buộc các thuộc tính. Và sau đó chúng ta có thể thiết lập một số dữ liệu trong đối tượng data và tham chiếu đến dữ liệu đó trong mã HTML của chúng ta hoặc sau đó chúng ta cũng có thể xác định các phương thức được gọi.

Nó thực sự phụ thuộc vào những gì bạn đang xây dựng và mục tiêu ứng dụng của bạn cuối cùng là gì. Bây giờ, trước khi chúng ta thực hành những khái niệm quan trọng, có một số điều khác bạn nên biết về Vue đó là cách làm việc với dữ liệu của nó.

Để cho các bạn có thể dễ hiểu hơn mình sẽ lấy một ví dụ:

Chúng ta sẽ tạo thêm 2 thuộc tính trong đối tượng data là goalContentA và goalContentB

data() {
    return {
        goalContentA: 'Finish the course and learn Vue!',
        goalContentB: 'Master Finish the course and learn Vue!',
        vueLink: "https://vuejs.org/",
    }
},

Sau khi tạo xong, mục tiêu của chúng ta là sử dụng nó trong một function của đối tượng methods, cùng xem lại ví dụ lần trước chúng ta đang Hardcode để trả về dữ liệu, trông nó thật thô đúng không. 

outputGoal () {
    const randomNumber = Math.random();
    if(randomNumber > 0.5) {
        return "Master Vue";
    } else {
        return "Learn Vue"
    }
}

Bây giờ thay vì hardcoed như thế chúng ta sẽ tham chiếu đến các biến trong đối tượng data để lấy giá trị của chúng và hiển thị trong phần tử HTML, để có thể truy cập vào chúng, chúng ta phải sử dụng từ khóa "this", Các bạn cứ hiểu từ khóa this được sử dụng để tham chiếu đến đối tượng Vue hiện tại mà một phương thức hoặc một đối tượng Vue đang được thực thi từ đó.

Dưới đây là cách sử dụng các biến dữ liệu trong phương thức:

methods: {
    outputGoal () {
        const randomNumber = Math.random();
        if(randomNumber > 0.5) {
            return this.goalContentA;
        } else {
            return this.goalContentB;
        }
    }
},

Trong ví dụ này, this.goalContentA được sử dụng để truy cập giá trị của biến dữ liệu goalContentA, và tương tự như goalContentB.

Nó không dùng chỉ đơn giản là tham chiếu đến biến của đối tượng data, mà nó còn có thể thay đổi giá trị của nó, dưới đây là một ví dụ khác:

new Vue({
  data: {
    count: 0
  },
  methods: {
    incrementCount: function () {
      // Thay đổi giá trị của biến dữ liệu count
      this.count++;
    }
  }
})

Trong phương thức incrementCount, this.count++ được sử dụng để tăng giá trị của biến dữ liệu count.

Qua ví dụ trên chắc các bạn đã hiểu cách làm việc với dữ liệu trong Vue, tóm lại mối quan hệ giữa biến trong data và phương thức là: 

Biến dữ liệu và phương thức thường được sử dụng cùng nhau trong một thành phần Vue để thực hiện các tác vụ như hiển thị dữ liệu, xử lý sự kiện, hoặc thay đổi trạng thái của ứng dụng. Việc này giúp quản lý và tương tác với dữ liệu một cách dễ dàng và hiệu quả.

Ví dụ, bạn có thể có một biến dữ liệu để lưu trữ số lượng sản phẩm trong giỏ hàng của người dùng và một phương thức để thêm sản phẩm vào giỏ hàng. Khi phương thức được gọi, nó có thể thay đổi giá trị của biến dữ liệu để phản ánh sự thay đổi trong trạng thái của ứng dụng.