Trong Vue.js, Components là một phần quan trọng giúp bạn xây dựng giao diện người dùng (UI) dưới dạng các thành phần nhỏ, tái sử dụng được. Một Component trong Vue có thể là một nút, một form, hoặc thậm chí là một module phức tạp trong ứng dụng. Dưới đây là hướng dẫn từng bước để khởi tạo và sử dụng một component trong Vue.js.
Thành phần cơ bản của một Component
Mỗi component trong Vue có 3 phần chính:
- Template: Chứa giao diện HTML của component.
- Script: Chứa logic JavaScript, bao gồm data, methods, props.
- Style: Định nghĩa CSS dành riêng cho component (tuỳ chọn).
Cách khởi tạo một Component
Khởi tạo dự án Vue.js: nếu bạn chưa biết thì có thể tham khảo tại đây
Tạo file HelloWorld.vue
Đi tới thư mục src/components và tạo file mới HelloWorld.vue.
Nội dung file HelloWorld.vue:
Sử dụng Component HelloWorld
Mở file src/App.vue và thay đổi nội dung để sử dụng component “HelloWorld”:
Sau đó tiến hành chạy dự án, Kết quả truy cập vào http://localhost:5173, bạn sẽ thấy:
- Một tiêu đề hiển thị thông điệp: “Xin chào, đây là Vue.js!”.
- Một nút nhấn bên dưới.
- Khi nhấn nút, thông điệp sẽ thay đổi thành: “Thông điệp đã được thay đổi!”.
Đây là bài hướng dẫn cơ bản để bạn bắt đầu tạo component trong Vue.js. Trên internet có rất nhiều tài liệu tham khảo hữu ích. Chúc bạn học tốt và thành công!
Giảng viên Võ Văn Mỹ
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
