Học làm web (v1) - VueJS: mở đầu

1         Tổng quan


1.1       Một số tài liệu đã tham khảo





[4] Olga Filipova, Learning Vuejs 2, Packt, 2016


[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: Tổng hợp các bài viết về  Học làm web
Xem thêm: Học làm web (v2) - VueJS: