Giới thiệu sơ lược ngôn ngữ framework Vue.js

[cameralongan]

Trong thời gian gần đây, công đồng lập trình web thường nhắc đến một framework có tên Vue.js cũng như bàn luận rất nhiều về các ưu điểm của nó khi so sánh với các framework đã có mặt từ rất lâu như React (được hỗ trợ bởi Facebook), Angular (được hỗ trợ bởi Google)... Vậy Vue.js là gì? tại sao nó phát triển một cách mạnh mẽ như vậy, câu trả lời có trong phần tiếp theo.

vuejs.jpg
Vue.js là gì?

Vue (phiên âm /vjuː/, đọc giống như từ view) là một framework Javascript tiên tiến trong xây dựng giao diện người dùng, không giống như các framework khác, Vue được xây dựng từ những dòng code cơ bản nhất nhằm tối ưu tốc độ. Thư viện của Vue chỉ tập trung vào lớp hiển thị, rất đơn giản để tiếp cận và dễ dàng tích hợp vào các hệ thống khác. Vue cũng có khả năng cung cấp các ứng dụng web đơn trang Single Page Application (SPA) cho phép kết hợp với nhiều các công cụ hiện đại, như Laravel chẳng hạn.
vue16172687495804.jpg
Vue.js được sử dụng để xây dựng giao diện người dùng giống như React (sử dụng bởi Facebook), Angular (được hậu thuẫn bởi Google), Ember… Tuy nhiên, Vue.js có tốc độ tạo trang (render) rất nhanh và chiếm khá ít bộ nhớ. Chúng ta có thể xem bảng benchmark các framework Javascript nổi tiếng nhất hiện nay, Vue có một thứ hạng không tồi chút nào.

Mô hình MVVM

MVVM là viết tắt của Model-View-ViewModel là một mô hình được áp dụng trong framework Vue.js.

Trong mô hình này, dữ liệu mỗi khi được "gán" vào View hoặc Model sẽ đều được Vue.js tự động gắn cho phần còn lại. Tức là khi dữ liệu thay đổi ở Model nó sẽ tự động được "cập nhật" sang View và khi người dùng thay đổi dữ liệu trên View (ví dụ nhập liệu vào ô địa chỉ email chẳng hạn) thì dữ liệu cũng được tự động cập nhật ngược lại Model. Trong cộng đồng Vue.js thường gọi mô hình này với một thuật ngữ khác là two-way data binding, tạm gọi là gán dữ liệu hai chiều. Chúng ta sẽ cùng tìm hiểu mô hình này trong ví dụ đầu tiên sử dụng Vue.js ở phần tiếp theo.


Ngay từ đầu, đối tượng message trong Model có giá trị “Xin chào, tôi là Vue.js” ngay lập tức giá trị của nó được hiển thị lên thẻ <h1> trên View thông qua cú pháp {{ message }}.
Ô nhập liệu <input> cũng được gán với đối tượng message, do vậy ngay khi thay đổi giá trị trong thẻ <input> này, DOM Listener sẽ cập nhật giá trị đối tượng message ngược lại Model, và cũng ngay lập tức giá trị của đối tượng message cũng được cập nhật đến các View có tham chiếu đến message, mà ở đây là thẻ <h1>.
Ví dụ đầu tiên này đã phần nào giúp bạn hiểu được mô hình MVVM hay thuật ngữ gán dữ liệu hai chiều (two-way data binding). Tạm khép lại việc viết code trong Vue.js trong bài viết này.

[thuvienhay]

bài viết Giới thiệu sơ lược ngôn ngữ framework rất hay, cảm ơn bạn!

[mnguyen99]

Cám ơn bạn, mình đang quan tâm về chủ đề này

[thuvienthuthuat]

Framework này dễ học không nhỉ? Nó ứng dụng nhiều không bạn.