1
Tổng quan
1.1
Một số tài liệu đã tham khảo
[2] Book, https://medium.freecodecamp.org/the-vue-handbook-a-thorough-introduction-to-vue-js-1e86835d8446
[4] Olga Filipova, Learning
Vuejs 2, Packt, 2016
[5] Video, https://www.youtube.com/watch?v=4deVCNJq3qc
[6] Tài liệu tiếng Việt,
https://vi.vuejs.org/v2/guide/installation.html
1.2
VueJS là gì
Vue (phát âm giống với view) là framework viết bằng
JavaScript, là một progressive framework, được sử dụng chủ yếu để xây dựng giao
diện người dùng (View hay UI-User Interface).
Trước khi học VueJS cần có kiến thức căn bản về HTML, CSS và
JavaScript.
Framework là gì?
Framework là "bộ
khung", giúp việc lập trình ứng dụng được nhanh hơn. Framework thường bao
gồm các thư viện, trình biên dịch, API và mẫu thiết kế, được xây dựng sẵn; lập
trình viên sẽ tận dụng những thứ có sẵn này để làm ứng dụng.
Progressive framework là gì?
Khái niệm
progressive framework được đưa ra để phân biệt với khái niệm full-featured
framework (hoặc monolithic framework). Progressive nghĩa là tiệm tiến hay linh
động. Monolithic là nguyên khối.
Monolithic
framework là framework cung cấp tất cả mọi thứ để xây dựng một ứng dụng. Trong
khi progressive framework là framework được chia thành các thành phần nhỏ hơn,
lập trình viên sẽ sử dụng từng phần của framework tùy theo yêu cầu của ứng dụng,
nghĩa là phát triển ứng dụng theo từng bước. Cụ thể, khi phát triển lớp giao diện,
lập trình viên chỉ cần sử dụng thư viện lõi của VueJS; để phát triển ứng dụng
theo hướng SPA thì cần áp dụng thêm kĩ thuật khác như SFC (Single File
Components) và các thư viện hỗ trợ.
Một số thông tin khác
VueJS do Evan You tạo ra năm 2014.
Gồm nhiều phiên bản, ví dụ: 0.11, 0.12, 1.0, 2.x
Có kích thước rất nhỏ, khoảng 330KB
1.3
Cài đặt và chạy ứng dụng đầu tiên
Cài đặt
Vì VueJS được đóng gói như một thư viện, nên chỉ cần nhúng
VueJS vào trang web là có thể sử dụng được.
Có thể tải VueJS về máy hoặc sử dụng trực tiếp trên
Internet.
– Tải VueJS trên máy: theo đường dẫn https://vuejs.org/v2/guide/installation.html
để tải về máy, khi phát triển dự án hoặc khi học, nên chọn bản Development, vì
nó có các thông báo lỗi và cảnh báo giúp việc tìm/sửa lỗi dễ dàng hơn. Cũng có
thể xem và tải mã VueJS từ địa chỉ này https://vuejs.org/js/vue.js.
Tại tập tin HTML, ví dụ index.html, thêm dòng mã sau để nhúng VueJS vào trang
web,
<script src="đường dẫn thư mục/vue.js"></script>
– Sử dụng trực tiếp VueJS trên Internet:
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Chạy ứng dụng đầu
tiên
Tạo tập tin index.html với nội dung sau,
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title>VueJS</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script
src="D:/Liv/TuHoc/vuejs/code/vue.js"></script>
<!-- <script
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-->
<script>
var app = new Vue({
el: '#app',
data: {
message:
'Do you wanna build a Vue app'
}
})
</script>
</body>
</html>
Mở trình duyệt để xem kết quả, nếu không có lỗi, sẽ thấy xuất
hiện dòng chữ,
“Do you wanna build a
Vue app”
Vậy là đã viết được ứng dụng đơn giản đầu tiên có sử dụng
VueJS.
Hiểu về đoạn mã trên
như thế nào?
Đúng là để học và hiểu được VueJS cần có kiến thức căn bản về
HTML, CSS, JS, nhưng để hệ thống lại một số kiến thức liên quan nên ở đây sẽ nhắc
lại một số khái niệm giúp người học dễ theo dõi.
Đọc bài viết này để hiểu về trình duyệt, quá trình biên dịch
mã (HTML, CSS, JS) của trình duyệt:
http://legiacong.blogspot.com/2018/05/hoc-lam-web-23-html-can-ban-22.html
Một số nhận xét:
– Để học VueJS cần trình soạn mã đơn giản (ví dụ: Sublime
Text, Visual Studio Code, thậm chí Notepad)
– Trình biên dịch chính là trình duyệt (khuyến khích sử dụng
Chrome)
– Vì VueJS là một thư viện viết bằng JavaScript nên để học
VueJS cần học các kiến thức căn bản của JavaScript, kết hợp với các đặc tính
riêng do VueJS cung cấp
– Thay vì chỉ sử dụng thuần JS (JavaScript) để viết các xử
lý tại client-side, thì sử dụng thêm các chức năng do VueJS hỗ trợ, nhằm viết ứng
dụng cho nhanh, cho chuyên nghiệp
Để hiểu về đoạn mã trên, ngoài việc hiểu về quá trình biên dịch
HTML, CSS, và JS; cần tìm hiểu thêm về cơ chế làm việc của VueJS ở các phần sau.
-----------
Cập nhật [6/4/2019]
-----------
Xem thêm: Học làm web (v2) - VueJS: