Vue.js là gì? Viết chương trình đầu tiên bằng Vue.js?
Bài đăng này đã không được cập nhật trong 5 năm
Khoảng 2 năm trước, thật khó để tưởng tượng rằng Vue.js sẽ có thể sánh ngang với React lúc đó đang là một thế lực cực lớn. Giống như khoảng thời ấy, Trung Quốc đâu dám nghĩ có thể ngang hàng với Mỹ như lúc này ^^
Vậy tại sao Vue.js lại có thể phát triển và là một trong các framework hàng đầu như bây giờ. Thậm chí khi so sánh với React, giống như kẻ tám lạng, người nửa cân =)))
Yếu tố đầu tiên là Vue.js được nhận xét là VERY EASY-TO-LEARN trong việc tạo ra các front-ends linh hoạt.
Thứ hai, Vue.js hỗ trợ cho việc render, xử lý bất đồng bộ trong DOM, liên kết dữ liệu 2 chiều, tuân thủ nghiêm ngặt các thành phần của web và tích hợp đơn giản với các thành phần HTML.
Ngoài ra, Vue.js được xây dựng bởi một đội ngũ công đồng gồm các thành viên đến từ nhiều nước trên thế giới.
Lan man thế thôi, giờ vào phần chính nhé mọi người 
Mục lục
- Vue.js là gì?
- Điều kiện để học Vue.js?
- Viết chương trình Vue.js đầu tiên?
Vue.js là gì?
Theo trang chủ của Vue.js
Vue (phát âm là /vjuː/, giống view) là một framework linh động dùng để xây dựng giao diện người dùng. 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...Có thể đáp ứng được nhu cầu về SPA (Single-Page Applications)..vv..vv
Mình không muốn lấy tất cả những gì trên trang chủ của Vue.js ghi ra. Vì nó ghi như vậy cũng khá khó hiểu. Các bạn cứ tạm hiểu đây là một framework JS về Front-End nhé
Điều kiện để học Vue.js
Vì Vue.js phát triển dựa trên ES6 (ECMAScript2015) nên mình nghĩ mọi người nên biết và tìm hiểu về cái này trước khi học Vue.js. Để tìm hiểu thêm về ES6, bạn có thể tham thảo tại Tìm hiểu về ES6 Hoặc ít nhất, điều kiện cần là phải biết về html, css và quan trọng nhất là javascript.
Viết chương trình Vue.js đầu tiên
Đầu tiên các bạn tạo 1 file với tên index.html và 1 file tên app.js nhé. Lưu ý là 2 file này có cùng cấp trong thư mục. Bạn vào file index.html, nhúng thư viện của Vue.js và file app.js như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Getting Started with Vuejs</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="app.js"></script>
</html>
File app.js bạn tạo như sau:
var app = new Vue({
el: '#app',
data: {
message : 'Hello, I am Vu!'
}
})
Kết quả:
Hello, I am Vu!
Hoặc xem kết quả tại đây : Getting Started with Vue.js
Cùng phân tích một chút nhé Đầu tiên, các bạn hãy chú ý vào file app.js:
var app = new Vue({
//
})
đoạn này có nghĩa là ta đã khởi tạo một đối tượng Vue, còn gọi là Vue instance. Tiếp theo,
el : '#app',
có thể hiểu là ta sẽ khoanh vùng làm việc cho nó. Quay sang file index.html sẽ thấy có một thẻ <div id="app">. Đây là nơi Vue instance hoạt động.
Tiếp theo,
data : {
message : 'Hello World!'
}
Các bạn cứ hiểu rằng khi khởi tạo một đối tượng Vue, tất cả các thuộc tính được tìm thấy trong object data sẽ được thêm vào reactivity system (hiểu nôm na là “hệ thống phản ứng”) của Vue. Điều này có nghĩa là view sẽ “react” (phản ứng) khi giá trị của các thuộc tính này thay đổi, và tự cập nhật tương ứng với các giá trị mới. Ở đây thuộc tính mình đang dùng đó là message.
Mình sẽ làm một ví dụ chứng minh cho điều này. Giờ mình sẽ thay đổi nội dung của message:
Trong file app.js :
var vm = new Vue({
el: '#app',
data: {
message : 'Hello World!'
}
}) ;
vm.message = 'Xin chao!'
Chạy lại và kết quả là :
Xin chao!
Kết Luận
Qua ví dụ trên, hi vọng các bạn có thể phần nào làm quen với Vue.js và quan trọng là thích Vue.js hơn. Bài sau mình sẽ đi vào các phần khác chi tiết hơn và các ví dụ đi kèm.Hi vọng bài viết có ích cho các bạn. Tạm biệt!
All rights reserved
