Tại sao cần dùng vue js

Và đây là kết quả

Lấy dữ liệu từ API với Vue

Tăng độ phức tạp hơn một chút. Thay vì mình hardcode cho một mảng sản phẩm sẵn, mình sẽ lấy danh sách các sản phẩm từ một API.

Đây là dữ liệu mà API trả về

Bạn có thể thấy, mỗi item trong danh sách là hiển thị kết quả “thô” mà API trả về. Do vậy, để hiển thị được đẹp hơn, cho con người bình thường đọc thì chúng ta cần điều chỉnh lại một chút.

Kết quả thu được như sau:

Giờ mình “thêm mắm thêm muối” cho đoạn code trên bằng cách kiểm trả điều kiện kết quả trả về. Nếu sản phẩm nào có số lượng bằng 0 thì sẽ thêm một label đánh dấu.

Kết quả thu được là:

Vue data binding

Tiếp tục nhé. Nếu mình muốn hiển thị tổng số lượng các sản phẩm nhận được. Đơn giản là mình sẽ duyệt list sản phẩm và cộng số lượng lại.

Và đây là kết quả

Nhân tiện đây, mình giới thiệu một tiện ích Vue.js devtools rất hay của Chrome. Tiện ích cho phép bạn kiểm tra dữ liệu được load lên trang như thế nào.

Rồi, giờ mình sử dụng tiện ích kiểm tra xem Vue xử lý thế nào nhé. Chúng ta pop một vài item ra khỏi mảng sản phẩm, điều gì sẽ xảy ra?

Như bạn thấy trên màn hình, không chỉ danh sách các sản phẩm thay đổi mà tổng sản phẩm cũng thay đổi theo.

Tiếp tục thôi, mình muốn thêm tính năng thêm số lượng cho mỗi sản phẩm một cách tự động. Tức là  mình sẽ thêm một nút bên cạnh mỗi sản phẩm, mỗi khi người dùng nhấn nút này thì tự động tăng số lượng sản phẩm lên 1.

Và kết quả rất bất ngờ.

Một vài tính năng hay ho của Vue

Nếu chúng ta muốn phát triển ứng dụng trên thành một dự án lớn hơn, phức tạp hơn thì lúc này bạn cần nghĩ tới việc chia nhỏ các thành phần ra thành component và files, để mã nguồn có tính tổ chức tốt hơn.

Vue cung cấp công cụ để khởi tạo dự án theo một template có sẵn, đó là Vue CLI. Mình cũng có một bài viết riêng về công cụ này, bạn có thể đọc lại: Giới thiệu cấu trúc dự án tạo bằng Vuejs CLI

Vue cũng cho phép bạn đóng gói một component hoàn chỉnh, bao gồm cả html, css và JS trong đó. Điều này sẽ giúp cho các component độc lập với nhau. Từ đó nếu bạn muốn thay đổi một component sẽ hạn chế ảnh hưởng tới phần còn lại.

Tạm kết

Trên đây mới chỉ là những phần nổi mà Vue có thể làm được. Còn rất nhiều thứ hay ho khác nữa chờ bạn khám phá.

Chắc hẳn đến đây bạn cũng đã có câu trả lời tại sao lại chọn Vue.js rồi đúng không?

Trong thời gian tới, mình sẽ còn ra mắt nhiều bài viết xoay quanh về Vue.js. Nếu bạn có hứng thú với Vue thì đón đọc nhé.

Đọc thêm về Vue:

• Vuejs tutorial cho người mới – Tự xây dựng Todo App
• Hiểu Vuejs Router qua thực hành một dự án
• React vs Angular vs Vue.js: Lựa chọn nào cho năm 2020

Nguồn: medium.com