Tại sao nhiều lập trình viên Front-end lại chọn Vue.js

0

Theo khảo sát của State of JavaScript 2017, Vue.js là một thư viện front-end mà các developers muốn tìm hiểu nhất. Trong bài viết này, mình sẽ giải thích lý do tại sao lại như vậy và hướng dẫn các bạn có thể xây dựng một ứng dụng đơn giản với Vue.js

Tại sao chọn Vue.js cho dự án front-end? Chúng ta cùng tìm hiểu nhé.

Một thư viện JavaScript tuyệt vời

Như bạn đã biết, Javascript đã có tuổi đời 10 năm, phần lớn những mã chạy trên trình duyệt đều đã chạy được trên server. Tuy nhiên, Javascript ngày càng phát triển thì một framework sẽ giúp cho mọi thứ trở nên có tổ chức, dễ dàng bảo trì hơn.

Bài viết này mình sẽ không tiến hành so sánh để chọn ra một JS framework tốt nhất, các bạn có thể xem lại bài viết này của mình: React vs Angular vs Vue.js: Lựa chọn nào tốt nhất?

Vue.js được xây dựng với cách tiếp cận để trở thành một framework nhỏ gọn, linh hoạt và hiệu quả, dễ bảo trì, dễ thực hiện test. Vue.js cũng được phát triển theo hướng dễ tích hợp.

Tức là nếu bạn đã có sẵn ứng dụng, bạn có thể sử dụng Vue.js để xây dựng giao diện cho một phần của ứng dụng đó mà không nhất thiết phải đập hết cái cũ đi.

Ngoài ra, bạn cũng có thể xử lý business logic ngay trên giao diện của ứng dụng với Vue.js. Vue có rất nhiều extension bổ sung giúp bạn làm điều đó.

Tại sao chọn Vue.js

Cũng giống với các front-end framework hiện đại khác, Vue cũng cho phép bạn tạo các component để nâng cao tính tái sử dụng. Bạn có thể đóng gói tất cả HTML, CSS và JS vào một component, mỗi component có thể hiển thị độc lập với các phần khác.

Tại sao chọn Vue.js
(Một ví dụ về cách mọi thứ có thể được chia thành các thành phần)

Cùng thực hành với Vue.js

Mình sẽ cho bạn thấy những điểm thú vị trong code được viết với Vue. Đồng thời cũng giúp cho bạn nắm được cú pháp của Vue.

Bài viết này sẽ không đi quá sâu vào chi tiết, nhưng chúng ta sẽ thấy được một số khác cốt lõi trong quá trình thực hành.

Giống như các ứng dụng Javascript, chúng ta bắt đầu với bài toán hiển thị dữ liệu ra một page.

Tại sao chọn Vue.js

Để làm điều đó với Vue thì cực đơn giản.

Tại sao chọn Vue.js

và kết quả nhận được như sau:

demo-display-data-with-vue

Vue hỗ trợ Reactive

Nhìn đoạn code thì cũng chưa có gì đặc biệt phải không? Nhưng điều kì diệu chỉ xảy ra khi dữ liệu thay đổi. Nếu chúng ta vào màn hình console, thay đổi giá trị của sản phẩm, kiểm tra xem điều gì xảy ra.

data binding with vue

Đặc điểm của Vue là Reactive. Tức là khi dữ liệu thay đổi, Vue sẽ đảm nhận nhiệm vụ cập nhập giá trị đó lên giao diện. Đây cũng là một lý do quan trọng cho câu hỏi tại sao chọn vue.js

Điều này hoạt động với bất kỳ loại dữ liệu nào, không chỉ với text. Vì vậy, thay vì một sản phẩm, mình sẽ hiển thị một danh sách nhiều sản phẩm ra ngoài màn hình.

Để tạo phần tử <li> mới cho một sản phẩm, mình sẽ sử dụng một thuộc tính đặc biệt từ Vue gọi là v-for. Bằng cách này, chúng ta sẽ có một danh sách các sản phẩm.

data-binding-with-vue-2

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

demo vue reactive

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.

get data from api with vue

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

products-data

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.

vue-display-from-api

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

vue-reactive-demo-2

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.

Tại sao chọn Vue.js

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

vue-reactive-demo-4

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.

Tại sao chọn Vue.js

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

vue-reactive-demo-6-result

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.

vue-devtool

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.

giới thiệu vue devtool

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.

Tại sao chọn Vue.js

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

vue-reactivep-demo-8-result

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.

Tại sao chọn Vue.js

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-cli-example

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:

Nguồn: medium.com

Dịch vụ phát triển ứng dụng mobile giá rẻ - chất lượng

Bình luận. Cùng nhau thảo luận nhé!

avatar
  Theo dõi bình luận  
Thông báo