Giới thiệu về Vue.js – Hello World!
Xin chào tất cả các bạn đã đến với một series mới của Yêu Lập Trình. Hy vọng series lập trình này sẽ giúp các bạn nắm vững kiến thức từ căn bản tới chuyên sâu, thành thạo Vuejs để sử dụng nó cho các dự án tiếp theo của mình.
Nội dung của bài
Vue.js là gì?
Vue.js hay Vue là một JavaScript Framework với hơn 183.000 sao trên github, dùng để xây dựng giao diện người dùng (user interfaces). Vue được thiết kế để xây dựng các ứng dụng theo hướng “Components based” nghĩa là phát triển dựa theo từng thành phần, với khả năng tái sử dụng cao, khả năng phát triển độc lập từng phần. Thư viện lõi của Vue đã tích hợp rất nhiều chức năng giúp dễ dàng tích hợp ngay vào hệ thống mà không cần suy nghĩ tới thư viện của bên thứ ba.
Vue.js là framework hàng đầu để xây dựng web đơn trang (Single Page Application) với hệ thống ecosystem đủ để bạn phát triển ứng dụng web từ đầu, bao gồm các tính năng: Single-page application routing, state management, server-side rendering.
Tuy ra đời sau so với Angular hay React, Vue.js có sự kết hợp tính ưu việt của cả hai thư viện trên, thêm vào đó cộng đồng sử dụng Vue.js ngày càng phổ biến.
Đặc điểm của Vue.js
Sau đây là những ưu điểm của việc sử dụng công nghệ Vue.js trong phát triển web:
– Sử dụng virtual DOM: Thay vì hiển thị lại toàn bộ trang web như trường hợp của DOM thông thường, Vue.js chỉ cập nhật những đối tượng đã thay đổi, tiết kiệm thời gian và tài nguyên mà các thao tác DOM khác.
– Phát triển giao diện dựa theo các components: Số lượng thư viện component đáng kể của Vue.js tạo điều kiện cho tái sử dụng lại code, cải thiện năng suất của lập trình viên và tăng tốc quá trình phát triển website.
– Kích thước nhỏ gọn: Tỷ lệ thành công của JavaScript framework sẽ phụ thuộc vào kích thước của nó. Kích thước càng nhỏ thì công năng sử dụng càng nhiều. Kích thước của Vue.js là 18–21KB, người dùng sẽ không mất thời gian để tải xuống và sử dụng. Thay vào đó, Vue.js đánh bại tất cả các khung công tác cồng kềnh như React.js, Angular.js và Ember.js.
Ngoài ra Vue.js dễ tìm hiểu, dễ tiếp cận nhờ nguồn tài liệu phong phú.
Cần chuẩn bị gì trước khi học Vue.js?
Là một thư viện Frontend framework, vì thế để có thể học và sử dụng Vue.js tất nhiên yêu cầu bạn phải có kiến thức cơ bản về :
- HTML
- CSS
- Javascript
Nếu bạn đã có đủ những kiến thức căn bản đó, thì chúng ta bắt đầu thôi nào!
Chương trình đầu tiên Hello world!
<!DOCTYPE html>
<html>
<head>
<title>Hello world!</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>Chạy thử đoạn mã trên để xem kết quả! Trông rất đơn giản đúng không nào!
Mình sẽ giải thích cụ thể các thành phần có trong Vue.js trong các bài viết tiếp theo. Hi vọng bài viết này sẽ mang lại cho bạn cái nhìn ban đầu và niềm vui khi tiếp cận với Vue.js.