Vue.js

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.

Vue.js

Thiết kế bởi	Evan You
Phát hành lần đầu	tháng 2 năm 2014 (2014-02)
Phiên bản ổn định	2.5.2 / 14 tháng 10 năm 2017 (2017-10-14)
Kho mã nguồn	github.com/vuejs/core
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
Website	vuejs.org

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ợ

• vue-router
• vuex
• vue-loader
• vueify 
• vue-cli