VueJS là gì?
Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) 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.
Tính cấp tiến của VueJS
Vue được công nhận là tiến bộ vì bạn hoàn toàn có thể thu nhỏ và mở rộng một ứng dụng được viết bởi Vue một cách dễ dàng. Đối với các ứng dụng đơn giản, bạn có thể sử dụng Vue giống như sử dụng jQuery - chỉ cần thả một thẻ script:
Nhưng khi bạn bắt đầu phát triển một ứng dụng lớn hơn, Vue cũng cung cấp cho bạn các công cụ rất đắc lực để giúp bạn làm việc hiệu quả hơn. Thông thường, Vue được coi như là một framework có thể áp dụng được rất nhiều hoàn cảnh và các công cụ này vẫn đang được phát triển từng ngày.
HTML:
<script src = "https://cdn.jsdelivr.net/npm/vue"> </script>Nhưng khi bạn bắt đầu phát triển một ứng dụng lớn hơn, Vue cũng cung cấp cho bạn các công cụ rất đắc lực để giúp bạn làm việc hiệu quả hơn. Thông thường, Vue được coi như là một framework có thể áp dụng được rất nhiều hoàn cảnh và các công cụ này vẫn đang được phát triển từng ngày.
Cách tiếp cận của VueJS
VueJS là một trong những framework có cách tiếp dễ dàng nhất, đối với mình là vậy, vì bạn chỉ cần kiến thức HTML, CSS, JS cơ bản nhất là đã có thể học VueJS và tạo ra những ứng dụng web phức tạp hơn.
Tính linh hoạt của VueJS
VueJS là một framework rất linh hoạt chính vì các công cụ mà nó cung cấp:
- vue-cli
<https://cli.vuejs.org/>(giao diện dòng lệnh của VueJS) cho phép tạo mẫu và thiết lập nhanh chóng Vue-webpack các ứng dụng. - vue-router
<https://router.vuejs.org/>giúp chúng ta định tuyến router các ứng dụng. - vuex
<https://vuex.vuejs.org/guide/>, giúp chúng ta quản lý dữ liệu trong ứng dụng. - vue-test-utils
<https://vue-test-utils.vuejs.org/>, các tiện ích thử nghiệm.
Tính hiệu quả của VueJS
VueJS là một trong những framework được đánh giá mang lại hiệu quả cao vì thời gian xử lý và hiển thị dữ liệu trên DOM rất nhanh và hiệu suất sử dụng rất cao.Sử dụng VueJS
Trước hết chúng ta sẽ có một file HTML có dạng:
HTML:
<html>
<body>
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<script src="https://unpkg.com/vue"></script> // load thư viện VueJS qua CDN
<script src="./main.js"></script> // file js mà ta sẽ tự viết
</body>
</html>Bây giờ ở trong file main.js của ta sẽ có dạng:
JavaScript:
new Vue({
el: '#app',
});Ta sử dụng thuộc tính
el để khai báo mouting point cho ứng dụng của chúng ta.Sau khi đã có mouting point, ta sẽ khai báo dữ liệu cho ứng dụng Vuejs bằng cách sử dụng thuộc tính data:
JavaScript:
new Vue({
el: '#app',
data: {
greeting: 'Hello World from TuiHocWeb!',
},
});Thay file index.html thành:
HTML:
<html>
<body>
<h1>30 Days VueJS with TuiHocWeb.Com</h1>
<div id="app">
<h2>{{ greeting }}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Ta sẽ nhận được kết quả:
