Vue.js
![]() | |
Thiết kế bởi | Evan You |
---|---|
Phát hành lần đầu | tháng 2 năm 2014; 10 năm trước (2014-02)[1] |
Phiên bản ổn định | |
Kho mã nguồn |
|
Viết bằng | JavaScript |
Nền tảng | Cross-platform |
Kích thước | 76 KB production 240 KB development |
Thể loại | JavaScript library |
Giấy phép | MIT License[3] |
Website | vuejs |
Vue.js, gọi tắt là Vue (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 (user interfaces - UI). Khác với các framework nguyên khối, Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo các bước. Khi phát triển lớp giao diện, người dùng chỉ cần dùng thư viện lõi (core library) 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 có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng đơn trang (SPA - Single Page Applications) với độ phức tạp cao.
Lịch sử
Vue được tạo bởi Evan You sau khi làm việc ở Google, khi đó Evan đang dùng AngularJS cho một số dự án, và Evan nói rằng: "Tôi tưởng tượng, điều gì sẽ xảy ra nếu tôi trích một phần mà tôi thực sự thích về Angular và xây dựng một cái gì đó nhẹ nhàng mà không cần thêm các khái niệm bổ sung?".Vue ban đầu được phát hành lần đầu vào tháng 2 năm 2014. Dự án này đã được đăng lên HackerNew, Echo Js trong ngày đầu ra mắt.
Hiện tại, số lượng "thích" (star) trên Github cho dự án của Vue đang ngày càng tăng nhanh. Vuejs là một trong những project phổ biến nhất trên Github và thứ 2 trong số các JavaScript Framework (chỉ sau React), Vue đã vượt qua các thư viện / framework nổi tiếng khác như Angular 1.x, JQuery, Backbonejs,...
Khái niệm cơ bản
Đối tượng Vue
Một ứng dụng Vue luôn được bắt đầu bằng cách khởi tạo một đối tượng Vue (Vue instance):
new Vue({ // Các property })
Một ứng dụng Vue bao gồm một đối tượng Vue gốc. Ứng dụng này cũng thường được sắp xếp thành một cây gồm các component lồng nhau và tái sử dụng được. Ví dụ, cây component của một ứng dụng todo có thể trông như thế này:
Root Instance |- TodoList |- TodoItem |- DeleteTodoButton |- EditTodoButton |- TodoListFooter |- ClearTodosButton |- TodoListStatistics
Dữ liệu và phương thức
Khi một đối tượng Vue được khởi tạo, tất cả các thuộc tính trong object data
sẽ được thêm vào hệ thống phản ứng (reactivity system) của Vue. Điều này có nghĩa là view sẽ phản ứng khi giá trị của các thuộc tính này thay đổi, và tự cập nhật tương ứng với các giá trị mới.
// Chúng ta khởi tạo một object data var data = { a: 1 } // Khởi tạo một đối tượng Vue và truyền object data vào property data của đối // tượng Vue var vm = new Vue({ data: data }) // vm.a và data.a cùng trỏ đến một đối tượng! vm.a === data.a // => true // Thay đổi thuộc tính của vm cũng sẽ ảnh hưởng đến dữ liệu ban đầu vm.a = 2 data.a // => 2 // ... và ngược lại data.a = 3 vm.a // => 3
Vòng đời của đối tượng
Khi được khởi tạo, một đối tượng Vue sẽ đi qua nhiều bước khác nhau - cài đặt quan sát dữ liệu (data observation), biên dịch template, gắn kết vào DOM, cập nhật DOM khi dữ liệu thay đổi v.v. Trong suốt tiến trình này, nó cũng sẽ thực thi một số hàm gọi là lifecycle hook, giúp người dùng thêm code của mình vào các giai đoạn (stage) cụ thể trong vòng đời của đối tượng.
Ví dụ, hook created
có thể được dùng để thực thi code sau khi một đối tượng được khởi tạo:
new Vue({ data: { a: 1 }, created: function () { // `this` trỏ đến đối tượng Vue hiện hành console.log('giá trị của a là ' + this.a) } }) // => "giá trị của a là 1"
Các hook khác như mounted
, updated
, và destroyed
cũng được gọi vào các giai đoạn khác nhau trong vòng đời của đối tượng. Tất cả các hook này đều được thực thi với ngữ cảnh this
trỏ đến đối tượng Vue hiện hành.
Tích hợp
Có khá nhiều thư viện thứ 3 giúp mở rộng Vue.js vượt ra khỏi ý nghĩa ban đầu của nó:
Di động
- NativeScript
- Weex
- Quasar
UI Toolkits
- Vuetify
- Kendo UI
- Vue Material
- Element
- Bootstrap-Vue
- Vuecidity
- Bootstrap Mini
Các thư viện hỗ trợ
Tìm hiểu thêm
Tham khảo
- ^ “First Week of Launching Vue.js”. Evan You.
- ^ “Vue.js Releases”. GitHub.
- ^ “vue/LICENSE”. GitHub. Truy cập ngày 17 tháng 4 năm 2017.
- ^ “vue-router”. router.vuejs.org (bằng tiếng Anh). Bản gốc lưu trữ ngày 5 tháng 3 năm 2017. Truy cập ngày 11 tháng 3 năm 2017.
- ^ “vuex”. vuex.vuejs.org (bằng tiếng Anh). Truy cập ngày 11 tháng 3 năm 2017.
- ^ “vue-loader”. vue-loader.vuejs.org (bằng tiếng Anh). Bản gốc lưu trữ ngày 6 tháng 3 năm 2017. Truy cập ngày 11 tháng 3 năm 2017.
- ^ “vueify”. GitHub (bằng tiếng Anh). Truy cập ngày 11 tháng 3 năm 2017.
- ^ “vue-cli”. GitHub (bằng tiếng Anh). Truy cập ngày 11 tháng 3 năm 2017.