Vue.js đã phát triển thành một framework linh động (progressive) dùng để xây dựng giao diện người dùng. Với Vue.js, bạn có thể phát triển ứng dụng theo từng bước và tích hợp dễ dàng với các thư viện và dự án có sẵn.
Vue.js là gì?
Vue.js (phát âm là /vjuː/, giống như "view" trong tiếng Anh) là một framework linh động dùng để xây dựng giao diện người dùng. Khác với các framework truyền thống, Vue.js cho phép việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện, bạn chỉ cần sử dụng thư viện lõi của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án hiện có. Đồng thời, với kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng tốt nhu cầu xây dựng các ứng dụng một trang (SPA - Single-Page Applications) phức tạp.
Bắt đầu với Vue.js
Nếu bạn chưa quen với lập trình front-end, hãy bắt đầu bằng việc trang bị kiến thức cơ bản trước. Nếu bạn đã có kinh nghiệm với các framework khác như React hoặc Angular, thì càng tốt. Tuy nhiên, nếu bạn chưa làm quen với những công nghệ này, đừng lo, cũng không sao cả.
Để thử nghiệm Vue.js, không gì dễ hơn là bắt đầu với ví dụ "Hello World" trên trang JSFiddle. Bạn cũng có thể tạo một file index.html và nhúng thư viện Vue vào như sau:
Trang Cài đặt của Vue.js cung cấp nhiều lựa chọn để bạn cài đặt Vue. Tuy nhiên, khi bạn mới bắt đầu, chúng tôi không khuyến khích sử dụng vue-cli, đặc biệt nếu bạn chưa quen với các công cụ xây dựng trên nền tảng Node.js.
Render theo hướng khai báo
Tại trung tâm của Vue.js là một hệ thống cho phép bạn render dữ liệu lên DOM theo hướng khai báo (declarative) sử dụng một cú pháp đơn giản. Dưới đây là ví dụ cơ bản:
{{ message }} Với đoạn mã trên, bạn đã viết xong một ứng dụng Vue. Tuy kết quả chỉ là một chuỗi kí tự được hiển thị trên màn hình, nhưng thực tế Vue đã thực hiện nhiều việc đằng sau hậu trường. Dữ liệu và DOM đã được liên kết với nhau, và mọi thứ đã trở nên phản ứng (reactive). Bạn có thể kiểm chứng bằng cách mở console của trình duyệt và gán một giá trị khác cho biến message, ví dụ: app.message = 'OK bye'.
Ngoài việc quản lí và chỉnh sửa văn bản, Vue còn cho phép bạn bind các thuộc tính của phần tử web, như sau:
Hover để xem title tương ứng Trong ví dụ trên, directive v-bind giữ cho thuộc tính title của phần tử web luôn giống với thuộc tính message của đối tượng Vue đã khởi tạo. Bằng cách này, khi bạn thay đổi giá trị của app2.message trong console JavaScript, thuộc tính title sẽ được cập nhật tương ứng.
Điều kiện và vòng lặp
Vue cung cấp các directive giúp bạn ẩn hoặc hiển thị một phần tử web dễ dàng, ví dụ:
Ứng dụng đã được kích hoạt
Khi bạn gán app3.seen = false trong console, phần tử p sẽ biến mất.
Thêm vào đó, Vue cung cấp một hệ thống mạnh mẽ để áp dụng các hiệu ứng chuyển động khi phần tử web được thêm vào, cập nhật hoặc xóa khỏi DOM.
Bạn cũng có thể sử dụng directive v-for để hiển thị danh sách các item từ một mảng:
- {{ todo.text }}
Khi bạn thêm một phần tử mới vào mảng app4.todos, danh sách sẽ được cập nhật tương ứng.
Xử lý thông tin đầu vào của người dùng
Để tương tác với ứng dụng, bạn có thể sử dụng directive v-on để đính kèm các event listener và gọi các method trên đối tượng Vue:
{{ message }}
Method reverseMessage sẽ thay đổi trạng thái của ứng dụng mà không ảnh hưởng đến DOM. Vue sẽ tự động xử lí tất cả những thay đổi trên DOM, và bạn chỉ cần tập trung vào phần logic.
Vue còn cung cấp directive v-model giúp bạn kết nối hai chiều giữa đầu vào của form và trạng thái ứng dụng:
{{ message }}
Biên soạn với các component
Hệ thống component là một khái niệm quan trọng trong Vue, giúp bạn xây dựng ứng dụng lớn từ các phần tử nhỏ, độc lập và tái sử dụng được. Bạn có thể trừu tượng hóa bất kỳ giao diện ứng dụng nào thành một cây các phần tử con.
Để đăng kí một component trong Vue, bạn có thể sử dụng đoạn mã sau:
Vue.component('todo-item', { template: 'This is a todo ' })Sau đó, bạn có thể sử dụng component todo-item trong template của các component khác:
Để truyền dữ liệu từ component cha vào các component con, bạn có thể sử dụng một prop:
Vue.component('todo-item', { props: ['todo'], template: '{{ todo.text }} ' })Và dùng v-bind để truyền dữ liệu vào component
Trên đây là những tính năng cơ bản của Vue.js. Trong các phần tiếp theo, chúng ta sẽ đi sâu vào một số tính năng nâng cao hơn. Hãy đọc tiếp để tìm hiểu thêm về Vue.js và áp dụng nó vào công việc của bạn!