Trước khi bắt tay vào cài đặt Vuejs chúng ta cần nắm rõ một số khái niệm hay kiến thức cơ bản nhất của Vue. Đây là kiến thức khá cơ bản nhưng lại xuyên suốt bài học Vuejs vì vậy các bạn không nên chủ quan mà bỏ qua nó. Không lòng vòng nữa chúng ta cùng tìm hiểu nhé
Các khái niệm cơ bản trong Vue
ViewModel (MVVM patterns).
Thiết kế của Vue chịu ảnh hưởng từ pattern MVVM mặc dù không liên kết chặt chẽ . Vì vậy trong tài liệu hướng dẫn này, chúng mình quy ước sử dụng tên biến vm (viết tắt của ViewModel) cho một đối tượng Vue.
Hầu hết, một Vue instance đều có thể sẽ được tạo ra bằng việc phát hành new Vue với các cách tùy chọn có thể chứa những yếu tố sau: template,các callbacks, data, methods và event. Nói một cách đơn giản hơn là bạn có thể xem Vue như một trung gian nằm giữa data và view.
Vue Instance
Trước khi xây dựng một ứng dụng VueJs đầu tiên thì mỗi ứng dụng Vue sở hữu phiên bản gốc được gọi là Vue và Vue Instance (dịch là đối tượng Vue) hoạt động tuân theo Model-view.
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) sử dụng hàm Vue:
var vm = new Vue({
// các tùy chọn
})
Khi chúng ta khởi tạo một đối tượng Vue, bạn sẽ truyền vào một object options với các tùy chọn. Phần lớn tài liệu này sẽ mô tả cách sử dụng các tùy chọn đó để tạo ra behavior (hành vi) mong muốn. Bạn cũng có thể tham khảo danh sách đầy đủ các tùy chọn ở trang API.
Một ứng dụng Vue bao gồm một đối tượng Vue gốc (root Vue instance) được tạo với lệnh new Vue. Ứ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 ( phần tử cấu thành) 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
Hệ thống component sẽ được nói đến ở phần sau trong bài này chúng ta chỉ cần biết rằng component Vue cũng là một đối tượng Vue và do đó cũng nhận cùng một object options (trừ một số tùy chọn chỉ dành riêng cho root).
Data binding trong VueJs
Data binding có thể hiểu là liên kết dữ liệu hoặc ràng buộc dữ liệu. Trong Vuejs thông thường sẽ có hai cách bind data để view đó là one-way data binding và two-way data binding. 2 cách này sẽ được mô tả rõ hơn ngay sau đây:
- One-way data binding: Nó liên kết trực tiếp với data trực tiếp từ code javascript của với DOM. Hầu hết những props thuộc tính bên trong sẽ không có khả năng làm thay đổi được cấp cha.
- Two-way data binding: Thông thường, bind data (liên kết dữ liệu) từ code Javascript của bạn để có thể view và từ đó view lại code để có thể thay đổi data ở một bên dẫn làm thay đổi global. For two-way data binding, Vue cung cấp một v-model có khả năng đồng bộ hóa đầu vào của người dùng và state của modal, tương tác qua lại giữa view và modal. Như vậy state (trạng thái) sẽ được cập nhật bất cứ khi nào template thay đổi và ngược lại
Render:
Render là cách để hiển thị dữ liệu ra màn hình. Thông thường Vuejs sử dụng v-if và v-show để hiển thị dữ liệu. Bên cạnh đó Vue cũng cung cấp cho chúng ta v-else-if, v-else để hiển thị dữ liệu theo điều kiện cho trước.
<div v-if="show === 0">Div này hiển thị</div> <div v-else-if="show === 1">Div 1 này hiển thị</div> <div v-else="show === 2">Div 2 này hiển thị</div>
Directives (Thuộc tính đặc biệt)
Directive là các thuộc tính đặc biệt với prefix (tiếp đầu ngữ) v-. Giá trị của thuộc tính directive phải là một biểu thức JavaScript đơn lẻ (ngoại trừ v-for ). Directives là những expressions binding với v-attribute. Bên cạnh đó thì các directive thường được cung cấp dưới dạng mặc định (v-model và v-show). Bên cạnh đó, Vue cũng cho phép bạn có thể đăng ký các directive tùy biến dành riêng cho mình.
Lưu ý với phiên bản Vue 2.0 thì cách tốt nhất để có thể sử dụng lại code và trừu tượng nó thì nên dùng component. Tuy nhiên, bạn cần phải có một số truy xuất cấp thấp đến từ những phần tử của trang web. Với những trường hợp này thì việc directive tùy biến sẽ trở nên hữu ích hơn rất nhiều.
Hiện tại Vue.js chắc chắn đã không còn là người lạ ơi đối với nhiều lập trình viên. Vuejs được xem là một Progressive framework sở hữu kích thước nhỏ nhẹ, đồng thời nó còn sở hữu cú pháp template rõ ràng cũng như đơn giản dễ tiếp cận với đa số. Hi vọng với những khái niệm cơ bản trong Vuejs trên có thể giúp các bạn tiệp cận dễ dàng hơn với Vuejs. Chúc các bạn thành công!
