Giới thiệu về framework Vue.js

Vue.js là một framework dùng để xây dựng giao diện người dùng, không giống như các framework khác, Vue được thiết kế từ cơ bản lên. Cốt lõi của thư viện chỉ tập trung vào layer view, và dễ dàng tương tác với thư viện hoặc một dự án khác đã có. Nói một cách khác, vue.js là framework hoàn hảo để xây dựng các ứng dụng Single-page Applications.

Mở đầu

Các dễ nhất để sử dụng VueJS là dùng JSFiddle Hello World example. Hoặc ta có thể tạo ra một file index.html và chèn đoạn code sau vào:

<script src="https://unpkg.com/vue"></script>

Khai báo render

Ở trung tâm của vue.js là một hệ thống cho phép chúng ta khai báo render data đến DOM dùng cú pháp như sau:

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

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

Ở ví dụ trên, chúng ta đã tạo ra một app vue.js rất đơn giản, dùng để xuất dòng chữ "Hello Vue!" lên màn hình. Ví dụ trông có vẻ đơn giản nhưng Vue đã làm rất nhiều công việc ở dưới nên để xử lý. Dữ liệu và DOM bây giờ đã được liên kết, mọi thứ bây giờ là reactive, để kiểm tra, chúng ta mở Console của web browser và set app.message bằng một giá trị khác, chúng ta có thể nhìn thấy giá trị trên thay đổi tức thì.

Trong đoạn text ở trên, chúng ta có thêm ràng buộc cho thuộc tính của element như sau:

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

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

ở đây, ta có thể thấy, thuộc tính v-bind bạn đang xem được gọi trực tiếp. Directives là được đặt trước với tiền tố v- để chỉ rằng chúng là thuộc tính đặc biệt được cung cấp bởi vue.