Giới thiệu VueJs
Giới thiệu vuejs
1. Vue.js là gì ?
Theo trang chủ của Vue.js, Vue.js là một framework linh động dùng để xây dựng giao diện người dùng (user interfaces). Khác với các framework nguyên khối (monolithic), 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 từng bước. Khi phát triển lớp giao diện (view layer), 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 một trang (SPA - Single-Page Applications) với độ phức tạp cao hơn nhiều.
2. Học Vuejs cần chuẩn bị gì?
Để học bất kì một jsframework nào thì cũng cần có những kiến thức nền tảng với vue.js cũng vậy. Bắt đầu với vue.js bạn cần chuẩn bị những kiến thức sau đây:
- Javascript: vì VueJs được xây dựng và phát triển dựa trên javascript nên cần tìm hiểu js cơ bản trước khi học vuejs
- Webbase: Chỉ cần biết cơ bản HTML CSS, mục đích là để dựng giao diện chức năng thôi.
3. Mô hình MVVM trong vuejs
MVVM là viết tắt của Model-View-View Model
- Trong MVVM, Model tương tự như trong mô hình MVC chỉ đơn giản là đại diện cho lớp truy cập dữ liệu của ứng dụng.
- View: Tương tự trong mô hình MVC, View là phần giao diện của ứng dụng để hiển thị dữ liệu và nhận tương tác của người dùng. Một điểm khác biệt so với các ứng dụng truyền thống là View trong mô hình này tích cực hơn. Nó có khả năng thực hiện các hành vi và phản hồi lại người dùng thông qua tính năng binding, command.
- ViewModel: Lớp trung gian giữa View và Model, Vuejs tập trung vào lớp ViewModel của mẫu MVVM, nó kết nối View và Model thông qua các ràng buộc dữ liệu hai chiều. Nó chứa các mã lệnh cần thiết để thực hiện data binding, command.
4. Ưu và nhược điểm của VueJs
VueJs được các nhà phát triển sử dụng phổ biến bởi những ưu điểm sau:
- Trang web nhẹ, tốc độ xử lý cực nhanh bởi được Render, xử lý bằng Javascript.
- Đơn giản, dễ học và dễ áp dụng trong các dự án, đặc biệt là với newbie
- Có khả năng xử lý các render thuộc server thành file Js tĩnh
- Kho thư viện lớn, hỗ trợ xây dựng giao diện một cách nhanh chóng, hoàn hảo
- Dung lượng tải thấp, giúp tốc độ tải trang nhanh hơn
- Tích hợp các tính năng ưu việt của nhiều framework đối thủ, giúp tối ưu hóa hiệu suất làm việc.
Tuy nhiên, VueJS lại có nhược điểm liên quan đến SEO. Khi tiến hành công việc SEO trên các website, ứng dụng được tạo lập bởi framework này sẽ khó khăn hơn.
5. Cài đặt VueJS
Nếu bạn đã biết về jquery cũng như cách cài đặt của nó thì đối với VueJs cũng vậy, sau đây là 3 cách cài đặt vuejs.
- Cách 1: Sử dụng CDN
Đây là cách đơn giản và nhanh nhất
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
- Cách 2: download về máy
Nếu bạn không thích dùng CDN vì sẽ làm chậm trang web hoăc phải kết nối internet thì mới có thể dùng được thì download về là lựa chọn tốt nhất.
<script src="your-app/your-folder/vue.js"></script>
- Cách 3: Sử dụng NPM
Đây là cách được dùng trong những dự án.
Bạn cần khai báo vuejs trong package.json, sau đó npm sẽ tự động tải về mà bạn không cần phải làm gì tiếp.
Câu lệnh cài đặt vue bằng NPM:
npm install vue
Tham khảo cách cài đặt tại: https://vuejs.org/v2/guide/installation.html