Coding đơn giản và linh hoạt hơn với Vue.js

1. Giới thiệu qua về Vue.js

Nhằm phục vụ cho nhu cầu bấm kéo thả của người dùng (ngắn gọn là tương tác (facepalm2)) mà rất nhiều thư viện interactive javascript sinh ra.
Đại loại như AngularJS, KnockoutJS, ReactJS chẳng hạn.
Ở các thư viện này chúng ta chia ra 2 trường phái, thao tác trên Dom như:

  • Actual DOM
  • Virtual DOM

hoặc là mấy kiểu design pattern

  • MVC
  • MVVM
  • MV
  • ….

Trong bài viết này tui xin giới thiệu tới các bạn 1 thư viện khá mới phục vụ nhu cầu trên, nó tên là Vue.js . Các bạn có thể xem thêm tại địa chỉ: http://vuejs.org

  • Vue.js sử dụng Actual DOM
  • Vue.js hướng tới tầng View-Model trên MVVM pattern
  • Vue.js cho chúng ta two way data bindings, cái mà React gọi là anti-pattern =))
  • Vue.js’ API thì bị ảnh hưởng kha khá bởi AngularJs (nên ai đã sử dụng qua AngularJS thì chỉ cần 4h là có thể master được Vue.js)

2 Demo được code trong bài viết, hy vọng sẽ giúp ích cho người mới bắt đầu:

  • Ví dụ đơn giản, hiển thị danh sách động:
    Plunker - A simple guide to getting started with Vue.js.png
  • Sử dụng Component, tính số fibonacci, và giai thừa:
    Plunker - Component system of Vue.js.png

2. Cấu trúc của Vue.js

2.1. ViewModel

  • Hiểu đơn giản là một đối tượng đồng bộ giữa View và Model (yaoming)
  • Cách khởi tạo rất đơn giản

2.2. View

  • Actual DOM được quản lý bởi Vue.js khởi (3.1)
  • Vue.js sủ dụng các template trên DOM. Mỗi instance Vue tự động liên kết tới các DOM element tương ứng.

2.3. Model

  • Không khác gì Javascript objects hay data objects
  • Vue.js sủ dụng các template trên DOM. Mỗi instance Vue tự động liên kết tới các DOM element tương ứng.

  • Vue instances quản lý tất cả các thuộc tính của data objects liên kết với nó. Do đó khi một object { x: 123 } liên kết bị thay đổi giá trị, thì cả vm.$data.x và vm.x đều có chung 1 giá trị trả về, mặt khác do khả năng binding dữ liệu 2 chiều nên khi ta set vm.x = 2 thì vm.$data.x cũng bằng 2.

2.4. Directives

  • Dấu hiệu giúp Vue.js nhận biết các DOM element cần thực hiện một công việc nào đó (Ví dụ như show, hide element, …).

  • Câu lệnh trên ra lệnh cho Vue.js gọi tới my-directive để thao tác với các giá trị someValue trên các div element tồn tại directive này.

2.5. Mustache Bindings

  • Với Vue.js, bạn có thể bindings cả dữ liệu text lẫn các attributes.

  • Ở ví dụ trên tui tiến hành bind giá trị các scope id và name vào DOM tương ứng.

2.6. Filters

  • Những chức năng được sử dụng để xử lý các giá trị raw trước khi cập nhật các View.
  • Có rất nhiều Filter hữu ích. Ví dụ như:
  • capitalize

  • uppercase

  • lowercase

  • currency

  • Ví dụ sử dụng: viết hoa các kí tự trong thẻ tiêu đề h1.

2.7. Components

  • Trong Vue.js, mỗi component là một instance Vue. Các thành phần tạo thành một hệ thống phân cấp cây các ứng dụng. Chúng ta có thể tạo các component khởi tạo bởi Vue.extend, Hoặc cách đơn giản hơn là đăng kí nó qua lệnh Vue.component(id, constructor).
  • Ví dụ:

3. Từ lý thuyết tới thực hành

3.1. Hiển thị danh sách động

Demo: http://embed.plnkr.co/GcMbJJ/preview

3.2. Sử dụng component

Demo: http://embed.plnkr.co/0vMQ4T/preview

3.3. Source Code

Các bạn click vào label Edit ở các link preview sẽ thấy source code tương ứng.

Techtalk Via Viblo