Từng bước học Vue2 Tập 6

Bài đăng này đã không được cập nhật trong 3 năm

Giới thiệu cơ bản về Vue 2

Chào mừng các bạn đã quay trở lại với series Từng bước học Vue2 tập 6.

Hôm nay mình sẽ giới thiệu đến các bạn cách sử dụng Component.

Đầu tiên chúng ta cùng đọc xem khái niệm Component trong Vue là gì :

Components are reusable Vue instances with a name: in this case, <button-counter>. We can use this component as a custom element inside a root Vue instance created with new Vue.

Dịch : Component là các đối tượng Vue có thể sử dụng lại được với một cái tên: trong trường hợp này là <button-counter>. Chúng ta có thể dùng component này như là một phần tử bên trong đối tượng Vue gốc được tạo bởi new Vue.

Cùng bắt tay để xem component hoạt động như thế nào và lúc nào thì chúng ta nên dùng nó. Bình thường để tạo ra những list hoặc nav chúng ta thường sử dụng các thẻ <ul><li> như sau:

Với Vue chúng ta có thể xử lý bằng cách sử dụng component như sau, cùng tạo ra 1 file main.js và sử dụng ở view html

File main.js sẽ bao gồm component:

Quay trở lại index.html và thêm cặp thẻ <task> vào trong

Okie giờ mở browers xem kết quả hiển thị

Thực tế thì chúng ta sẽ sử dụng rất nhiều hơn 1 thẻ task như trong ví dụ để tạo thành list hoặc nav-bar. Nên hãy thử thêm các cặp thể task vào như sau