Bài 6: Methods trong Vue.js
Methods trong Vue.js là một đối tượng được liên kết với Vue Instance. Các functions đều được định nghĩa bên trong đối tượng methods(phương thức). Các phương thức rất hữu ích khi bạn cần thực hiện một số hành động với chỉ thị v-on trên một phần tử để xử lý các sự kiện. Các hàm được định nghĩa bên trong đối tượng phương thức có thể được gọi thêm để thực hiện các hành động.
Nội dung của bài
Cú pháp
Ta cùng xem qua ví dụ sau để hiểu cú pháp của methods.
export default {
name: 'SayMyName',
data() {
return {
message: "Welcome to Yeulaptrinh.vn!"
}
},
methods: {
changeMessage() {
this.message = "Have a nice day!"
}
}
}
</script>
Methods là nơi định nghĩa các hàm chức năng trong Vue.js, nơi ta tập trung xử lý logic phức tạp của toàn bộ component. Nó là một đối tượng có nhiều hành động bên trong, tương ứng với mỗi thao tác của user hay mỗi công việc cập nhật trạng thái cho ứng dụng.
Các thao tác xử lý sự kiện đều phải được định nghĩa trong methods, mỗi khi sự kiện được diễn ra sẽ tự động cập nhật thành phần có liên quan tương ứng.
Methods vs Computed
Có vài điểm chính giúp các bạn mới khi làm quen với Vue.js phân biệt 2 khái niệm này:
Computed hay computed property: Đơn thuần là một thuộc tính được tính toán. Nó thường ràng buộc với một thuộc tính phụ thuộc hay một giá trị nào đó (thường trong mục data), nó không thể gọi, truy cập đến các phương thức, hay nhận bất kỳ tham số nào.
methods: {
reverseMessage: function () {
return this.message.split(' ').reverse().join(' ')
}
}
Computed khá giống một liên kết dữ liệu đối với thuộc tính phụ thuộc, khi thuộc tính thay đổi giá trị computed sẽ cập nhật tương ứng.
Với methods thì khác, nó không có bất cứ ràng buộc với bất kỳ thuộc tính nào. Có thể gọi và sử dụng bất kỳ đâu, nhận tham số và thực hiện các hành vi, thao tác với các trạng thái của ứng dụng. Methods dễ dàng truy cập tới các thuộc tính trong data, sửa đổi chúng, và cập nhật vào DOM.
Practice
Ta cùng làm app nho nhỏ check tỷ giá tiền điện tử với đồng Đô la Mỹ để hiểu thêm về methods nhé:
Ta có một template đơn giản như sau:
<template>
<div>
<h3>Today price: {{coinPrice}}</h3>
<input type="text" v-model="coinName">
<button @click="checkPrice(coinName)">Check</button>
</div>
</template>
User sẽ nhập tên đồng coin muốn tra giá, sau đó click vào button. Hàm checkPrice() sẽ nhận giá trị từ user. Dữ liệu về giá trị tại thời điểm hiện tại sẽ được lấy thông qua API và cập nhật lên DOM.
data() {
return {
coinName: "bitcoin",
coinPrice: 0
}
},
Khởi tạo giá trị mặc định cho input.
methods: {
async checkPrice(coinName) {
const data = await axios
.get(`https://api.coingecko.com/api/v3/simple/price?ids=${coinName}&vs_currencies=usd`)
.then(function (response) {
return response.data;
})
.catch(function (error) {
console.log(error);
})
this.coinPrice = data[this.coinName]?.usd;
}
}
Hàm checkPrice được đặt trong methods sẽ thực hiện lấy dữ liệu từ API và gán lại giá trị cho thuộc tính dữ liệu coinPrice
Demo:
Hẹn gặp lại các bạn trong các blog tiếp theo!
tìm hiểu thêm