Vue.js là gì?

Progressive Framework

Khi nói về các Javascript framework, chúng ta thường cho rằng các framework cần cung cấp mọi thứ ta cần để xây dựng một SPA hoàn thiện (gọi là Full framework). Tuy nhiên, một framework được thiết kế theo cách đó thường tự mua vào mình sự nặng nề, và bất kỳ sự hiểu biết hay kinh nghiệm cụ thể về các framework đó không mang lại hữu ích khi ta xây dựng bên ngoài kịch bản SPA. Các framework này cũng cung cấp quá mức cần thiết trong các trường hợp sự dụng tương đối đơn giản của chúng ta. Lan man một hồi vậy thì Progressive Framework là cái méo gì nhỉ?

Progressive framework là khái niệm khá mới, có thể hiểu thay vì như Full-featured framework hay Monolithic framework cung cấp tất cả mọi thứ cần có để xây dựng app trong một framework duy nhất, thì progresive framework lại chia thành các thành phần nhỏ khác nhau, và ta có thể dần dần lựa chọn các thành phần tham gia vào sao cho phù hợp. Vue.js là một trong số các progressive framework. Phần lõi của Vue.js tập chung chủ yếu vào phần View. Chúng ta có thể sử dụng mỗi lõi của Vue để tạo view hoặc CÓ THỂ cài THÊM các thành phần như vuex để quản lý state trong app hay vue-router cho SPA routing... hoặc là không dùng thêm.

Phần lõi có thể hoạt động tốt một mình và có thể chạy mượt mà khi ghép thêm các thành khác lại với nhau. Đó cũng chính là một trong những đặc điểm của progressive framework. Bởi phạm vi bài viết hôm nay tập trung vào Vue nên các khái niệm như Progressive framework, Full-featured framework hay Monolithic framework thì có lẽ tôi phải hẹn riêng một bài khác để nói riêng về chúng. Bạn cũng có thể tham khảo thêm về Progressive framework tại đây.

Rendering

Lõi của Vue.js là một hệ thống cho phép chúng ta render dữ liệu đến DOM bằng cú pháp template rõ ràng, đơn giản:

<div id="app">
    {{ message }}
</div>

// Javascript:
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello world!'
    }
});

Nhìn qua ta thấy đơn thuần chỉ là hiển thị một string "Hello world!" kinh điển nhưng đằng sau những câu lệnh đơn giản trên Vue còn làm nhiều hơn thế! Dữ liệu và DOM đã được liên kết với nhau. Không tin bạn hãy mở console lên và sửa app.message = "Hello http://viblo.asia :D". Bạn sẽ thấy chuỗi được render cũng sẽ bị thay đổi theo thành Hello http://viblo.asia :D". Vue.js cũng sử dụng Virtual DOM, thông qua các event như click, hover... Virtual DOM sẽ tính toán các phần bị thay đổi rồi chỉ render lại các phần bị thay đổi đó. mà thôi. Ngoài việc chèn text bằng cú pháp như trên, chúng ta còn có thể bind qua attribute của element như ví dụ dưới đây:

<div id="app-2">
  <span v-bind:title="message">
    Loading >>>
  </span>
</div>

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date()
    }
});

Đến đây chúng ta gặp một thứ rất mới mẻ, v-bind attribute (thuộc tính). Thuộc tính này được gọi là directive, các directive trong Vue đều có tiền tố là v-. Với v-bind, trong Vue còn có shortcut thay thế đó là :. Tức là thay vì dùng v-bind:title ta có thể dùng :title thì cũng sẽ cho ra kết quả tương tự.

Rẽ nhánh và vòng lặp

Rẽ nhánh: v-if, v-else, v-else-if

Một cách đơn giản để ẩn hiện một element thông qua việc rẽ nhánh: if-else trong vue, ví dụ:

<div id="app-3">
    <p v-if="seen">Now you see me</p>
    <p v-else>Where are you?</p>
</div>

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
});

Ta thấy chuỗi "Where are you" sẽ hiện ra. Khi thay đổi giá trị của app.seen = false hoặc là app.seen = true qua console thì chúng ta sẽ thấy chuỗi "Now you see me" sẽ ẩn hoặc là hiện thông qua directive v-if và v-else. Directive v-if sẽ hiển thị element nếu thõa màn điều kiện seen hoặc nếu không sẽ hiển thị element có v-else. Và v-else-if tương đương mệnh đề "Nếu không thì". Directive này không có shorcut như v-bind được đề cập ở trên.

Vòng lặp - v-for

Ta có thể duyệt một mảng todos thông qua directive v-for, tại mỗi lần duyệt, ta lấy được một phần tử todo trong mảng:

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

Xử lý input của người dùng

Để người dùng tương tác với app, chúng ta sử dụng directive v-on để bắt các event listener vào DOM, các listener này sẽ gọi các method trong đối tượng Vue của chúng ta.

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(').reverse().join(')
    }
  }
})

Kết quả của ví dụ trên là ta có được một button, khi click vào button chuỗi Hello Vue.js sẽ bị đảo ngược bởi thông qua v-on, ứng dụng đã gọi method reverseMessage trong methods. Hàm này thực hiện xử lý dữ liệu message và lưu lại. Khi biến message bị thay đổi, DOM tự thay đổi lại hiển thị message bằng giá trị mới. Tưởng tự, ta có thể đặt thêm nhiều method xử lý dữ liệu khác vào trong methods khi khởi tạo instance của Vue.

Mở rộng và tái xử lý các component

Một phần cuối cùng và khá quan trọng trong bài viết này, đó chính là hệ thống components trong Vue. Bởi vì nó là một phép trừu tượng cho phép chúng ta xây dựng các ứng dụng lớn bằng cách kế hợp các component nhỏ, khép kín và khả năng sử dụng lại cao. Chúng ta viết một component và sử dụng lại chúng trong template của một component khác. Để đăng ký mới một component:

// Define a new component called todo-item:
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
});
// Or
Vue.component('todo-item', require("./path/to/components/TodoItem.vue"));

Tổng kết

Vue.js là một công nghệ mới, một Progressive framework nhỏ nhẹ, 18kb min+gzip, kết hợp với việc sử dụng Virtual DOM chỉ render lại các thành phần mà có sự thay đổi giúp tăng hiệu suất của Vue. Thêm vào là cú pháp template rõ ràng, đơn giản, dễ tiếp cận. Một hệ thống component cho phép tái sử dụng ở các template khác nhau. Tất nhiên, framework nào cũng có nhược điểm của nó nhưng cá nhân mình thấy với các điểm trên thì Vue.js là một sự lựa chọn không tồi với một công nghệ mới nên được áp dụng.