Tổng Quan VueJS
Định nghĩa
- Là một framework linh động dùng để xây dựng giao diện người dùng
- Khi phát triển lớp giao diện, người dùng chỉ cần dùng thư viện lõi (core library) của Vue, tích hợp với các thư viện hoặc dự án có sẵn
- Đáp ứng nhu cầu xây dựng những ứng dụng SPA (Single Page Applications)
Ưu/Nhược điểm
Ưu điểm
- VueJS là Javascript Framework. Hoạt động đều được Render và xử lý bằng Javascript giúp website nhẹ hơn, tốc độ nhanh hơn,...
- Tạo website hoặc app dynamic
- Tích hợp với các project khác
- Virtual DOM
Nhược điểm
- Do cần phải sử dụng thuần VueJS và các Component của bên thứ 3 nhúng vào, tuân thủ quy định về SSR (Server Side Rendering) -> SEO trở nên khó khăn
- Vấn đề về API phải có tốc độ đủ nhanh
Vòng đời của Vue Instance
- Khởi tạo một đối tượng Vue (Creating)
- Gắn kết vào DOM (Mounting)
- Cập nhật DOM khi dữ liệu thay đổi (Updating)
- Hủy instance. (Destroying)
- Với Lifecycle Hooks : phương thức được thực thi trong mỗi giai đoạn
Cú pháp template
- {{ message }}:render ra màn hình
- v-html="message" : sử dụng v-html nếu muốn render thẻ HTML
- v-bind:parameter="value" : Với parameter là tham số gắn với giá trị value
- Modifier:Modifier: bổ sung cho một directive để ràng buộc cụ thể dữ liệu.
Chi tiết Lifecycle Hooks
- Giai đoạn khởi Tạo
- beforeCreate hook chạy mỗi khi khởi tạo một instance.
- created hook được chạy khi data, event đã thiết lập thành công.
- Gắn Kết DOM
- beforeMount hook: sẽ chạy sau khi data, event được thiết lập và trước khi gắn kết vào DOM.
- mounted hook: giai đoạn này cho phép chúng ta có thể truy cập vào phẩn tử trong DOM.
- Cập nhật DOM
- beforeUpdate hook : Sau khi đối tượng đã được gắn vào DOM, khi dữ liệu thay đổi, và trước khi render, patch lại và hiển thị ra cho người dùng.
- updated hook : Sử dụng khi bạn cần truy cập DOM sau khi thay đổi thuộc tính.
- Hủy Instance
- beforeDestroy hook: Là giai đoạn trước khi instance bị hủy, bao gồm xóa tài nguyên, dọn dẹp các component.
- destroyed hook: Các thành phần đã được hủy bỏ hết